rework and move newUI+theme to options.html (#1050)

* rework and move newUI+theme to options.html

* rephrase/clarify the find styles label

* switch to USO-archive

* search for 'Stylus' keyword to filter out Stylish crud

* use archive's default search order

_locales/bg/messages.json

@@ -217,10 +217,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Стилове за редактора",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Включване",
     "description": "Label for the button to enable a style"
@@ -741,4 +737,4 @@
     "message": "този адрес",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"
   }
-}
+}

_locales/cs/messages.json

@@ -305,10 +305,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Najít styly pro editor",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Povolit",
     "description": "Label for the button to enable a style"
@@ -1306,4 +1302,4 @@
     "message": "Nahrávání souboru…",
     "description": ""
   }
-}
+}

_locales/de/messages.json

@@ -309,10 +309,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Editor Styles finden",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Aktivieren",
     "description": "Label for the button to enable a style"
@@ -1600,4 +1596,4 @@
     "message": "Lade Styles hoch...",
     "description": ""
   }
-}
+}

_locales/en/messages.json

@@ -319,10 +319,6 @@
     },
     "description": "Title of the page for editing styles"
   },
-  "editorStylesButton": {
-    "message": "Find editor styles",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Enable",
     "description": "Label for the button to enable a style"
@@ -1012,6 +1008,9 @@
   "optionsResetButton": {
     "message": "Reset options"
   },
+  "optionsStylusThemes": {
+    "message": "Find a Stylus UI theme"
+  },
   "optionsSubheading": {
     "message": "More Options",
     "description": "Subheading for options section on manage page."

_locales/es/messages.json

@@ -313,10 +313,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Buscar estilos del editor",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Activar",
     "description": "Label for the button to enable a style"
@@ -1568,4 +1564,4 @@
     "message": "Subiendo el archivo....",
     "description": ""
   }
-}
+}

_locales/et/messages.json

@@ -313,10 +313,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Leia redaktori stiile",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Luba",
     "description": "Label for the button to enable a style"
@@ -1486,4 +1482,4 @@
     "message": "Faili üleslaadimine...",
     "description": ""
   }
-}
+}

_locales/fr/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Trouver des styles pour l’éditeur",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Activer",
     "description": "Label for the button to enable a style"
@@ -1616,4 +1612,4 @@
     "message": "Envoi du fichier…",
     "description": ""
   }
-}
+}

_locales/he/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "מצא עיצובים לעורך",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "אפשר",
     "description": "Label for the button to enable a style"
@@ -1381,4 +1377,4 @@
     "message": "מעלה קובץ...",
     "description": ""
   }
-}
+}

_locales/hu/messages.json

@@ -309,10 +309,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "A szerkesztő stílusainak keresése",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Engedélyezés",
     "description": "Label for the button to enable a style"
@@ -1604,4 +1600,4 @@
     "message": "Fájl feltöltése...",
     "description": ""
   }
-}
+}

_locales/it/messages.json

@@ -273,10 +273,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Cerca stili editor",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Attiva",
     "description": "Label for the button to enable a style"
@@ -1058,4 +1054,4 @@
     "message": "questo URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"
   }
-}
+}

_locales/ja/messages.json

@@ -313,10 +313,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "エディタのスタイルを見つける",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "有効化",
     "description": "Label for the button to enable a style"
@@ -1636,4 +1632,4 @@
     "message": "スタイルをアップロード中...",
     "description": ""
   }
-}
+}

_locales/ko/messages.json

@@ -317,10 +317,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "편집기 스타일 찾기",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "활성화",
     "description": "Label for the button to enable a style"
@@ -1636,4 +1632,4 @@
     "message": "파일 업로드 중...",
     "description": ""
   }
-}
+}

_locales/nl/messages.json

@@ -317,10 +317,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Editorstijlen zoeken",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Inschakelen",
     "description": "Label for the button to enable a style"
@@ -1620,4 +1616,4 @@
     "message": "Bestand uploaden...",
     "description": ""
   }
-}
+}

_locales/pl/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Znajdź style edytora",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Włącz",
     "description": "Label for the button to enable a style"
