add USA/USW/US/GF splitter to Find styles

_locales/en/messages.json

@@ -451,18 +451,6 @@
     "message": "Find styles",
     "description": "Text for a link that gets a list of styles for the current site"
   },
-  "findStylesForSite": {
-    "message": "Find more styles for this site",
-    "description": "Text for a link that gets a list of styles for the current site"
-  },
-  "findStylesInline": {
-    "message": "Inline",
-    "description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
-  },
-  "findStylesInlineTooltip": {
-    "message": "Display search results inside this window.",
-    "description": "Text for a checkbox that displays search results within the Stylus popup."
-  },
   "genericAdd": {
     "message": "Add",
     "description": "Used in various places for an action that adds something"

edit/settings.css

@@ -23,9 +23,6 @@
 .style-settings input:disabled ~ label {
   opacity: .5;
 }
-.style-settings .rel {
-  position: relative;
-}
 .style-settings .w100 {
   display: block;
   width: 100%;

global.css

@@ -297,6 +297,12 @@ summary {
 .hidden {
   display: none !important;
 }
+.rel {
+  position: relative;
+}
+.abs {
+  position: absolute;
+}
 
 :focus,
 .CodeMirror-focused,

js/prefs.js

@@ -42,7 +42,6 @@
     'popup.stylesFirst': true,      // display enabled styles before disabled styles
     'popup.autoResort': false,      // auto resort styles after toggling
     'popup.borders': false,         // add white borders on the sides
-    'popup.findStylesInline': true, // use the inline style search
     /** @type {'n' | 'u' | 't' | 'w' | 'r'} see IndexEntry */
     'popup.findSort': 'u',          // the inline style search sort order
 

popup.html

@@ -196,15 +196,6 @@
       <input id="disableAll" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>
-    <div id="find-styles">
-      <a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
-         href="https://to.be.replaced.on.click/" target="_blank"></a>
-      <label id="find-styles-inline-group" class="checkbox-wrapper" i18n="title:findStylesInlineTooltip">
-        <input id="popup.findStylesInline" class="checker" type="checkbox">
-        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        <span i18n="findStylesInline"></span>
-      </label>
-    </div>
     <div id="write-style">
       <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
       <span id="write-style-for" i18n="writeStyleFor"></span>
@@ -212,15 +203,25 @@
   </div>
 
   <div id="popup-options">
-    <div class="split-btn">
+    <div class="split-btn" id="manage-split">
       <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
               data-href="manage.html"></button
       ><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
     </div>
-    <button id="popup-options-button" i18n="openOptions"></button>
+    <div class="split-btn" id="find-split">
-    <button id="popup-wiki-button"
+      <button id="find-styles-btn" i18n="findStyles"></button
-            i18n="linkStylusWiki, title:linkGetHelp"
+      ><button class="split-btn-pedal"
-            data-href="https://github.com/openstyles/stylus/wiki"></button>
+               menu-usoa="UserStyles Archive"
+               menu-usw="UserStyles World"
+               menu-uso="UserStyles"
+               menu-gf="GreasyFork"></button>
+    </div>
+    <button id="options-btn" i18n="title:openOptions" class="rel">
+      <svg class="svg-icon config abs"><use xlink:href="#svg-icon-config"></use></svg>
+    </button>
+    <a href="https://github.com/openstyles/stylus/wiki" target="_blank">
+      <button id="popup-wiki-button" i18n="linkStylusWiki, title:linkGetHelp"></button>
+    </a>
   </div>
 
   <div id="search-results-error" class="hidden"></div>

popup/popup.css

@@ -64,11 +64,6 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   font-weight: bold;
 }
 
-#find-styles-link {
-  cursor: pointer;
-  margin-right: .5em;
-}
-
 .style-name:hover .checker:checked,
 .style-name:hover .checker {
   border-color: var(--c30);
@@ -613,7 +608,7 @@ body.blocked #main-actions > :not(#disableAll-label) {
 #popup-options .split-btn > :first-child {
   width: calc(100% - 16px);
 }
-.blocked #popup-options .split-btn > :first-child {
+.blocked #popup-options > * > :first-child {
   width: 100%;
 }
 #popup-options button {
@@ -626,12 +621,30 @@ body.blocked #main-actions > :not(#disableAll-label) {
   margin-right: 4px;
 }
 #popup-options > *,
-#popup-manage-button {
+#popup-options .split-btn > :first-child {
   /* several languages have labels of wildly different lengths so we try to maintain the proportion */
   flex: 1 1 auto;
   min-width: 2em;
 }
-html:not(.styles-last) #popup-manage-button ~ .split-btn-menu {
+.blocked #find-split,
+.blocked #options-btn svg,
+body:not(.blocked) #popup-options a[href*="wiki"] {
+  display: none;
+}
+#options-btn::after {
+  content: '\A0';
+}
+.blocked #options-btn::after {
+  content: attr(title);
+}
+#options-btn svg {
+  left: 0;
+  right: 0;
+  margin: auto;
+  fill: transparent;
+  stroke: currentColor;
+}
+html:not(.styles-last) #popup-options .split-btn-menu {
   bottom: 0;
   transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */
 }

