Skip to content

Commit 9edffe9

Browse files
aminomanceraminomancer
committed
update sidebar header appearance -
color to adapt based on sidebar document source.
1 parent 7388770 commit 9edffe9

6 files changed

Lines changed: 81 additions & 42 deletions

File tree

‎JS/tooltipStyler.uc.js‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,59 @@
11
// ==UserScript==
22
// @name Tooltip Styler
3-
// @version 1.0
3+
// @version 1.1.0
44
// @author aminomancer
55
// @homepage https://github.com/aminomancer/uc.css.js
66
// @description Allows you to style a tooltip in the chrome window based on
7-
// which node triggered it. duskFox uses this to make certain tooltips gray
8-
// instead of indigo, since we have gray system pages. If you want to use this
9-
// for custom purposes, you'll need to edit the script and add CSS to your AGENT
10-
// sheet like tooltip[backdrop-color"red"] {...}
7+
// which node triggered it. duskFox uses this to make certain tooltips and
8+
// popups gray instead of indigo, since we have gray system pages. If you want
9+
// to use this for custom purposes, you'll need to edit the script and add CSS
10+
// to your AGENT sheet like tooltip[backdrop-color"red"] {...}
1111
// @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.
1212
// ==/UserScript==
1313

1414
(function () {
1515
if (!window.tooltipStylerWatching) {
16+
let sidebarBox = document.getElementById("sidebar-box");
17+
if (sidebarBox) sidebarBox.setAttribute("content-style", "true");
18+
else {
19+
SidebarUI.promiseInitialized.then(() => SidebarUI._box.setAttribute("content-style", "true"));
20+
}
21+
function colorForSidebar(id) {
22+
switch (id) {
23+
case "viewBookmarksSidebar":
24+
case "viewHistorySidebar":
25+
case "viewTabsSidebar":
26+
case "_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action":
27+
return false;
28+
default:
29+
return "gray";
30+
}
31+
}
1632
window.addEventListener("popupshowing", e => {
1733
let tooltip = e.originalTarget;
18-
let node = tooltip.triggerNode;
19-
if (!["tooltip", "menupopup"].includes(tooltip.localName)) return;
20-
if (!node) {
21-
tooltip.removeAttribute("backdrop-color");
22-
return;
23-
}
24-
let inCC = !!node.closest("#customization-container");
25-
if (
26-
inCC &&
27-
node.localName === "toolbarpaletteitem" &&
28-
((tooltip.localName === "tooltip" && tooltip.hasAttribute("default")) ||
29-
tooltip.id === "customizationPanelItemContextMenu")
30-
) {
31-
tooltip.setAttribute("backdrop-color", "gray");
32-
return;
34+
let color;
35+
switch (tooltip.localName) {
36+
case "panel":
37+
if (tooltip.id === "sidebarMenu-popup") color = colorForSidebar(SidebarUI.currentID);
38+
else return;
39+
break;
40+
case "tooltip":
41+
case "menupopup":
42+
let node = tooltip.triggerNode;
43+
if (node?.closest("#sidebar-header")) color = colorForSidebar(SidebarUI.currentID);
44+
else if (
45+
node?.closest("#customization-container") &&
46+
node?.localName === "toolbarpaletteitem"
47+
) {
48+
if (tooltip.id === "customizationPanelItemContextMenu") color = "gray";
49+
if (type === "tooltip" && tooltip.hasAttribute("default")) color = "gray";
50+
}
51+
break;
52+
default:
53+
return;
3354
}
34-
tooltip.removeAttribute("backdrop-color");
55+
if (color) tooltip.setAttribute("backdrop-color", color);
56+
else tooltip.removeAttribute("backdrop-color");
3557
});
3658
window.tooltipStylerWatching = true;
3759
}

‎resources/in-content/site-mozilla.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
:root {
1111
--font-family-monospace: Fira Code UC, Fira Code, SF Mono, Menlo, Consolas, Monaco, -moz-fixed,
1212
monospace !important;
13-
--font-weight-monospace: 300 !important;
13+
--font-weight-monospace: 400 !important;
1414
}
1515

1616
xmp,

‎uc-popups.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -827,7 +827,7 @@ rtl languages. adjust the border radius accordingly */
827827
}
828828

829829
.dialog-button-box > button:not([disabled="true"]):focus-visible {
830-
outline-style: auto !important;
830+
outline: var(--default-focusring) !important;
831831
}
832832

833833
.dialog-button-box > button:not([disabled="true"]):hover:active,
@@ -863,6 +863,7 @@ rtl languages. adjust the border radius accordingly */
863863
dialog input:-moz-focusring,
864864
button:-moz-focusring {
865865
box-shadow: none !important;
866+
outline: var(--default-focusring);
866867
}
867868

868869
#checkboxContainer checkbox {

‎uc-sidebar.css‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
1212
}
1313

1414
#sidebar-box {
15-
--lwt-sidebar-background-color: var(--ui-secondary-bg) !important;
16-
--sidebar-background-color: var(--lwt-sidebar-background-color) !important;
17-
--sidebar-text-color: var(--toolbar-color) !important;
15+
--sidebar-background-color: var(--ui-secondary-bg) !important;
16+
--sidebar-border-color: var(--uc-menu-border-color) !important;
1817
display: flex !important;
1918
position: absolute !important;
2019
top: 0 !important;
@@ -26,6 +25,34 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
2625
box-shadow: 0px 0px 8px -4px hsla(240, 4%, 0%, 0.6), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2) !important;
2726
}
2827