@@ -1644,4 +1640,4 @@
     "message": "Wysyłanie stylów...",
     "description": ""
   }
-}
+}

_locales/pt_PT/messages.json

@@ -301,10 +301,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Encontrar estilos para o editor",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Ativar",
     "description": "Label for the button to enable a style"
@@ -1224,4 +1220,4 @@
     "message": "este URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"
   }
-}
+}

_locales/ro/messages.json

@@ -269,10 +269,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Găsiți teme pentru editor",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Activați",
     "description": "Label for the button to enable a style"
@@ -1140,4 +1136,4 @@
     "message": "acest URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"
   }
-}
+}

_locales/ru/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Сменить тему Стилус",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Включить",
     "description": "Label for the button to enable a style"
@@ -1644,4 +1640,4 @@
     "message": "Загрузка файла...",
     "description": ""
   }
-}
+}

_locales/sv/messages.json

@@ -309,10 +309,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Hitta redaktörsstilar",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Aktivera",
     "description": "Label for the button to enable a style"
@@ -1522,4 +1518,4 @@
     "message": "Skickar filen...",
     "description": ""
   }
-}
+}

_locales/tr/messages.json

@@ -309,10 +309,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "Editör stili bul",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "Etkinleştir",
     "description": "Label for the button to enable a style"
@@ -896,4 +892,4 @@
     "message": "Dosya Yükleniyor...",
     "description": ""
   }
-}
+}

_locales/zh_CN/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "查找编辑器样式",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "启用",
     "description": "Label for the button to enable a style"
@@ -1644,4 +1640,4 @@
     "message": "正在上传文件...",
     "description": ""
   }
-}
+}

_locales/zh_TW/messages.json

@@ -321,10 +321,6 @@
       }
     }
   },
-  "editorStylesButton": {
-    "message": "找到編輯器樣式",
-    "description": "Find styles for the editor"
-  },
   "enableStyleLabel": {
     "message": "啟用",
     "description": "Label for the button to enable a style"
@@ -1644,4 +1640,4 @@
     "message": "正在上傳檔案……",
     "description": ""
   }
-}
+}

js/prefs.js

@@ -28,9 +28,9 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
     'manage.onlyLocal.invert': false,   // display only externally installed styles
     'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
     // UI element state: expanded/collapsed
+    'manage.actions.expanded': true,
     'manage.backup.expanded': true,
     'manage.filters.expanded': true,
-    'manage.options.expanded': true,
     // the new compact layout doesn't look good on Android yet
     'manage.newUI': !navigator.appVersion.includes('Android'),
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to

manage.html

@@ -278,8 +278,11 @@
           <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
         </a>
       </div>
+    </div>
 
-      <div id="style-actions">
+    <div class="settings-column">
+      <details id="actions" data-pref="manage.actions.expanded">
+        <summary><h2 i18n-text="optionsActions"></h2></summary>
         <div id="update-check">
           <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
           <a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
@@ -313,57 +316,12 @@
             </a>
           </label>
         </div>
-      </div>
+
+        <button id="manage-options-button" i18n-text="openOptions"></button>
+      </details>
     </div>
 
     <div class="settings-column">
-      <details id="options" data-pref="manage.options.expanded">
-
-        <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-
-        <label>
-          <input id="manage.newUI" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span i18n-text="manageNewUI"></span>
-        </label>
-
-        <div id="newUIoptions">
-          <div>
-            <label for="manage.newUI.favicons" i18n-text="manageFavicons">
-              <input id="manage.newUI.favicons" type="checkbox">
-              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-              <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
-                <svg class="svg-icon select-arrow">
-                  <title i18n-text="optionsSubheading"></title>
-                  <use xlink:href="#svg-icon-select-arrow"/>
-                </svg>
-              </a>
-            </label>
-            <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
-              <div>
-                <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
-                  <input id="manage.newUI.faviconsGray" type="checkbox">
-                  <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-                </label>
-              </div>
-            </div>
-          </div>
-         <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
-        </div>
-
-        <div id="options-buttons">
-          <button id="manage-options-button" i18n-text="openOptions"></button>
-          <button id="manage-shortcuts-button" class="chromium-only"
-                  i18n-text="shortcuts"
-                  i18n-title="shortcutsNote"></button>
-          <a id="find-editor-styles"
-             href="https://userstyles.org/styles/browse/chrome-extension"
-             i18n-title="editorStylesButton"
-             target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
-        </div>
-
-      </details>
-
       <details id="backup" data-pref="manage.backup.expanded">
         <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
         <span id="backup-message" i18n-text="backupMessage"></span>

