Added options for floating urlbar, fixed macos weird window control p…

…ositioning, added newtab animations, fixed top toolbar hiding when hovering reload button and new URLBar UI

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,47 +337,112 @@ 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-container-height: 55px !important;
-    --urlbar-margin-inline: 10px !important;
-    font-size: 1.1em;
-
-    & #urlbar-background {
-      /* We cant have a transparent background with a backdrop-filter because on normal websites,
-        the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
-        due to performance issues */
-      background-color: var(--zen-branding-bg) !important;
-      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
-      outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
-      outline-offset: -1px !important;
-    }
+#urlbar[open] {
+  --urlbar-container-height: 55px !important;
+  --urlbar-margin-inline: 10px !important;
+  font-size: 1.1em;
+
+  & #urlbar-background {
+    /* We cant have a transparent background with a backdrop-filter because on normal websites,
+      the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
+      due to performance issues */
+    background-color: var(--zen-branding-bg) !important;
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+    outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
+    outline-offset: -1px !important;
+  }
+}
 
-    & #identity-box {
-      margin-right: var(--urlbar-margin-inline);
-    }
+#urlbar[open][zen-floating-urlbar='true'] {
+  z-index: 1000;
+  min-width: 45vw;
+  max-width: 45vw;
+  top: 0 !important;
 
-    :root[zen-right-side='true'] & {
-      right: 0;
-    }
-    position: absolute;
+  & #identity-box {
+    margin-right: var(--urlbar-margin-inline);
+  }
 
-    top: calc(var(--zen-toolbar-height) * 2) !important;
-    left: 28vw;
+  :root[zen-right-side='true'] & {
+    right: 0;
+  }
+  position: absolute;
 
-    #urlbar-container:has(&) {
-      border-radius: 10px;
-      background: var(--toolbarbutton-hover-background);
-    }
+  top: calc(var(--zen-toolbar-height) * 2) !important;
+  left: 28vw;
+
+  #urlbar-container:has(&) {
+    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"