1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 13:35:29 +02:00

Added custom theme modifiers to all about pages

This commit is contained in:
Mauro Balades 2024-04-13 10:56:42 +02:00
parent 1aa1a6f6aa
commit f7031d803c
20 changed files with 255 additions and 12 deletions

View file

@ -0,0 +1,12 @@
diff --git a/browser/base/content/aboutDialog.xhtml b/browser/base/content/aboutDialog.xhtml
index e0fcce367abe57e03e54779437facbba4326687b..7d57f10cfe6bd8435e45f0ffc806bd76b475e403 100644
--- a/browser/base/content/aboutDialog.xhtml
+++ b/browser/base/content/aboutDialog.xhtml
@@ -36,6 +36,7 @@
<html:link rel="localization" href="branding/brand.ftl"/>
<html:link rel="localization" href="browser/aboutDialog.ftl"/>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</linkset>
<html:div id="aboutDialogContainer">

View file

@ -0,0 +1,12 @@
diff --git a/browser/base/content/aboutRestartRequired.xhtml b/browser/base/content/aboutRestartRequired.xhtml
index c1f42b4ddd3b154a8643fc5265c556904805bdff..9722e7de76b02077addfeda90a9acd8b921a9cd6 100644
--- a/browser/base/content/aboutRestartRequired.xhtml
+++ b/browser/base/content/aboutRestartRequired.xhtml
@@ -29,6 +29,7 @@
/>
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="browser/aboutRestartRequired.ftl" />
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>
<!-- PAGE CONTAINER (for styling purposes only) -->

View file

@ -1,18 +1,25 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index b4886fb5f74568b4c09eb620be9efb74e39c599c..0993ee1258dfd83ade68500f11dc2e833df4ae51 100644 index b4886fb5f74568b4c09eb620be9efb74e39c599c..534e40c8f65d1b626c11aa3cfea308cc6176be02 100644
--- a/browser/base/content/browser.xhtml --- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml
@@ -163,9 +163,15 @@ @@ -127,6 +127,7 @@
Services.scriptloader.loadSubScript("chrome://browser/content/search/autocomplete-popup.js", this);
Services.scriptloader.loadSubScript("chrome://browser/content/search/searchbar.js", this);
Services.scriptloader.loadSubScript("chrome://browser/content/shopping/shopping-sidebar.js", this);
+ Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", this);
window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
@@ -163,9 +164,15 @@
</vbox> </vbox>
</html:template> </html:template>
-#include navigator-toolbox.inc.xhtml -#include navigator-toolbox.inc.xhtml
-
-#include browser-box.inc.xhtml
+ <hbox id="zen-titlebar-items-container"> + <hbox id="zen-titlebar-items-container">
+#include titlebar-items.inc.xhtml +#include titlebar-items.inc.xhtml
+ </hbox> + </hbox>
+
-#include browser-box.inc.xhtml
+ <hbox id="zen-main-app-wrapper" flex="1"> + <hbox id="zen-main-app-wrapper" flex="1">
+ #include navigator-toolbox.inc.xhtml + #include navigator-toolbox.inc.xhtml
+ #include zen-sidebar-box.inc.xhtml + #include zen-sidebar-box.inc.xhtml

View file

@ -1,2 +1,3 @@
content/browser/zen-browser-places.js (content/zen-browser-places.js) content/browser/zen-browser-places.js (content/zen-browser-places.js)
content/browser/zen-browser.js (content/zen-browser.js) content/browser/zen-browser.js (content/zen-browser.js)
content/browser/zenThemeModifier.js (content/zenThemeModifier.js)

View file

