From ad969fca6ad691e026033b66c5ad50a9aaf3ffb9 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 19 Feb 2022 11:18:14 +0300
Subject: [PATCH] simplify css/html in popup (#1408)

+ reuse global checkbox-wrapper more
---
 global.css                          |   4 +
 install-usercss/install-usercss.css |   2 -
 manage/updater-ui.js                |   3 +-
 popup.html                          |  59 ++++++-------
 popup/popup.css                     | 128 +++++++++-------------------
 popup/popup.js                      |   2 +-
 6 files changed, 73 insertions(+), 125 deletions(-)

diff --git a/global.css b/global.css
index 304a88b7..926fa86f 100644
--- a/global.css
+++ b/global.css
@@ -203,6 +203,10 @@ input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
 label {
   transition: color .1s;
 }
+.checkbox-wrapper {
+  padding-left: 16px;
+  position: relative;
+}
 
 select {
   -moz-appearance: none;
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 740ca36f..b7489910 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -91,8 +91,6 @@ h1 {
   content: "v";
 }
 .checkbox-wrapper {
-  padding-left: 16px;
-  position: relative;
   box-sizing: border-box;
   display: block;
 }
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index ce4a5b8c..d411d395 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -242,9 +242,8 @@ async function showUpdateHistory(event) {
       scrollToBottom();
 
       $('#message-box-buttons button').insertAdjacentElement('afterend',
-        // TODO: add a global class for our labels
         // TODO: add a <template> or a common function to create such controls
-        $create('label', {style: 'position: relative; padding-left: 16px;'}, [
+        $create('label.checkbox-wrapper', [
           toggler =
             $create('input', {type: 'checkbox', checked: true, onchange: toggleSkipped}),
           $create('SVG:svg.svg-icon.checked',
diff --git a/popup.html b/popup.html
index 4d3d4012..1f0edfb5 100644
--- a/popup.html
+++ b/popup.html
@@ -192,44 +192,35 @@
   </div>
 
   <div class="actions" id="main-actions">
-    <div id="disable-all-wrapper">
-      <div class="main-controls">
-        <label id="disableAll-label" i18n="disableAllStyles">
-          <input id="disableAll" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </label>
-      </div>
+    <label id="disableAll-label" i18n="disableAllStyles">
+      <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 class="main-controls">
-      <div id="find-styles">
-        <a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
-           href="https://to.be.replaced.on.click/" target="_blank"></a>
-        <span id="find-styles-inline-group">
-          <label 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>
-        </span>
-      </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>
-      </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>
     </div>
+  </div>
 
-    <!-- Actions -->
-    <div id="popup-options">
-      <div class="split-btn">
-        <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>
-      <button id="popup-wiki-button"
-              i18n="linkStylusWiki, title:linkGetHelp"
-              data-href="https://github.com/openstyles/stylus/wiki"></button>
+  <div id="popup-options">
+    <div class="split-btn">
+      <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>
+    <button id="popup-wiki-button"
+            i18n="linkStylusWiki, title:linkGetHelp"
+            data-href="https://github.com/openstyles/stylus/wiki"></button>
   </div>
 
   <div id="search-results-error" class="hidden"></div>
diff --git a/popup/popup.css b/popup/popup.css
index 9d03da98..cfacb58e 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -2,6 +2,10 @@
   --inner-padding: 18px; /* checkbox + gap */
   --outer-padding: 9px;
   --hotkey-margin: 16px;
+  --red1: hsl(0, 70%, 45%);
+}
+[data-ui-theme="dark"] {
+  --red1: hsl(0, 85%, 65%);
 }
 
 html, body {
@@ -26,69 +30,33 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 .firefox .chromium-only {
   display: none;
 }
-/************ checkbox ************/
 
-.style-name:hover .checker:checked,
-.style-name:hover .checker {
-  border-color: var(--c30);
-  background-color: var(--c80);
-}
-
-#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
-  fill: hsl(0, 68%, 42%);
-}
-
-#installed.disabled + .actions #disableAll:checked {
-  border-color: hsl(0, 68%, 50%);
-}
-
-#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
-  fill: var(--bg);
-}
-
-#disableAll:hover {
-  border-color: hsl(0, 68%, 50%);
-  background-color: hsl(20, 70%, 75%);
-}
-
-#disableAll-label:hover {
-  color: hsl(0, 68%, 42%);
-}
-
-#installed.disabled + .actions #disableAll:checked:hover {
-  border-color: hsl(0, 50%, 56%);
-  background-color: hsl(0, 50%, 56%);
-}
-
-#installed .style-name .checker,
-#installed .style-name .svg-icon.checked {
-  position: absolute;
-  top: 7px;
-  left: var(--outer-padding);
-  pointer-events: none;
-}
-
-#disable-all-wrapper {
-  padding: 0.3em 0 0.6em;
-}
-
-#disable-all-wrapper .main-controls {
-  display: flex;
+#main-actions {
+  /* raise the actions above the hotkey-info */
   position: relative;
+  z-index: 4;
 }
