mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-07 02:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Overall cleanup for schemes, b=no-bug, c=common, tabs

Browse Source
This commit is contained in:
mr. m
2025-09-15 17:03:03 +02:00
parent 89f653cc31
commit 01122c63fb
12 changed files with 61 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@@ -29,6 +29,7 @@ docs/issue-metrics/*.md
# Some CSS files are preprocessed and prettier doesn't handle them well
# We also dont want to format the CSS files that are generated by the build
src/zen/tabs/zen-tabs.css
src/zen/common/styles/zen-theme.css
src/zen/compact-mode/zen-compact-mode.css
src/zen/common/ZenEmojis.mjs

4
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -14,7 +14,7 @@
content/browser/zen-components/ZenEmojiPicker.mjs (../../zen/common/emojis/ZenEmojiPicker.mjs)
content/browser/zen-components/ZenHasPolyfill.mjs (../../zen/common/ZenHasPolyfill.mjs)
content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css)
* content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (../../zen/common/styles/zen-buttons.css)
content/browser/zen-styles/zen-browser-ui.css (../../zen/common/styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (../../zen/common/styles/zen-animations.css)
@@ -23,7 +23,7 @@
content/browser/zen-styles/zen-sidebar.css (../../zen/common/styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (../../zen/common/styles/zen-toolbar.css)
content/browser/zen-styles/zen-browser-container.css (../../zen/common/styles/zen-browser-container.css)
content/browser/zen-styles/zen-urlbar.css (../../zen/common/styles/zen-urlbar.css)
content/browser/zen-styles/zen-omnibox.css (../../zen/common/styles/zen-omnibox.css)
content/browser/zen-styles/zen-popup.css (../../zen/common/styles/zen-popup.css)
content/browser/zen-styles/zen-branding.css (../../zen/common/styles/zen-branding.css)

49
src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c492ade5f6e 100644
index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..ff09a4c158b0f4a37dc3b01a5de9cb1062e526fe 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -74,6 +74,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -75,18 +75,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
}
if (isCanonized) {
@@ -2191,6 +2223,10 @@ export class UrlbarInput {
await this.#updateLayoutBreakoutDimensions();
}
+ async zenUpdateLayoutBreakout() {
+ await this.#updateLayoutBreakout();
+ }
+
startLayoutExtend() {
if (!this.#allowBreakout || this.hasAttribute("breakout-extend")) {
// Do not expand if the Urlbar does not support being expanded or it is
@@ -2205,6 +2241,12 @@ export class UrlbarInput {
@@ -2205,6 +2237,12 @@ export class UrlbarInput {
this.setAttribute("breakout-extend", "true");
@@ -99,7 +88,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
// Enable the animation only after the first extend call to ensure it
// doesn't run when opening a new window.
if (!this.hasAttribute("breakout-extend-animate")) {
@@ -2224,6 +2266,24 @@ export class UrlbarInput {
@@ -2224,6 +2262,24 @@ export class UrlbarInput {
return;
}
@@ -124,7 +113,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
this.removeAttribute("breakout-extend");
this.#updateTextboxPosition();
}
@@ -2544,6 +2604,7 @@ export class UrlbarInput {
@@ -2544,6 +2600,7 @@ export class UrlbarInput {
let updateKey = {};
this._layoutBreakoutUpdateKey = updateKey;
@@ -132,7 +121,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
await this.window.promiseDocumentFlushed(() => {});
await new Promise(resolve => {
this.window.requestAnimationFrame(() => {
@@ -2553,7 +2614,7 @@ export class UrlbarInput {
@@ -2553,7 +2610,7 @@ export class UrlbarInput {
this.textbox.parentNode.style.setProperty(
"--urlbar-container-height",
@@ -141,7 +130,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
);
this.textbox.style.setProperty(
"--urlbar-height",
@@ -2569,6 +2630,7 @@ export class UrlbarInput {
@@ -2569,6 +2626,7 @@ export class UrlbarInput {
this.textbox.showPopover();
this.#updateTextboxPosition();
@@ -149,7 +138,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
resolve();
});
});
@@ -2986,6 +3048,7 @@ export class UrlbarInput {
@@ -2986,6 +3044,7 @@ export class UrlbarInput {
}
_toggleActionOverride(event) {
@@ -157,7 +146,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
if (
event.keyCode == KeyEvent.DOM_VK_SHIFT ||
event.keyCode == KeyEvent.DOM_VK_ALT ||
@@ -3087,7 +3150,7 @@ export class UrlbarInput {
@@ -3087,7 +3146,7 @@ export class UrlbarInput {
*/
_trimValue(val) {
let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -166,7 +155,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
: val;
// Only trim value if the directionality doesn't change to RTL and we're not
// showing a strikeout https protocol.
@@ -3303,6 +3366,7 @@ export class UrlbarInput {
@@ -3303,6 +3362,7 @@ export class UrlbarInput {
resultDetails = null,
browser = this.window.gBrowser.selectedBrowser
) {
@@ -174,7 +163,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
// No point in setting these because we'll handleRevert() a few rows below.
if (openUILinkWhere == "current") {
// Make sure URL is formatted properly (don't show punycode).
@@ -3455,6 +3519,10 @@ export class UrlbarInput {
@@ -3455,6 +3515,10 @@ export class UrlbarInput {
}
reuseEmpty = true;
}
@@ -185,7 +174,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
if (
where == "tab" &&
reuseEmpty &&
@@ -3462,6 +3530,9 @@ export class UrlbarInput {
@@ -3462,6 +3526,9 @@ export class UrlbarInput {
) {
where = "current";
}
@@ -195,7 +184,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
return where;
}
@@ -3719,6 +3790,7 @@ export class UrlbarInput {
@@ -3719,6 +3786,7 @@ export class UrlbarInput {
this.setResultForCurrentValue(null);
this.handleCommand();
this.controller.clearLastQueryContextCache();
@@ -203,7 +192,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
this._suppressStartQuery = false;
});
@@ -3726,7 +3798,6 @@ export class UrlbarInput {
@@ -3726,7 +3794,6 @@ export class UrlbarInput {
contextMenu.addEventListener("popupshowing", () => {
// Close the results pane when the input field contextual menu is open,
// because paste and go doesn't want a result selection.
@@ -211,7 +200,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
let controller =
this.document.commandDispatcher.getControllerForCommand("cmd_paste");
@@ -4130,6 +4201,7 @@ export class UrlbarInput {
@@ -4130,6 +4197,7 @@ export class UrlbarInput {
this.document.l10n.setAttributes(
this.inputField,
@@ -219,7 +208,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
l10nId,
l10nId == "urlbar-placeholder-with-name" ? { name } : undefined
);
@@ -4241,6 +4313,11 @@ export class UrlbarInput {
@@ -4241,6 +4309,11 @@ export class UrlbarInput {
}
_on_click(event) {
@@ -231,7 +220,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
if (
event.target == this.inputField ||
event.target == this._inputContainer
@@ -4311,7 +4388,7 @@ export class UrlbarInput {
@@ -4311,7 +4384,7 @@ export class UrlbarInput {
}
}
@@ -240,7 +229,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
this.view.autoOpen({ event });
} else {
if (this._untrimOnFocusAfterKeydown) {
@@ -4351,9 +4428,16 @@ export class UrlbarInput {
@@ -4351,9 +4424,16 @@ export class UrlbarInput {
}
_on_mousedown(event) {
@@ -258,7 +247,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
if (
event.target != this.inputField &&
@@ -4364,6 +4448,10 @@ export class UrlbarInput {
@@ -4364,6 +4444,10 @@ export class UrlbarInput {
this.focusedViaMousedown = !this.focused;
this._preventClickSelectsAll = this.focused;
@@ -269,7 +258,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..5becdf9c01b1f12356963ce214142c49
// Keep the focus status, since the attribute may be changed
// upon calling this.focus().
@@ -4399,7 +4487,7 @@ export class UrlbarInput {
@@ -4399,7 +4483,7 @@ export class UrlbarInput {
}
// Don't close the view when clicking on a tab; we may want to keep the
// view open on tab switch, and the TabSelect event arrived earlier.

11
src/browser/components/urlbar/UrlbarView-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarView.sys.mjs b/browser/components/urlbar/UrlbarView.sys.mjs
index fdbab8806fd320f4aacec46a42c8ef953580d00c..40568280c3ba2f0a36f4443a5116430d3c502ec1 100644
index fdbab8806fd320f4aacec46a42c8ef953580d00c..5501c329a9fd12bcc8e12de396113497972ec8d2 100644
--- a/browser/components/urlbar/UrlbarView.sys.mjs
+++ b/browser/components/urlbar/UrlbarView.sys.mjs
@@ -613,7 +613,7 @@ export class UrlbarView {
@@ -31,15 +31,6 @@ index fdbab8806fd320f4aacec46a42c8ef953580d00c..40568280c3ba2f0a36f4443a5116430d
}
}
@@ -1341,7 +1354,7 @@ export class UrlbarView {
includeHiddenExposures: true,
});
let canBeVisible =
- newSpanCount <= this.#queryContext.maxResults && !seenMisplacedResult;
+ newSpanCount < this.#queryContext.maxResults && !seenMisplacedResult;
if (result.isHiddenExposure) {
if (canBeVisible) {
this.controller.engagementEvent.addExposure(
@@ -3189,7 +3202,7 @@ export class UrlbarView {
}

14
src/zen/common/ZenUIManager.mjs
View File

@@ -145,7 +145,7 @@ var gZenUIManager = {
'--zen-urlbar-top',
`${window.innerHeight / 2 - Math.max(kUrlbarHeight, gURLBar.textbox.getBoundingClientRect().height) / 2}px`
);
gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 3}px`);
gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 2}px`);
gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
gZenVerticalTabsManager.recalculateURLBarHeight();
if (!this._preventToolbarRebuild) {
@@ -804,14 +804,14 @@ var gZenVerticalTabsManager = {
recalculateURLBarHeight() {
document.getElementById('urlbar').removeAttribute('--urlbar-height');
let height;
if (!this._hasSetSingleToolbar) {
document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
height = 32;
} else if (gURLBar.getAttribute('breakout-extend') !== 'true') {
try {
gURLBar.zenUpdateLayoutBreakout();
} catch (e) {
console.warn(e);
}
height = 40;
}
if (typeof height !== 'undefined') {
document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
}
},

7
src/zen/common/styles/schemes/dark.inc.css Normal file
View File

@@ -0,0 +1,7 @@
% 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/.
color-scheme: dark;
--toolbar-color-scheme: dark;
--zen-urlbar-outline-offset: -2px;

7
src/zen/common/styles/schemes/light.inc.css Normal file
View File

@@ -0,0 +1,7 @@
% 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/.
color-scheme: light;
--toolbar-color-scheme: light;
--zen-urlbar-outline-offset: 0px;

5
src/zen/common/styles/zen-animations.css
View File

@@ -24,11 +24,6 @@
-moz-window-transform: scale(0.3);
}
50% {
opacity: 1;
-moz-window-transform: scale(1.04);
}
100% {
opacity: 1;
-moz-window-transform: scale(1);

14
src/zen/common/styles/zen-omnibox.css
View File

@@ -99,15 +99,17 @@
position: relative;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
outline: none !important;
margin-bottom: auto;
padding: 6px 8px !important;
margin-bottom: auto;
padding: 6px 8px !important;
:root:not([zen-single-toolbar='true']) & {
padding-block: 2px !important;
}
}
#urlbar .urlbar-input {
border-radius: 0 !important;

4
src/zen/common/styles/zen-panel-ui.css
View File

@@ -5,10 +5,8 @@
*/
panel[type='arrow'] {
@media (-moz-platform: macos) and (-moz-panel-animations) {
-moz-window-transform: scale(0.3);
&[animate='open'] {
animation: zen-jello-animation-macos 0.4s ease-out forwards;
animation: zen-jello-animation-macos 0.3s ease-out forwards;
&[side='bottom'] {
/* Animate from the bottom */
-zen-window-transform-origin: 0 100%;

21
src/zen/common/styles/zen-theme.css
View File

@@ -283,38 +283,31 @@
& #tabbrowser-tabpanels browser[type='content'],
&:not([zen-should-be-dark-mode]) #zen-toast-container {
@media -moz-pref('zen.view.window.scheme', 0) {
color-scheme: dark;
--toolbar-color-scheme: dark;
%include schemes/dark.inc.css
}
@media -moz-pref('zen.view.window.scheme', 1) {
color-scheme: light;
--toolbar-color-scheme: light;
%include schemes/light.inc.css
}
@media -moz-pref('zen.view.window.scheme', 2) {
color-scheme: light;
--toolbar-color-scheme: light;
%include schemes/light.inc.css
@media (-moz-system-dark-theme) {
color-scheme: dark;
--toolbar-color-scheme: dark;
%include schemes/dark.inc.css
}
}
:root[privatebrowsingmode='temporary'] &,
&[privatebrowsingmode='temporary'] {
color-scheme: dark;
--toolbar-color-scheme: dark;
%include schemes/dark.inc.css
}
}
&[zen-should-be-dark-mode='true'] #browser {
color-scheme: dark;
--toolbar-color-scheme: dark;
%include schemes/dark.inc.css
}
&[zen-should-be-dark-mode='false'] #browser {
color-scheme: light;
--toolbar-color-scheme: light;
%include schemes/light.inc.css
}
}

9
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -120,14 +120,7 @@
width: -moz-available !important;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
padding: 6px !important;
}
& #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) {
& #urlbar-container[breakout='true']:has(#urlbar[zen-floating-urlbar='true']) {
--urlbar-container-height: 36px !important;
--urlbar-height: 38px !important;
}