Added options for floating urlbar, fixed macos weird window control positioning, added newtab animations, fixed top toolbar hiding when hovering reload button and new URLBar UI

l10n

@@ -1 +1 @@
-Subproject commit 6b7d9d351f2c874e2700204eeebf1d8a4b1529f5
+Subproject commit bb99a55c2dbad4cd1207f6dbd3c1380801eec751

src/browser/app/profile/zen-browser.js

@@ -107,7 +107,8 @@ pref('zen.view.compact.toolbar-flash-popup.duration', 800);
 pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 pref('zen.view.compact.color-toolbar', true);
 pref('zen.view.compact.color-sidebar', true);
-pref('zen.view.use-deprecated-urlbar', false);
+
+pref('zen.urlbar.behavior', 'float'); // default, floating-on-type, float
 
 #ifdef XP_MACOSX
 // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
@@ -130,9 +131,7 @@ pref('zen.view.sidebar-expanded', true);
 pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 pref('zen.view.experimental-force-window-controls-left', false);
 
-#ifndef XP_MACOSX
 pref('zen.view.hide-window-controls', true);
-#endif
 
 pref('zen.tabs.dim-pending', true);
 pref('zen.tabs.newtab-on-middle-click', true);
@@ -294,3 +293,5 @@ pref('browser.download.autohideButton', false);
 #ifdef XP_MACOSX
 pref('widget.macos.titlebar-blend-mode.behind-window', true);
 #endif
+
+pref("browser.urlbar.maxRichResults", 5);

src/browser/base/content/ZenUIManager.mjs

@@ -378,6 +378,11 @@ var gZenVerticalTabsManager = {
         }
       }
 
+      // Case: single toolbar, not compact mode, not right side and macos styled buttons
+      if (doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) {
+        topButtons.prepend(windowButtons);
+      }
+
       if (doNotChangeWindowButtons) {
         if (isRightSide && !isSidebarExpanded) {
           navBar.appendChild(windowButtons);

src/browser/base/content/zen-styles/zen-animations.css

@@ -25,6 +25,21 @@
   }
 }
 
+@keyframes zen-new-tab-appear-vertical {
+  0% {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+  60% {
+    opacity: 0.8  ;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes zen-main-app-wrapper-animation {
   from {
     opacity: 1;

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -53,6 +53,10 @@
   }
 }
 
+:root:not([zen-single-toolbar='true']) #zen-appcontent-wrapper {
+  z-index: 2;
+}
+
 #zen-main-app-wrapper {
   background: transparent;
   overflow: hidden;

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -2,6 +2,14 @@
 
 @media (-moz-bool-pref: 'zen.view.compact') {
   :root:not([customizing]):not([inDOMFullscreen='true']) {
+    #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
+      max-height: 0 !important;
+      min-height: 0 !important;
+      opacity: 0;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
     @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
         margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
@@ -19,15 +27,6 @@
         display: none !important;
       }
 
-
-      #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
-        max-height: 0 !important;
-        min-height: 0 !important;
-        opacity: 0;
-        overflow: hidden;
-        pointer-events: none;
-      }
-
       #navigator-toolbox {
         --zen-toolbox-max-width: 54px !important;
         --zen-compact-float: calc(var(--zen-element-separation) - 1px);
@@ -147,7 +146,7 @@
           border-bottom-right-radius: var(--zen-border-radius);
           border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
           border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-          transition: all 0.1s ease-in-out;
+          transition: all 0.15s ease;
           width: 100%;
           opacity: 0;
           background: var(--zen-dialog-background);
@@ -157,6 +156,11 @@
             position: relative !important;
           }
 
+          & #urlbar {
+            transform: translateY(-50%);
+            transition: transform 0.1s ease-in-out;
+          }
+
           :root[zen-window-buttons-reversed='true'] & {
             padding-left: 0 !important;
             padding-right: var(--zen-toolbox-padding) !important;
@@ -181,6 +185,10 @@
           border-top-width: 1px;
 
           top: -1px;
+
+          & #urlbar {
+            transform: translateY(0);
+          }
         }
       }
     }

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -42,6 +42,12 @@
       }
     }
   }
+
+  #vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
+    .tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
+      animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+    }
+  }
 }
 
 :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
@@ -218,7 +224,6 @@
   }
 
   & .tabbrowser-tab {
-    animation: none;
     transition: scale 0.1s ease-in-out;
     &[fadein='true']:not([zen-essential='true']) {
       #tabbrowser-tabs[zen-workspace-animation='previous'] & {
@@ -366,7 +371,7 @@
     padding-right: 0;
 
     :root[zen-single-toolbar='true'] & {
-      margin-left: var(--zen-toolbox-padding);
+      margin-left: calc(var(--zen-toolbox-padding) / 2);
       width: calc(100% - var(--zen-toolbox-padding));
       & #urlbar:not([breakout-extend='true']) .urlbar-input-container {
         padding-left: 4px;

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -337,12 +337,7 @@ button.popup-notification-dropmarker {
   }
 }
 
-@media not (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') {
-  #urlbar[open] {
-    z-index: 1000;
-    min-width: 45vw;
-    max-width: 45vw;
-    top: 0 !important;
+#urlbar[open] {
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
   font-size: 1.1em;
@@ -356,6 +351,13 @@ button.popup-notification-dropmarker {
     outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
     outline-offset: -1px !important;
   }
+}
+
+#urlbar[open][zen-floating-urlbar='true'] {
+  z-index: 1000;
+  min-width: 45vw;
+  max-width: 45vw;
+  top: 0 !important;
 
   & #identity-box {
     margin-right: var(--urlbar-margin-inline);
@@ -373,11 +375,74 @@ button.popup-notification-dropmarker {
     border-radius: 10px;
     background: var(--toolbarbutton-hover-background);
   }
-  }
 }
 
