feat: Fixed issue with workspace changes getting stuck, b=bug #9334, c=common, compact-mode, glance, split-view, tests, workspaces

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..bb0934cf5f170e82de9876642833dc6e9910668c 100644
+index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..74c5fbd66d205f932424224d88135fefdae79d50 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -74,6 +74,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -113,15 +113,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      this.removeAttribute("breakout-extend");
      this.#updateTextboxPosition();
    }
-@@ -2544,6 +2600,7 @@ export class UrlbarInput {
+@@ -2553,7 +2609,7 @@ export class UrlbarInput {
-     let updateKey = {};
-     this._layoutBreakoutUpdateKey = updateKey;
- 
-+    this.valueFormatter._formatURL();
-     await this.window.promiseDocumentFlushed(() => {});
-     await new Promise(resolve => {
-       this.window.requestAnimationFrame(() => {
-@@ -2553,7 +2610,7 @@ export class UrlbarInput {
  
          this.textbox.parentNode.style.setProperty(
            "--urlbar-container-height",
@@ -130,15 +122,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
          );
          this.textbox.style.setProperty(
            "--urlbar-height",
-@@ -2569,6 +2626,7 @@ export class UrlbarInput {
+@@ -2986,6 +3042,7 @@ export class UrlbarInput {
-         this.textbox.showPopover();
-         this.#updateTextboxPosition();
- 
-+        this.valueFormatter._formatURL();
-         resolve();
-       });
-     });
-@@ -2986,6 +3044,7 @@ export class UrlbarInput {
    }
  
    _toggleActionOverride(event) {
@@ -146,7 +130,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      if (
        event.keyCode == KeyEvent.DOM_VK_SHIFT ||
        event.keyCode == KeyEvent.DOM_VK_ALT ||
-@@ -3087,7 +3146,7 @@ export class UrlbarInput {
+@@ -3087,7 +3144,7 @@ export class UrlbarInput {
     */
    _trimValue(val) {
      let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -155,7 +139,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
        : val;
      // Only trim value if the directionality doesn't change to RTL and we're not
      // showing a strikeout https protocol.
-@@ -3303,6 +3362,7 @@ export class UrlbarInput {
+@@ -3303,6 +3360,7 @@ export class UrlbarInput {
      resultDetails = null,
      browser = this.window.gBrowser.selectedBrowser
    ) {
@@ -163,7 +147,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      // 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 +3515,10 @@ export class UrlbarInput {
+@@ -3455,6 +3513,10 @@ export class UrlbarInput {
        }
        reuseEmpty = true;
      }
@@ -174,7 +158,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      if (
        where == "tab" &&
        reuseEmpty &&
-@@ -3462,6 +3526,9 @@ export class UrlbarInput {
+@@ -3462,6 +3524,9 @@ export class UrlbarInput {
      ) {
        where = "current";
      }
@@ -184,7 +168,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      return where;
    }
  
-@@ -3719,6 +3786,7 @@ export class UrlbarInput {
+@@ -3719,6 +3784,7 @@ export class UrlbarInput {
        this.setResultForCurrentValue(null);
        this.handleCommand();
        this.controller.clearLastQueryContextCache();
@@ -192,7 +176,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
  
        this._suppressStartQuery = false;
      });
-@@ -3726,7 +3794,6 @@ export class UrlbarInput {
+@@ -3726,7 +3792,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.
@@ -200,7 +184,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
  
        let controller =
          this.document.commandDispatcher.getControllerForCommand("cmd_paste");
-@@ -4130,6 +4197,7 @@ export class UrlbarInput {
+@@ -4130,6 +4195,7 @@ export class UrlbarInput {
  
      this.document.l10n.setAttributes(
        this.inputField,
@@ -208,7 +192,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
        l10nId,
        l10nId == "urlbar-placeholder-with-name" ? { name } : undefined
      );
-@@ -4241,6 +4309,11 @@ export class UrlbarInput {
+@@ -4241,6 +4307,11 @@ export class UrlbarInput {
    }
  
    _on_click(event) {
@@ -220,7 +204,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
      if (
        event.target == this.inputField ||
        event.target == this._inputContainer
-@@ -4311,7 +4384,7 @@ export class UrlbarInput {
+@@ -4311,7 +4382,7 @@ export class UrlbarInput {
        }
      }
  
@@ -229,7 +213,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
        this.view.autoOpen({ event });
      } else {
        if (this._untrimOnFocusAfterKeydown) {
-@@ -4351,9 +4424,16 @@ export class UrlbarInput {
+@@ -4351,9 +4422,16 @@ export class UrlbarInput {
    }
  
    _on_mousedown(event) {
@@ -247,7 +231,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
  
          if (
            event.target != this.inputField &&
-@@ -4364,6 +4444,10 @@ export class UrlbarInput {
+@@ -4364,6 +4442,10 @@ export class UrlbarInput {
  
          this.focusedViaMousedown = !this.focused;
          this._preventClickSelectsAll = this.focused;
@@ -258,7 +242,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..bb0934cf5f170e82de9876642833dc6e
  
          // Keep the focus status, since the attribute may be changed
          // upon calling this.focus().
-@@ -4399,7 +4483,7 @@ export class UrlbarInput {
+@@ -4399,7 +4481,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/zen/common/ZenUIManager.mjs

@@ -701,6 +701,9 @@ var gZenVerticalTabsManager = {
   },
 
   animateTabClose(aTab) {
+    if (aTab.hasAttribute('zen-essential') || aTab.group?.hasAttribute('split-view-group')) {
+      return Promise.resolve();
+    }
     const height = aTab.getBoundingClientRect().height;
     const visibleItems = gBrowser.tabContainer.ariaFocusableItems;
     const isLastItem = visibleItems[visibleItems.length - 1] === aTab;
@@ -816,16 +819,19 @@ var gZenVerticalTabsManager = {
   },
 
   recalculateURLBarHeight() {
-    document.getElementById('urlbar').removeAttribute('--urlbar-height');
+    requestAnimationFrame(() => {
-    let height;
+      document.getElementById('urlbar').removeAttribute('--urlbar-height');
-    if (!this._hasSetSingleToolbar) {
+      let height;
-      height = 32;
+      if (!this._hasSetSingleToolbar) {
-    } else if (gURLBar.getAttribute('breakout-extend') !== 'true') {
+        height = 32;
-      height = 40;
+      } else if (gURLBar.getAttribute('breakout-extend') !== 'true') {
-    }
+        height = 40;
-    if (typeof height !== 'undefined') {
+      }
-      document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
+      if (typeof height !== 'undefined') {
-    }
+        document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
+      }
+      gURLBar.valueFormatter._formatURL();
+    });
   },
 
   _updateEvent({ forCustomizableMode = false, dontRebuildAreas = false } = {}) {

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

@@ -192,7 +192,7 @@
       --zen-urlbar-background-transparent,
       var(--zen-urlbar-background-base)
     ) !important;
-    box-shadow: 0px 0px 90px -10px light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)) !important;
+    box-shadow: 0px 0px 90px -10px light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.75)) !important;
     backdrop-filter: none !important;
     border-radius: 12px !important;
     outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important;

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

@@ -95,7 +95,7 @@
       }
 
       &:not([zen-right-side='true']) #navigator-toolbox {
-        left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
+        left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
       }
 
       /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -115,7 +115,7 @@
 
       &[zen-right-side='true'] {
         & #navigator-toolbox:not([animate='true']) {
-          right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
+          right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
         }
 
         & .browserSidebarContainer {

src/zen/glance/ZenGlanceManager.mjs

@@ -174,7 +174,7 @@
             parentSidebarContainer,
             {
               scale: [1, 0.98],
-              opacity: [1, 0.8],
+              opacity: [1, 0.7],
             },
             {
               duration: 0.4,
@@ -322,7 +322,7 @@
           browserSidebarContainer,
           {
             scale: [0.98, 1],
-            opacity: [0.8, 1],
+            opacity: [0.7, 1],
           },
           {
             duration: 0.4,

src/zen/split-view/ZenViewSplitter.mjs

@@ -188,7 +188,11 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    * @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 = false, dontRebuildGrid = false } = {}) {
+  removeTabFromGroup(
+    tab,
+    groupIndex,
+    { forUnsplit = false, dontRebuildGrid = false, changeTab = true } = {}
+  ) {
     const group = this._data[groupIndex];
     const tabIndex = group.tabs.indexOf(tab);
     group.tabs.splice(tabIndex, 1);
@@ -206,7 +210,9 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
         }
       }
       this.removeGroup(groupIndex);
-      gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1];
+      if (changeTab) {
+        gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1];
+      }
     } else {
       const node = this.getSplitNodeFromTab(tab);
       const toUpdate = this.removeNode(node);
@@ -1940,14 +1946,19 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     window.addEventListener(
       'ZenURLBarClosed',
       (event) => {
-        const { onElementPicked } = event.detail;
+        const { onElementPicked, onSwitch } = event.detail;
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(emptyTab));
         const newSelectedTab = gBrowser.selectedTab;
         const cleanup = () => {
-          this.removeTabFromGroup(emptyTab, groupIndex);
+          this.removeTabFromGroup(emptyTab, groupIndex, { changeTab: false });
         };
         if (onElementPicked) {
-          if (newSelectedTab === emptyTab || newSelectedTab === selectedTab) {
+          if (
+            newSelectedTab === emptyTab ||
+            newSelectedTab === selectedTab ||
+            selectedTab.getAttribute('zen-workspace-id') !==
+              newSelectedTab.getAttribute('zen-workspace-id')
+          ) {
             cleanup();
             return;
           }
@@ -1956,7 +1967,9 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
           this.resetTabState(emptyTab, false);
           this.splitTabs([selectedTab, newSelectedTab], 'grid', 1);
         } else {
-          gBrowser.selectedTab = selectedTab;
+          if (!onSwitch) {
+            gBrowser.selectedTab = selectedTab;
+          }
           cleanup();
         }
       },

src/zen/tests/ub-actions/browser_ub_actions_search.js

@@ -16,8 +16,12 @@ add_task(async function test_Ub_Actions_Search() {
       waitForFocus,
       value: label,
     });
-    let { result } = await UrlbarTestUtils.getRowAt(window, Math.min(action.suggestedIndex, 1));
+    await new Promise((resolve) =>
-    Assert.equal(result.providerName, 'ZenUrlbarProviderGlobalActions');
+      setTimeout(async () => {
-    Assert.equal(result.payload.title, label);
+        let { result } = await UrlbarTestUtils.getRowAt(window, Math.min(action.suggestedIndex, 1));
+        Assert.equal(result.providerName, 'ZenUrlbarProviderGlobalActions');
+        Assert.equal(result.payload.title, label);
+      }, 100)
+    );
   }
 });

src/zen/tests/workspaces/browser_double_click_newtab.js

@@ -14,7 +14,10 @@ add_setup(async function () {
 });
 
 add_task(async function test_Check_Creation() {
-  const placeToDoubleClick = gZenWorkspaces.activeWorkspaceStrip;
+  const placeToDoubleClick = gZenWorkspaces.activeWorkspaceElement.querySelector(
+    '.zen-workspace-empty-space'
+  );
+  ok(placeToDoubleClick, 'We should have found the place to double click.');
   EventUtils.sendMouseEvent({ type: 'dblclick' }, placeToDoubleClick, window);
   await TestUtils.waitForCondition(() => gBrowser.tabs.length === 3, 'New tab should be opened.');
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2107,7 +2107,13 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
       gZenUIManager._preventToolbarRebuild = true;
       gZenUIManager.updateTabsToolbar();
     }
-    await Promise.all(animations);
+    let promiseTimeout = new Promise((resolve) =>
+      setTimeout(resolve, kGlobalAnimationDuration * 1000 + 50)
+    );
+    // See issue https://github.com/zen-browser/desktop/issues/9334, we need to add
+    // some sort of timeout to the animation promise, just in case it gets stuck.
+    // We are doing a race between the timeout and the animations finishing.
+    await Promise.race([Promise.all(animations), promiseTimeout]).catch(console.error);
     document.documentElement.removeAttribute('animating-background');
     if (shouldAnimate) {
       for (const cloned of clonedEssentials) {

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.15.5b",
+        "displayVersion": "1.16b",
         "github": {
           "repo": "zen-browser/desktop"
         },