From 24aaf2fdb8b9335375c54b5cd0ec782571cc732d Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 31 Mar 2022 12:25:37 +0300
Subject: [PATCH] improve power-off switch (#1412)

* show it in manager/editor when active
* reflect the state in the label when active
---
 _locales/en/messages.json |  6 +++++-
 edit.html                 |  4 ++++
 edit/edit.css             |  1 +
 global-dark.css           |  1 +
 global.css                | 21 +++++++++++++++++++++
 js/dom-on-load.js         |  4 ++++
 js/dom.js                 |  5 +++++
 manage.html               |  5 +++++
 popup.html                |  2 +-
 popup/popup.css           | 10 ----------
 popup/popup.js            |  5 -----
 11 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1661336a..e302037b 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/edit.html b/edit.html
index 09870371..c4812fdb 100644
--- a/edit.html
+++ b/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>
diff --git a/edit/edit.css b/edit/edit.css
index fc66d802..61cb136e 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -148,6 +148,7 @@ label {
   margin-top: 2px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   line-height: 16px;
 }
 
diff --git a/global-dark.css b/global-dark.css
index e9c7a036..7c7f6a84 100644
--- a/global-dark.css
+++ b/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],
diff --git a/global.css b/global.css
index 6f782515..6dec45fe 100644
--- a/global.css
+++ b/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 */
diff --git a/js/dom-on-load.js b/js/dom-on-load.js
index 8358ca38..912befda 100644
--- a/js/dom-on-load.js
+++ b/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;
diff --git a/js/dom.js b/js/dom.js
index f7788698..308d847b 100644
--- a/js/dom.js
+++ b/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) {
diff --git a/manage.html b/manage.html
index d1ccede7..0d2ae318 100644
--- a/manage.html
+++ b/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">
diff --git a/popup.html b/popup.html
index 18096b63..f1db2715 100644
--- a/popup.html
+++ b/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>
diff --git a/popup/popup.css b/popup/popup.css
index ce038dcb..e5c0f2ff 100644
--- a/popup/popup.css
+++ b/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);
diff --git a/popup/popup.js b/popup/popup.js
index 6f28b39c..8a7b650d 100644
--- a/popup/popup.js
+++ b/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');