Add light/dark autodetection.

I'm tired of waiting for w3c/webextensions#229

Author: pmarks-net

src/background.js

@@ -274,6 +274,7 @@ class TabInfo extends SaveableEntry {
 
     if (!spriteImg.ready) throw "must await spriteImgReady!";
     if (!options.ready) throw "must await optionsReady!";
+    if (!darkMode.ready) throw "must await darkModeReady!";
 
     if (tabMap[tabId]) throw "Duplicate entry in tabMap";
     if (tabTracker.exists(tabId)) {
@@ -426,7 +427,10 @@ class TabInfo extends SaveableEntry {
 
     // Don't waste time redrawing the same icon.
     if (this.lastPattern != pattern) {
-      const color = options[this.color];
+      let color = options[this.color];
+      if (color == "auto") {
+        color = darkMode.value ? "lightfg" : "darkfg";
+      }
       action.setIcon({
         "tabId": this.id(),
         "imageData": {
@@ -634,11 +638,77 @@ function lookupOriginMap(origin) {
   return originMap[origin] || new Set();
 }
 
+// This horrific mess can eventually be replaced by
+// https://github.com/w3c/webextensions/issues/229
+let initDarkMode = null;
+const darkMode = {ready: false, resolve: null, value: false};
+if (typeof window !== 'undefined' && window.matchMedia) {
+  // Watching for Dark Mode is trivial in Firefox.
+  initDarkMode = (async () => {
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    darkMode.value = query.matches;
+    query.addEventListener("change", (event) => {
+      changeDarkMode(event.matches);
+    });
+    darkMode.ready = true;
+  });
+} else {
+  initDarkMode = (async () => {
+    const p = new Promise((resolve) => {darkMode.resolve = resolve});
+    try {
+      await chrome.offscreen.createDocument({
+        url: "detectdarkmode.html",
+        reasons: ['MATCH_MEDIA'],
+        justification: 'detect light/dark mode for icon colors',
+      });
+      darkMode.value = await p;
+    } catch {
+      console.log("detectdarkmode failed!");
+    }
+    // The offscreen document can't provide darkMode updates, so kill it now.
+    // We will get updates from the popup/option windows instead.
+    try {
+      await chrome.offscreen.closeDocument();
+    } catch {
+      // ignore
+    }
+    darkMode.ready = true;
+  });
+
+  chrome.runtime.onMessage.addListener((message) => {
+    console.log("onMessage", message);
+    if (message.hasOwnProperty("darkModeOffscreen")) {
+      darkMode.resolve?.(message.darkModeOffscreen);
+      darkMode.resolve = null;
+    } else if (message.hasOwnProperty("darkModeInteractive")) {
+      // Receive updates from popup/option windows.
+      changeDarkMode(message.darkModeInteractive);
+    }
+  });
+}
+const darkModeReady = initDarkMode();
+
+async function changeDarkMode(newValue) {
+  if (!darkMode.ready || darkMode.value == newValue) return;
+  darkMode.value = newValue;
+
+  await storageReady;
+  const RCS = "regularColorScheme";
+  if (options[RCS] == "auto") {
+    for (const tabInfo of Object.values(tabMap)) {
+      if (tabInfo.color == RCS){
+        tabInfo.refreshPageAction();
+      }
+    }
+  }
+}
+
 // Must "await storageReady;" before reading maps.
 // You can force initStorage() from the console for debugging purposes.
 const initStorage = async () => {
   await spriteImgReady;
   await optionsReady;
+  await darkModeReady;
 
   // Migrate previous-version data from local to session storage.
   const oldItems = await chrome.storage.local.get();

src/common.js

@@ -159,7 +159,7 @@ function drawSprite(ctx, size, targets, sources) {
 }
 
 const DEFAULT_OPTIONS = {
-  regularColorScheme: "darkfg",
+  regularColorScheme: "auto",
   incognitoColorScheme: "lightfg",
 };
 
@@ -276,4 +276,15 @@ function revertNAT64() {
     // our local Set is used for deduplication.
     _watchOptionsFunc?.([NAT64_KEY]);
   }
+}
+
+if (chrome.runtime.getManifest().background.service_worker &&
+    typeof window !== 'undefined' && window.matchMedia) {
+  // We are running in Chrome, and the Options or Popup UI is visible.
+  // Send darkMode updates to the service_worker.
+  const query = window.matchMedia('(prefers-color-scheme: dark)');
+  chrome.runtime.sendMessage({darkModeInteractive: query.matches});
+  query.addEventListener("change", (event) => {
+    chrome.runtime.sendMessage({darkModeInteractive: event.matches});
+  });
 }

src/detectdarkmode.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="detectdarkmode.js"></script>
+</head>
+</html>

src/detectdarkmode.js

@@ -0,0 +1,3 @@
+"use strict";
+const query = window.matchMedia('(prefers-color-scheme: dark)');
+chrome.runtime.sendMessage({darkModeOffscreen: query.matches});

src/iputil.js

@@ -1,3 +1,5 @@
+"use strict";
+
 const DOT = '.';
 const COLON = ':';
 const IPV6_PART_COUNT = 8;

src/manifest.json

@@ -23,7 +23,8 @@
     "contextMenus",
     "storage",
     "webNavigation",
-    "webRequest"
+    "webRequest",
+    "offscreen"
   ],
   "host_permissions": [
     "<all_urls>"

src/manifest/chrome-manifest.json

@@ -23,7 +23,8 @@
     "contextMenus",
     "storage",
     "webNavigation",
-    "webRequest"
+    "webRequest",
+    "offscreen"
   ],
   "host_permissions": [
     "<all_urls>"

src/options.html

@@ -36,6 +36,8 @@
     border-color: #888;
     border-style: solid;
     padding: 0;
+    white-space: nowrap;
+    vertical-align: middle;
   }
   #nat64 table, #nat64 td, #nat64 tr {
     font-family: monospace;
@@ -114,6 +116,12 @@ <h1>Icon color scheme</h1>
             </div>
           </label>
         </td>
+        <td>
+          <label>
+            <input type="radio" name="regularColorScheme" value="auto" class="disabler">
+            Auto
+          </label>
+        </td>
       </tr>
       <tr>
         <td class="colorscheme_title">Incognito tabs:</td>