Change: drop setupRadioButtons

js/dom.js

@@ -404,10 +404,10 @@ function moveFocus(rootElement, step) {
 // and establishes a two-way connection between the document elements and the actual prefs
 function setupLivePrefs(
   IDs = Object.getOwnPropertyNames(prefs.defaults)
-    .filter(id => $('#' + id))
+    .filter(id => $(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`))
 ) {
   for (const id of IDs) {
-    const elements = [$('#' + id), ...$$(`[name=${id}]`)];
+    const elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`);
     for (const element of elements) {
       updateElement({id, elements: [element], force: true});
       element.addEventListener('change', onChange);
@@ -416,6 +416,9 @@ function setupLivePrefs(
   prefs.subscribe(IDs, (id, value) => updateElement({id, value}));
 
   function onChange() {
+    if (!this.checkValidity()) {
+      return;
+    }
     const key = this.id || this.name;
     const value = getInputValue(this);
     if (value !== undefined && prefs.get(key) !== value) {
@@ -425,7 +428,7 @@ function setupLivePrefs(
   function updateElement({
     id,
     value = prefs.get(id),
-    elements = [$('#' + id), ...$$(`[name=${id}]`)],
+    elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`),
     force,
   }) {
     // FIXME: this has no effect. `updateElement` is not a listener
@@ -447,13 +450,19 @@ function setupLivePrefs(
     if (input.type === 'radio' && !input.checked) {
       return undefined;
     }
+    // FIXME: use a string value for iconset
+    if (input.name === 'iconset') {
+      return Number(input.value);
+    }
     return input.value;
   }
   function setInputValue(input, value, force = false) {
     let oldValue, newValue;
     if (input.type === 'radio') {
       oldValue = input.checked;
-      newValue = input.checked = value === input.value;
+      // FIXME: use == because we use number value in iconset
+      newValue = input.checked = value == input.value;
+      console.log(value, input.value);
     } else if (input.type === 'checkbox') {
       oldValue = input.checked;
       newValue = input.checked = value;

options/options.js

@@ -5,7 +5,6 @@
 'use strict';
 
 setupLivePrefs();
-setupRadioButtons();
 enforceInputRange($('#popupWidth'));
 setTimeout(splitLongTooltips);
 
@@ -113,29 +112,6 @@ function checkUpdates() {
   }
 }
 
-function setupRadioButtons() {
-  const sets = {};
-  const onChange = function () {
-    const newValue = sets[this.name].indexOf(this);
-    if (newValue >= 0 && prefs.get(this.name) !== newValue) {
-      prefs.set(this.name, newValue);
-    }
-  };
-  // group all radio-inputs by name="prefName" attribute
-  for (const el of $$('input[type="radio"][name]')) {
-    (sets[el.name] = sets[el.name] || []).push(el);
-    el.addEventListener('change', onChange);
-  }
-  // select the input corresponding to the actual pref value
-  for (const name in sets) {
-    sets[name][prefs.get(name)].checked = true;
-  }
-  // listen to pref changes and update the values
-  prefs.subscribe(Object.keys(sets), (key, value) => {
-    sets[key][value].checked = true;
-  });
-}
-
 function splitLongTooltips() {
   for (const el of $$('[title]')) {
     if (el.title.length < 50) {