@ -0,0 +1,60 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/* INCLUDE THIS FILE AS:
* <script src="chrome://browser/content/zenThemeModifier.js"></script>
*
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
*/
{
const kZenThemeAccentColorPref = "zen.theme.accent-color";
/**
* ZenThemeModifier controls the application of theme data to the browser,
* for examplem, it injects the accent color to the document. This is used
* because we need a way to apply the accent color without having to worry about
* shadow roots not inheriting the accent color.
*
* note: It must be a firefox builtin page with access to the browser's configuration
* and services.
*/
const ZenThemeModifier = {
/**
* Listen for theming updates from the LightweightThemeChild actor, and
* begin listening to changes in preferred color scheme.
*/
init() {
addEventListener("LightweightTheme:Set", this);
Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
this.updateAllThemeBasics();
},
handleEvent(event) {
// note: even might be undefined, but we shoudnt use it!
this.updateAllThemeBasics();
},
/**
* Update all theme basics, like the accent color.
*/
updateAllThemeBasics() {
this.updateAccentColor();
},
/**
* Update the accent color.
*/
updateAccentColor() {
const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
document.documentElement.style.setProperty("--zen-primary-color", accentColor);
},
};
ZenThemeModifier.init();
}

View file

@ -0,0 +1,13 @@
diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html
index 67712c8f296ba8a916ff4c6ecf9179ad733b2df8..0bad556640afd48a6738e2955a93c4e8faa68823 100644
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -6,7 +6,7 @@
<html>
<head>
<meta charset="utf-8">
- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; object-src 'none'; script-src resource: chrome:; img-src data: blob: https://firefoxusercontent.com https://profile.accounts.firefox.com;">
+ <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'; script-src resource: chrome:; img-src data: blob: https://firefoxusercontent.com https://profile.accounts.firefox.com;">
<meta name="color-scheme" content="light dark">
<title data-l10n-id="about-logins-page-title-name"></title>
<link rel="localization" href="branding/brand.ftl">

View file

@ -0,0 +1,12 @@
diff --git a/browser/components/newtab/data/content/abouthomecache/page.html.template b/browser/components/newtab/data/content/abouthomecache/page.html.template
index 60898ed6b82ec298198cb9529387f4efd8561cc1..fbd93ccc7ee3619415192164a55f5fcbfd387a51 100644
--- a/browser/components/newtab/data/content/abouthomecache/page.html.template
+++ b/browser/components/newtab/data/content/abouthomecache/page.html.template
@@ -32,6 +32,7 @@
<link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
<link rel="stylesheet" href="chrome://browser/content/contentSearchUI.css" />
<link rel="stylesheet" href="chrome://activity-stream/content/css/activity-stream.css" />
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<!-- Cached: {{ CACHE_TIME }} -->
<body class="activity-stream">

View file

@ -1,5 +1,5 @@
diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
index 38fba9a7265cbcec406fd4145014083286fa798e..38281e4fc127543052064020ebf14ad0e72abda5 100644 index 38fba9a7265cbcec406fd4145014083286fa798e..c54b900f0329c95ae706eb6df42fd7f7e2dc41c9 100644
--- a/browser/components/preferences/preferences.xhtml --- a/browser/components/preferences/preferences.xhtml
+++ b/browser/components/preferences/preferences.xhtml +++ b/browser/components/preferences/preferences.xhtml
@@ -42,6 +42,10 @@ @@ -42,6 +42,10 @@
@ -21,7 +21,15 @@ index 38fba9a7265cbcec406fd4145014083286fa798e..38281e4fc127543052064020ebf14ad0
<!-- Links below are only used for search-l10n-ids into subdialogs --> <!-- Links below are only used for search-l10n-ids into subdialogs -->
<link rel="localization" href="browser/aboutDialog.ftl"/> <link rel="localization" href="browser/aboutDialog.ftl"/>
@@ -111,6 +116,17 @@ @@ -84,6 +89,7 @@
<script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
<script type="module" src="chrome://global/content/elements/moz-toggle.mjs"/>
<script type="module" src="chrome://global/content/elements/moz-message-bar.mjs" />
+ <script src="chrome://browser/content/zenThemeModifier.js"/>
</head>
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@@ -111,6 +117,17 @@
<label class="category-name" flex="1" data-l10n-id="pane-general-title"></label> <label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
</richlistitem> </richlistitem>
@ -39,7 +47,7 @@ index 38fba9a7265cbcec406fd4145014083286fa798e..38281e4fc127543052064020ebf14ad0
<richlistitem id="category-home" <richlistitem id="category-home"
class="category" class="category"
value="paneHome" value="paneHome"
@@ -247,6 +263,7 @@ @@ -247,6 +264,7 @@
#include sync.inc.xhtml #include sync.inc.xhtml
#include experimental.inc.xhtml #include experimental.inc.xhtml
#include moreFromMozilla.inc.xhtml #include moreFromMozilla.inc.xhtml

