simplify style finder in sidebar to checkbox

Author: tophf

src/js/consts.js

@@ -18,7 +18,6 @@ export const kDark = 'dark';
 export const kDisableAll = 'disableAll';
 export const kEditorSettings = 'editorSettings';
 export const kExclusions = 'exclusions';
-export const kFind = 'find';
 export const kHocused = 'focusedViaClick';
 export const kHocusedAttr = 'data-focused-via-click';
 export const kInclusions = 'inclusions';

src/js/prefs.js

@@ -170,9 +170,9 @@ const defaults = {
   'popup.sidePanel': false,
   'popup.sidePanel.config': 20,
   'popup.sidePanel.editor': false,
-  'popup.sidePanel.finder': 4,
+  'popup.sidePanel.finder': false,
   'popup.sidePanel.manager': false,
-  'popup.sidePanel.options': false,
+  'popup.sidePanel.options': true,
   'popupWidth': 246,              // popup width in pixels
   'popupWidthMax': 280,           // popup width in pixels
 

src/options.html

@@ -257,12 +257,8 @@ <h2 i18n="optionSidePanelActions">
             <input type="checkbox" id="popup.sidePanel.options" class="slider">
           </label>
           <label show-if="!popup.sidePanel">
-            <p i18n="search">
-              <a class=icon data-cmd="note" i18n="title:optionSidePanelNumberHint" tabindex="0">
-                <i class=i-info></i>
-              </a>
-            </p>
-            <input type="number" id="popup.sidePanel.finder" min="-1" max="99">
+            <p i18n="search"></p>
+            <input type="checkbox" id="popup.sidePanel.finder" class="slider">
           </label>
           <label show-if="!popup.sidePanel">
             <p i18n="optionConfigSidePanel">

src/popup/events.js

@@ -1,10 +1,10 @@
-import {kFind, kSidebar, kStyleIdPrefix, UCD} from '@/js/consts';
+import {kSidebar, kStyleIdPrefix, UCD} from '@/js/consts';
 import {isSidebar} from '@/js/dom';
 import {configDialog} from '@/js/dom-util';
 import {template} from '@/js/localization';
 import {API} from '@/js/msg-api';
 import {__values, subscribe} from '@/js/prefs';
-import {CHROME, FIREFOX, MAC} from '@/js/ua';
+import {CHROME, MAC} from '@/js/ua';
 import {t} from '@/js/util';
 import {getActiveTab, browserSidebar} from '@/js/util-webext';
 import {tabId, tabUrl} from '.';
@@ -58,7 +58,7 @@ const GlobalClick = {
 export const styleFinder = {};
 export const tSideHint = '\n' + t('popupSidePanelOpenHint');
 export const pSideConfig = 'popup.sidePanel.config';
-const pSideFinder = 'popup.sidePanel.finder';
+export const pSideFinder = 'popup.sidePanel.finder';
 const pSideEditor = 'popup.sidePanel.editor';
 const pSideManager = 'popup.sidePanel.manager';
 const pSideOptions = 'popup.sidePanel.options';
@@ -199,15 +199,10 @@ export async function openOptions(event, entry, button) {
 }
 
 export async function openStyleFinder(event, entry, button) {
-  event = event === kSidebar ? event :
-    !isSidebar && browserSidebar
-      ? button === 2 ? 0 : __values[pSideFinder]
-      : undefined;
-  if (__.BUILD !== 'chrome' && FIREFOX && event >= 0)
-    return sidebarOpen(`popup.html?${kFind}=${tabId}`);
+  if (browserSidebar && (button === 2 || __values[pSideFinder]))
+    return sidebarOpen(`popup.html?${pSideFinder}`);
   this.disabled = true;
   if (!styleFinder.on) await import('./search');
-  styleFinder[kSidebar] = event;
   styleFinder.inline();
 }
 
@@ -221,7 +216,7 @@ export async function openURLandHide(event) {
     close();
 }
 
-export async function sidebarOpen(path, keepOpen) {
+export async function sidebarOpen(path) {
   path += (path.includes('?') ? '&' : '?') + kSidebar;
   if (isSidebar) {
     location.assign(path);
@@ -234,8 +229,7 @@ export async function sidebarOpen(path, keepOpen) {
     browserSidebar.setPanel({tabId, panel: path});
     await browserSidebar.open();
   }
-  if (!keepOpen && !isSidebar)
-    close();
+  close();
 }
 
 function updateTitle(el, alwaysSidebar) {

src/popup/index.js

@@ -1,5 +1,5 @@
 import '@/js/dom-init';
-import {kAboutBlank, kFind, kPopup, kSidebar, kStyleIdPrefix} from '@/js/consts';
+import {kAboutBlank, kPopup, kStyleIdPrefix} from '@/js/consts';
 import {isSidebar, urlParams} from '@/js/dom';
 import {setupLivePrefs} from '@/js/dom-util';
 import {sanitizeHtml, template} from '@/js/localization';
@@ -10,7 +10,7 @@ import {isDark, onDarkChanged} from '@/js/themer';
 import {CHROME, FIREFOX, MAC, MOBILE, OPERA} from '@/js/ua';
 import {clamp, sleep0, t} from '@/js/util';
 import {getActiveTab, ignoreChromeError} from '@/js/util-webext';
-import {handleUpdate, openStyleFinder, styleFinder} from './events';
+import {handleUpdate, openStyleFinder, pSideFinder, styleFinder} from './events';
 import {initHotkeys} from './hotkeys';
 import {createWriterElement, reSort, showStyles, updateStateIcon, writerIcon} from './render';
 import '@/css/onoffswitch.css';
@@ -36,7 +36,7 @@ let prevHeight;
     return;
   prevHeight = Math.max(innerHeight, 150);
   if (!MOBILE) window.on('resize', onWindowResize);
-  if (urlParams.has(kFind)) openStyleFinder(kSidebar);
+  if (urlParams.has(pSideFinder)) openStyleFinder();
   (function connectPort() {
     ignoreChromeError();
     port = chrome.runtime.connect({name: kPopup + ':' + tabId});

src/popup/search.js

@@ -1,16 +1,16 @@
-import {kFind, kSidebar, kStyleIdPrefix, UCD} from '@/js/consts';
-import {$create, $toggleDataset, urlParams} from '@/js/dom';
+import {kStyleIdPrefix, UCD} from '@/js/consts';
+import {$create, $toggleDataset, isSidebar} from '@/js/dom';
 import {setupLivePrefs, showSpinner} from '@/js/dom-util';
 import {breakWord, formatDate, htmlToTemplateCache, templateCache} from '@/js/localization';
 import {onConnect} from '@/js/msg';
 import {API} from '@/js/msg-api';
 import * as prefs from '@/js/prefs';
 import * as URLS from '@/js/urls';
 import {
-  clipString, debounce, deepCopy, sleep, stringAsRegExp, stringAsRegExpStr, t, tryRegExp, tryURL,
+  clipString, debounce, sleep, stringAsRegExp, stringAsRegExpStr, t, tryRegExp, tryURL,
 } from '@/js/util';
-import {tabId, tabUrl, tabUrlSupported} from '.';
-import {configure, openURLandHide, sidebarOpen, styleFinder} from './events';
+import {tabUrl, tabUrlSupported} from '.';
+import {configure, openURLandHide, styleFinder} from './events';
 import './search.css';
 import html from './search.html';
 
@@ -27,6 +27,7 @@ const USW_ICON = $create('img', {
   title: URLS.usw,
 });
 const STYLUS_CATEGORY = 'chrome-extension';
+const PAGE_LENGTH = isSidebar ? 250 : 100;
 // update USO style install counter if the style isn't uninstalled immediately
 const PINGBACK_DELAY = 5e3;
 const USO_AUTO_PIC_SUFFIX = '-after.png';
@@ -75,7 +76,6 @@ let searchGlobals = !tabUrlSupported || $searchGlobals.checked;
 let query = [];
 let order = prefs.__values['popup.findSort'];
 let scrollToFirstResult = true;
-let PAGE_LENGTH = 100;
 let displayedPage = 1;
 let totalPages = 1;
 let ready;
@@ -226,29 +226,11 @@ function errorIfNoneFound() {
 
 async function start({keepYears} = {}) {
   try {
-    const sidebar = styleFinder[kSidebar];
-    if (sidebar === kSidebar) {
-      const id = kFind + urlParams.get(kFind);
-      for (const v of chrome.extension.getViews({type: 'popup'})) {
-        if (Array.isArray(v[id])) {
-          [results, index, imgType] = deepCopy(v[id]);
-          $('#pct').remove();
-          v.close();
-          if (results)
-            PAGE_LENGTH = 250;
-          break;
-        }
-      }
-    }
-    results ??= [];
+    results = [];
     for (let retry = 0; !results.length && retry <= 2; retry++) {
       results = await search({retry});
     }
     if (results.length) {
-      if (sidebar >= 0 && results.length >= sidebar) {
-        window[kFind + tabId] = [results, index, imgType];
-        return sidebarOpen(`popup.html?${kFind}=${tabId}`, true);
-      }
       const info = await API.styles.getRemoteInfo();
       for (const r of results) {
         [r._styleId, r._styleVars] = info[r.i] || [];
@@ -587,14 +569,10 @@ async function fetchIndex() {
     elNote.style.opacity = 0;
     start();
   });
-  if (styleFinder[kSidebar] >= 0) {
-    await indexing;
-  } else {
-    // Polyfilling a leaky Promise.race, https://crbug.com/42203149
-    await new Promise((resolve, reject) => {
-      for (const job of jobs) job.then(resolve, reject);
-    });
-  }
+  // Polyfilling a leaky Promise.race, https://crbug.com/42203149
+  await new Promise((resolve, reject) => {
+    for (const job of jobs) job.then(resolve, reject);
+  });
   return index;
 }