gh-14320: fix workspace change icon picker state when opening (gh-14321)

The picker reset its page with a smooth scrollIntoView while the popup
was hiding, and positioned the page before the popup was laid out, so it
could animate/jump on open. Reset instantly on popupshown (after layout)
instead, and drop the on-hide scroll so there's no visible animation.

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

@@ -1,8 +1,23 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9ea21b6f6 100644
+index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..b9a1cfe3a4a5035d9b06b0b3826a97c52cfcb39e 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
-@@ -220,7 +220,7 @@
+@@ -197,8 +197,12 @@
+       XPCOMUtils.defineLazyPreferenceGetter(
+         this,
+         "_sidebarPositionStart",
+-        "sidebar.position_start",
+-        true
++        "zen.tabs.vertical.right-side",
++        true,
++        null,
++        newValue => {
++          return !newValue;
++        }
+       );
+ 
+       if (gMultiProcessBrowser) {
+@@ -220,7 +224,7 @@
  
        this.tooltip = "tabbrowser-tab-tooltip";
  
@@ -11,7 +26,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        this.tabDragAndDrop.init();
      }
  
-@@ -444,7 +444,7 @@
+@@ -444,7 +448,7 @@
        // and we're not hitting the scroll buttons.
        if (
          event.button != 0 ||
@@ -20,7 +35,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
          event.composedTarget.localName == "toolbarbutton"
        ) {
          return;
-@@ -525,7 +525,6 @@
+@@ -525,7 +529,6 @@
              });
            }
          } else if (isTabGroupLabel(event.target)) {
@@ -28,7 +43,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
          } else if (
            event.originalTarget.closest("scrollbox") &&
            !Services.prefs.getBoolPref(
-@@ -561,6 +560,9 @@
+@@ -561,6 +564,9 @@
      }
  
      on_keydown(event) {
@@ -38,7 +53,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        let { altKey, shiftKey } = event;
        let [accel, nonAccel] =
          AppConstants.platform == "macosx"
-@@ -755,7 +757,6 @@
+@@ -755,7 +761,6 @@
        this._updateCloseButtons();
  
        if (!this.#animatingGroups.size) {
@@ -46,7 +61,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        }
  
        document
-@@ -822,7 +823,7 @@
+@@ -822,7 +827,7 @@
      }
  
      get newTabButton() {
@@ -55,7 +70,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
      }
  
      get verticalMode() {
-@@ -838,6 +839,7 @@
+@@ -838,6 +843,7 @@
      }
  
      get overflowing() {
@@ -63,7 +78,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        return this.hasAttribute("overflow");
      }
  
-@@ -851,29 +853,56 @@
+@@ -851,29 +857,56 @@
        if (pinnedChildren?.at(-1)?.id == "pinned-tabs-container-periphery") {
          pinnedChildren.pop();
        }
@@ -93,7 +108,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
 +          } else if (!isTab(tab)) {
 +            tabs.splice(i, 1);
 +          }
-         }
++        }
 +      };
 +      expandTabs(pinnedTabs);
 +      expandTabs(unpinnedChildren);
@@ -114,7 +129,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
 +          // remove the separator from the list
 +          allTabs.splice(i, 1);
 +          i--;
-+        }
+         }
 +        i++;
        }
 -
@@ -130,7 +145,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
      }
  
      get allSplitViews() {
-@@ -958,29 +987,28 @@
+@@ -958,29 +991,28 @@
          return this.#focusableItems;
        }
  
@@ -170,7 +185,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        this.#focusableItems = focusableItems;
  
        return this.#focusableItems;