View file

@ -0,0 +1,12 @@
diff --git a/browser/components/sessionstore/content/aboutSessionRestore.xhtml b/browser/components/sessionstore/content/aboutSessionRestore.xhtml
index 05538be5d95492903e44076dc43e195cbc76c10d..3c2ee6a9d44802657c9e0d5ef6c78e0b3920a9a5 100644
--- a/browser/components/sessionstore/content/aboutSessionRestore.xhtml
+++ b/browser/components/sessionstore/content/aboutSessionRestore.xhtml
@@ -20,6 +20,7 @@
<link rel="localization" href="browser/aboutSessionRestore.ftl"/>
<link rel="localization" href="branding/brand.ftl"/>
<script src="chrome://browser/content/aboutSessionRestore.js"/>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>

View file

@ -247,7 +247,6 @@ toolbarbutton#scrollbutton-up {
padding: 0 !important; padding: 0 !important;
align-items: center; align-items: center;
animation: zen-slide-in 0.3s; animation: zen-slide-in 0.3s;
transition: .1s transform;
} }
.tabbrowser-tab:active { .tabbrowser-tab:active {
@ -325,6 +324,12 @@ toolbarbutton#scrollbutton-up {
margin-inline-end: 0 !important; margin-inline-end: 0 !important;
} }
#tabbrowser-arrowscrollbox {
&::part(scrollbox-clip) {
max-height: 62vh;
}
}
/* Title bar */ /* Title bar */
#zen-titlebar-items-container { #zen-titlebar-items-container {

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/components/aboutconfig/content/aboutconfig.html b/toolkit/components/aboutconfig/content/aboutconfig.html
index 8962cdd86d802f536dbef9cad8928d3e7a4eebf6..b99119d95cd575abead5d3d3f720244f5fe45b3b 100644
--- a/toolkit/components/aboutconfig/content/aboutconfig.html
+++ b/toolkit/components/aboutconfig/content/aboutconfig.html
@@ -34,6 +34,7 @@
<link rel="icon" href="chrome://global/skin/icons/settings.svg" />
<script src="chrome://global/content/aboutconfig/aboutconfig.js"></script>
<title data-l10n-id="about-config-page-title"></title>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>
<div

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.html b/toolkit/components/aboutprocesses/content/aboutProcesses.html
index 76a672cdc24759121bd5d7ac9c9d6f273f36403d..915fbf5cbdea9b33b3cfb1a03fb43aff177f56fb 100644
--- a/toolkit/components/aboutprocesses/content/aboutProcesses.html
+++ b/toolkit/components/aboutprocesses/content/aboutProcesses.html
@@ -20,6 +20,7 @@
<link rel="localization" href="branding/brand.ftl" />
<script src="chrome://global/content/aboutProcesses.js"></script>
<link rel="stylesheet" href="chrome://global/content/aboutProcesses.css" />
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>
<table id="process-table">

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/components/printing/content/print.html b/toolkit/components/printing/content/print.html
index 62d214608c24191fea013db23e96b4ae2a4042e6..59b146a594f0f882435f2d29795a65020db01f48 100644
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -21,6 +21,7 @@
type="module"
src="chrome://global/content/elements/moz-button-group.mjs"
></script>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body loading rendering>

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/components/prompts/content/commonDialog.xhtml b/toolkit/components/prompts/content/commonDialog.xhtml
index def3b93956ea9b9bfab5791b06040769dbda4645..ab9c61a5d816d17fb3f09c88514aca5ec0d2f193 100644
--- a/toolkit/components/prompts/content/commonDialog.xhtml
+++ b/toolkit/components/prompts/content/commonDialog.xhtml
@@ -28,6 +28,7 @@
<html:link rel="localization" href="branding/brand.ftl" />
<html:link rel="localization" href="toolkit/global/commonDialog.ftl" />
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</linkset>
<script src="chrome://global/content/adjustableTitle.js" />
<script src="chrome://global/content/commonDialog.js" />

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/content/aboutAbout.html b/toolkit/content/aboutAbout.html
index ab955bc27bf8a0bf1f28d12d92be80991e743d17..5e23f51f458344d9704ad390c8e1aa98745c7012 100644
--- a/toolkit/content/aboutAbout.html
+++ b/toolkit/content/aboutAbout.html
@@ -24,6 +24,7 @@
href="chrome://branding/content/icon32.png"
/>
<script src="chrome://global/content/aboutAbout.js"></script>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/content/aboutProfiles.xhtml b/toolkit/content/aboutProfiles.xhtml
index 3ce9e580627d757e9bb3fa09601e6336e2376c73..cd69facbf05c525de061c496e08dc12096692e86 100644
--- a/toolkit/content/aboutProfiles.xhtml
+++ b/toolkit/content/aboutProfiles.xhtml
@@ -27,6 +27,7 @@
<script src="chrome://global/content/aboutProfiles.js" />
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="toolkit/about/aboutProfiles.ftl" />
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body id="body" class="wide-container">
<h1 data-l10n-id="profiles-title"></h1>

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/content/aboutSupport.xhtml b/toolkit/content/aboutSupport.xhtml
index d3de7d001973434c09deb5723e73ea72f134362b..736b4e7e647d2f80697a0721c765d2aa82507583 100644
--- a/toolkit/content/aboutSupport.xhtml
+++ b/toolkit/content/aboutSupport.xhtml
@@ -27,6 +27,7 @@
#ifndef ANDROID
<link rel="localization" href="toolkit/featuregates/features.ftl"/>
#endif
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body class="wide-container">