-@media (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') {
-  #urlbar[open] {
-    top: 0 !important;
+/* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar
+ *
+ * MIT License
+ *
+ * Copyright (c) 2024 green.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ **/
+.urlbarView-title, .urlbarView-title-separator, .urlbarView-action, .urlbarView-url {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.urlbarView-title {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
+
+.urlbarView-url, .urlbarView-title-separator::before {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #aaa !important;
+}
+
+.urlbarView-favicon {
+  margin-left: 0 !important;
+  margin-right: 12px !important;
+  padding: 6px !important;
+  border-radius: 6px !important;
+}
+
+.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) .urlbarView-action {
+  margin-left: auto !important;
+  margin-right: 0 !important;
+}
+
+.urlbarView-row {
+  .urlbarView-favicon {
+    transition: background-color 0.05s;
+  }
+
+  &:hover {
+    background-color: var(--zen-colors-primary) !important;
+
+    .urlbarView-favicon {
+      background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
+    }
+
+    .urlbarView-url, .urlbarView-title-separator::before {
+      color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
+    }
   }
 }

src/browser/components/preferences/zen-settings.js

@@ -1087,6 +1087,11 @@ Preferences.addAll([
     type: "bool",
     default: true,
   },
+  {
+    id: "zen.urlbar.behavior",
+    type: "string",
+    default: "float",
+  },
   {
     id: "zen.view.compact.color-sidebar",
     type: "bool",

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -340,6 +340,29 @@
         </hbox>
 </groupbox>
 
+<hbox id="zenUrlBarCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+<html:h1 data-l10n-id="zen-urlbar-title"/>
+</hbox>
+
+<groupbox id="zenUrlbarGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-urlbar-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-urlbar-description" />
+
+      <hbox align="center">
+            <label data-l10n-id="zen-urlbar-behavior-label"/>
+            <menulist preference="zen.urlbar.behavior">
+                  <menupopup>
+                        <menuitem data-l10n-id="zen-urlbar-behavior-normal" value="normal"/>
+                        <menuitem data-l10n-id="zen-urlbar-behavior-floating-on-type" value="floating-on-type"/>
+                        <menuitem data-l10n-id="zen-urlbar-behavior-float" value="float"/>
+                  </menupopup>
+            </menulist>
+        </hbox>
+</groupbox>
+
 <hbox id="zenSplitViewCategory"
       class="subcategory"
       hidden="true"

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415bbc9b9800 100644
+index fec3dc8129a4d235fdd05e0390145a02064ebaa5..65f0675f558bda9a1d02335418ffb92bcb2463de 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -402,11 +402,26 @@
@@ -110,7 +110,21 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3342,6 +3374,23 @@
+@@ -2862,6 +2894,13 @@
+         }
+       }
+ 
++      requestAnimationFrame(() => {
++        t.setAttribute("zen-initial-fadein", "true");
++        setTimeout(() => {
++          t.removeAttribute("zen-initial-fadein");
++        }, 2000);
++      });
++
+       // Additionally send pinned tab events
+       if (pinned) {
+         this._notifyPinnedStatus(t);
+@@ -3342,6 +3381,23 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -134,7 +148,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3355,6 +3404,9 @@
+@@ -3355,6 +3411,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -144,7 +158,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3391,6 +3443,21 @@
+@@ -3391,6 +3450,21 @@
              preferredRemoteType,
            });
  
@@ -166,7 +180,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
            if (select) {
              tabToSelect = tab;
            }
-@@ -3444,7 +3511,6 @@
+@@ -3444,7 +3518,6 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -174,7 +188,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
          tab.initialize();
        }
  
-@@ -3992,6 +4058,10 @@
+@@ -3992,6 +4065,10 @@
          return;
        }
  
@@ -185,7 +199,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
        this.removeTabs(selectedTabs);
      },
  
-@@ -4309,6 +4379,13 @@
+@@ -4309,6 +4386,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -199,7 +213,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4324,6 +4401,10 @@
+@@ -4324,6 +4408,10 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
  
@@ -210,7 +224,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4472,7 +4553,7 @@
+@@ -4472,7 +4560,7 @@
  
        var closeWindow = false;
        var newTab = false;