popup/popup.js

@@ -90,27 +90,24 @@ async function initPopup(frames) {
   };
   setupLivePrefs();
 
-  Object.assign($('#find-styles-link'), {
+  const elFind = $('#find-styles-btn');
-    href: URLS.usoArchive + 'browse/styles',
+  elFind.onclick = async e => {
-    async onclick(e) {
+    elFind.disabled = e.type === 'click';
-      e.preventDefault();
     await require(['/popup/search']);
-      Events.searchOnClick(this, e);
+    Events.searchSite(e);
-    },
+  };
-  });
+  elFind.on('split-btn', elFind.onclick);
 
   Object.assign($('#popup-manage-button'), {
     onclick: Events.openManager,
     oncontextmenu: Events.openManager,
   }).on('split-btn', Events.openManager);
 
-  $('#popup-options-button').onclick = () => {
+  $('#options-btn').onclick = () => {
     API.openManage({options: true});
     window.close();
   };
 
-  $('#popup-wiki-button').onclick = Events.openURLandHide;
-
   $('#confirm').onclick = function (e) {
     const {id} = this.dataset;
     switch (e.target.dataset.cmd) {

popup/search.js

@@ -2,7 +2,7 @@
 /* global $entry tabURL */// popup.js
 /* global API */// msg.js
 /* global Events */
-/* global FIREFOX URLS debounce download tryCatch */// toolbox.js
+/* global FIREFOX URLS debounce download tryURL */// toolbox.js
 /* global prefs */
 /* global t */// localization.js
 'use strict';
@@ -75,34 +75,26 @@
   const show = sel => $classList(sel).remove('hidden');
   const hide = sel => $classList(sel).add('hidden');
 
-  Object.assign(Events, {
+  Events.searchSite = event => {
-    /**
-     * @param {HTMLAnchorElement} a
-     * @param {Event} event
-     */
-    searchOnClick(a, event) {
-      if (!prefs.get('popup.findStylesInline') || dom.container) {
     // use a less specific category if the inline search wasn't used yet
     if (!category) calcCategory({retry: 1});
-        const search = [
+    const add = (prefix, str) => str ? prefix + str : '';
-          category ? '#' + category : '',
+    const where = event.detail;
-          $('#search-query').value,
+    const q = encodeURIComponent($('#search-query').value.trim());
-        ].filter(Boolean).join(' ');
+    const catQ = category + add('+', q);
-        a.search = search ? 'search=' + encodeURIComponent(search) : '';
+    const href =
-        Events.openURLandHide.call(a, event);
+      where === 'uso' &&
-        return;
+        `${URLS.uso}styles/browse${q ? `?search_terms=${catQ}` : `/${category}`}` ||
-      }
+      where === 'usoa' &&
-      a.textContent = a.title;
+        `${URLS.usoArchive}browse/styles?search=%23${catQ}` ||
-      a.title = '';
+      where === 'usw' &&
-      init();
+        `${URLS.usw}search?q=${catQ}` ||
-      calcCategory();
+      where === 'gf' &&
-      ready = start();
+        'https://greasyfork.org/' + ($.root.lang.split('-')[0] || 'en') +
-    },
+        `/scripts/by-site/${tryURL(tabURL).hostname}?language=css${add('&q=', q)}`;
-  });
+    Events.openURLandHide.call({href}, event);
+  };
 
-  function init() {
-    setTimeout(() => document.body.classList.add('search-results-shown'));
-    hide('#find-styles-inline-group');
   $('#search-globals').onchange = function () {
     searchGlobals = this.checked;
     ready = ready.then(start);
@@ -172,7 +164,9 @@
       renderActionButtons(id, style.id);
     }
   });
-  }
+
+  calcCategory();
+  ready = start();
 
   function next() {
     displayedPage = Math.min(totalPages, displayedPage + 1);
@@ -196,9 +190,7 @@
   }
 
   async function start() {
-    show(dom.container);
+    resetUI.timer = setTimeout(resetUI, 500);
-    show(dom.list);
-    hide(dom.error);
     try {
       results = [];
       for (let retry = 0; !results.length && retry <= 2; retry++) {
@@ -217,6 +209,15 @@
     } catch (reason) {
       error(reason);
     }
+    clearTimeout(resetUI.timer);
+    resetUI();
+  }
+
+  function resetUI() {
+    document.body.classList.add('search-results-shown');
+    show(dom.container);
+    show(dom.list);
+    hide(dom.error);
   }
 
   function render() {
@@ -481,9 +482,9 @@
    * @returns {boolean} true if the category has actually changed
    */
   function calcCategory({retry} = {}) {
-    const u = tryCatch(() => new URL(tabURL));
+    const u = tryURL(tabURL);
     const old = category;
-    if (!u) {
+    if (!u.href) {
       // Invalid URL
       category = '';
     } else if (u.protocol === 'file:') {