add a header in popup to toggle styles

Author: tophf

src/_locales/en/messages.json

@@ -1837,6 +1837,20 @@
     "message": "Toggle style",
     "description": "Label for the checkbox to enable/disable a style"
   },
+  "toggleStylesHeading": {
+    "message": "Toggle styles"
+  },
+  "toggleStylesHint": {
+    "message": "Toggle the initially enabled styles, same as ✱"
+  },
+  "toggleStylesPerm": {
+    "message": "permanently",
+    "description": "Label for controls that reads like a continuation of the heading above:\nToggle these styles\n[x] [ ] [*] permanently\n[x] [ ] [*] in this tab only"
+  },
+  "toggleStylesTab": {
+    "message": "in this tab only",
+    "description": "Label for controls that reads like a continuation of the heading above:\nToggle these styles\n[x] [ ] [*] permanently\n[x] [ ] [*] in this tab only"
+  },
   "undo": {
     "message": "Undo",
     "description": "Button label"

src/popup.html

@@ -57,6 +57,25 @@
     <p i18n="stylusUnavailableForURLdetails"></p>
   </div>
 
+  <header>
+    <details>
+      <summary i18n="toggleStylesHeading"></summary>
+      <% _.forEach([
+        /*i18n*/'toggleStylesPerm',
+        /*i18n*/'toggleStylesTab',
+      ], (text, i) => { i = i ? 't' : ''; %>
+      <div class="flex">
+        <input type="checkbox" data-toggle="+<%= i %>" i18n="title:enableStyleLabel" checked>
+        <input type="checkbox" data-toggle="-<%= i %>" i18n="title:disableStyleLabel">
+        <label i18n="+<%= text %>, title:toggleStylesHint"><input type="checkbox" data-toggle="*<%= i %>" style="-webkit-appearance: auto"></label>
+      </div>
+      <% }) %>
+    </details>
+    <a id="help" data-cmd="note" tabindex="0">
+      <i class="i-info"></i>
+    </a>
+  </header>
+
   <main id="installed" i18n="data-no-styles:noStylesForSite, data-find:findStylesOnline"></main>
 
   <div class="actions flex" id="main-actions">
@@ -66,8 +85,8 @@
         <i class=i-usercss></i>
       </label>
       <div id="write-style" class="no-stretch">
-        <header id="write-style-for" class="ellipsis"
-                i18n="data-text:writeStyleFor, data-blocked:addStyleLabel"></header>
+        <span id="write-style-for" class="ellipsis"
+                i18n="data-text:writeStyleFor, data-blocked:addStyleLabel"></span>
       </div>
     </div>
     <label id="disableAll-label" i18n="data-off:disableAllStylesOff">
@@ -90,11 +109,6 @@
                menu-uso="UserStyles"
                menu-gf="GreasyFork"></button>
     </div>
-    <button class="icon">
-      <a id="help" data-cmd="note" tabindex="0">
-        <i class="i-info"></i>
-      </a>
-    </button>
     <button id="options-btn" i18n="title:openOptions" class="icon">
       <svg class="hollow-gear" viewBox="0 0 20 20">
         <text y="100%">⚙</text>

src/popup/hotkeys.js

@@ -16,6 +16,7 @@ const MENU_KEYS = {
   ContextMenu: 1,
   Enter: 1,
 };
+const isEnabled = () => $id(kStyleIdPrefix + togglables[0]).styleMeta.enabled;
 let infoOn;
 let menuKey = 0;
 let oldBodyStyle;
@@ -33,6 +34,18 @@ window.on('keyup', /** @param {KeyboardEvent} evt */ evt => {
     menuKey = 0;
   }
 });
