Updated theme colors for accessibility, more options in popup, db auto refresh

Author: capfei

README.md

@@ -16,13 +16,16 @@ and [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/licensedb
 ## Using the extension
 
 To run the diff, select text on a web page and click on the extension icon. You will have the option
-to compare against licenses, exceptions or both. Once the comparisons have
-completed, it will return the top 20 results (this can be changed in the extension options). You can
-select each result from the dropdown to see the differences and copy the license identifier by clicking
+to compare against licenses, exceptions or both. You can also select which source you want results from (SPDX, ScanCode or both) and to include/exclude deprecated licenses and exceptions. Once the comparisons have
+completed, it will return the top 10 results (this can be changed in the extension options). You can
+select each result from the dropdown to see the differences, click the link to go to the license text source and copy the license identifier by clicking
 on the copy button.
 
-Licenses and exceptions that are marked as deprecated are currently excluded from comparison
-but I would like to add the ability to include/exclude as an option in the future.
+When using both sources, the results will be sorted by highest to lowest match score or you can select "Group by source"  in the "Results grouping" dropdown to group results by SPDX and ScanCode.
+
+This has only been tested on web pages and may not work correctly for documents being viewed in a browser.
+
+## Options
+
+In the extension options, you can set the maximum number of results to return, set the minimum match threshold, manually refresh the license database, reset the database for a complete rebuild and choose the theme (light or dark).
 
-This has only been tested to diff text on web pages and may not work correctly for documents being
-viewed in a browser.

manifest.json

@@ -1,13 +1,14 @@
 {
   "manifest_version": 3,
   "name": "LicenseDB License Diff",
-  "version": "0.0.6.1",
+  "version": "0.0.7.0",
   "description": "Compares and diffs selected text using AboutCode's ScanCode LicenseDB license list and SPDX License List.",
   "permissions": [
     "activeTab",
     "scripting",
     "tabs",
-    "storage"
+    "storage",
+    "alarms"
   ],
   "host_permissions": [
     "https://scancode-licensedb.aboutcode.org/*",

src/background/background.js

@@ -216,16 +216,16 @@
 }
 
 #license-diff-url a {
-  color: #439843;
+  color: #2d682d;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.2s ease;
   border-bottom: 1px dotted transparent;
 }
 
 #license-diff-url a:hover {
-  color: #2d682d;
-  border-bottom: 1px dotted #2d682d;
+  color: #1a3d1a;
+  border-bottom: 1px dotted #1a3d1a;
 }
 
 #license-diff-display {
@@ -252,6 +252,13 @@
   overflow-wrap: break-word;
 }
 
+#license-diff-display .ldiff-pending {
+  padding: 12px;
+  color: #6b7280;
+  font-style: italic;
+  text-align: center;
+}
+
 /* Custom scrollbar for the diff display */
 #license-diff-display::-webkit-scrollbar {
   width: 8px;
@@ -397,6 +404,20 @@
   border: 1px solid rgba(33, 150, 243, 0.35);
 }
 
+.deprecated-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #92400e;
+  border: 1px solid rgba(245, 158, 11, 0.35);
+}
+
 /* Theme control row */
 #license-diff-theme {
   display: flex;
@@ -454,12 +475,12 @@
 }
 
 #license-diff-ui.ld-theme-light #license-diff-url a {
-  color: #439843 !important;
+  color: #2d682d !important;
 }
 
 #license-diff-ui.ld-theme-light #license-diff-url a:hover {
-  color: #2d682d !important;
-  border-bottom: 1px dotted #2d682d !important;
+  color: #1a3d1a !important;
+  border-bottom: 1px dotted #1a3d1a !important;
 }
 
 #license-diff-ui.ld-theme-light .source-badge.source-licensedb {
@@ -474,6 +495,12 @@
   border-color: rgba(33, 150, 243, 0.35) !important;
 }
 
+#license-diff-ui.ld-theme-light .deprecated-badge {
+  background-color: rgba(245, 158, 11, 0.15) !important;
+  color: #92400e !important;
+  border-color: rgba(245, 158, 11, 0.35) !important;
+}
+
 #license-diff-ui.ld-theme-light .license-diff-notification.info {
   background-color: #e7f3fe !important;
   color: #0c5460 !important;
@@ -570,6 +597,12 @@
   border-color: rgba(68, 147, 248, 0.45) !important;
 }
 
+#license-diff-ui.ld-theme-dark .deprecated-badge {
+  background-color: rgba(245, 158, 11, 0.18) !important;
+  color: #fcd34d !important;
+  border-color: rgba(245, 158, 11, 0.4) !important;
+}
+
 #license-diff-ui.ld-theme-dark #license-diff-progress-container {
   background-color: #212830 !important;
 }
@@ -598,7 +631,7 @@
 
 #license-diff-ui.ld-theme-dark .license-diff-notification.success {
   background-color: #238636 !important;