View file

@ -0,0 +1,12 @@
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.html b/toolkit/mozapps/extensions/content/aboutaddons.html
index 55d6625c0847b9ae9d4f847ad978e8dc62f98c70..4d3179c3eb04fc5d2e5e34e646aba029a7118ebc 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -76,6 +76,7 @@
type="module"
src="chrome://global/content/elements/moz-five-star.mjs"
></script>
+ <script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>
<drag-drop-addon-installer></drag-drop-addon-installer>

View file

@ -10,7 +10,7 @@
*/ */
/** Primary color will be injected by the theme as `--zen-primary-color` */ /** Primary color will be injected by the theme as `--zen-primary-color` */
--zen-primary-color: #0b57d0; /* This is the default blue color */ --zen-primary-color: #0b57d0; /* This is the default blue color, in case the theme doesn't provide a primary color */
/** Zen colors are generated automatically from the primary color */ /** Zen colors are generated automatically from the primary color */
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%); --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);

View file

@ -232,7 +232,12 @@ panel {
box-shadow: none; box-shadow: none;
} }
toolbarbutton:not(#appMenu-fxa-label2, .subviewbutton-iconic), toolbarbutton:not(
#appMenu-fxa-label2,
.subviewbutton-iconic,
.zen-sidebar-action-button,
.all-tabs-close-button
),
#PanelUI-zen-profiles menuitem { #PanelUI-zen-profiles menuitem {
/** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */ /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */
margin-left: 0 !important; margin-left: 0 !important;