(JS) add tooltipStyler.uc.js

(CSS) update styles for customization container popups.

JS/tooltipStyler.uc.js

@@ -0,0 +1,38 @@
+// ==UserScript==
+// @name           Tooltip Styler
+// @version        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"] {...}
+// @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) {
+    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;
+      }
+      tooltip.removeAttribute("backdrop-color");
+    });
+    window.tooltipStylerWatching = true;
+  }
+})();

README.md

@@ -1138,6 +1138,10 @@ But if you also want rounded corners and borders, that won't be an option. A goo
 
 </details>
 
+#### [Tooltip Styler](/JS/tooltipStyler.uc.js):
+
+✨ 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. So it's configured for duskFox out of the box. If you want to use this script for custom purposes, you'll need to edit the script and add corresponding CSS to your [_agent_ sheet](userChrome.ag.css), such as `tooltip[backdrop-color"red"] { background-color: blue }`
+
 #### [Tracking Protection Middle Click Toggle](/JS/trackingProtectionMiddleClickToggle.uc.js):
 
 Middle click the tracking protection icon in the urlbar to enable/disable tracking protection on the active tab. A minor change, but it's faster than left-clicking to open the panel, then clicking the actual toggle switch.

resources/in-content/site-github.css

@@ -13,14 +13,15 @@ which requires Stylus. don't use this stylesheet if you don't have that theme, i
   .rgh-monospace-textareas textarea {
     font-family: Fira Code UC, Fira Code, SF Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo,
       Consolas, Liberation Mono, monospace !important;
-    font-weight: 300 !important;
+/*     font-weight: 300 !important; */
     font-size: 14px !important;
   }
 
+  tt, code, samp,
   .input-monospace {
     font-family: Fira Code UC, Fira Code, SF Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo,
       Consolas, Liberation Mono, monospace !important;
-    font-weight: 300 !important;
+/*     font-weight: 300 !important; */
   }
 
   .blob-code-inner,
@@ -32,7 +33,7 @@ which requires Stylus. don't use this stylesheet if you don't have that theme, i
     display: block !important; */
     font-family: Fira Code UC, Fira Code, SF Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo,
       Consolas, Liberation Mono, monospace !important;
-    font-weight: 300 !important;
+/*     font-weight: 300 !important; */
     font-size: 14px !important;
   }
 

userChrome.ag.css

@@ -462,6 +462,7 @@ tooltip > description {
 }
 
 /* dark gray tooltips for some system pages */
+tooltip[backdrop-color="gray"],
 window#places tooltip,
 window#unknownContentTypeWindow tooltip {
   --tooltip-bgcolor: var(--in-content-bg-darker, rgb(21, 21, 23)) !important;

userChrome.au.css

@@ -168,9 +168,9 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     margin-bottom: revert;
   }
 
-  #BMB_bookmarksPopup::part(arrowscrollbox),
-  #BMB_bookmarksPopup menupopup::part(arrowscrollbox),
-  #BMB_bookmarksPopup menupopup[placespopup="true"]::part(arrowscrollbox) {
+  #BMB_bookmarksPopup::part(content),
+  #BMB_bookmarksPopup menupopup::part(content),
+  #BMB_bookmarksPopup menupopup[placespopup="true"]::part(content) {
     padding: var(--menupopup-inner-padding);
   }
 
@@ -278,20 +278,20 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
   }
 
   /* padding and margins for context menus */
-  menupopup::part(arrowscrollbox),
-  #ContentSelectDropdown > menupopup::part(arrowscrollbox),
+  menupopup::part(content),
+  #ContentSelectDropdown > menupopup::part(content),
   #PlacesToolbar menupopup::part(content) {
     padding: var(--menupopup-inner-padding);
     margin: var(--menupopup-inner-box-margin);
   }
 
-  #BMB_bookmarksPopup::part(arrowscrollbox),
-  #BMB_bookmarksPopup menupopup[placespopup="true"]::part(arrowscrollbox) {
+  #BMB_bookmarksPopup::part(content),
+  #BMB_bookmarksPopup menupopup[placespopup="true"]::part(content) {
     padding-inline: 0 !important;
   }
 
-  menupopup::part(arrowscrollbox),
-  #ContentSelectDropdown > menupopup::part(arrowscrollbox) {
+  menupopup::part(content),
+  #ContentSelectDropdown > menupopup::part(content) {
     padding: var(--menupopup-inner-padding);
     margin: var(--menupopup-inner-box-margin);
   }
@@ -523,8 +523,12 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
   }
 
   #customization-container,
-  #customization-container :is(menupopup, panel)::part(arrowscrollbox),
-  window#alertNotification #alertSettings :is(menupopup, panel)::part(arrowscrollbox) {
+  #customization-container :is(menupopup, panel)::part(content),
+  #customizationPaletteItemContextMenu,
+  #customizationPaletteItemContextMenu::part(content),
+  #customizationPanelItemContextMenu[backdrop-color="gray"],
+  #customizationPanelItemContextMenu[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);
     --arrowpanel-dimmed-even-further: color-mix(in srgb, var(--uc-toolbar-color) 15%, transparent);