-  color: #3fb950 !important;
+  color: #ffffff !important;
   border-left: 4px solid #34d399 !important;
 }
 
@@ -625,4 +658,8 @@
 
 #license-diff-ui.ld-theme-dark #license-diff-display::-webkit-scrollbar-thumb:hover {
   background-color: #64748b !important;
+}
+
+#license-diff-ui.ld-theme-dark #license-diff-display .ldiff-pending {
+  color: #9ca3af !important;
 }

src/content/content.css

@@ -192,11 +192,12 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
 
       const appendOption = (m, targetParent = dropdown) => {
         const pct = prettyPercent(m.charSimilarity);
+        const deprecatedSuffix = m.deprecated ? ' [deprecated]' : '';
         const opt = createEl('option');
         opt.value = m.matchKey;
         opt.textContent = pct
-          ? `${m.license} • ${pct} • ${m.sourceLabel || getSourceLabel(m.source)}`
-          : `${m.license} • ${m.sourceLabel || getSourceLabel(m.source)}`;
+          ? `${m.license} • ${pct} • ${m.sourceLabel || getSourceLabel(m.source)}${deprecatedSuffix}`
+          : `${m.license} • ${m.sourceLabel || getSourceLabel(m.source)}${deprecatedSuffix}`;
         targetParent.appendChild(opt);
       };
 
@@ -213,7 +214,8 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
         matches.forEach(m => appendOption(m, dropdown));
       }
 
