improve power-off switch (#1412)

* show it in manager/editor when active
* reflect the state in the label when active

_locales/en/messages.json

@@ -336,7 +336,11 @@
   },
   "disableAllStyles": {
     "message": "Turn all styles off",
-    "description": "Label for the checkbox that turns all enabled styles off."
+    "description": "Label for the checkbox that turns all styles off."
+  },
+  "disableAllStylesOff": {
+    "message": "Styles are turned off",
+    "description": "Label for the checkbox that turns all styles off when it's checked."
   },
   "disableStyleLabel": {
     "message": "Disable",

edit.html

@@ -271,6 +271,10 @@
             <input type="checkbox" id="editor.livePreview">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
+          <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
+            <input id="disableAll" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
           <span id="preview-errors" hidden>!</span>
         </div>
       </section>

edit/edit.css

@@ -148,6 +148,7 @@ label {
   margin-top: 2px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   line-height: 16px;
 }
 

global-dark.css

@@ -23,6 +23,7 @@
     --accent-1: hsl(180, 100%, 95%);
     --accent-3: hsl(180, 30%, 18%);
     --input-bg: var(--c95);
+    --red1: hsl(0, 85%, 55%);
   }
   textarea,
   input[type=url],

global.css

@@ -33,6 +33,7 @@
   --accent-1: hsl(180, 100%, 15%);
   --accent-2: hsl(180, 50%, 40%);
   --accent-3: hsl(180, 40%, 69%);
+  --red1: hsl(0, 70%, 45%);
 }
 body {
   font: normal 12px var(--family);
@@ -307,6 +308,26 @@ summary {
   position: absolute;
 }
 
+html:not(.all-disabled) body:not(#stylus-popup) #disableAll-label:not([data-persist]) {
+  display: none;
+}
+html:not(.all-disabled) #disableAll-label::before {
+  content: attr(data-on);
+}
+.all-disabled #disableAll-label::before {
+  content: attr(data-off);
+}
+.all-disabled #disableAll-label {
+  font-weight: bold;
+  color: var(--red1);
+}
+.all-disabled #disableAll-label .svg-icon {
+  fill: var(--red1);
+}
+.all-disabled #disableAll {
+  border-color: var(--red1);
+}
+
 :focus,
 .CodeMirror-focused,
 /* Allowing click outline on text/search inputs and textareas */

js/dom-on-load.js

@@ -1,6 +1,7 @@
 /* global $$ $ $create focusAccessibility getEventKeyName moveFocus */// dom.js
 /* global CHROME clamp debounce */// toolbox.js
 /* global msg */
+/* global prefs */
 /* global t */// localization.js
 'use strict';
 
@@ -33,6 +34,9 @@
       }
     }
   }
+  prefs.subscribe('disableAll', () => {
+    $('#disableAll-label').dataset.persist = ''; // avoids hiding if already shown
+  });
 
   function changeFocusedInputOnWheel(event) {
     const el = document.activeElement;

js/dom.js

@@ -355,6 +355,7 @@ async function showSpinner(parent) {
 }
 
 function toggleDataset(el, prop, state) {
+  if (!el) return;
   const wasEnabled = el.dataset[prop] != null; // avoids mutating DOM unnecessarily
   if (state) {
     if (!wasEnabled) el.dataset[prop] = '';
@@ -412,6 +413,10 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
 
 const dom = {};
 
+prefs.subscribe('disableAll', (_, val) => {
+  $.rootCL.toggle('all-disabled', val);
+}, {runNow: true});
+
 prefs.ready.then(() => {
   waitForSelector('details[data-pref]', {
     recur(elems) {

manage.html

@@ -154,6 +154,11 @@
 <div id="header">
   <h1 id="manage-heading" i18n="manageHeading"></h1>
 
+  <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
+    <input id="disableAll" type="checkbox">
+    <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+  </label>
+
   <div id="manage-settings">
     <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">

popup.html

@@ -192,7 +192,7 @@
   </div>
 
   <div class="actions" id="main-actions">
-    <label id="disableAll-label" i18n="disableAllStyles">
+    <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
       <input id="disableAll" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>

popup/popup.css

@@ -49,16 +49,6 @@ body:not(.blocked) .if-blocked,
   width: fit-content;
   position: relative;
 }
-.all-disabled #disableAll {
-  border-color: var(--red1);
-}
-.all-disabled #disableAll-label {
-  font-weight: bold;
-  color: var(--red1);
-}
-.all-disabled #disableAll-label .svg-icon {
-  fill: var(--red1);
-}
 
 #no-styles {
   padding: 6px var(--outer-padding);

popup/popup.js

@@ -83,11 +83,6 @@ function toggleSideBorders(_key, state) {
 /** @param {chrome.webNavigation.GetAllFrameResultDetails[]} frames */
 async function initPopup(frames) {
   prefs.subscribe('popupWidth', setPopupWidth, {runNow: true});
-
-  // action buttons
-  $('#disableAll').onchange = function () {
-    $.rootCL.toggle('all-disabled', this.checked);
-  };
   setupLivePrefs();
 
   const elFind = $('#find-styles-btn');