diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index e4bf361b8..cdbe33082 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -69,6 +69,7 @@ pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); pref('zen.theme.border-radius', 10); // In pixels +pref('zen.theme.content-element-separation', 10); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.view.compact', false); diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 9a5efb4a8..a71e589dc 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 9a5efb4a87cb6a50ed36c2c1773a7b7ef9a5ca03 +Subproject commit a71e589dcf0e6bb0bea3b080dd862df82a320925 diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index 2c27dfa66..1f1860999 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -2,7 +2,6 @@ :root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) { & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { width: -moz-available; - margin: 0 var(--zen-element-separation) var(--zen-element-separation) 0; box-shadow: 0 0 0 1px var(--zen-colors-border); clip-path: inset(-5px -5px -5px round var(--zen-webview-border-radius, var(--zen-border-radius))); border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)); diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 4152b9ab6..a4915e6a0 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -11,6 +11,11 @@ --inactive-titlebar-opacity: 1; } +#tabbrowser-tabpanels { + padding-right: var(--zen-element-separation); + padding-bottom: var(--zen-element-separation); +} + #browser { width: 100%; } diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index c5614cfec..693671929 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -131,8 +131,8 @@ #navigator-toolbox[inFullscreen] > #PersonalToolbar, #PersonalToolbar[collapsed="true"]{ display: none } - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-left: var(--zen-element-separation) !important; + :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels { + padding-left: var(--zen-element-separation) !important; } @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") { @@ -162,8 +162,8 @@ opacity: 1; } - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-top: var(--zen-element-separation) !important; + :root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels { + padding-top: var(--zen-element-separation) !important; } #titlebar { diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 278cea3c4..bcd9a0a80 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -31,7 +31,8 @@ #tabbrowser-tabpanels:has(> [zen-split="true"]) { display: grid; - grid-gap: 5px; + row-gap: var(--zen-element-separation); + column-gap: calc(var(--zen-element-separation) / 2); } #zen-split-views-box:not([hidden="true"]) { diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 1d120067f..2660d4fc8 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -460,6 +460,11 @@ --zen-hover-animation: zen-sidebar-panel-animation-right !important; } + #tabbrowser-tabpanels { + padding-left: var(--zen-element-separation); + padding-right: 0 !important; + } + :root:not([zen-sidebar-legacy="true"]) { padding: calc(var(--zen-tabbrowser-padding) * 1.5); } @@ -469,8 +474,8 @@ } #tabbrowser-tabpanels .browserSidebarContainer { - margin-left: var(--zen-element-separation) !important; - margin-right: 0 !important; + margin-left: 0 !important; + margin-right: 2px !important; } } diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 24b83bb1e..2bad1c7ff 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -80,9 +80,6 @@ --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important; --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77)); - /* Constants */ - --zen-element-separation: .6rem; - /* XUL */ --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b); --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%); diff --git a/src/browser/base/content/zenThemeModifier.js b/src/browser/base/content/zenThemeModifier.js index 460f5957d..753f4e86e 100644 --- a/src/browser/base/content/zenThemeModifier.js +++ b/src/browser/base/content/zenThemeModifier.js @@ -11,8 +11,11 @@ * FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC */ -const kZenThemeAccentColorPref = "zen.theme.accent-color"; -const kZenThemeBorderRadiusPref = "zen.theme.border-radius"; +const kZenThemePrefsList = [ + "zen.theme.accent-color", + "zen.theme.border-radius", + "zen.theme.content-element-separation", +]; /** * ZenThemeModifier controls the application of theme data to the browser, @@ -40,8 +43,17 @@ var ZenThemeModifier = { listenForEvents() { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this)); - Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this)); - Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this)); + var handleEvent = this.handleEvent.bind(this); + // Listen for changes in the accent color and border radius + for (let pref of kZenThemePrefsList) { + Services.prefs.addObserver(pref, handleEvent); + } + + window.addEventListener("unload", () => { + for (let pref of kZenThemePrefsList) { + Services.prefs.removeObserver(pref, handleEvent); + } + }); }, handleEvent(event) { @@ -52,21 +64,27 @@ var ZenThemeModifier = { /** * Update all theme basics, like the accent color. */ - updateAllThemeBasics() { + async updateAllThemeBasics() { this.updateAccentColor(); this.updateBorderRadius(); + this.updateElementSeparation(); }, updateBorderRadius() { - const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4); + const borderRadius = Services.prefs.getIntPref("zen.theme.border-radius"); document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px"); }, + updateElementSeparation() { + const separation = Services.prefs.getIntPref("zen.theme.content-element-separation"); + document.documentElement.style.setProperty("--zen-element-separation", separation + "px"); + }, + /** * Update the accent color. */ updateAccentColor() { - const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0"); + const accentColor = Services.prefs.getStringPref("zen.theme.accent-color"); document.documentElement.style.setProperty("--zen-primary-color", accentColor); // Notify the page that the accent color has changed, only if a function // handler is defined.