28+
/* for addon sidebars, use gray colors for the header instead of indigo.
29+
for use with tooltipStyler.uc.js - won't do anything without that script. */
30+
#sidebar-box[content-style]:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"], [sidebarcommand="viewBookmarksSidebar"], [sidebarcommand="viewHistorySidebar"], [sidebarcommand="viewTabsSidebar"]) {
31+
--sidebar-background-color: var(--in-content-bg-dark) !important;
32+
--sidebar-text-color: var(--toolbar-color) !important;
33+
--sidebar-border-color: var(--in-content-border-color-dim) !important;
34+
--arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
35+
--arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);
36+
--arrowpanel-dimmed-even-further: color-mix(in srgb, var(--uc-toolbar-color) 15%, transparent);
37+
--button-bgcolor: var(--arrowpanel-dimmed);
38+
--button-hover-bgcolor: var(--arrowpanel-dimmed-further);
39+
--button-active-bgcolor: var(--arrowpanel-dimmed-even-further);
40+
}
41+
42+
#sidebar-header {
43+
top: 0 !important;
44+
padding: 6px !important;
45+
border-bottom: 0px solid transparent !important;
46+
background-color: var(--sidebar-background-color) !important;
47+
color: inherit !important;
48+
font-size: 1.2em !important;
49+
}
50+
51+
#sidebar-box[content-style]:is([sidebarcommand="viewBookmarksSidebar"], [sidebarcommand="viewHistorySidebar"], [sidebarcommand="viewTabsSidebar"])
52+
#sidebar-header {
53+
padding-bottom: 3px !important;
54+
}
55+
2956
#sidebar-box[hidden] {
3057
display: none !important;
3158
}
@@ -35,18 +62,14 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
3562
right: 0 !important;
3663
}
3764

38-
#sidebar-header {
39-
top: 0 !important;
40-
}
41-
4265
#sidebar,
4366
#sidebar-search-container,
4467
.sidebar-panel {
45-
--lwt-sidebar-background-color: inherit !important;
4668
--sidebar-background-color: inherit !important;
4769
--sidebar-text-color: inherit !important;
70+
--sidebar-border-color: inherit !important;
4871
background-color: var(--sidebar-background-color) !important;
49-
color: var(--toolbar-color) !important;
72+
color: var(--sidebar-text-color) !important;
5073
}
5174

5275
#sidebar {
@@ -58,15 +81,6 @@ appearance of the built-in sidebars, e.g. bookmarks, history, etc. */
5881
background-color: inherit !important;
5982
}
6083

61-
#sidebar-header {
62-
padding: 6px !important;
63-
padding-bottom: 3px !important;
64-
border-bottom: 0px solid transparent !important;
65-
background-color: var(--ui-secondary-bg) !important;
66-
color: inherit !important;
67-
font-size: 1.2em !important;
68-
}
69-
7084
#sidebar-switcher-target {
7185
min-height: 28px !important;
7286
min-width: 28px !important;

‎uc-variables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ menupopup {
6767
--toolbarbutton-hover-background: var(--uc-toolbarbutton-hover-background) !important;
6868
--toolbarbutton-active-background: var(--uc-toolbarbutton-active-background) !important;
6969
--toolbarbutton-checked-active-background: var(--uc-toolbarbutton-checked-active-background);
70-
--default-focusring: auto !important;
70+
--default-focusring: var(--global-focus-outline) !important;
7171
--button-bgcolor: var(--uc-arrowpanel-faint) !important;
7272
--button-hover-bgcolor: var(--uc-arrowpanel-dimmed) !important;
7373
--button-active-bgcolor: var(--uc-arrowpanel-dimmed-further) !important;

‎userChrome.au.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,8 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
537537
#customizationPaletteItemContextMenu::part(content),
538538
#customizationPanelItemContextMenu[backdrop-color="gray"],
539539
#customizationPanelItemContextMenu[backdrop-color="gray"]::part(content),
540+
#sidebarMenu-popup[backdrop-color="gray"],
541+
#sidebarMenu-popup[backdrop-color="gray"]::part(content),
540542
window#alertNotification #alertSettings :is(menupopup, panel)::part(content) {
541543
--arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
542544
--arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);

0 commit comments

Comments
 (0)