From 05cacec74390ae40eed0bbe15bd3552c077036ce Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Fri, 12 Apr 2024 16:25:49 +0200 Subject: [PATCH] Theme colors are updated to main window now --- src/browser/app/profile/zen-browser.js | 1 + src/browser/base/content/browser-js.patch | 56 +++++++++++++++++-- .../locales/en-US/browser/browser-ftl.patch | 13 +++++ .../identity-block/identity-block-css.patch | 13 +++++ .../themes/shared/zen-browser-shared.css | 13 ++++- .../themes/shared/desktop-jar-inc-mn.patch | 8 +-- .../zen-common-shared-ui-override.css | 11 ++++ .../shared/in-content/zen-common-shared.css | 24 ++++++-- src/toolkit/themes/shared/popup-css.patch | 6 +- .../themes/shared/zen-desktop.jar.inc.mn | 5 ++ .../themes/shared/zen-global-shared.css | 5 +- src/toolkit/themes/shared/zen-popup.css | 3 - 12 files changed, 132 insertions(+), 26 deletions(-) create mode 100644 src/browser/locales/en-US/browser/browser-ftl.patch create mode 100644 src/browser/themes/shared/identity-block/identity-block-css.patch create mode 100644 src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css create mode 100644 src/toolkit/themes/shared/zen-desktop.jar.inc.mn diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index bb21ac7b6..7ae750b9d 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -95,6 +95,7 @@ pref("alerts.showFavicons", true); pref('zen.welcomeScreen.enabled', true); pref('zen.welcomeScreen.seen', false); pref('zen.tabs.vertical', true); +pref('zen.theme.accent-color', "#0b57d0"); // From: https://github.com/yokoffing/Betterfox diff --git a/src/browser/base/content/browser-js.patch b/src/browser/base/content/browser-js.patch index 0715f4222..c6eeb1b07 100644 --- a/src/browser/base/content/browser-js.patch +++ b/src/browser/base/content/browser-js.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js -index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250ca26968a 100644 +index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7899d8656 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -13,6 +13,15 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs"); @@ -18,7 +18,15 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250 ChromeUtils.defineESModuleGetters(this, { AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs", AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs", -@@ -1735,6 +1744,11 @@ var gBrowserInit = { +@@ -1610,6 +1619,7 @@ var gBrowserInit = { + // Update the chromemargin attribute so the window can be sized correctly. + window.TabBarVisibility.update(); + TabsInTitlebar.init(); ++ ZenThemeHandler.init(); + + new LightweightThemeConsumer(document); + +@@ -1735,6 +1745,11 @@ var gBrowserInit = { } // Misc. inits. @@ -30,7 +38,15 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250 gUIDensity.init(); TabletModeUpdater.init(); CombinedStopReload.ensureInitialized(); -@@ -6660,7 +6674,7 @@ function setToolbarVisibility( +@@ -2489,6 +2504,7 @@ var gBrowserInit = { + TabsInTitlebar.uninit(); + + ToolbarIconColor.uninit(); ++ ZenThemeHandler.uninit(); + + // In certain scenarios it's possible for unload to be fired before onload, + // (e.g. if the window is being closed after browser.js loads but before the +@@ -6660,7 +6676,7 @@ function setToolbarVisibility( ); } @@ -39,7 +55,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250 switch (isVisible) { case true: case "always": -@@ -9780,6 +9794,13 @@ var gDialogBox = { +@@ -9780,6 +9796,13 @@ var gDialogBox = { parentElement.style.removeProperty("width"); parentElement.style.removeProperty("height"); document.documentElement.setAttribute("window-modal-open", true); @@ -53,7 +69,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250 // Call this first so the contents show up and get layout, which is // required for SubDialog to work. parentElement.showModal(); -@@ -10157,3 +10178,15 @@ var FirefoxViewHandler = { +@@ -10157,3 +10180,45 @@ var FirefoxViewHandler = { this.button?.toggleAttribute("attention", shouldShow); }, }; @@ -69,3 +85,33 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250 + // TODO: actually use profile data to generate the avatar, instead of just using the name + mainWindowEl.style.setProperty("--avatar-image-url", `url(${profile.zenAvatarPath})`); +} ++ ++var ZenThemeHandler = { ++ init() { ++ window.addEventListener("windowlwthemeupdate", this); ++ window.addEventListener("nativethemechange", this); ++ this.executeAllUpdates(); ++ }, ++ ++ uninit() { ++ window.removeEventListener("windowlwthemeupdate", this); ++ window.removeEventListener("nativethemechange", this); ++ }, ++ ++ handleEvent(event) { ++ this.executeAllUpdates(); ++ }, ++ ++ executeAllUpdates() { ++ this.updateAccentColorPref(); ++ }, ++ ++ updateAccentColorPref() { ++ let root = document.documentElement; ++ const themeAccent = Services.prefs.getStringPref( ++ "zen.theme.accent-color", ++ "#0b57d0" ++ ); ++ root.style.setProperty("--zen-primary-color", themeAccent); ++ }, ++} diff --git a/src/browser/locales/en-US/browser/browser-ftl.patch b/src/browser/locales/en-US/browser/browser-ftl.patch new file mode 100644 index 000000000..c8b7d5a30 --- /dev/null +++ b/src/browser/locales/en-US/browser/browser-ftl.patch @@ -0,0 +1,13 @@ +diff --git a/browser/locales/en-US/browser/browser.ftl b/browser/locales/en-US/browser/browser.ftl +index 02ba7bb1faa074128a995107735c31dbbd280fd1..28439a06063ec626dcfb73f7dedc0a53fea22f59 100644 +--- a/browser/locales/en-US/browser/browser.ftl ++++ b/browser/locales/en-US/browser/browser.ftl +@@ -347,7 +347,7 @@ bookmark-panel-cancel = + bookmark-panel-remove = + .label = + { $count -> +- [1] Remove bookmark ++ [1] Remove + *[other] Remove { $count } bookmarks + } + .accesskey = R diff --git a/src/browser/themes/shared/identity-block/identity-block-css.patch b/src/browser/themes/shared/identity-block/identity-block-css.patch new file mode 100644 index 000000000..0a97ca5b0 --- /dev/null +++ b/src/browser/themes/shared/identity-block/identity-block-css.patch @@ -0,0 +1,13 @@ +diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css +index 39cf7c917aa8807d491cc6a3702e398569681022..30b3801d20e785d460e06baeef063b7b10e827bc 100644 +--- a/browser/themes/shared/identity-block/identity-block.css ++++ b/browser/themes/shared/identity-block/identity-block.css +@@ -65,7 +65,7 @@ + } + + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +-#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, ++#identity-box[pageproxystate="valid"] > .identity-box-button, + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, + #urlbar-label-box { + background-color: var(--urlbar-box-bgcolor); diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css index b85e5cebd..77a57293f 100644 --- a/src/browser/themes/shared/zen-browser-shared.css +++ b/src/browser/themes/shared/zen-browser-shared.css @@ -93,7 +93,7 @@ } */ #urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box { - padding-right: 5px; + margin-right: 5px; } #urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) { @@ -298,7 +298,16 @@ toolbarbutton#scrollbutton-up { } .footer-button { - padding: 0.60em 1.9em !important; + padding: var(--zen-button-padding) !important; + border-radius: var(--zen-button-border-radius) !important; +} + +.footer-button:not([default], .primary) { + color: var(--zen-secondary-btn-color) !important; +} + +.footer-button[default] { + outline-color: var(--button-primary-bgcolor); } menuseparator { diff --git a/src/toolkit/themes/shared/desktop-jar-inc-mn.patch b/src/toolkit/themes/shared/desktop-jar-inc-mn.patch index 1e2b27224..65dfe287b 100644 --- a/src/toolkit/themes/shared/desktop-jar-inc-mn.patch +++ b/src/toolkit/themes/shared/desktop-jar-inc-mn.patch @@ -1,12 +1,10 @@ diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn -index 6f504132c2459a0a476a7a440beef6794d52097e..8ca4e84048f4dc04f385f827a8053a636fdbbe22 100644 +index 6f504132c2459a0a476a7a440beef6794d52097e..627f4f72db90bed03ef135e2ac0ad09e53bb9fef 100644 --- a/toolkit/themes/shared/desktop-jar.inc.mn +++ b/toolkit/themes/shared/desktop-jar.inc.mn -@@ -151,3 +151,7 @@ +@@ -151,3 +151,5 @@ skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg) skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg) skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg) + -+ skin/classic/global/in-content/zen-common-shared.css (../../shared/in-content/zen-common-shared.css) -+ skin/classic/global/zen-global-shared.css (../../shared/zen-global-shared.css) -+ skin/classic/global/zen-popup.css (../../shared/zen-popup.css) ++#include zen-desktop.jar.inc.mn diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css b/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css new file mode 100644 index 000000000..809e45ab4 --- /dev/null +++ b/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css @@ -0,0 +1,11 @@ + +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/** This file is used to override UI inside "common-shared.css" */ + +/** These types of buttons look INSAINELY bad in the preferences page */ +xul|button { + border-radius: var(--zen-button-border-radius) !important; + padding: var(--zen-button-padding) !important; +} diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared.css b/src/toolkit/themes/shared/in-content/zen-common-shared.css index 3575e9663..fa8c7fd73 100644 --- a/src/toolkit/themes/shared/in-content/zen-common-shared.css +++ b/src/toolkit/themes/shared/in-content/zen-common-shared.css @@ -1,3 +1,6 @@ + +@import url("zen-common-shared-ui-override.css"); + :host(:is(.anonymous-content-host, notification-message)), :root { /** Primary colors examples: @@ -6,23 +9,26 @@ * - yellow: #F8BC48; */ + /** Primary color will be injected by the theme as `--zen-primary-color` */ + /** Zen colors are generated automatically from the primary color */ - --zen-primary-color: #0b57d0; --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%); --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 20%, white 80%); --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 4%, white 96%); - --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%); + --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%); --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%); --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 40%, black 60%); --zen-colors-shadow-color: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%); --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 90%); - --in-content-primary-button-background: var(--zen-colors-secondary) !important; + --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 1.5%, white 98.5%); + + --in-content-primary-button-background: var(--zen-primary-color) !important; --in-content-primary-button-background-hover: var(--zen-colors-hover-bg) !important; --in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important; - --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important; + --in-content-primary-button-text-color: light-dark(white, black) !important; --in-content-primary-button-border-color: transparent !important; --in-content-primary-button-border-hover: transparent !important; --in-content-primary-button-border-active: var(--zen-colors-border) !important; @@ -30,6 +36,13 @@ --in-content-accent-color: var(--zen-colors-primary) !important; + /* This is like the secondary button */ + --in-content-button-background: var(--zen-colors-secondary) !important; + --button-bgcolor: var(--in-content-button-background) !important; + --zen-secondary-btn-color: var(--zen-colors-primary-foreground); + --focus-outline-color: var(--button-bgcolor) !important; + --in-content-button-text-color: var(--zen-secondary-btn-color) !important; + --button-primary-bgcolor: var(--in-content-primary-button-background) !important; --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important; @@ -38,6 +51,9 @@ --in-content-page-background: var(--zen-colors-tertiary) !important; --zen-in-content-dialog-background: var(--zen-colors-tertiary); + --zen-button-border-radius: 999px; + --zen-button-padding: 0.7em 2.3em; + /* TODO: Support dark themes! */ } diff --git a/src/toolkit/themes/shared/popup-css.patch b/src/toolkit/themes/shared/popup-css.patch index 8dfba5d26..73344de59 100644 --- a/src/toolkit/themes/shared/popup-css.patch +++ b/src/toolkit/themes/shared/popup-css.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css -index ddc41a66ed0e3688ce34052652bef1fe33a08d49..ee6acc414a86626ac15b5a744ebcb867c85fe536 100644 +index ddc41a66ed0e3688ce34052652bef1fe33a08d49..53575e1af10d764b131ac20648f1fdd84b652d60 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css @@ -2,6 +2,8 @@ @@ -22,12 +22,12 @@ index ddc41a66ed0e3688ce34052652bef1fe33a08d49..ee6acc414a86626ac15b5a744ebcb867 --panel-padding: var(--panel-padding-block) 0; --panel-border-radius: 4px; - --panel-border-color: ThreeDShadow; -+ --panel-border-color: light-dark(rgba(0,0,0,.2), rgba(255,255,255,.1)) /* var(--arrowpanel-border-color) */ !important; ++ --panel-border-color: transparent /* var(--arrowpanel-border-color) */ !important; --panel-width: initial; --panel-shadow-margin: 0px; - --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2); -+ --panel-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;; ++ --panel-shadow: rgba(0, 0, 0, 0.15) 0px 4px 10px; -moz-window-input-region-margin: var(--panel-shadow-margin); margin: calc(-1 * var(--panel-shadow-margin)); diff --git a/src/toolkit/themes/shared/zen-desktop.jar.inc.mn b/src/toolkit/themes/shared/zen-desktop.jar.inc.mn new file mode 100644 index 000000000..383fa0ae4 --- /dev/null +++ b/src/toolkit/themes/shared/zen-desktop.jar.inc.mn @@ -0,0 +1,5 @@ + skin/classic/global/in-content/zen-common-shared.css (../../shared/in-content/zen-common-shared.css) + skin/classic/global/zen-global-shared.css (../../shared/zen-global-shared.css) + skin/classic/global/zen-popup.css (../../shared/zen-popup.css) + skin/classic/global/in-content/zen-common-shared-ui-override.css (../../shared/in-content/zen-common-shared-ui-override.css) + \ No newline at end of file diff --git a/src/toolkit/themes/shared/zen-global-shared.css b/src/toolkit/themes/shared/zen-global-shared.css index 031aada59..1d2e81ca7 100644 --- a/src/toolkit/themes/shared/zen-global-shared.css +++ b/src/toolkit/themes/shared/zen-global-shared.css @@ -2,13 +2,11 @@ @import url("./in-content/zen-common-shared.css"); :root { - --zen-dialog-background: Field; - --zen-dialog-border-color: rgba(0,0,0,.2); --zen-panel-radius: 15px; --arrowpanel-background: var(--zen-dialog-background) !important; --arrowpanel-border-color: var(--zen-dialog-border-color) !important; - --arrowpanel-border-radius: 7px !important; + --arrowpanel-border-radius: 15px !important; &:-moz-lwtheme { color: var(--lwt-text-color); @@ -22,7 +20,6 @@ @media (prefers-color-scheme: dark) { :root { - --zen-dialog-background: rgba(28, 27, 34); --zen-dialog-border-color: rgba(255,255,255,.1); } } diff --git a/src/toolkit/themes/shared/zen-popup.css b/src/toolkit/themes/shared/zen-popup.css index 76aa12920..14bdab368 100644 --- a/src/toolkit/themes/shared/zen-popup.css +++ b/src/toolkit/themes/shared/zen-popup.css @@ -1,7 +1,6 @@ :root { --panel-subview-body-padding: 2px 0 !important; - --arrowpanel-border-radius: 8px !important; --arrowpanel-menuitem-border-radius: 5px !important; --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important; --arrowpanel-menuitem-padding-block: 8px !important; @@ -225,12 +224,10 @@ menupopup::part(content), panel::part(content) { - --panel-shadow: var(--zen-colors-shadow-color) 0px 1px 4px !important; border: transparent !important; } menupopup, panel { - --panel-shadow: none !important; box-shadow: none; }