-
-#disable-all-wrapper .main-controls label {
+#main-actions > * {
+  margin-top: .75em;
   padding-left: var(--inner-padding);
+  display: block;
+}
+
+#disableAll {
+  /*left: calc(-1 * var(--inner-padding));*/
+}
+#disableAll-label {
   position: relative;
-  transition: color .25s;
-  font-size: 12px;
+}
+.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 {
@@ -100,9 +68,19 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   cursor: pointer;
   margin-right: .5em;
 }
-#find-styles-inline-group label {
-  position: relative;
-  padding-left: 16px;
+
+.style-name:hover .checker:checked,
+.style-name:hover .checker {
+  border-color: var(--c30);
+  background-color: var(--c80);
+}
+
+#installed .style-name .checker,
+#installed .style-name .svg-icon.checked {
+  position: absolute;
+  top: 7px;
+  left: var(--outer-padding);
+  pointer-events: none;
 }
 
 .checker {
@@ -139,15 +117,10 @@ body.blocked > DIV {
   position: relative;
 }
 
-#installed.disabled .style-name {
+.all-disabled .style-name {
   text-decoration: line-through;
 }
 
-#installed.disabled + .actions #disableAll-label {
-  font-weight: bold;
-  color: firebrick;
-}
-
 #installed .actions {
   cursor: default;
 }
@@ -312,7 +285,7 @@ a.configure[target="_blank"] .svg-icon.config {
 }
 
 .not-applied:hover .style-name {
-  color: darkred;
+  color: var(--red1);
 }
 
 .frame-url::before {
@@ -479,23 +452,6 @@ a:hover .svg-icon {
   fill: var(--fg);
 }
 
-body > .actions {
-  margin-top: 0.5em;
-  /* raise the actions above the hotkey-info */
-  position: relative;
-  z-index: 4;
-}
-
-.actions > div:not(:last-child):not(#disable-all-wrapper),
-.actions > .main-controls > div:not(:last-child) {
-  margin-bottom: 0.75em;
-}
-
-.actions input,
-.actions label {
-  vertical-align: middle;
-}
-
 body.blocked #popup-manage-button + .split-btn-pedal,
 body.blocked #installed > :not(.frame),
 body.blocked .actions > .main-controls {
@@ -911,7 +867,7 @@ html:not(.styles-last) .split-btn-pedal::after {
 
 #hotkey-info div:first-child {
   flex-grow: 1;
-  padding: 0 1em;
+  padding: 0 1em 1em;
   font-size: 11px;
   overflow-y: auto;
 }
diff --git a/popup/popup.js b/popup/popup.js
index 5949cc5a..66f18781 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -86,7 +86,7 @@ async function initPopup(frames) {
 
   // action buttons
   $('#disableAll').onchange = function () {
-    installed.classList.toggle('disabled', this.checked);
+    $.rootCL.toggle('all-disabled', this.checked);
   };
   setupLivePrefs();