update sidebar header appearance -

color to adapt based on sidebar document source.

JS/tooltipStyler.uc.js

@@ -1,37 +1,59 @@
 // ==UserScript==
 // @name           Tooltip Styler
-// @version        1.0
+// @version        1.1.0
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Allows you to style a tooltip in the chrome window based on
-// which node triggered it. duskFox uses this to make certain tooltips gray
-// instead of indigo, since we have gray system pages. If you want to use this
-// for custom purposes, you'll need to edit the script and add CSS to your AGENT
-// sheet like tooltip[backdrop-color"red"] {...}
+// which node triggered it. duskFox uses this to make certain tooltips and
+// popups gray instead of indigo, since we have gray system pages. If you want
+// to use this for custom purposes, you'll need to edit the script and add CSS
+// to your AGENT sheet like tooltip[backdrop-color"red"] {...}
 // @license        This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
 // ==/UserScript==
 
 (function () {
   if (!window.tooltipStylerWatching) {
+    let sidebarBox = document.getElementById("sidebar-box");
+    if (sidebarBox) sidebarBox.setAttribute("content-style", "true");
+    else {
+      SidebarUI.promiseInitialized.then(() => SidebarUI._box.setAttribute("content-style", "true"));
+    }
+    function colorForSidebar(id) {
+      switch (id) {
+        case "viewBookmarksSidebar":
+        case "viewHistorySidebar":
+        case "viewTabsSidebar":
+        case "_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action":
+          return false;
+        default:
+          return "gray";
+      }
+    }
     window.addEventListener("popupshowing", e => {
       let tooltip = e.originalTarget;
-      let node = tooltip.triggerNode;
-      if (!["tooltip", "menupopup"].includes(tooltip.localName)) return;
-      if (!node) {
-        tooltip.removeAttribute("backdrop-color");
-        return;
-      }
-      let inCC = !!node.closest("#customization-container");
-      if (
-        inCC &&
-        node.localName === "toolbarpaletteitem" &&
-        ((tooltip.localName === "tooltip" && tooltip.hasAttribute("default")) ||
-          tooltip.id === "customizationPanelItemContextMenu")
-      ) {
-        tooltip.setAttribute("backdrop-color", "gray");
-        return;
+      let color;
+      switch (tooltip.localName) {
+        case "panel":
+          if (tooltip.id === "sidebarMenu-popup") color = colorForSidebar(SidebarUI.currentID);
+          else return;
+          break;
+        case "tooltip":
+        case "menupopup":
+          let node = tooltip.triggerNode;
+          if (node?.closest("#sidebar-header")) color = colorForSidebar(SidebarUI.currentID);
+          else if (
+            node?.closest("#customization-container") &&
+            node?.localName === "toolbarpaletteitem"
+          ) {
+            if (tooltip.id === "customizationPanelItemContextMenu") color = "gray";
+            if (type === "tooltip" && tooltip.hasAttribute("default")) color = "gray";
+          }
+          break;
+        default:
+          return;
       }
-      tooltip.removeAttribute("backdrop-color");
+      if (color) tooltip.setAttribute("backdrop-color", color);
+      else tooltip.removeAttribute("backdrop-color");
     });
     window.tooltipStylerWatching = true;
   }

resources/in-content/site-mozilla.css

@@ -10,7 +10,7 @@
   :root {
     --font-family-monospace: Fira Code UC, Fira Code, SF Mono, Menlo, Consolas, Monaco, -moz-fixed,
       monospace !important;
-    --font-weight-monospace: 300 !important;
+    --font-weight-monospace: 400 !important;
   }
 
   xmp,

uc-popups.css

@@ -827,7 +827,7 @@ rtl languages. adjust the border radius accordingly */
   }
 
   .dialog-button-box > button:not([disabled="true"]):focus-visible {
-    outline-style: auto !important;
+    outline: var(--default-focusring) !important;
   }
 
   .dialog-button-box > button:not([disabled="true"]):hover:active,
@@ -863,6 +863,7 @@ rtl languages. adjust the border radius accordingly */
   dialog input:-moz-focusring,
   button:-moz-focusring {
     box-shadow: none !important;
+    outline: var(--default-focusring);
   }
 
   #checkboxContainer checkbox {

uc-sidebar.css

@@ -12,9 +12,8 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
 }
 
 #sidebar-box {
-  --lwt-sidebar-background-color: var(--ui-secondary-bg) !important;
-  --sidebar-background-color: var(--lwt-sidebar-background-color) !important;
-  --sidebar-text-color: var(--toolbar-color) !important;
+  --sidebar-background-color: var(--ui-secondary-bg) !important;
+  --sidebar-border-color: var(--uc-menu-border-color) !important;
   display: flex !important;
   position: absolute !important;
   top: 0 !important;
@@ -26,6 +25,34 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
   box-shadow: 0px 0px 8px -4px hsla(240, 4%, 0%, 0.6), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2) !important;
 }
 