-@@ -993,6 +1021,7 @@
+@@ -993,6 +1025,7 @@
       * focusable (ex, we don't want the splitview container to be focusable, only its children).
       */
      get dragAndDropElements() {
@@ -178,7 +193,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        if (this.#dragAndDropElements) {
          return this.#dragAndDropElements;
        }
-@@ -1063,6 +1092,7 @@
+@@ -1063,6 +1096,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -186,7 +201,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1082,7 +1112,8 @@
+@@ -1082,7 +1116,8 @@
  
      isContainerVerticalPinnedGrid(tab) {
        return (
@@ -196,7 +211,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
          this.verticalMode &&
          this.hasAttribute("expanded") &&
          !this.expandOnHover
-@@ -1176,7 +1207,7 @@
+@@ -1176,7 +1211,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -205,7 +220,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        }
  
        node.before(tab);
-@@ -1271,7 +1302,7 @@
+@@ -1271,7 +1306,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -214,7 +229,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1376,8 +1407,10 @@
+@@ -1376,8 +1411,10 @@
       */
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -225,7 +240,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1386,7 +1419,7 @@
+@@ -1386,7 +1423,7 @@
       * @param {boolean} [shouldScrollInstantly=false]
       */
      #ensureTabIsVisible(tab, shouldScrollInstantly = false) {
@@ -234,7 +249,7 @@ index 568f3a7cc7051ff8cb569f6bcb8018a5212f7072..3036768b8911b4fbc28df7528f7189d9
        if (arrowScrollbox?.overflowing) {
          arrowScrollbox.ensureElementIsVisible(tab, shouldScrollInstantly);
        }
-@@ -1513,7 +1546,7 @@
+@@ -1513,7 +1550,7 @@
      }
  
      _notifyBackgroundTab(aTab) {

src/zen/common/emojis/ZenEmojiPicker.mjs

@@ -6,29 +6,29 @@ import { nsZenDOMOperatedFeature } from "chrome://browser/content/zen-components
 
 // prettier-ignore
 const SVG_ICONS = [
-    "airplane.svg", "american-football.svg", "baseball.svg", "basket.svg", 
+  "airplane.svg", "american-football.svg", "baseball.svg", "basket.svg",
-    "bed.svg", "bell.svg", "bookmark.svg", "book.svg", 
+  "bed.svg", "bell.svg", "bookmark.svg", "book.svg",
-    "briefcase.svg", "brush.svg", "bug.svg", "build.svg", 
+  "briefcase.svg", "brush.svg", "bug.svg", "build.svg",
-    "cafe.svg", "call.svg", "card.svg", "chat.svg", 
+  "cafe.svg", "call.svg", "card.svg", "chat.svg",
-    "checkbox.svg", "circle.svg", "cloud.svg", "code.svg", 
+  "checkbox.svg", "circle.svg", "cloud.svg", "code.svg",
-    "coins.svg", "construct.svg", "cutlery.svg", "egg.svg", 
+  "coins.svg", "construct.svg", "cutlery.svg", "egg.svg",
-    "extension-puzzle.svg", "eye.svg", "fast-food.svg", "fish.svg", 
+  "extension-puzzle.svg", "eye.svg", "fast-food.svg", "fish.svg",
-    "flag.svg", "flame.svg", "flask.svg", "folder.svg", 
+  "flag.svg", "flame.svg", "flask.svg", "folder.svg",
-    "game-controller.svg", "globe-1.svg", "globe.svg", "grid-2x2.svg", 
+  "game-controller.svg", "globe-1.svg", "globe.svg", "grid-2x2.svg",
-    "grid-3x3.svg", "heart.svg", "ice-cream.svg", "image.svg", 
+  "grid-3x3.svg", "heart.svg", "ice-cream.svg", "image.svg",
-    "inbox.svg", "key.svg", "layers.svg", "leaf.svg", 
+  "inbox.svg", "key.svg", "layers.svg", "leaf.svg",
-    "lightning.svg", "location.svg", "lock-closed.svg", "logo-rss.svg", 
+  "lightning.svg", "location.svg", "lock-closed.svg", "logo-rss.svg",
-    "logo-usd.svg", "mail.svg", "map.svg", "megaphone.svg", 
+  "logo-usd.svg", "mail.svg", "map.svg", "megaphone.svg",
-    "moon.svg", "music.svg", "navigate.svg", "nuclear.svg", 
+  "moon.svg", "music.svg", "navigate.svg", "nuclear.svg",
-    "page.svg", "palette.svg", "paw.svg", "people.svg", 
+  "page.svg", "palette.svg", "paw.svg", "people.svg",
-    "pizza.svg", "planet.svg", "present.svg", "rocket.svg", 
+  "pizza.svg", "planet.svg", "present.svg", "rocket.svg",
-    "school.svg", "shapes.svg", "shirt.svg", "skull.svg", 
+  "school.svg", "shapes.svg", "shirt.svg", "skull.svg",
-    "squares.svg", "square.svg", "star-1.svg", "star.svg", 
+  "squares.svg", "square.svg", "star-1.svg", "star.svg",
-    "stats-chart.svg", "sun.svg", "tada.svg", "terminal.svg", 
+  "stats-chart.svg", "sun.svg", "tada.svg", "terminal.svg",
-    "ticket.svg", "time.svg", "trash.svg", "triangle.svg", 
+  "ticket.svg", "time.svg", "trash.svg", "triangle.svg",
-    "video.svg", "volume-high.svg", "wallet.svg", "warning.svg", 
+  "video.svg", "volume-high.svg", "wallet.svg", "warning.svg",
-    "water.svg", "weight.svg", 
+  "water.svg", "weight.svg",
-  ];
+];
 
 class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
   #panel;
@@ -47,6 +47,7 @@ class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
   init() {
     this.#panel = document.getElementById("PanelUI-zen-emojis-picker");
     this.#panel.addEventListener("popupshowing", this);
+    this.#panel.addEventListener("popupshown", this);
     this.#panel.addEventListener("popuphidden", this);
     this.#panel.addEventListener("command", this);
     this.searchInput.addEventListener("input", this);
@@ -57,6 +58,9 @@ class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
       case "popupshowing":
         this.#onPopupShowing(event);
         break;
+      case "popupshown":
+        this.#onPopupShown(event);
+        break;
       case "popuphidden":
         this.#onPopupHidden(event);
         break;
@@ -103,17 +107,20 @@ class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
     return document.getElementById("PanelUI-zen-emojis-picker-search");
   }
 
-  #changePage(toSvg = false) {
+  #changePage(toSvg = false, { animate = true } = {}) {
+    const pages = document.getElementById("PanelUI-zen-emojis-picker-pages");
     const itemToScroll = toSvg
       ? this.svgList
-      : document
+      : pages.querySelector('[emojis="true"]');
-          .getElementById("PanelUI-zen-emojis-picker-pages")
+    if (animate) {
-          .querySelector('[emojis="true"]');
+      itemToScroll.scrollIntoView({
-    itemToScroll.scrollIntoView({
+        behavior: "smooth",
-      behavior: "smooth",
+        block: "nearest",
-      block: "nearest",
+        inline: "start",
-      inline: "start",
+      });
-    });
+    } else {
+      pages.scrollLeft = toSvg ? itemToScroll.offsetLeft : 0;
+    }
     const button = document.getElementById(
       `PanelUI-zen-emojis-picker-change-${toSvg ? "svg" : "emojis"}`
     );
@@ -180,9 +187,6 @@ class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
         });
         emojiList.appendChild(item);
       }
