diff --git a/.prettierignore b/.prettierignore index 72c32f89c..dd4276298 100644 --- a/.prettierignore +++ b/.prettierignore @@ -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 diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 67e089715..46980afe2 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -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) diff --git a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch index dcc631387..39d4f2a4a 100644 --- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch +++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch @@ -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. diff --git a/src/browser/components/urlbar/UrlbarView-sys-mjs.patch b/src/browser/components/urlbar/UrlbarView-sys-mjs.patch index 0ece37d21..cedcda356 100644 --- a/src/browser/components/urlbar/UrlbarView-sys-mjs.patch +++ b/src/browser/components/urlbar/UrlbarView-sys-mjs.patch @@ -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 { } diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index 365e13fee..0ec0960bb 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -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`); } }, diff --git a/src/zen/common/styles/schemes/dark.inc.css b/src/zen/common/styles/schemes/dark.inc.css new file mode 100644 index 000000000..032dd757d --- /dev/null +++ b/src/zen/common/styles/schemes/dark.inc.css @@ -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; diff --git a/src/zen/common/styles/schemes/light.inc.css b/src/zen/common/styles/schemes/light.inc.css new file mode 100644 index 000000000..a3c18d0fd --- /dev/null +++ b/src/zen/common/styles/schemes/light.inc.css @@ -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; diff --git a/src/zen/common/styles/zen-animations.css b/src/zen/common/styles/zen-animations.css index f2896ce2b..f3f0c8e0e 100644 --- a/src/zen/common/styles/zen-animations.css +++ b/src/zen/common/styles/zen-animations.css @@ -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); diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css index af1a64265..d6171d4df 100644 --- a/src/zen/common/styles/zen-omnibox.css +++ b/src/zen/common/styles/zen-omnibox.css @@ -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; diff --git a/src/zen/common/styles/zen-panel-ui.css b/src/zen/common/styles/zen-panel-ui.css index c3577e6ed..1476ce04f 100644 --- a/src/zen/common/styles/zen-panel-ui.css +++ b/src/zen/common/styles/zen-panel-ui.css @@ -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%; diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 9c9144890..dbae226d9 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -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 } } diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 8c089d6b4..9b1d2e2ff 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -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; }