@@ -219,7 +233,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
          closeWindow =
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
-@@ -5265,10 +5346,10 @@
+@@ -5265,10 +5353,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -232,7 +246,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7181,6 +7262,7 @@
+@@ -7181,6 +7269,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -240,7 +254,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -8114,7 +8196,7 @@ var TabContextMenu = {
+@@ -8114,7 +8203,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -249,7 +263,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8148,7 +8230,7 @@ var TabContextMenu = {
+@@ -8148,7 +8237,7 @@ var TabContextMenu = {
      let contextMoveTabToStart = document.getElementById("context_moveToStart");
      let isFirstTab =
        tabsToMove[0] == visibleTabs[0] ||
@@ -258,7 +272,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
      contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
  
      document.getElementById("context_openTabInWindow").disabled =
-@@ -8376,6 +8458,7 @@ var TabContextMenu = {
+@@ -8376,6 +8465,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {

src/browser/components/urlbar/UrlbarInput-sys-mjs.patch

@@ -1,36 +1,65 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index c504c9afc43785b5f003bb1f9f1dfbddef38d78b..e5a1ce5d61962d485d092cf3d1a90ff4833037f1 100644
+index c504c9afc43785b5f003bb1f9f1dfbddef38d78b..289a9dfdc2fd38f7d7c3571732e3897aa978d8d9 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
-@@ -3901,6 +3901,9 @@ export class UrlbarInput {
+@@ -65,6 +65,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
+   false
+ );
+ 
++XPCOMUtils.defineLazyPreferenceGetter(
++  lazy,
++  "ZEN_URLBAR_BEHAVIOR",
++  "zen.urlbar.behavior",
++  'default'
++);
++
+ const DEFAULT_FORM_HISTORY_NAME = "searchbar-history";
+ const SEARCH_BUTTON_CLASS = "urlbar-search-button";
+ 
+@@ -2154,6 +2161,10 @@ export class UrlbarInput {
+ 
+     this.setAttribute("breakout-extend", "true");
+ 
++    if (lazy.ZEN_URLBAR_BEHAVIOR == 'float' || (lazy.ZEN_URLBAR_BEHAVIOR == 'floating-on-type' && !this.focusedViaMousedown)) {
++      this.setAttribute("zen-floating-urlbar", "true");
++    } else this.removeAttribute("zen-floating-urlbar");
++
+     // 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")) {
+@@ -3901,6 +3912,11 @@ export class UrlbarInput {
    }
  
    _on_click(event) {
++    if (lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
 +      event.zenOriginalTarget = this.textbox;
 +      this._on_mousedown(event);
++    }
 +
      if (
        event.target == this.inputField ||
        event.target == this._inputContainer ||
-@@ -4012,8 +4015,11 @@ export class UrlbarInput {
+@@ -4012,8 +4028,11 @@ export class UrlbarInput {
    }
  
    _on_mousedown(event) {
 -    switch (event.currentTarget) {
 +    switch (event.zenOriginalTarget || event.currentTarget) {
        case this.textbox: {
-+        if (event.type != "click") {
++        if (event.type != "click" && lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
 +          return true;
 +        }
          this._mousedownOnUrlbarDescendant = true;
  
          if (
-@@ -4025,7 +4031,7 @@ export class UrlbarInput {
+@@ -4024,8 +4043,8 @@ export class UrlbarInput {
+           break;
          }
  
-         this.focusedViaMousedown = !this.focused;
+-        this.focusedViaMousedown = !this.focused;
 -        this._preventClickSelectsAll = this.focused;
-+        this._preventClickSelectsAll = this.hasAttribute("breakout-extend");
++        this.focusedViaMousedown = !(lazy.ZEN_URLBAR_BEHAVIOR === 'float' ? this.hasAttribute("breakout-extend") : this.focused);
++        this._preventClickSelectsAll = lazy.ZEN_URLBAR_BEHAVIOR === 'default' ? this.focused : this.hasAttribute("breakout-extend");
  
          // Keep the focus status, since the attribute may be changed
          // upon calling this.focus().

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 197e0a1c3030b6346c49a010338130797c1e5f4b..8a3cbba1b533572de4ca7f10d229f16ae7bb6184 100644
+index 197e0a1c3030b6346c49a010338130797c1e5f4b..333d38aea2116c5407ffc242b805db633df12968 100644
 --- a/browser/components/urlbar/UrlbarView.sys.mjs
 +++ b/browser/components/urlbar/UrlbarView.sys.mjs
 @@ -628,7 +628,7 @@ export class UrlbarView {
@@ -7,7 +7,7 @@ index 197e0a1c3030b6346c49a010338130797c1e5f4b..8a3cbba1b533572de4ca7f10d229f16a
        this.input.getAttribute("pageproxystate") == "valid"
      ) {
 -      if (!this.isOpen && ["mousedown", "command"].includes(event.type)) {
-+      if (!this.isOpen && ["click", "command"].includes(event.type)) {
++      if (!this.isOpen && ["mousedown", "click", "command"].includes(event.type)) {
          // Try to reuse the cached top-sites context. If it's not cached, then
          // there will be a gap of time between when the input is focused and
          // when the view opens that can be perceived as flicker.