From 6ff68aaa74497a5c9f04c72daf704541e0bbb37e Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 21 Feb 2022 02:24:34 +0300
Subject: [PATCH] simplify conditional css in popup

---
 popup.html      | 12 +++++++-----
 popup/popup.css | 28 ++++++++--------------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/popup.html b/popup.html
index bded0f35..18096b63 100644
--- a/popup.html
+++ b/popup.html
@@ -196,7 +196,7 @@
       <input id="disableAll" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>
-    <div id="write-style">
+    <div id="write-style" class="if-not-blocked">
       <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
       <span id="write-style-for" i18n="writeStyleFor"></span>
     </div>
@@ -206,9 +206,9 @@
     <div class="split-btn" id="manage-split">
       <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
               data-href="manage.html"></button
-      ><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
+      ><button class="if-not-blocked split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
     </div>
-    <div class="split-btn" id="find-split">
+    <div class="split-btn if-not-blocked" id="find-split">
       <button id="find-styles-btn" i18n="findStyles"></button
       ><button class="split-btn-pedal"
                menu-usoa="UserStyles Archive"
@@ -217,9 +217,11 @@
                menu-gf="GreasyFork"></button>
     </div>
     <button id="options-btn" i18n="title:openOptions" class="rel">
-      <svg class="svg-icon config abs"><use xlink:href="#svg-icon-config"></use></svg>
+      <svg class="if-not-blocked abs svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
+      <span class="if-not-blocked">&nbsp;</span>
+      <span class="if-blocked" i18n="openOptions"></span>
     </button>
-    <a href="https://github.com/openstyles/stylus/wiki" target="_blank">
+    <a class="if-blocked" href="https://github.com/openstyles/stylus/wiki" target="_blank">
       <button id="popup-wiki-button" i18n="linkStylusWiki, title:linkGetHelp"></button>
     </a>
   </div>
diff --git a/popup/popup.css b/popup/popup.css
index 63a9be1b..8b690a32 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -27,8 +27,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   padding-right: var(--outer-padding);
 }
 
+body:not(.blocked) .if-blocked,
+.blocked .if-not-blocked,
+.blocked #installed > :not(.frame),
 .firefox .chromium-only {
-  display: none;
+  display: none !important;
 }
 
 #main-actions {
@@ -439,12 +442,6 @@ a:hover .svg-icon {
   fill: var(--fg);
 }
 
-body.blocked #popup-manage-button + .split-btn-pedal,
-body.blocked #installed > :not(.frame),
-body.blocked #main-actions > :not(#disableAll-label) {
-  display: none;
-}
-
 /* Never shown, but can be enabled with a style */
 
 .entry .actions > .enable,
@@ -601,9 +598,11 @@ body.blocked #main-actions > :not(#disableAll-label) {
 /* action buttons */
 
 #popup-options {
+  --btn-gap: 4px;
   display: flex;
   flex-direction: row;
   padding: var(--outer-padding) 1px;
+  margin-right: calc(-1 * var(--btn-gap));
 }
 #popup-options .split-btn > :first-child {
   width: calc(100% - 16px);
@@ -617,8 +616,8 @@ body.blocked #main-actions > :not(#disableAll-label) {
   text-overflow: ellipsis;
   padding: 2px 4px;
 }
-#popup-options > :nth-last-child(n + 2) {
-  margin-right: 4px;
+#popup-options > * {
+  margin-right: var(--btn-gap);
 }
 #popup-options > *,
 #popup-options .split-btn > :first-child {
@@ -626,17 +625,6 @@ body.blocked #main-actions > :not(#disableAll-label) {
   flex: 1 1 auto;
   min-width: 2em;
 }
-.blocked #find-split,
-.blocked #options-btn svg,
-body:not(.blocked) #popup-options a[href*="wiki"] {
-  display: none;
-}
-#options-btn::after {
-  content: '\A0';
-}
-.blocked #options-btn::after {
-  content: attr(title);
-}
 #options-btn svg {
   left: 0;
   right: 0;