feat: Polished split view creation and fixed minor details, b=no-bug, c=tabs, common, compact-mode, folders, glance, split-view, workspaces

prefs/theme.yaml

@@ -9,7 +9,7 @@
   value: 8
 
 - name: zen.theme.dark-mode-bias
-  value: 0.25
+  value: 0.3
 
 - name: zen.theme.gradient
   value: true

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index c7557dad38db9ef02b981c46de9595df77cb67db..c2001aac234d1575498df82db21da2374efe9697 100644
+index c7557dad38db9ef02b981c46de9595df77cb67db..510cf06c69253ef25d1d411ad424d892fc91a208 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -44,6 +44,9 @@
@@ -415,7 +415,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..c2001aac234d1575498df82db21da237
 -        (lastMovingTabScreenX + tabWidth);
 -      let lastBoundY = periphery.screenY - (lastMovingTabScreenY + tabHeight);
 +        (lastMovingTabScreenX + tabWidth) + 4;
-+      let lastBoundY = 0;
++      let lastBoundY = lastTab.screenY - lastMovingTabScreenY;
        translateX = Math.min(Math.max(translateX, firstBoundX), lastBoundX);
        translateY = Math.min(Math.max(translateY, firstBoundY), lastBoundY);
  

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..ff09a4c158b0f4a37dc3b01a5de9cb1062e526fe 100644
+index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e9910668c 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -74,6 +74,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -70,7 +70,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..ff09a4c158b0f4a37dc3b01a5de9cb10
 +      if (this._zenHandleUrlbarClose) {
 +        this._zenHandleUrlbarClose(true, true);
 +      } else {
-+        this.view.close({ elementPicked: true });
++        this.window.setTimeout(() => this.view.close({ elementPicked: true }), 0);
 +      }
      }
  

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..2a6f22178aa42e8f1a7d0b58e02db85f712b01dc 100644
+index fdbab8806fd320f4aacec46a42c8ef953580d00c..e23fae0d7e0b71d74899c11c229359864cd7e427 100644
 --- a/browser/components/urlbar/UrlbarView.sys.mjs
 +++ b/browser/components/urlbar/UrlbarView.sys.mjs
 @@ -613,7 +613,7 @@ export class UrlbarView {
@@ -11,11 +11,16 @@ index fdbab8806fd320f4aacec46a42c8ef953580d00c..2a6f22178aa42e8f1a7d0b58e02db85f
          // 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.
-@@ -824,6 +824,26 @@ export class UrlbarView {
+@@ -824,6 +824,31 @@ export class UrlbarView {
          // still associated with the first result.
          this.input.setResultForCurrentValue(firstResult);
        }
 +      if (queryContext.results[0].payload.zenAction) {
++        this.#selectElement(this.getFirstSelectableElement(), {
++          updateInput: false,
++          setAccessibleFocus:
++            this.controller._userSelectionBehavior == "arrow",
++        });
 +        this.window.setTimeout(() => {
 +          this.window.setTimeout(() => {
 +            this.#selectElement(this.getFirstSelectableElement(), {
@@ -38,7 +43,7 @@ index fdbab8806fd320f4aacec46a42c8ef953580d00c..2a6f22178aa42e8f1a7d0b58e02db85f
      }
  
      // Announce tab-to-search results to screen readers as the user types.
-@@ -2706,6 +2726,8 @@ export class UrlbarView {
+@@ -2706,6 +2731,8 @@ export class UrlbarView {
        if (row?.hasAttribute("row-selectable")) {
          row?.toggleAttribute("selected", true);
        }
@@ -47,7 +52,7 @@ index fdbab8806fd320f4aacec46a42c8ef953580d00c..2a6f22178aa42e8f1a7d0b58e02db85f
        if (element != row) {
          row?.toggleAttribute("descendant-selected", true);
        }
-@@ -3189,7 +3211,7 @@ export class UrlbarView {
+@@ -3189,7 +3216,7 @@ export class UrlbarView {
    }
  
    #enableOrDisableRowWrap() {

src/zen/common/ZenUIManager.mjs

@@ -145,7 +145,10 @@ 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 / 2}px`);
+    gURLBar.textbox.style.setProperty(
+      '--zen-urlbar-width',
+      `${Math.min(window.innerWidth / 2, 800)}px`
+    );
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
     gZenVerticalTabsManager.recalculateURLBarHeight();
     if (!this._preventToolbarRebuild) {
@@ -328,8 +331,8 @@ var gZenUIManager = {
 
     // Open location command
     try {
-      document.getElementById('Browser:OpenLocation').doCommand();
       gURLBar.search(this._lastSearch || '');
+      document.getElementById('Browser:OpenLocation').doCommand();
     } catch (e) {
       console.error('Error opening location in new tab:', e);
       this.handleUrlbarClose(false);
@@ -699,12 +702,18 @@ var gZenVerticalTabsManager = {
 
   animateTabClose(aTab) {
     const height = aTab.getBoundingClientRect().height;
+    const visibleItems = gBrowser.tabContainer.ariaFocusableItems;
+    const isLastItem = visibleItems[visibleItems.length - 1] === aTab;
     return gZenUIManager.motion.animate(
       aTab,
       {
         opacity: [1, 0],
         transform: ['scale(1)', 'scale(0.95)'],
+        ...(isLastItem
+          ? {}
+          : {
               marginBottom: [`0px`, `-${height}px`],
+            }),
       },
       {
         duration: 0.075,

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

@@ -32,7 +32,7 @@
   }
 
   &[zen-floating-urlbar='true'] {
-    --urlbar-container-padding: 2px;
+    --urlbar-container-padding: 3px;
   }
 }
 
@@ -179,7 +179,7 @@
   & .urlbar-background {
     --zen-urlbar-background-base: light-dark(
       white,
-      color-mix(in srgb, hsl(0, 0%, 5%), var(--zen-colors-primary) 20%)
+      color-mix(in srgb, hsl(0, 0%, 1%), var(--zen-colors-primary) 25%)
     );
     @media -moz-pref('zen.theme.acrylic-elements') {
       --zen-urlbar-background-transparent: color-mix(
@@ -502,6 +502,7 @@
   padding: 6px 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   font-size: 10px;
+  margin-right: 2px;
 
   &:empty {
     display: none !important;
@@ -646,7 +647,7 @@
 }
 
 #urlbar-results {
-  max-height: 262px;
+  max-height: 260px;
   overflow-y: auto;
   scrollbar-width: none;
   margin-block-start: var(--urlbarView-results-padding);

src/zen/compact-mode/zen-compact-mode.css

@@ -148,10 +148,11 @@
         & #zen-toolbar-background {
           display: flex;
           overflow: clip;
-          background: transparent;
           z-index: -1;
+          background: var(--zen-dialog-background);
           box-shadow: var(--zen-big-shadow);
           @media -moz-pref('zen.theme.acrylic-elements') {
+            background: transparent;
             backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
           }
 

src/zen/folders/ZenFolders.mjs

@@ -625,7 +625,7 @@
 
     openTabsPopup(event) {
       event.stopPropagation();
-      if (document.documentElement.getAttribute('zen-renaming-tab')) {
+      if (document.documentElement.getAttribute('zen-renaming-tab') || gURLBar.focused) {
         return;
       }
 

src/zen/glance/ZenGlanceManager.mjs

@@ -148,7 +148,6 @@
       const initialHeight = data.height;
 
       this.browserWrapper?.removeAttribute('animate');
-      this.browserWrapper?.removeAttribute('animate-end');
       this.browserWrapper?.removeAttribute('has-finished-animation');
       this.overlay?.removeAttribute('post-fade-out');
 
@@ -160,7 +159,6 @@
 
       this.overlay.classList.add('zen-glance-overlay');
 
-      this.browserWrapper.removeAttribute('animate-end');
       return new Promise((resolve) => {
         window.requestAnimationFrame(() => {
           this.quickOpenGlance();
@@ -184,7 +182,6 @@
               bounce: 0.2,
             }
           );
-          this.#currentBrowser.setAttribute('animate-glance-open', true);
           this.overlay.removeAttribute('fade-out');
           this.browserWrapper.setAttribute('animate', true);
           const top = initialY + initialHeight / 2;
@@ -220,10 +217,8 @@
             )
             .then(() => {
               gBrowser.tabContainer._invalidateCachedTabs();
-              this.#currentBrowser.removeAttribute('animate-glance-open');
               this.overlay.style.removeProperty('overflow');
               this.browserWrapper.removeAttribute('animate');
-              this.browserWrapper.setAttribute('animate-end', true);
               this.browserWrapper.setAttribute('has-finished-animation', true);
               this._animating = false;
               this.animatingOpen = false;
@@ -351,7 +346,6 @@
           )
           .then(() => {
             this.browserWrapper.removeAttribute('animate');
-            this.browserWrapper.removeAttribute('animate-end');
             if (!this.#currentParentTab) {
               return;
             }
@@ -669,7 +663,7 @@
           height: ['100%', '100%'],
         },
         {
-          duration: 0.4,
+          duration: 0.3,
           type: 'spring',
           bounce: 0,
         }

src/zen/glance/zen-glance.css

@@ -153,13 +153,8 @@
 
   &[fade-out='true'] {
     & browser {
-      transition: opacity 0.1s ease;
+      transition: opacity 0.2s ease;
       opacity: 0;
     }
   }
-
-  & browser[animate-glance-open='true'] {
-    transition: opacity 0.2s ease-in-out;
-    opacity: 0;
-  }
 }

src/zen/split-view/ZenViewSplitter.mjs

@@ -148,7 +148,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     if (groupIndex < 0) {
       return;
     }
-    this.removeTabFromGroup(tab, groupIndex, true);
+    this.removeTabFromGroup(tab, groupIndex, { forUnsplit: true });
   }
 
   /**
@@ -185,9 +185,10 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    *
    * @param {Tab} tab - The tab to remove.
    * @param {number} groupIndex - The index of the group.
-   * @param {boolean} forUnsplit - Indicates if the tab is being removed for unsplitting.
+   * @param {boolean} [forUnsplit=false] - Whether the removal is for unsplitting.
+   * @param {boolean} [dontRebuildGrid=false] - Whether to skip rebuilding the grid layout.
    */
-  removeTabFromGroup(tab, groupIndex, forUnsplit) {
+  removeTabFromGroup(tab, groupIndex, { forUnsplit = false, dontRebuildGrid = false } = {}) {
     const group = this._data[groupIndex];
     const tabIndex = group.tabs.indexOf(tab);
     group.tabs.splice(tabIndex, 1);
@@ -199,9 +200,11 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     if (group.tabs.length < 2) {
       // We need to remove all remaining tabs from the group when unsplitting
       let remainingTabs = [...group.tabs]; // Copy array since we'll modify it
+      if (!dontRebuildGrid) {
         for (let remainingTab of remainingTabs) {
           this.resetTabState(remainingTab, forUnsplit);
         }
+      }
       this.removeGroup(groupIndex);
       gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1];
     } else {
@@ -1602,7 +1605,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(tab));
         this.deactivateCurrentSplitView();
         if (groupIndex >= 0) {
-          this.removeTabFromGroup(tab, groupIndex, true);
+          this.removeTabFromGroup(tab, groupIndex, { forUnsplit: true });
         }
         gBrowser.selectedTab = tab;
         tab._selected = true;
@@ -1940,17 +1943,21 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
         const { onElementPicked } = event.detail;
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(emptyTab));
         const newSelectedTab = gBrowser.selectedTab;
-        requestAnimationFrame(() => {
+        const cleanup = () => {
           this.removeTabFromGroup(emptyTab, groupIndex);
+        };
         if (onElementPicked) {
           if (newSelectedTab === emptyTab || newSelectedTab === selectedTab) {
+            cleanup();
             return;
           }
+          gBrowser.selectedTab = selectedTab;
+          this.removeTabFromGroup(emptyTab, groupIndex, { forUnsplit: true });
           this.splitTabs([selectedTab, newSelectedTab], 'grid', 1);
         } else {
           gBrowser.selectedTab = selectedTab;
+          cleanup();
         }
-        });
       },
       { once: true }
     );

src/zen/urlbar/ZenUBActionsProvider.sys.mjs

@@ -35,6 +35,11 @@ XPCOMUtils.defineLazyPreferenceGetter(
  * A provider that lets the user view all available global actions for a query.
  */
 export class ZenUrlbarProviderGlobalActions extends UrlbarProvider {
+  constructor() {
+    super();
+    lazy.UrlbarResult.addDynamicResultType(DYNAMIC_TYPE_NAME);
+  }
+
   get name() {
     return 'ZenUrlbarProviderGlobalActions';
   }
@@ -211,7 +216,7 @@ export class ZenUrlbarProviderGlobalActions extends UrlbarProvider {
   }
 
   async startQuery(queryContext, addCallback) {
-    const query = queryContext.searchString.trim().toLowerCase();
+    const query = queryContext.trimmedLowerCaseSearchString;
     if (!query) {
       return;
     }

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -126,7 +126,7 @@
         darkModeChange
       );
 
-      XPCOMUtils.defineLazyPreferenceGetter(this, 'darkModeBias', 'zen.theme.dark-mode-bias', 0.25);
+      XPCOMUtils.defineLazyPreferenceGetter(this, 'darkModeBias', 'zen.theme.dark-mode-bias', 0.5);
     }
 
     handleDarkModeChange() {
@@ -1182,15 +1182,12 @@
           let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
           let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
           let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
-          if (!forToolbar) {
           return [
-              `radial-gradient(circle at 0% 0%, ${color2}, transparent 100%)`,
+            `linear-gradient(to top, ${color1} -50%, transparent 110%)`,
-              `radial-gradient(circle at 100% 0%, ${color3}, transparent 100%)`,
+            `radial-gradient(circle at 0% 0%, ${color2} 10%, transparent 80%)`,
-              `linear-gradient(to top, ${color1} 0%, transparent 60%)`,
+            `radial-gradient(circle at 100% -100%, ${color3} -100%, transparent 400%)`,
           ].join(', ');
         }
-          return [`linear-gradient(-45deg, ${color1} 15%, ${color2})`].join(', ');
-        }
       }
     }