manage/manage.css

@@ -285,14 +285,6 @@ a:hover {
   margin-top: .5rem;
 }
 
-#options-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  padding-top: .1rem;
-}
-
-#options-buttons > a,
-#options-buttons > button,
 #backup-buttons button {
   margin: 0 .2rem .5rem 0;
 }
@@ -695,65 +687,6 @@ a:hover {
   filter: grayscale(0);
 }
 
-#newUIoptions {
-  display: none;
-}
-
-.newUI #newUIoptions {
-  display: initial;
-}
-
-#newUIoptions > * {
-  display: flex;
-  align-items: center;
-  margin-bottom: auto;
-  flex-wrap: wrap;
-  position: relative;
-}
-
-#newUIoptions input[type="number"] {
-  width: 3em;
-  margin-right: .5em;
-}
-
-#newUIoptions [data-toggle-on-click="#faviconsHelp"] {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  top: -1px;
-}
-
-#newUIoptions [data-toggle-on-click] > svg {
-  position:  static;
-}
-
-#newUIoptions [data-toggle-on-click]:not([open]) > svg {
-  /* note: without ">" FF52 also transforms the nested svg inside <use> */
-  transform: rotate(-90deg);
-}
-
-html:not(.newUI) #newUIoptions + * {
-  margin-top: .5em;
-}
-
-input[id^="manage.newUI"] {
-  margin-left: 0;
-}
-
-#faviconsHelp {
-  overflow-y: auto;
-  font-size: 90%;
-  padding: 1ex 0 2ex 16px;
-}
-
-#faviconsHelp div {
-  display: flex;
-  align-items: center;
-  margin-top: 1ex;
-}
-
 /* Default, no update buttons */
 .updater-icons .update,
 .updater-icons .check-update {
@@ -1078,6 +1011,10 @@ input[id^="manage.newUI"] {
   animation: fadeout .25s ease-in-out;
 }
 
+.settings-column {
+  margin-top: 1rem;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;

manage/manage.js

@@ -5,7 +5,7 @@ global messageBox getStyleWithNoCode
   objectDiff
   configDialog
   sorter msg prefs API onDOMready $ $$ $create template setupLivePrefs
-  URLS enforceInputRange t tWordBreak formatDate
+  t tWordBreak formatDate
   getOwnTab getActiveTab openURL animateElement sessionStorageHash debounce
   scrollElementIntoView CHROME VIVALDI FIREFOX router
   bulkChangeTime:true bulkChangeQueue
@@ -19,15 +19,24 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
 
 const BULK_THROTTLE_MS = 100;
 
+// define pref-mapped ids separately
 const newUI = {
-  enabled: prefs.get('manage.newUI'),
+  enabled: null, // the global option should come first
-  favicons: prefs.get('manage.newUI.favicons'),
+  favicons: null,
-  faviconsGray: prefs.get('manage.newUI.faviconsGray'),
+  faviconsGray: null,
-  targets: prefs.get('manage.newUI.targets'),
+  targets: null,
-  renderClass() {
-    document.documentElement.classList.toggle('newUI', newUI.enabled);
-  },
 };
+// ...add utility functions
+Object.assign(newUI, {
+  ids: Object.keys(newUI),
+  prefGroup: 'manage.newUI',
+  prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
+  renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled),
+});
+// ...read the actual values
+for (const id of newUI.ids) {
+  newUI[id] = prefs.get(newUI.prefKeyForId(id));
+}
 newUI.renderClass();
 
 const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
@@ -88,10 +97,6 @@ function initGlobalEvents() {
   installed.onclick = handleEvent.entryClicked;
   $('#manage-options-button').onclick = () => router.updateHash('#stylus-options');
   $('#sync-styles').onclick = () => router.updateHash('#stylus-options');
-  {
-    const btn = $('#manage-shortcuts-button');
-    btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
-  }
   $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
   // show date installed & last update on hover
   installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle);
@@ -113,19 +118,11 @@ function initGlobalEvents() {
     };
   });
 
