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

.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
 

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)
 

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 {
+@@ -2205,6 +2237,12 @@ 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 {
  
      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.

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

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 {
+      height = 40;
-        gURLBar.zenUpdateLayoutBreakout();
+    }
-      } catch (e) {
+    if (typeof height !== 'undefined') {
-        console.warn(e);
+      document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
-      }
     }
   },
 

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;

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;

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

src/zen/common/styles/zen-omnibox.css

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

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%;

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;
+%include schemes/dark.inc.css
-      --toolbar-color-scheme: dark;
     }
 
     @media -moz-pref('zen.view.window.scheme', 1) {
-      color-scheme: light;
+%include schemes/light.inc.css
-      --toolbar-color-scheme: light;
     }
 
     @media -moz-pref('zen.view.window.scheme', 2) {
-      color-scheme: light;
+%include schemes/light.inc.css
-      --toolbar-color-scheme: light;
       @media (-moz-system-dark-theme) {
-        color-scheme: dark;
+%include schemes/dark.inc.css
-        --toolbar-color-scheme: dark;
       }
     }
 
     :root[privatebrowsingmode='temporary'] &,
     &[privatebrowsingmode='temporary'] {
-      color-scheme: dark;
+%include schemes/dark.inc.css
-      --toolbar-color-scheme: dark;
     }
   }
 
   &[zen-should-be-dark-mode='true'] #browser {
-    color-scheme: dark;
+%include schemes/dark.inc.css
-    --toolbar-color-scheme: dark;
   }
 
   &[zen-should-be-dark-mode='false'] #browser {
-    color-scheme: light;
+%include schemes/light.inc.css
-    --toolbar-color-scheme: light;
   }
 }

src/zen/tabs/zen-tabs/vertical-tabs.css

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