+$('header').on('click', evt => {
+  const el = evt.target;
+  const cmd = el.dataset.toggle;
+  if (!cmd)
+    return;
+  evt.preventDefault();
+  const cycle = cmd[0] === '*';
+  const enable = cmd[0] === '+';
+  const list = cycle ? togglables : entries;
+  if (cmd[1]) toggleStateInTab(list, cycle ? null : enable);
+  else toggleState(list, cycle ? !isEnabled() : enable);
+});
 
 export async function pause(fn, ...args) {
   window.off('keydown', onKeyDown);
@@ -89,7 +102,7 @@ function onKeyDown(evt) {
     if (!togglables.length) getTogglables(true);
     if (!togglables.length) return;
     if (!altKey) {
-      toggleState(togglables, !$id(kStyleIdPrefix + togglables[0]).styleMeta.enabled);
+      toggleState(togglables, !isEnabled());
     } else if ((toggledTab = (toggledTab + 1) % 3) < 2) {
       toggleStateInTab(togglables, !!toggledTab);
     } else {
@@ -178,14 +191,16 @@ export function initHotkeys(data) {
   getTogglables();
   const el = $('#help');
   const tAll = t('popupHotkeysInfo');
+  const tMain = tAll.replace(/\n.+$/, '');
+  const tWiki = tAll.match(/(.+)?$/)[0];
   const tMenu = t('popupHotkeysInfoMenu');
   let tTab = t('popupHotkeysInfoTab');
   if (MAC) tTab = tTab.replace('<Alt>', '<⌥>');
   el.onShowNote = showInfo;
   el.onHideNote = hideInfo;
-  el.title = `${tTab}\n${tMenu}\n${tAll}`;
-  el.dataset.title = `${tTab}\n${tMenu}\n${tAll.replace(/\n.+$/, '')}`.replace(/\n/g, '<hr>');
-  wikiText = tAll.match(/(.+)?$/)[0] || t('linkStylusWiki');
+  el.title = [tMain, tTab, tMenu].join('\n');
+  el.dataset.title = el.title.replace(/\n/g, '<hr>');
+  wikiText = tWiki || t('linkStylusWiki');
 }
 
 function hideInfo() {

src/popup/index.js

@@ -62,6 +62,8 @@ if (!__.MV3 && CHROME >= 66 && CHROME <= 69) {
   // Chrome 66-69 adds a gap, https://crbug.com/821143
   $root.style.overflow = 'overlay';
 }
+for (const el of $$('header input[style]'))
+  el.indeterminate = true;
 
 function onRuntimeMessage(msg) {
   if (!tabUrl) return;

src/popup/popup.css

@@ -35,6 +35,44 @@ body {
   display: flex;
   flex-direction: column;
 }
+header {
+  $headerBorderH: 3px;
+  padding: var(--outer-padding) var(--outer-padding) calc(var(--outer-padding) - $headerBorderH);
+  border-bottom: $headerBorderH double var(--c75);
+  display: flex;
+  align-items: center;
+  background: var(--c95);
+  user-select: none;
+  > :first-child {
+    flex: 1;
+  }
+  div {
+    margin-top: 1ex;
+  }
+  div, summary {
+    transition: opacity .25s;
+  }
+  label:hover, #help:hover i {
+    color: var(--accent-1);
+  }
+  #help {
+    i {
+      color: var(--c50);
+      font-size: 18px;
+    }
+  }
+  .touch & {
+    div {
+      margin-top: var(--outer-padding);
+    }
+    input {
+      margin-right: var(--outer-padding) !important;
+    }
+  }
+  .non-touch &:not(:hover) :is(div, summary) {
+    opacity: .7;
+  }
+}
 #installed {
   overflow-y: auto;
 }
@@ -697,15 +735,6 @@ a:hover i {
     max-width: calc(50% - var(--btn-gap) - var(--inner-padding));
   }
 }
-#help {
-  $helpIconSize: 18px;
-  line-height: $helpIconSize;
-  padding: 0 1px;
-  i {
-    color: var(--c40);
-    font-size: $helpIconSize;
-  }
-}
 button.icon {
   padding: 2px;
   border-radius: 50%;
@@ -729,6 +758,7 @@ button.icon {
     flex-direction: column;
   }
   .blocked-info,
+  header,
   #installed {
     order: 2;
   }
@@ -798,7 +828,8 @@ button.icon {
     color: var(--fg);
     background: linear-gradient(var(--c80), var(--bg));
     padding: 1px 6px 0;
-    margin: 2px;
+    margin: 0 2px;
+    line-height: 1.1;
     border: 1px solid var(--bg);
     border-radius: 4px;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);