-      setDisplay(groupingRow, matches.length ? 'flex' : 'none');
+      const uniqueSources = new Set(matches.map(m => m.source || 'licensedb'));
+      setDisplay(groupingRow, (matches.length && uniqueSources.size > 1) ? 'flex' : 'none');
 
       if (matches.length) {
         if (selectedMatchKey && matches.some(m => m.matchKey === selectedMatchKey)) {
@@ -351,6 +353,8 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
             removeClass(progressEl, 'no-transition');
           }
 
+          setDisplay(status, 'block');
+          setDisplay(progressBar, 'block');
           status.textContent = 'Starting license comparison...';
           matches = [];
 
@@ -385,6 +389,7 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
 
             m.link = `<a href="${targetUrl}" target="_blank">${m.name}</a>
               <span class="source-badge ${getSourceClass(m.source)}">${sourceLabel}</span>
+              ${m.deprecated ? '<span class="deprecated-badge">deprecated</span>' : ''}
               <span class="spdx-container">
                 <span class="spdx-id">(${m.spdx})</span>
                 <button class="copy-spdx-button" data-spdx="${m.spdx}" title="Copy ID">
@@ -411,7 +416,9 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
               }, { passive: false });
             }
 
-            safeSetHTML(diffContainer, sel.diff);
+            safeSetHTML(diffContainer, sel.diff !== null
+              ? sel.diff
+              : '<div class="ldiff-pending">Generating diff\u2026</div>');
             updateDiffSizing();
             setupCopyButtons();
           };
@@ -424,9 +431,33 @@ if (__LD_STATE__.initialized || __LD_STATE__.initializing) {
             dropdown.onchange();
           }
 
-          status.textContent = 'Comparison complete!';
+          const hasPendingDiffs = matches.some(m => m.diff === null);
+          if (hasPendingDiffs) {
+            status.textContent = 'Results ready. Generating diffs...';
+          } else {
+            setDisplay(status, 'none');
+            setDisplay(progressBar, 'none');
+          }
           updateDiffSizing();
           sendResponse({ success: true });
+        } else if (message.action === 'updateMatchDiff') {
+          const match = matches.find(m => m.matchKey === message.matchKey);
+          if (match) {
+            match.diff = message.diff;
+            // If this match is currently selected in the dropdown, refresh its diff view
+            if (dropdown.value === message.matchKey) {
+              safeSetHTML(diffContainer, match.diff !== null
+                ? match.diff
+                : '<div class="ldiff-pending">Generating diff\u2026</div>');
+              updateDiffSizing();
+            }
+            // Hide status and progress bar when all diffs have arrived
+            if (matches.every(m => m.diff !== null)) {
+              setDisplay(status, 'none');
+              setDisplay(progressBar, 'none');
+            }
+          }
+          sendResponse({ success: true });
         } else if (message.action === 'showError') {
           removeClass(progressEl, 'animating');
           status.textContent = `Error: ${message.error}`;

src/content/content.js

@@ -1,6 +1,8 @@
 export const UI_DEFAULTS = Object.freeze({
   theme: 'light',
-  scanFilter: 'both'
+  scanFilter: 'both',
+  includeDeprecated: false,
+  scanSource: 'both'
 });
 
 export const BADGE_STYLES = Object.freeze({

src/shared/ui-defaults.js

@@ -38,7 +38,7 @@
 
     button {
       background-color: #4CAF50;
-      color: white;
+      color: #000000;
       border: none;
       border-radius: 4px;
       padding: 10px 16px;
@@ -67,6 +67,7 @@
 
     .button-danger {
       background-color: #dc3545;
+      color: white;
     }
 
     .button-danger:hover {

src/ui/options/options.html

@@ -5,18 +5,36 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>License Diff</title>
   <style>
-    body { font-family: system-ui, sans-serif; margin: 12px; width: 220px; }
+    body { font-family: system-ui, sans-serif; margin: 12px; width: 220px; background-color: #ffffff; color: #333333; }
     fieldset { border: none; padding: 0; margin: 0 0 8px 0; }
+    legend { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #888; margin-bottom: 4px; padding: 0; }
     label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
-    button { width: 100%; padding: 6px; margin-top: 8px; }
+    button { width: 100%; padding: 6px; margin-top: 8px; background-color: #4CAF50; color: #000000; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
+    button:hover { background-color: #3d8b3d; }
+
+    body.theme-dark { background-color: #0d1117; color: #f0f6fc; }
+    body.theme-dark legend { color: #8b949e; }
+    body.theme-dark button { background-color: #238636; color: #ffffff; }
+    body.theme-dark button:hover { background-color: #2ea043; }
   </style>
 </head>
 <body>
   <fieldset id="filter-form">
+    <legend>Compare</legend>
     <label><input type="radio" name="scanFilter" value="licenses" />Licenses only</label>
     <label><input type="radio" name="scanFilter" value="exceptions" />Exceptions only</label>
     <label><input type="radio" name="scanFilter" value="both" />Licenses + Exceptions</label>
   </fieldset>
+  <fieldset id="deprecated-form">
+    <legend>Filters</legend>
+    <label><input type="checkbox" id="include-deprecated" />Include deprecated</label>
+  </fieldset>
+  <fieldset id="source-form">
+    <legend>Sources</legend>
+    <label><input type="radio" name="scanSource" value="licensedb" />ScanCode only</label>
+    <label><input type="radio" name="scanSource" value="spdx" />SPDX only</label>
+    <label><input type="radio" name="scanSource" value="both" />Both sources</label>
+  </fieldset>
   <button id="run-scan" type="button">Run comparison</button>
   <script type="module" src="popup.js"></script>
 </body>

src/ui/popup/popup.html

@@ -1,6 +1,9 @@
 import { UI_DEFAULTS } from "../../shared/ui-defaults.js";
 
 const FILTER_DEFAULT = UI_DEFAULTS.scanFilter;
+const DEPRECATED_DEFAULT = UI_DEFAULTS.includeDeprecated;
+const SCAN_SOURCE_DEFAULT = UI_DEFAULTS.scanSource;
+const THEME_DEFAULT = UI_DEFAULTS.theme;
 
 function storageGet(defaults) {
   return new Promise((resolve) => {
@@ -26,18 +29,44 @@ function storageSet(obj) {
 }
 
 async function init() {
-  const { scanFilter } = await storageGet({ scanFilter: FILTER_DEFAULT });
+  const { scanFilter, includeDeprecated, scanSource, theme } = await storageGet({
+    scanFilter: FILTER_DEFAULT,
+    includeDeprecated: DEPRECATED_DEFAULT,
+    scanSource: SCAN_SOURCE_DEFAULT,
+    theme: THEME_DEFAULT
+  });
+
+  document.body.classList.toggle('theme-dark', theme === 'dark');
   document.querySelectorAll('input[name="scanFilter"]').forEach((input) => {
     input.checked = input.value === scanFilter;
     input.addEventListener('change', async () => {
       if (input.checked) await storageSet({ scanFilter: input.value });
     });
   });
 
+  const deprecatedCheckbox = document.getElementById('include-deprecated');
+  deprecatedCheckbox.checked = !!includeDeprecated;
+  deprecatedCheckbox.addEventListener('change', async () => {
+    await storageSet({ includeDeprecated: deprecatedCheckbox.checked });
+  });
+
+  document.querySelectorAll('input[name="scanSource"]').forEach((input) => {
+    input.checked = input.value === scanSource;
+    input.addEventListener('change', async () => {
+      if (input.checked) await storageSet({ scanSource: input.value });
+    });
+  });
+
   document.getElementById('run-scan').addEventListener('click', async () => {
     const selected = document.querySelector('input[name="scanFilter"]:checked')?.value || FILTER_DEFAULT;
+    const selectedSource = document.querySelector('input[name="scanSource"]:checked')?.value || SCAN_SOURCE_DEFAULT;
     try {
-      await chrome.runtime.sendMessage({ action: 'startScanWithFilter', filter: selected });
+      await chrome.runtime.sendMessage({
+        action: 'startScanWithFilter',
+        filter: selected,
+        includeDeprecated: deprecatedCheckbox.checked,
+        scanSource: selectedSource
+      });
     } catch (err) {
       console.error('Failed to start scan:', err);
     } finally {