mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-28 15:46:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Theme colors are updated to main window now

Browse Source
This commit is contained in:
Mauro Balades
2024-04-12 16:25:49 +02:00
parent 70908da525
commit 05cacec743
12 changed files with 132 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/app/profile/zen-browser.js
View File

@@ -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

56
src/browser/base/content/browser-js.patch
View File

@@ -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);
+ },
+}

13
src/browser/locales/en-US/browser/browser-ftl.patch Normal file
View File

@@ -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

13
src/browser/themes/shared/identity-block/identity-block-css.patch Normal file
View File

@@ -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);

13
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -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 {

8
src/toolkit/themes/shared/desktop-jar-inc-mn.patch
View File

@@ -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

11
src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css Normal file
View File

@@ -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;
}

24
src/toolkit/themes/shared/in-content/zen-common-shared.css
View File

@@ -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! */
}

6
src/toolkit/themes/shared/popup-css.patch
View File

@@ -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));

5
src/toolkit/themes/shared/zen-desktop.jar.inc.mn Normal file
View File

@@ -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)

5
src/toolkit/themes/shared/zen-global-shared.css
View File

@@ -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);
}
}

3
src/toolkit/themes/shared/zen-popup.css
View File

@@ -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;
}