Options cleanups:

- Make the color scheme selector fit on mobile without scrolling.
- Replace the 'disabler' with a dirty counter.

Author: pmarks-net

src/common.js

@@ -169,50 +169,55 @@ const NAT64_DEFAULT = parseIP("64:ff9b::").slice(0, 96/4);
 
 let _watchOptionsFunc = null;
 const options = {ready: false, [NAT64_KEY]: new Set([NAT64_DEFAULT])};
+const optionsDirty = {};  // {option: number of writes in flight}
 const optionsReady = (async function() {
-  const items = await chrome.storage.sync.get();
-  for (const option of Object.keys(DEFAULT_OPTIONS)) {
-    options[option] = items.hasOwnProperty(option) ?
-        items[option] : DEFAULT_OPTIONS[option];
+  for (const [option, value] of Object.entries(DEFAULT_OPTIONS)) {
+    options[option] = value;
+    optionsDirty[option] = 0;
   }
-  for (const option of Object.keys(items)) {
-    if (NAT64_VALIDATE.test(option)) {
+  const items = await chrome.storage.sync.get();
+  for (const [option, value] of Object.entries(items)) {
+    if (DEFAULT_OPTIONS.hasOwnProperty(option)) {
+      options[option] = value;
+    } else if (NAT64_VALIDATE.test(option)) {
       options[NAT64_KEY].add(option.slice(NAT64_KEY.length));
     }
   }
   options.ready = true;
-  if (_watchOptionsFunc) {
-    _watchOptionsFunc(Object.keys(options));
-  }
+  _watchOptionsFunc?.(Object.keys(options));
 })();
 
 chrome.storage.sync.onChanged.addListener(function(changes) {
   // changes = {option: {oldValue: x, newValue: y}}
   if (!options.ready) return;
   const optionsChanged = [];
-  for (const option of Object.keys(DEFAULT_OPTIONS)) {
-    const change = changes[option];
-    if (!change) continue;
-    options[option] = change.hasOwnProperty("newValue") ?
-        change.newValue : DEFAULT_OPTIONS[option];
-    optionsChanged.push(option);
-  }
-  let nat64Changed = false;
   for (const [option, {oldValue, newValue}] of Object.entries(changes)) {
-    if (NAT64_VALIDATE.test(option)) {
+    if (DEFAULT_OPTIONS.hasOwnProperty(option)) {
+      const value = newValue || DEFAULT_OPTIONS[option];
+      if (options[option] != value) {
+        if (optionsDirty[option] > 1) {
+          // Forget local changes that occurred mid-write.
+          optionsDirty[option] = 1;
+        }
+        options[option] = value;
+        optionsChanged.push(option);
+      }
+    } else if (NAT64_VALIDATE.test(option)) {
       const packed96 = option.slice(NAT64_KEY.length);
       if (newValue && !options[NAT64_KEY].has(packed96)) {
         options[NAT64_KEY].add(packed96);
-        nat64Changed = true;
       } else if (!newValue && options[NAT64_KEY].has(packed96)) {
         options[NAT64_KEY].delete(packed96);
-        nat64Changed = true;
+      } else {
+        continue;  // no change
+      }
+      if (!optionsChanged.includes(NAT64_KEY)) {
+        optionsChanged.push(NAT64_KEY);
       }
     }
   }
-  if (nat64Changed) optionsChanged.push(NAT64_KEY);
-  if (_watchOptionsFunc && optionsChanged.length) {
-    _watchOptionsFunc(optionsChanged);
+  if (optionsChanged.length) {
+    _watchOptionsFunc?.(optionsChanged);
   }
 });
 
@@ -225,18 +230,44 @@ function watchOptions(f) {
 }
 
 function setOptions(newOptions) {
-  console.log("setOptions", newOptions);
   const toSet = {};
+  const optionsChanged = [];
   for (const option of Object.keys(DEFAULT_OPTIONS)) {
-    if (newOptions[option] != options[option]) {
-      toSet[option] = newOptions[option];
+    const value = newOptions[option];
+    if (options[option] != value) {
+      options[option] = value;
+      optionsChanged.push(option);
+      if (++optionsDirty[option] == 1) {
+        toSet[option] = value;
+      } else {
+        // dirty > 1; the value is buffered and written later.
+        console.log("setOptions buffered", option);
+      }
     }
   }
-  if (Object.keys(toSet).length == 0) {
-    return false;  // no change
+  const doSet = () => {
+    if (Object.keys(toSet).length == 0) {
+      return;  // no change
+    }
+    chrome.storage.sync.set(toSet, () => {
+      for (const [option, value] of Object.entries(toSet)) {
+        const dirty = optionsDirty[option];
+        if (dirty > 1 && value != options[option]) {
+          // user changed the value mid-write; push the latest value.
+          toSet[option] = options[option];
+          optionsDirty[option] = 1;
+        } else {
+          delete toSet[option];
+          optionsDirty[option] = 0;
+        }
+      }
+      doSet();
+    });
+  };
+  doSet();
+  if (optionsChanged.length) {
+    _watchOptionsFunc?.(optionsChanged);
   }
-  chrome.storage.sync.set(toSet);
-  return true;  // caller should wait for watchOptions()
 }
 
 // Users can manually call this function to add a NAT64 prefix from the console.
@@ -287,4 +318,4 @@ if (chrome.runtime.getManifest().background.service_worker &&
   query.addEventListener("change", (event) => {
     chrome.runtime.sendMessage({darkModeInteractive: event.matches});
   });
-}
+}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.20",
+  "version": "2.21",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {

src/manifest/chrome-manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.20",
+  "version": "2.21",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {

src/manifest/firefox-manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.20",
+  "version": "2.21",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {
@@ -17,7 +17,6 @@
       "strict_min_version": "115.0"
     },
     "gecko_android": {
-      "id": "[email protected]",
       "strict_min_version": "120.0"
     }
   },

src/options.html

@@ -17,7 +17,7 @@
 -->
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=360, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style type="text/css">
   body {
     font-family: sans-serif;
@@ -35,14 +35,17 @@
     border-collapse: collapse;
     border-color: #888;
     border-style: solid;
-    padding: 0;
+    padding: 3pt;
     white-space: nowrap;
     vertical-align: middle;
   }
+  td {
+    border-left: none;
+    border-right: none;
+  }
   #nat64 table, #nat64 td, #nat64 tr {
     font-family: monospace;
     color: #800000;
-    padding: 3pt;
   }
   ul {
     list-style-position: inside;
@@ -51,27 +54,24 @@
   }
   label {
     display: flex;
-    padding: 1em;
+    padding: 0pt;
     align-items: center;
   }
   input[type="radio"] {
-    margin-right: 1em;
+    margin-right: 3pt;
   }
   a, a:visited {
     color: blue;
   }
   .darkfg_frame {
     background-color: #f2f2f2;
-    font-size: 0;
     padding: 8px;
   }
   .lightfg_frame {
     background-color: #505050;
-    font-size: 0;
     padding: 8px;
   }
   .colorscheme_title {
-    padding: 1em;
     font-weight: bold;
   }
 
@@ -102,23 +102,23 @@ <h1>Icon color scheme</h1>
         <td class="colorscheme_title">Regular tabs:</td>
         <td>
           <label>
-            <input type="radio" name="regularColorScheme" value="darkfg" class="disabler">
+            <input type="radio" name="regularColorScheme" value="darkfg">
             <div class="darkfg_frame">
               <canvas id="regularColorScheme:darkfg" width="16px" height="16px"></canvas>
             </div>
           </label>
         </td>
         <td>
           <label>
-            <input type="radio" name="regularColorScheme" value="lightfg" class="disabler">
+            <input type="radio" name="regularColorScheme" value="lightfg">
             <div class="lightfg_frame">
               <canvas id="regularColorScheme:lightfg" width="16px" height="16px"></canvas>
             </div>
           </label>
         </td>
         <td>
           <label>
-            <input type="radio" name="regularColorScheme" value="auto" class="disabler">
+            <input type="radio" name="regularColorScheme" value="auto">
             Auto
           </label>
         </td>
@@ -127,15 +127,15 @@ <h1>Icon color scheme</h1>
         <td class="colorscheme_title">Incognito tabs:</td>
         <td>
           <label>
-            <input type="radio" name="incognitoColorScheme" value="darkfg" class="disabler">
+            <input type="radio" name="incognitoColorScheme" value="darkfg">
             <div class="darkfg_frame">
               <canvas id="incognitoColorScheme:darkfg" width="16px" height="16px"></canvas>
             </div>
           </label>
         </td>
         <td>
           <label>
-            <input type="radio" name="incognitoColorScheme" value="lightfg" class="disabler">
+            <input type="radio" name="incognitoColorScheme" value="lightfg">
             <div class="lightfg_frame">
               <canvas id="incognitoColorScheme:lightfg" width="16px" height="16px"></canvas>
             </div>
@@ -158,7 +158,7 @@ <h1>NAT64 prefixes</h1>
   </table>
 
   <div style="display:inline-block; padding-top:1.5em; width:100%">
-    <button id="revert_btn" style="float:left" class="disabler">Revert to Defaults</button>
+    <button id="revert_btn" style="float:left">Revert to Defaults</button>
     <button id="dismiss_btn" style="float:right">Dismiss</button>
   </div>
 </body>

src/options.js

@@ -19,7 +19,6 @@ limitations under the License.
 // Requires <script src="common.js">
 
 window.onload = async () => {
-  disableAll(true);
   await spriteImgReady;
 
   for (const option of Object.keys(DEFAULT_OPTIONS)) {
@@ -45,7 +44,7 @@ window.onload = async () => {
 
   watchOptions(function(optionsChanged) {
     for (const option of optionsChanged) {
-      if (option.endsWith("ColorScheme")) {
+      if (DEFAULT_OPTIONS.hasOwnProperty(option)) {
         const radio = document.optionsForm[option];
         radio.value = options[option];
       } else if (option == NAT64_KEY) {
@@ -60,25 +59,19 @@ window.onload = async () => {
         }
       }
     }
-    disableAll(false);
   });
 
   document.optionsForm.onchange = function(evt) {
     const newOptions = {};
     for (const option of Object.keys(DEFAULT_OPTIONS)) {
-      if (!option.endsWith("ColorScheme")) continue;
       newOptions[option] = document.optionsForm[option].value;
     }
-    if (setOptions(newOptions)) {
-      disableAll(true);
-    }
+    setOptions(newOptions);
   };
 
   document.getElementById("revert_btn").onclick = function() {
     revertNAT64();
-    if (setOptions(DEFAULT_OPTIONS)) {
-      disableAll(true);
-    }
+    setOptions(DEFAULT_OPTIONS);
   };
 
   document.getElementById("dismiss_btn").onclick = function() {
@@ -89,9 +82,3 @@ window.onload = async () => {
     }
   };
 }
-
-function disableAll(disabled) {
-  for (const e of document.getElementsByClassName("disabler")) {
-    e.disabled = disabled;
-  }
-}