-  // triggered automatically by setupLivePrefs() below
-  enforceInputRange($('#manage.newUI.targets'));
-
   // N.B. triggers existing onchange listeners
   setupLivePrefs();
   sorter.init();
 
-  prefs.subscribe([
+  prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());
-    'manage.newUI',
-    'manage.newUI.favicons',
-    'manage.newUI.faviconsGray',
-    'manage.newUI.targets',
-  ], () => switchUI());
 
   switchUI({styleOnly: true});
 
@@ -488,7 +485,7 @@ Object.assign(handleEvent, {
       const y = Math.max(0, top);
       const first = document.elementFromPoint(x, y);
       const lastOffset = first.offsetTop + window.innerHeight;
-      const numTargets = prefs.get('manage.newUI.targets');
+      const numTargets = newUI.targets;
       let entry = first && first.closest('.entry') || installed.children[0];
       while (entry && entry.offsetTop <= lastOffset) {
         favicons.push(...$$('img', entry).slice(0, numTargets).filter(img => img.dataset.src));
@@ -618,10 +615,8 @@ function switchUI({styleOnly} = {}) {
   const current = {};
   const changed = {};
   let someChanged = false;
-  // ensure the global option is processed first
+  for (const id of newUI.ids) {
-  for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
+    const value = prefs.get(newUI.prefKeyForId(id));
-    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;

options.html

@@ -41,6 +41,16 @@
 
   <div id="options">
 
+    <div class="block">
+      <h1 i18n-text="cm_theme"></h1>
+      <div class="items">
+        <label>
+          <a i18n-text="optionsStylusThemes" target="_blank"
+             href="https://33kk.github.io/uso-archive/?category=chrome-extension&search=Stylus"></a>
+        </label>
+      </div>
+    </div>
+
     <div class="block">
       <h1 i18n-text="optionsCustomizeIcon"></h1>
       <div class="items">
@@ -125,6 +135,45 @@
       </div>
     </div>
 
+    <div class="block">
+      <h1 i18n-text="openManage"></h1>
+      <div class="items">
+        <label>
+          <span i18n-text="manageNewUI"></span>
+          <span class="onoffswitch">
+            <input type="checkbox" id="manage.newUI" class="slider">
+            <span></span>
+          </span>
+        </label>
+        <label>
+          <span i18n-text="manageFavicons">
+            <a data-cmd="note"
+               i18n-title="manageFaviconsHelp"
+               href="#"
+               class="svg-inline-wrapper"
+               tabindex="0">
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
+          </span>
+          <span class="onoffswitch">
+            <input type="checkbox" id="manage.newUI.favicons" class="slider">
+            <span></span>
+          </span>
+        </label>
+        <label>
+          <span i18n-text="manageFaviconsGray"></span>
+          <span class="onoffswitch">
+            <input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
+            <span></span>
+          </span>
+        </label>
+        <label>
+          <span i18n-text="manageMaxTargets"></span>
+          <input id="manage.newUI.targets" type="number" min="1" max="99">
+        </label>
+      </div>
+    </div>
+
     <div class="block" id="updates">
       <h1 i18n-text="optionsCustomizeUpdate"></h1>
       <div class="items">

options/options.js

@@ -6,7 +6,7 @@
 
 setupLivePrefs();
 setupRadioButtons();
-enforceInputRange($('#popupWidth'));
+$$('input[min], input[max]').forEach(enforceInputRange);
 setTimeout(splitLongTooltips);
 
 if (CHROME_HAS_BORDER_BUG) {