add a hidden "gray out" options for favicons

_locales/en/messages.json

@@ -334,6 +334,10 @@
     "message": "Favicons in applies-to column",
     "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page"
   },
+  "manageFaviconsGray": {
+    "message": "Grayed out",
+    "description": "Label for the checkbox that toggles grayed out mode of applies-to favicons in the new UI on manage page"
+  },
   "manageFaviconsHelp": {
     "message": "Stylus uses an external service https://www.google.com/s2/favicons",
     "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page"

manage.css

@@ -433,6 +433,11 @@ input[id^="manage.newUI"] {
   padding: 1ex 0 2ex 16px;
 }
 
+#faviconsHelp div {
+    display: flex;
+    align-items: center;
+    margin-top: 1ex;
+}
 
 /* Default, no update buttons */
 .update,

manage.html

@@ -163,7 +163,12 @@
         <svg class="svg-icon info" viewBox="0 0 14 16" i18n-alt="helpAlt" data-toggle-on-click="#faviconsHelp">
           <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
         </svg>
-        <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp"></div>
+        <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
+          <div>
+            <input id="manage.newUI.faviconsGray" type="checkbox">
+            <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray"></label>
+          </div>
+        </div>
       </div>
       <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>

manage.js

@@ -10,6 +10,7 @@ const filtersSelector = {
 const newUI = {
   enabled: prefs.get('manage.newUI'),
   favicons: prefs.get('manage.newUI.favicons'),
+  faviconsGray: prefs.get('manage.newUI.faviconsGray'),
   targets: prefs.get('manage.newUI.targets'),
   renderClass() {
     document.documentElement.classList.toggle('newUI', newUI.enabled);
@@ -75,15 +76,11 @@ function initGlobalEvents() {
     el.onclick = () => target.classList.toggle('hidden');
   });
 
+  // triggered automatically by setupLivePrefs() below
   enforceInputRange($('#manage.newUI.targets'));
 
-  setupLivePrefs([
-    'manage.onlyEnabled',
-    'manage.onlyEdited',
-    'manage.newUI',
-    'manage.newUI.favicons',
-    'manage.newUI.targets',
-  ]);
+  // N.B. triggers existing onchange listeners
+  setupLivePrefs($$('input[id^="manage."]').map(el => el.id));
 
   $$('[data-filter]').forEach(el => {
     el.onchange = handleEvent.filterOnChange;
@@ -401,39 +398,55 @@ function handleDelete(id) {
 
 
 function switchUI({styleOnly} = {}) {
-  const enabled = $('#manage.newUI').checked;
-  const favicons = $('#manage.newUI.favicons').checked;
-  const targets = Number($('#manage.newUI.targets').value);
+  const current = {};
+  const changed = {};
+  let someChanged = false;
+  // ensure the global option is processed first
+  for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
+    const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
+    const value = el.type == 'checkbox' ? el.checked : Number(el.value);
+    const valueChanged = value !== newUI[id] && (id == 'enabled' || current.enabled);
+    current[id] = value;
+    changed[id] = valueChanged;
+    someChanged |= valueChanged;
+  }
 
-  const stateToggled = newUI.enabled != enabled;
-  const targetsChanged = enabled && targets != newUI.targets;
-  const faviconsChanged = enabled && favicons != newUI.favicons;
-  const missingFavicons = enabled && favicons && !$('.applies-to img');
-
-  if (!styleOnly && !stateToggled && !targetsChanged && !faviconsChanged) {
+  if (!styleOnly && !someChanged) {
     return;
   }
 
-  Object.assign(newUI, {enabled, favicons, targets});
-
+  Object.assign(newUI, current);
   newUI.renderClass();
-  installed.classList.toggle('has-favicons', favicons);
+  installed.classList.toggle('has-favicons', newUI.favicons);
   $('#style-overrides').textContent = `
     .newUI .targets {
       max-height: ${newUI.targets * 18}px;
     }
-  `;
+    ` + (newUI.faviconsGray ? `
+    .newUI .target img {
+      -webkit-filter: grayscale(1);
+      filter: grayscale(1);
+      opacity: .25;
+    }
+    ` : `
+    .newUI .target img {
+      -webkit-filter: none;
+      filter: none;
+      opacity: 1;
+    }
+  `);
 
   if (styleOnly) {
     return;
   }
 
-  if (stateToggled || missingFavicons && !createStyleElement.parts) {
+  const missingFavicons = newUI.enabled && newUI.favicons && !$('.applies-to img');
+  if (changed.enabled || (missingFavicons && !createStyleElement.parts)) {
     installed.innerHTML = '';
     getStylesSafe().then(showStyles);
     return;
   }
-  if (targetsChanged) {
+  if (changed.targets) {
     for (const targets of $$('.entry .targets')) {
       const hasMore = targets.children.length > newUI.targets;
       targets.parentElement.classList.toggle('has-more', hasMore);

prefs.js

@@ -18,6 +18,7 @@ var prefs = new function Prefs() {
     'manage.onlyEdited': false,     // display only styles created locally
     'manage.newUI': true,           // use the new compact layout
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
+    'manage.newUI.faviconsGray': true, // gray out favicons
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
 
     'editor.options': {},           // CodeMirror.defaults.*