+/* for addon sidebars, use gray colors for the header instead of indigo.
+for use with tooltipStyler.uc.js - won't do anything without that script. */
+#sidebar-box[content-style]:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"], [sidebarcommand="viewBookmarksSidebar"], [sidebarcommand="viewHistorySidebar"], [sidebarcommand="viewTabsSidebar"]) {
+  --sidebar-background-color: var(--in-content-bg-dark) !important;
+  --sidebar-text-color: var(--toolbar-color) !important;
+  --sidebar-border-color: var(--in-content-border-color-dim) !important;
+  --arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
+  --arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);
+  --arrowpanel-dimmed-even-further: color-mix(in srgb, var(--uc-toolbar-color) 15%, transparent);
+  --button-bgcolor: var(--arrowpanel-dimmed);
+  --button-hover-bgcolor: var(--arrowpanel-dimmed-further);
+  --button-active-bgcolor: var(--arrowpanel-dimmed-even-further);
+}
+
+#sidebar-header {
+  top: 0 !important;
+  padding: 6px !important;
+  border-bottom: 0px solid transparent !important;
+  background-color: var(--sidebar-background-color) !important;
+  color: inherit !important;
+  font-size: 1.2em !important;
+}
+
+#sidebar-box[content-style]:is([sidebarcommand="viewBookmarksSidebar"], [sidebarcommand="viewHistorySidebar"], [sidebarcommand="viewTabsSidebar"])
+  #sidebar-header {
+  padding-bottom: 3px !important;
+}
+
 #sidebar-box[hidden] {
   display: none !important;
 }
@@ -35,18 +62,14 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
   right: 0 !important;
 }
 
-#sidebar-header {
-  top: 0 !important;
-}
-
 #sidebar,
 #sidebar-search-container,
 .sidebar-panel {
-  --lwt-sidebar-background-color: inherit !important;
   --sidebar-background-color: inherit !important;
   --sidebar-text-color: inherit !important;
+  --sidebar-border-color: inherit !important;
   background-color: var(--sidebar-background-color) !important;
-  color: var(--toolbar-color) !important;
+  color: var(--sidebar-text-color) !important;
 }
 
 #sidebar {
@@ -58,15 +81,6 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
   background-color: inherit !important;
 }
 
-#sidebar-header {
-  padding: 6px !important;
-  padding-bottom: 3px !important;
-  border-bottom: 0px solid transparent !important;
-  background-color: var(--ui-secondary-bg) !important;
-  color: inherit !important;
-  font-size: 1.2em !important;
-}
-
 #sidebar-switcher-target {
   min-height: 28px !important;
   min-width: 28px !important;

uc-variables.css

@@ -67,7 +67,7 @@ menupopup {
   --toolbarbutton-hover-background: var(--uc-toolbarbutton-hover-background) !important;
   --toolbarbutton-active-background: var(--uc-toolbarbutton-active-background) !important;
   --toolbarbutton-checked-active-background: var(--uc-toolbarbutton-checked-active-background);
-  --default-focusring: auto !important;
+  --default-focusring: var(--global-focus-outline) !important;
   --button-bgcolor: var(--uc-arrowpanel-faint) !important;
   --button-hover-bgcolor: var(--uc-arrowpanel-dimmed) !important;
   --button-active-bgcolor: var(--uc-arrowpanel-dimmed-further) !important;

userChrome.au.css

@@ -537,6 +537,8 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
   #customizationPaletteItemContextMenu::part(content),
   #customizationPanelItemContextMenu[backdrop-color="gray"],
   #customizationPanelItemContextMenu[backdrop-color="gray"]::part(content),
+  #sidebarMenu-popup[backdrop-color="gray"],
+  #sidebarMenu-popup[backdrop-color="gray"]::part(content),
   window#alertNotification #alertSettings :is(menupopup, panel)::part(content) {
     --arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
     --arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);