-      setTimeout(() => {
-        this.searchInput.focus();
-      }, 500);
     }
     const svgList = this.svgList;
     for (const icon of SVG_ICONS) {
@@ -199,14 +203,23 @@ class nsZenEmojiPicker extends nsZenDOMOperatedFeature {
     }
   }
 
+  #onPopupShown(event) {
+    if (event.target !== this.#panel) {
+      return;
+    }
+    const allowEmojis = !this.#panel.hasAttribute("only-svg-icons");
+    if (allowEmojis) {
+      this.searchInput.focus({ preventScroll: true });
+    }
+    this.#changePage(false, { animate: false });
+  }
+
   #onPopupHidden(event) {
     if (event.target !== this.#panel) {
       return;
     }
     this.#clearEmojis();
 
-    this.#changePage(false);
-
     const emojiList = this.emojiList;
     emojiList.innerHTML = "";
 

src/zen/drag-and-drop/ZenDragAndDrop.js

@@ -723,8 +723,11 @@
       const { isNearLeftEdge, isNearRightEdge } =
         this.#shouldSwitchSpace(event);
       if (isNearLeftEdge || isNearRightEdge) {
-        if (!this.#changeSpaceTimer) {
+        if (!this.#changeSpaceTimer && !this.#isOutOfWindow) {
           this.#changeSpaceTimer = setTimeout(() => {
+            if (this.#isOutOfWindow) {
+              return;
+            }
             this.clearDragOverVisuals();
             gZenWorkspaces
               .changeWorkspaceShortcut(
@@ -956,8 +959,10 @@
       if (ownerGlobal?.gZenCompactModeManager) {
         // Sometimes, dragend doesn't always get called when dragging
         // to different windows, see gh-8643.
-        delete ownerGlobal.gZenCompactModeManager._isTabBeingDragged;
+        requestAnimationFrame(() => {
-        ownerGlobal.gZenCompactModeManager._clearAllHoverStates();
+          delete ownerGlobal.gZenCompactModeManager._isTabBeingDragged;
+          ownerGlobal.gZenCompactModeManager._clearAllHoverStates();
+        });
       }
       this.clearSpaceSwitchTimer();
       gZenFolders.highlightGroupOnDragOver(null);

src/zen/glance/ZenGlanceManager.mjs

@@ -53,6 +53,10 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
   #setupEventListeners() {
     window.addEventListener("TabClose", this.onTabClose.bind(this));
     window.addEventListener("TabSelect", this.onLocationChange.bind(this));
+    window.addEventListener(
+      "MozDOMFullscreen:Entered",
+      this.onFullscreenEntered.bind(this)
+    );
 
     document
       .getElementById("tabbrowser-tabpanels")
@@ -1414,6 +1418,23 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
     }
   }
 
+  /**
+   * Handle DOM Fullscreen request while inside glance
+   *
+   * @param {Event} event - The MozDOMFullscreen:Entered event
+   */
+  onFullscreenEntered(event) {
+    const browser = this.#currentBrowser;
+
+    if (!browser) {
+      return;
+    }
+
+    if (event.target === browser) {
+      this.fullyOpenGlance();
+    }
+  }
+
   /**
    * Manage tab close for glance tabs
    *

src/zen/spaces/ZenSpaceManager.mjs

@@ -1506,19 +1506,27 @@ class nsZenWorkspaces {
         continue;
       }
 
+      const newtabPlacement = Services.prefs.getBoolPref(
+        "zen.view.show-newtab-button-top",
+        false
+      );
+      const insertElement = newtabPlacement
+        ? container.firstChild
+        : container.lastChild;
+
       if (container) {
         if (tab.group?.hasAttribute("split-view-group")) {
           gBrowser.zenHandleTabMove(tab.group, () => {
             for (const subTab of tab.group.tabs) {
               subTab.setAttribute("zen-workspace-id", workspaceID);
             }
-            container.insertBefore(tab.group, container.lastChild);
+            container.insertBefore(tab.group, insertElement);
           });
           continue;
         }
         gBrowser.zenHandleTabMove(tab, () => {
           tab.setAttribute("zen-workspace-id", workspaceID);
-          container.insertBefore(tab, container.lastChild);
+          container.insertBefore(tab, insertElement);
         });
       }
       // also change glance tab if it's the same tab