/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* eslint-disable no-shadow */

import { nsZenThemePicker } from "chrome://browser/content/zen-components/ZenGradientGenerator.mjs";

const lazy = {};

ChromeUtils.defineESModuleGetters(lazy, {
  ZenSessionStore: "resource:///modules/zen/ZenSessionManager.sys.mjs",
});

/**
 * Zen Spaces manager. This class is mainly responsible for the UI
 * and user interactions but it also contains some logic to manage
 * the workspaces and their tabs.
 *
 * For window sync, please @see ZenWindowSync
 */
class nsZenWorkspaces {
  /**
   * Stores workspace IDs and their last selected tabs.
   */
  lastSelectedWorkspaceTabs = {};
  #inChangingWorkspace = false;
  draggedElement = null;

  #hasInitialized = false;

  #canDebug = Services.prefs.getBoolPref("zen.workspaces.debug", false);
  #activeWorkspace = "";

  _swipeState = {
    isGestureActive: true,
    lastDelta: 0,
    direction: null,
  };

  _workspaceCache = [];

  #lastScrollTime = 0;

  bookmarkMenus = [
    "PlacesToolbar",
    "bookmarks-menu-button",
    "BMB_bookmarksToolbar",
    "BMB_unsortedBookmarks",
    "BMB_mobileBookmarks",
  ];

  promisePinnedInitialized = new Promise((resolve) => {
    this._resolvePinnedInitialized = resolve;
  });

  promiseInitialized = new Promise((resolve) => {
    this._resolveInitialized = resolve;
  });

  async #waitForPromises() {
    if (this.privateWindowOrDisabled) {
      return;
    }
    await Promise.all([this.promisePinnedInitialized, SessionStore.promiseAllWindowsRestored]);
  }

  async init() {
    // Initialize tab selection state
    this._tabSelectionState = {
      inProgress: false,
      lastSelectionTime: 0,
      debounceTime: 100, // ms to wait between tab selections
    };

    // Initialize workspace change mutex
    this._workspaceChangeInProgress = false;

    if (!this.shouldHaveWorkspaces) {
      this._resolveInitialized();
      console.warn("gZenWorkspaces: !!! gZenWorkspaces is disabled in hidden windows !!!");
      return; // We are in a hidden window, don't initialize gZenWorkspaces
    }

    this.ownerWindow = window;
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      "activationMethod",
      "zen.workspaces.scroll-modifier-key",
      "ctrl"
    );
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      "naturalScroll",
      "zen.workspaces.natural-scroll",
      true
    );
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      "shouldWrapAroundNavigation",
      "zen.workspaces.wrap-around-navigation",
      true
    );
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      "shouldForceContainerTabsToWorkspace",
      "zen.workspaces.force-container-workspace",
      true
    );
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      "shouldOpenNewTabIfLastUnpinnedTabIsClosed",
      "zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed",
      false
    );
    this.containerSpecificEssentials = Services.prefs.getBoolPref(
      "zen.workspaces.separate-essentials",
      false
    );
    ChromeUtils.defineLazyGetter(this, "tabContainer", () =>
      document.getElementById("tabbrowser-tabs")
    );
    ChromeUtils.defineLazyGetter(this, "workspaceIcons", () =>
      document.getElementById("zen-workspaces-button")
    );
    this.#activeWorkspace ||= Services.prefs.getStringPref("zen.workspaces.active", "");

    if (this.isPrivateWindow) {
      document.documentElement.setAttribute("zen-private-window", "true");
    }

    this.popupOpenHandler = this._popupOpenHandler.bind(this);

    window.addEventListener("resize", this.onWindowResize.bind(this));
    this.addPopupListeners();

    if (this.privateWindowOrDisabled) {
      await this.#waitForPromises();
      await this.restoreWorkspacesFromSessionStore({});
    }

    if (!this.privateWindowOrDisabled) {
      const observerFunction = async () => {
        delete this._workspaceBookmarksCache;
        await this.workspaceBookmarks();
        this._invalidateBookmarkContainers();
      };
      Services.obs.addObserver(observerFunction, "workspace-bookmarks-updated");
      window.addEventListener("unload", () => {
        Services.obs.removeObserver(observerFunction, "workspace-bookmarks-updated");
      });
    }
  }

  log(...args) {
    if (this.#canDebug) {
      /* eslint-disable no-console */
      console.debug(`[gZenWorkspaces]:`, ...args);
    }
  }

  #afterLoadInit() {
    const onResize = (...args) => {
      requestAnimationFrame(() => {
        this.onPinnedTabsResize(...args);
      });
    };
    this._pinnedTabsResizeObserver = new ResizeObserver(onResize);
    this.registerPinnedResizeObserver();
    this.#initializeWorkspaceTabContextMenus();

    // Non UI related initializations
    if (
      Services.prefs.getBoolPref("zen.workspaces.swipe-actions", false) &&
      this.workspaceEnabled &&
      !this.isPrivateWindow
    ) {
      this.initializeGestureHandlers();
      this.initializeWorkspaceNavigation();
    }
  }

  // Validate browser state before tab operations
  _validateBrowserState() {
    // Check if browser window is still open
    if (window.closed) {
      return false;
    }

    // Check if gBrowser is available
    if (!gBrowser || !gBrowser.tabContainer) {
      return false;
    }

    // Check if URL bar is available
    if (!gURLBar) {
      return false;
    }

    return true;
  }

  // Safely select a tab with debouncing to prevent race conditions
  async _safelySelectTab(tab) {
    if (!tab || tab.closing || !tab.ownerGlobal || tab.ownerGlobal.closed) {
      return false;
    }

    // Check if we need to debounce
    const now = Date.now();
    const timeSinceLastSelection = now - this._tabSelectionState.lastSelectionTime;

    if (timeSinceLastSelection < this._tabSelectionState.debounceTime) {
      await new Promise((resolve) =>
        setTimeout(resolve, this._tabSelectionState.debounceTime - timeSinceLastSelection)
      );
    }

    // Mark selection as in progress
    this._tabSelectionState.inProgress = true;

    try {
      gBrowser.selectedTab = tab;
      this._tabSelectionState.lastSelectionTime = Date.now();
      return true;
    } catch (e) {
      console.error("Error selecting tab:", e);
      return false;
    } finally {
      this._tabSelectionState.inProgress = false;
    }
  }

  async selectEmptyTab(newTabTarget = null) {
    // Validate browser state first
    if (!this._validateBrowserState()) {
      console.warn("Browser state invalid for empty tab selection");
      return null;
    }

    if (gZenUIManager.testingEnabled) {
      return null;
    }

    try {
      // Check if we have a valid empty tab and can replace new tab
      if (
        this._emptyTab &&
        !this._emptyTab.closing &&
        this._emptyTab.ownerGlobal &&
        !this._emptyTab.ownerGlobal.closed &&
        gZenVerticalTabsManager._canReplaceNewTab
      ) {
        // Safely switch to the empty tab using our debounced method
        const success = await this._safelySelectTab(this._emptyTab);
        if (!success) {
          throw new Error("Failed to select empty tab");
        }

        return this._emptyTab;
      }

      // Fall back to creating a new tab
      const newTabUrl = newTabTarget || Services.prefs.getStringPref("browser.startup.homepage");
      let tab = gZenUIManager.openAndChangeToTab(newTabUrl);

      // Set workspace ID if available
      if (window.uuid) {
        tab.setAttribute("zen-workspace-id", this.activeWorkspace);
      }
      return tab;
    } catch (e) {
      console.error("Error in selectEmptyTab:", e);

      // Create a fallback tab as a last resort, with proper validation
      try {
        if (this._validateBrowserState()) {
          return gBrowser.addTrustedTab("about:blank");
        }
      } catch (fallbackError) {
        console.error("Critical error creating fallback tab:", fallbackError);
      }
      return null;
    }
  }

  #initializeEmptyTab() {
    for (const tab of gBrowser.tabs) {
      // Check if session store has an empty tab
      if (tab.hasAttribute("zen-empty-tab") && !tab.pinned) {
        this.log("Found existing empty tab from session store!");
        this._emptyTab = tab;
        return;
      }
    }
    this._emptyTab = gBrowser.addTrustedTab("about:blank", {
      inBackground: true,
      userContextId: 0,
      _forZenEmptyTab: true,
    });
  }

  registerPinnedResizeObserver() {
    if (!this._hasInitializedTabsStrip || !this._pinnedTabsResizeObserver) {
      return;
    }
    this._pinnedTabsResizeObserver.disconnect();
    for (let element of document.getElementById("zen-essentials").children) {
      if (element.classList.contains("tabbrowser-tab")) {
        continue;
      }
      this._pinnedTabsResizeObserver.observe(element, { box: "border-box" });
    }
  }

  get activeWorkspaceStrip() {
    if (!this._hasInitializedTabsStrip) {
      return gBrowser.tabContainer.arrowScrollbox;
    }
    return this.activeWorkspaceElement?.tabsContainer;
  }

  get pinnedTabsContainer() {
    if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
      return document.getElementById("pinned-tabs-container");
    }
    return this.activeWorkspaceElement?.pinnedTabsContainer;
  }

  get activeWorkspaceIndicator() {
    return this.activeWorkspaceElement?.indicator;
  }

  get activeScrollbox() {
    return this.activeWorkspaceElement?.scrollbox ?? gBrowser.tabContainer.arrowScrollbox;
  }

  get tabboxChildren() {
    return Array.from(this.activeWorkspaceStrip?.children || []);
  }

  get tabboxChildrenWithoutEmpty() {
    return this.tabboxChildren.filter((child) => !child.hasAttribute("zen-empty-tab"));
  }

  get shouldAnimateEssentials() {
    return (
      this.containerSpecificEssentials ||
      document.documentElement.hasAttribute("zen-creating-workspace")
    );
  }

  get activeWorkspaceElement() {
    return this.workspaceElement(this.activeWorkspace);
  }

  workspaceElement(workspaceId) {
    if (typeof workspaceId !== "string") {
      workspaceId = workspaceId?.uuid;
    }
    return document.getElementById(workspaceId);
  }

  #initializeTabsStripSections() {
    const perifery = document.getElementById("tabbrowser-arrowscrollbox-periphery");
    perifery.setAttribute("hidden", "true");
    const tabs = gBrowser.tabContainer.allTabs;
    const workspaces = this.getWorkspaces();
    for (const workspace of workspaces) {
      this.#createWorkspaceTabsSection(workspace, tabs);
    }
    if (tabs.length) {
      const defaultSelectedContainer = this.workspaceElement(this.activeWorkspace)?.querySelector(
        ".zen-workspace-normal-tabs-section"
      );
      const pinnedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
        ".zen-workspace-pinned-tabs-section"
      );
      // New profile with no workspaces does not have a default selected container
      if (defaultSelectedContainer) {
        for (const tab of tabs) {
          if (tab.hasAttribute("zen-essential")) {
            this.getEssentialsSection(tab).appendChild(tab);
            continue;
          } else if (tab.pinned) {
            pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
            continue;
          }
          // before to the last child (perifery)
          defaultSelectedContainer.insertBefore(tab, defaultSelectedContainer.lastChild);
        }
      }
      gBrowser.tabContainer._invalidateCachedTabs();
    }
    perifery.setAttribute("hidden", "true");
    this._hasInitializedTabsStrip = true;
    this._fixIndicatorsNames(workspaces);
  }

  getEssentialsSection(container = 0) {
    if (typeof container !== "number") {
      container = container?.getAttribute("usercontextid");
    }
    container ??= 0;
    if (!this.containerSpecificEssentials) {
      container = 0;
    }
    let essentialsContainer = document.querySelector(
      `.zen-essentials-container[container="${container}"]:not([cloned])`
    );
    if (!essentialsContainer) {
      essentialsContainer = document.createXULElement("hbox");
      essentialsContainer.className = "zen-essentials-container zen-workspace-tabs-section";
      essentialsContainer.setAttribute("flex", "1");
      essentialsContainer.setAttribute("container", container);
      document.getElementById("zen-essentials").appendChild(essentialsContainer);

      // Set an initial hidden state if the essentials section is not supposed
      // to be shown on the current workspace
      if (
        this.containerSpecificEssentials &&
        this.getActiveWorkspaceFromCache()?.containerTabId != container
      ) {
        essentialsContainer.setAttribute("hidden", "true");
      }
    }
    return essentialsContainer;
  }

  getCurrentSpaceContainerId() {
    const currentWorkspace = this.getActiveWorkspaceFromCache();
    return typeof currentWorkspace?.containerTabId === "number"
      ? currentWorkspace.containerTabId
      : 0;
  }

  getCurrentEssentialsContainer() {
    return this.getEssentialsSection(this.getCurrentSpaceContainerId());
  }

  #createWorkspaceTabsSection(workspace, tabs = []) {
    const workspaceWrapper = document.createXULElement("zen-workspace");
    const container = document.getElementById("tabbrowser-arrowscrollbox");
    workspaceWrapper.id = workspace.uuid;
    if (this.activeWorkspace === workspace.uuid) {
      workspaceWrapper.active = true;
    }

    if (document.documentElement.hasAttribute("zen-creating-workspace")) {
      workspaceWrapper.hidden = true; // Hide workspace while creating it
    }
    container.appendChild(workspaceWrapper);
    this.#organizeTabsToWorkspaceSections(
      workspace,
      workspaceWrapper.tabsContainer,
      workspaceWrapper.pinnedTabsContainer,
      tabs
    );
    workspaceWrapper.checkPinsExistence();
  }

  #organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
    const workspaceTabs = Array.from(tabs).filter(
      (tab) =>
        tab.getAttribute("zen-workspace-id") === workspace.uuid &&
        !tab.hasAttribute("zen-essential")
    );
    let folders = new Set();
    const getFolderRoot = (tab) => {
      let root = tab?.group;
      while (root?.group) {
        root = root?.group;
      }
      return root || tab;
    };
    for (let i = workspaceTabs.length - 1; i >= 0; i--) {
      let tab = workspaceTabs[i];
      if (tab.hasAttribute("zen-essential")) {
        continue;
      } // Ignore essentials as they need to be in their own section
      // remove tab from list
      tabs.splice(tabs.indexOf(tab), 1);
      tab = tab.group ?? tab;

      if (gBrowser.isTabGroup(tab)) {
        let rootGroup = getFolderRoot(tab);

        if (folders.has(rootGroup)) {
          continue;
        }

        folders.add(rootGroup);
        tab = rootGroup;
      }

      if (tab.pinned) {
        pinnedSection.insertBefore(tab, pinnedSection.firstChild);
      } else {
        section.insertBefore(tab, section.firstChild);
      }
    }
  }

  initializeWorkspaceNavigation() {
    this.#setupAppCommandHandlers();
    this.#setupSidebarHandlers();
  }

  #setupAppCommandHandlers() {
    // Remove existing handler temporarily - this is needed so that _handleAppCommand is called before the original
    window.removeEventListener("AppCommand", HandleAppCommandEvent, true);

    // Add our handler first
    window.addEventListener("AppCommand", this._handleAppCommand.bind(this), true);

    // Re-add original handler
    window.addEventListener("AppCommand", HandleAppCommandEvent, true);
  }

  get _hoveringSidebar() {
    return gNavToolbox.hasAttribute("zen-has-implicit-hover");
  }

  _handleAppCommand(event) {
    // note: Dont use this._hoveringSidebar as it's not as reliable as checking for :hover
    if (!this.workspaceEnabled || !gNavToolbox.matches(":hover")) {
      return;
    }

    const direction = this.naturalScroll ? -1 : 1;
    // event is forward or back
    switch (event.command) {
      case "Forward":
        this.changeWorkspaceShortcut(1 * direction);
        event.stopImmediatePropagation();
        event.preventDefault();
        break;
      case "Back":
        this.changeWorkspaceShortcut(-1 * direction);
        event.stopImmediatePropagation();
        event.preventDefault();
        break;
    }
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        gNavToolbox.setAttribute("zen-has-hover", "true");
      });
    });
  }

  #setupSidebarHandlers() {
    const toolbox = gNavToolbox;

    const scrollCooldown = 200; // Milliseconds to wait before allowing another scroll
    const scrollThreshold = 1; // Minimum scroll delta to trigger workspace change

    toolbox.addEventListener(
      "wheel",
      (event) => {
        if (this.privateWindowOrDisabled) {
          return;
        }

        // Only process non-gesture scrolls
        if (event.deltaMode !== 1) {
          return;
        }

        const isVerticalScroll = event.deltaY && !event.deltaX;

        //if the scroll is vertical this checks that a modifier key is used before proceeding
        if (isVerticalScroll) {
          const activationKeyMap = {
            ctrl: event.ctrlKey,
            alt: event.altKey,
            shift: event.shiftKey,
            meta: event.metaKey,
          };

          if (
            this.activationMethod in activationKeyMap &&
            !activationKeyMap[this.activationMethod]
          ) {
            return;
          }
        }

        let currentTime = Date.now();
        if (currentTime - this.#lastScrollTime < scrollCooldown) {
          return;
        }

        //this decides which delta to use
        const delta = isVerticalScroll ? event.deltaY : event.deltaX;
        if (Math.abs(delta) < scrollThreshold) {
          return;
        }

        // Determine scroll direction
        let rawDirection = delta > 0 ? 1 : -1;

        let direction = this.naturalScroll ? -1 : 1;
        this.changeWorkspaceShortcut(rawDirection * direction);

        this.#lastScrollTime = currentTime;
      },
      { passive: true }
    );
  }

  initializeGestureHandlers() {
    const elements = [
      gNavToolbox,
      // event handlers do not work on elements inside shadow DOM so we need to attach them directly
      document.getElementById("tabbrowser-arrowscrollbox").shadowRoot.querySelector("scrollbox"),
    ];

    // Attach gesture handlers to each element
    for (const element of elements) {
      if (!element) {
        continue;
      }
      this.attachGestureHandlers(element);
    }
  }

  attachGestureHandlers(element) {
    element.addEventListener("MozSwipeGestureMayStart", this._handleSwipeMayStart.bind(this), true);
    element.addEventListener("MozSwipeGestureStart", this._handleSwipeStart.bind(this), true);
    element.addEventListener("MozSwipeGestureUpdate", this._handleSwipeUpdate.bind(this), true);

    // Use MozSwipeGesture instead of MozSwipeGestureEnd because MozSwipeGestureEnd is fired after animation ends,
    // while MozSwipeGesture is fired immediately after swipe ends.
    element.addEventListener("MozSwipeGesture", this._handleSwipeEnd.bind(this), true);

    element.addEventListener(
      "MozSwipeGestureEnd",
      () => {
        Services.prefs.setBoolPref("zen.swipe.is-fast-swipe", false);
        document.documentElement.removeAttribute("swipe-gesture");
        gZenUIManager.tabsWrapper.style.removeProperty("scrollbar-width");
        document.documentElement.style.setProperty("--zen-background-opacity", "1");
        delete this._hasAnimatedBackgrounds;
        this.updateTabsContainers();
        document.removeEventListener("popupshown", this.popupOpenHandler, { once: true });
      },
      true
    );
  }

  _popupOpenHandler() {
    // If a popup is opened, we should stop the swipe gesture
    if (this._swipeState?.isGestureActive) {
      document.documentElement.removeAttribute("swipe-gesture");
      gZenUIManager.tabsWrapper.style.removeProperty("scrollbar-width");
      this.updateTabsContainers();
      this._cancelSwipeAnimation();
    }
  }

  _handleSwipeMayStart(event) {
    if (this.privateWindowOrDisabled || this.#inChangingWorkspace) {
      return;
    }
    if (
      event.target.closest("#zen-sidebar-foot-buttons") ||
      event.target.closest('#urlbar[zen-floating-urlbar="true"]')
    ) {
      return;
    }

    // Only handle horizontal swipes
    if (event.direction === event.DIRECTION_LEFT || event.direction === event.DIRECTION_RIGHT) {
      event.preventDefault();
      event.stopPropagation();

      // Set allowed directions based on available workspaces
      event.allowedDirections |= event.DIRECTION_LEFT | event.DIRECTION_RIGHT;
    }
  }

  _handleSwipeStart(event) {
    if (!this.workspaceEnabled) {
      return;
    }

    gZenFolders.cancelPopupTimer();

    document.documentElement.setAttribute("swipe-gesture", "true");
    document.addEventListener("popupshown", this.popupOpenHandler, { once: true });

    event.preventDefault();
    event.stopPropagation();
    this._swipeState = {
      isGestureActive: true,
      lastDelta: 0,
      direction: null,
    };
    Services.prefs.setBoolPref("zen.swipe.is-fast-swipe", true);
  }

  _handleSwipeUpdate(event) {
    if (!this.workspaceEnabled || !this._swipeState?.isGestureActive) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    const delta = event.delta * 300;
    const stripWidth =
      window.windowUtils.getBoundsWithoutFlushing(document.getElementById("navigator-toolbox"))
        .width +
      window.windowUtils.getBoundsWithoutFlushing(document.getElementById("zen-sidebar-splitter"))
        .width *
        2;
    let translateX = this._swipeState.lastDelta + delta;
    // Add a force multiplier as we are translating the strip depending on how close to the edge we are
    let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer
    if (forceMultiplier > 0.5) {
      translateX *= forceMultiplier;
      this._swipeState.lastDelta = delta + (translateX - delta) * 0.5;
    } else {
      translateX = this._swipeState.lastDelta;
    }

    if (Math.abs(delta) > 0.8) {
      this._swipeState.direction = delta > 0 ? "left" : "right";
    }

    // Apply a translateX to the tab strip to give the user feedback on the swipe
    const currentWorkspace = this.getActiveWorkspaceFromCache();
    this._organizeWorkspaceStripLocations(currentWorkspace, true, translateX);
  }

  async _handleSwipeEnd(event) {
    if (!this.workspaceEnabled) {
      return;
    }
    event.preventDefault();
    event.stopPropagation();
    const isRTL = document.documentElement.matches(":-moz-locale-dir(rtl)");
    const moveForward = (event.direction === SimpleGestureEvent.DIRECTION_RIGHT) !== isRTL;

    const rawDirection = moveForward ? 1 : -1;
    const direction = this.naturalScroll ? -1 : 1;
    await this.changeWorkspaceShortcut(rawDirection * direction, true);

    // Reset swipe state
    this._swipeState = {
      isGestureActive: false,
      lastDelta: 0,
      direction: null,
    };
  }

  get activeWorkspace() {
    return this.#activeWorkspace;
  }

  set activeWorkspace(value) {
    const spaces = this.getWorkspaces();
    if (!spaces.some((ws) => ws.uuid === value)) {
      value = spaces[0]?.uuid || "";
    }
    if (value === this.#activeWorkspace) {
      return;
    }
    this.#activeWorkspace = value;
    if (this.privateWindowOrDisabled) {
      return;
    }
    Services.prefs.setStringPref("zen.workspaces.active", value);
  }

  get shouldHaveWorkspaces() {
    if (typeof this._shouldHaveWorkspaces === "undefined") {
      let chromeFlags = window.docShell.treeOwner
        .QueryInterface(Ci.nsIInterfaceRequestor)
        .getInterface(Ci.nsIAppWindow).chromeFlags;
      this._shouldHaveWorkspaces =
        chromeFlags & Ci.nsIWebBrowserChrome.CHROME_TOOLBAR ||
        chromeFlags & Ci.nsIWebBrowserChrome.CHROME_MENUBAR;
      return this._shouldHaveWorkspaces;
    }
    return this._shouldHaveWorkspaces && !document.documentElement.hasAttribute("taskbartab");
  }

  get isPrivateWindow() {
    return PrivateBrowsingUtils.isWindowPrivate(window);
  }

  get currentWindowIsSyncing() {
    return (
      !document.documentElement.hasAttribute("zen-unsynced-window") &&
      window._zenStartupSyncFlag !== "unsynced" &&
      !this.isPrivateWindow
    );
  }

  get privateWindowOrDisabled() {
    return !this.shouldHaveWorkspaces || !this.currentWindowIsSyncing;
  }

  get workspaceEnabled() {
    return this.shouldHaveWorkspaces && !window.closed;
  }

  getActiveWorkspaceFromCache() {
    return this.getWorkspaceFromId(this.activeWorkspace);
  }

  getWorkspaceFromId(id) {
    try {
      return this.getWorkspaces().find((workspace) => workspace.uuid === id);
    } catch {
      return null;
    }
  }

  getWorkspaces(lieToMe = false) {
    if (lieToMe) {
      const { ZenSessionStore } = ChromeUtils.importESModule(
        "resource:///modules/zen/ZenSessionManager.sys.mjs"
      );
      return ZenSessionStore.getClonedSpaces();
    }
    return [...this._workspaceCache];
  }

  getWorkspacesForSessionStore() {
    const spaces = this.getWorkspaces();
    let spacesForSS = [];
    for (const space of spaces) {
      let newSpace = { ...space };
      const element = this.workspaceElement(space.uuid);
      if (element) {
        newSpace.hasCollapsedPinnedTabs = element.hasCollapsedPinnedTabs;
      }
      spacesForSS.push(newSpace);
    }
    return spacesForSS;
  }

  async workspaceBookmarks() {
    if (this.privateWindowOrDisabled) {
      this._workspaceBookmarksCache = {
        bookmarks: [],
        lastChangeTimestamp: 0,
      };
      return this._workspaceBookmarksCache;
    }

    if (this._workspaceBookmarksCache) {
      return this._workspaceBookmarksCache;
    }

    const [bookmarks, lastChangeTimestamp] = await Promise.all([
      ZenWorkspaceBookmarksStorage.getBookmarkGuidsByWorkspace(),
      ZenWorkspaceBookmarksStorage.getLastChangeTimestamp(),
    ]);

    this._workspaceBookmarksCache = { bookmarks, lastChangeTimestamp };

    return this._workspaceCache;
  }

  restoreWorkspacesFromSessionStore(aWinData = {}) {
    if (this.#hasInitialized || !this.workspaceEnabled) {
      return Promise.resolve();
    }
    const spacesFromStore = aWinData.spaces || [];
    if (
      !this.privateWindowOrDisabled &&
      spacesFromStore.length === 0 &&
      lazy.ZenSessionStore._migrationData
    ) {
      spacesFromStore.push(...lazy.ZenSessionStore._migrationData.spaces);
    }
    this._workspaceCache = spacesFromStore.length
      ? [...spacesFromStore]
      : [this.#createWorkspaceData("Space", undefined)];
    this.activeWorkspace = aWinData.activeZenSpace || this._workspaceCache[0].uuid;
    let promise = this.#initializeWorkspaces();
    for (const workspace of spacesFromStore) {
      const element = this.workspaceElement(workspace.uuid);
      let wasCollapsed = workspace.hasCollapsedPinnedTabs || false;
      if (element) {
        // A bit of a hacky soltuion to ensure that the height
        // when collapsing is calculated correctly after restoring from session store
        setTimeout(() => {
          setTimeout(() => {
            element.collapsiblePins.collapsed = wasCollapsed;
          }, 0);
        }, 0);
      }
    }
    for (const workspace of this._workspaceCache) {
      // We don't want to depend on this by mistake
      delete workspace.hasCollapsedPinnedTabs;
    }
    this.#hasInitialized = true;
    return promise;
  }

  #initializeWorkspaces() {
    let activeWorkspace = this.getActiveWorkspace();
    this.activeWorkspace = activeWorkspace?.uuid;
    try {
      if (activeWorkspace) {
        window.gZenThemePicker = new nsZenThemePicker();
        gZenThemePicker.onWorkspaceChange(activeWorkspace);
      }
    } catch (e) {
      console.error("gZenWorkspaces: Error initializing theme picker", e);
    }
    this.#initializeTabsStripSections();
    this.#initializeEmptyTab();
    return (async () => {
      await this.#waitForPromises();
      this.#afterLoadInit();
      await this.workspaceBookmarks();
      await this.changeWorkspace(activeWorkspace, { onInit: true });
      this.#fixTabPositions();
      this.onWindowResize();
      this._resolveInitialized();
      this.#clearAnyZombieTabs(); // Dont call with await
      delete this._resolveInitialized;

      const tabUpdateListener = this.updateTabsContainers.bind(this);
      window.addEventListener("TabOpen", tabUpdateListener);
      window.addEventListener("TabClose", tabUpdateListener);
      window.addEventListener("TabAddedToEssentials", tabUpdateListener);
      window.addEventListener("TabRemovedFromEssentials", tabUpdateListener);
      window.addEventListener("TabPinned", tabUpdateListener);
      window.addEventListener("TabUnpinned", tabUpdateListener);
      window.addEventListener("aftercustomization", tabUpdateListener);
      window.addEventListener("TabSelect", this.onLocationChange.bind(this));
      window.addEventListener("TabBrowserInserted", this.onTabBrowserInserted.bind(this));

      this.updateWorkspacesChangeContextMenu();
    })();
  }

  async selectStartPage() {
    if (!this.workspaceEnabled || gZenUIManager.testingEnabled) {
      return;
    }
    await this.promiseInitialized;
    let showed = false;
    let resolveSelectPromise;
    let selectPromise = new Promise((resolve) => {
      resolveSelectPromise = resolve;
    });

    const cleanup = () => {
      delete this._tabToSelect;
      delete this._tabToRemoveForEmpty;
      delete this._shouldOverrideTabs;
      resolveSelectPromise();
    };

    let removedEmptyTab = false;
    if (
      this._initialTab &&
      !(this._initialTab._shouldRemove && this._initialTab._veryPossiblyEmpty)
    ) {
      gBrowser.selectedTab = this._initialTab;
      this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
      gBrowser.moveTabTo(this._initialTab, { forceUngrouped: true, tabIndex: 0 });
      removedEmptyTab = true;
      delete this._initialTab;
    }

    if (this._tabToRemoveForEmpty && !removedEmptyTab && !this._shouldOverrideTabs) {
      const tabs = gBrowser.tabs.filter((tab) => !tab.collapsed);
      if (
        typeof this._tabToSelect === "number" &&
        this._tabToSelect >= 0 &&
        tabs[this._tabToSelect] &&
        (await this.#shouldShowTabInCurrentWorkspace(tabs[this._tabToSelect])) &&
        tabs[this._tabToSelect] !== this._tabToRemoveForEmpty
      ) {
        this.log(`Found tab to select: ${this._tabToSelect}, ${tabs.length}`);
        setTimeout(() => {
          let tabToUse = gZenGlanceManager.getTabOrGlanceParent(
            tabs[this._tabToSelect + 1] || this._emptyTab
          );
          gBrowser.selectedTab = tabToUse;
          this._removedByStartupPage = true;
          gBrowser.removeTab(this._tabToRemoveForEmpty, {
            skipSessionStore: true,
          });
          cleanup();
        }, 0);
      } else {
        this.selectEmptyTab();
        showed = true;
        setTimeout(() => {
          this._removedByStartupPage = true;
          gBrowser.removeTab(this._tabToRemoveForEmpty, {
            skipSessionStore: true,
            animate: false,
          });
          cleanup();
        }, 0);
      }
    } else {
      setTimeout(() => {
        cleanup();
      }, 0);
    }

    await selectPromise;
    if (this._initialTab) {
      this._removedByStartupPage = true;
      gBrowser.removeTab(this._initialTab, {
        skipSessionStore: true,
      });
      delete this._initialTab;
    }

    showed &&= Services.prefs.getBoolPref("zen.urlbar.open-on-startup", true);

    // Wait for the next event loop to ensure that the startup focus logic by
    // firefox has finished doing it's thing.
    setTimeout(() => {
      setTimeout(() => {
        if (gZenVerticalTabsManager._canReplaceNewTab && showed) {
          BrowserCommands.openTab();
        } else if (!showed) {
          gBrowser.selectedBrowser.focus();
        }
      });
    });

    if (
      !gZenVerticalTabsManager._canReplaceNewTab &&
      !Services.prefs.getBoolPref("zen.workspaces.continue-where-left-off")
    ) {
      // Go through each tab and see if there's another tab with the same startup URL.
      // If we do find one, remove it.
      const newTabUrl = Services.prefs.getStringPref("browser.startup.homepage");
      const tabs = gBrowser.tabs.filter(
        (tab) => !tab.collapsed && !tab.hasAttribute("zen-empty-tab") && !tab.pinned
      );
      for (const tab of tabs) {
        if (tab._originalUrl === newTabUrl && tab !== gBrowser.selectedTab) {
          gBrowser.removeTab(tab, {
            skipSessionStore: true,
          });
        }
      }
    }

    window.dispatchEvent(new CustomEvent("AfterWorkspacesSessionRestore", { bubbles: true }));
  }

  handleInitialTab(tab, isEmpty) {
    if (gZenUIManager.testingEnabled || !this.workspaceEnabled) {
      return;
    }
    // note: We cant access `gZenVerticalTabsManager._canReplaceNewTab` this early
    if (isEmpty && Services.prefs.getBoolPref("zen.urlbar.replace-newtab", true)) {
      this._tabToRemoveForEmpty = tab;
    } else {
      this._initialTab = tab;
      this._initialTab._veryPossiblyEmpty = isEmpty;
    }
  }

  changeWorkspaceIcon() {
    let anchor = this.activeWorkspaceIndicator?.querySelector(
      ".zen-current-workspace-indicator-icon"
    );
    if (this.#contextMenuData?.workspaceId) {
      anchor = this.#contextMenuData.originalTarget;
    }
    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
    if (!anchor) {
      return;
    }
    const hasNoIcon = anchor.hasAttribute("no-icon");
    anchor.removeAttribute("no-icon");
    if (hasNoIcon) {
      anchor.textContent = "";
    }
    gZenEmojiPicker.open(anchor, {
      closeOnSelect: false,
      allowNone: hasNoIcon,
      onSelect: async (icon) => {
        const workspace = this.getWorkspaceFromId(workspaceId);
        if (!workspace) {
          console.warn("No active workspace found to change icon");
          return;
        }
        workspace.icon = icon;
        await this.saveWorkspace(workspace);
      },
    });
  }

  shouldCloseWindow() {
    return (
      !window.toolbar.visible ||
      Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab") ||
      (this.privateWindowOrDisabled && !this.isPrivateWindow)
    );
  }

  async #clearAnyZombieTabs() {
    const tabs = this.allStoredTabs;
    const workspaces = this.getWorkspaces();
    for (let tab of tabs) {
      const workspaceID = tab.getAttribute("zen-workspace-id");
      if (
        (workspaceID &&
          !tab.hasAttribute("zen-essential") &&
          !workspaces.find((workspace) => workspace.uuid === workspaceID)) ||
        // Also remove empty tabs that are supposed to be from parent folders but
        // they dont exist anymore
        (tab.pinned && tab.hasAttribute("zen-empty-tab") && !tab.group)
      ) {
        // Remove any tabs where their workspace doesn't exist anymore
        this.log("Removed zombie tab from non-existing workspace", tab);
        gBrowser.unpinTab(tab);
        gBrowser.removeTab(tab, {
          skipSessionStore: true,
          closeWindowWithLastTab: false,
        });
      }
    }
  }

  handleTabBeforeClose(tab, closeWindowWithLastTab) {
    if (!this.workspaceEnabled || this.__contextIsDelete || this._removedByStartupPage) {
      return null;
    }

    let workspaceID = tab.getAttribute("zen-workspace-id");
    if (!workspaceID) {
      return null;
    }

    let tabs = gBrowser.visibleTabs;
    let tabsPinned = tabs.filter(
      (t) => !this.shouldOpenNewTabIfLastUnpinnedTabIsClosed || !t.pinned
    );
    const shouldCloseWindow =
      closeWindowWithLastTab != null ? closeWindowWithLastTab : this.shouldCloseWindow();
    if (tabs.length === 1 && tabs[0] === tab) {
      if (shouldCloseWindow) {
        // We've already called beforeunload on all the relevant tabs if we get here,
        // so avoid calling it again:
        window.skipNextCanClose = true;

        // Closing the tab and replacing it with a blank one is notably slower
        // than closing the window right away. If the caller opts in, take
        // the fast path.
        if (!gBrowser._removingTabs.size) {
          // This call actually closes the window, unless the user
          // cancels the operation.  We are finished here in both cases.
          this._isClosingWindow = true;
          // Inside a setTimeout to avoid reentrancy issues.
          setTimeout(() => {
            document.getElementById("cmd_closeWindow").doCommand();
          }, 100);
        }
        return null;
      }
    } else if (tabsPinned.length === 1 && tabsPinned[0] === tab) {
      return this.selectEmptyTab();
    }

    return null;
  }

  addPopupListeners() {
    const workspaceActions = document.getElementById("zenWorkspaceMoreActions");
    workspaceActions.addEventListener("popupshowing", this.updateWorkspaceActionsMenu.bind(this));
    workspaceActions.addEventListener("popuphidden", () => {
      setTimeout(() => {
        setTimeout(() => {
          this.#contextMenuData = null;
        }, 0);
      }, 0); // Delay to ensure the context menu data is cleared after the popup is hidden
    });

    const contextChangeContainerTabMenu = document.getElementById(
      "context_zenWorkspacesOpenInContainerTab"
    );
    contextChangeContainerTabMenu.addEventListener(
      "popupshowing",
      this.updateWorkspaceActionsMenuContainer.bind(this)
    );
    contextChangeContainerTabMenu.addEventListener(
      "command",
      this.contextChangeContainerTab.bind(this)
    );
  }

  generateMenuItemForWorkspace(workspace, disableCurrent = false) {
    const item = document.createXULElement("menuitem");
    item.className = "zen-workspace-context-menu-item";
    item.setAttribute("zen-workspace-id", workspace.uuid);
    if (!disableCurrent) {
      item.setAttribute("type", "radio");
    }
    if (workspace.uuid === this.activeWorkspace) {
      item.setAttribute(disableCurrent ? "disabled" : "checked", true);
    }
    let name = workspace.name;
    const iconIsSvg = workspace.icon && workspace.icon.endsWith(".svg");
    if (workspace.icon && workspace.icon !== "" && !iconIsSvg) {
      name = `${workspace.icon}  ${name}`;
    }
    item.setAttribute("label", name);
    if (iconIsSvg) {
      item.setAttribute("image", workspace.icon);
      item.classList.add("zen-workspace-context-icon");
    }
    return item;
  }

  #contextMenuData = null;
  updateWorkspaceActionsMenu(event) {
    if (event.target.id !== "zenWorkspaceMoreActions") {
      return;
    }
    const openInContainerMenuItem = document.getElementById(
      "context_zenWorkspacesOpenInContainerTab"
    );
    if (this.shouldShowContainers) {
      openInContainerMenuItem.removeAttribute("hidden");
    } else {
      openInContainerMenuItem.setAttribute("hidden", "true");
    }
    // Call parent node as on windows, the text can be double clicked
    let target;
    try {
      target = event.explicitOriginalTarget?.closest("toolbarbutton");
    } catch (e) {
      console.error("Error getting explicitOriginalTarget in context menu:", e);
    }
    this.#contextMenuData = {
      workspaceId: target?.getAttribute("zen-workspace-id"),
      originalTarget: target,
    };
    const workspaceName = document.getElementById("context_zenEditWorkspace");
    const themePicker = document.getElementById("context_zenChangeWorkspaceTheme");
    /* We can't show the rename input properly in collapsed state,
    so hide the workspace edit input */
    const isCollapsed = !Services.prefs.getBoolPref("zen.view.sidebar-expanded");
    workspaceName.hidden =
      isCollapsed ||
      (this.#contextMenuData.workspaceId &&
        this.#contextMenuData.workspaceId !== this.activeWorkspace);
    themePicker.hidden =
      this.#contextMenuData.workspaceId &&
      this.#contextMenuData.workspaceId !== this.activeWorkspace;
    const separator = document.getElementById("context_zenWorkspacesSeparator");
    for (const item of event.target.querySelectorAll(".zen-workspace-context-menu-item")) {
      item.remove();
    }
    if (!this.#contextMenuData.workspaceId) {
      separator.hidden = false;
      for (const workspace of this.getWorkspaces().reverse()) {
        const item = this.generateMenuItemForWorkspace(workspace);
        item.addEventListener("command", (e) => {
          this.changeWorkspaceWithID(e.target.closest("menuitem").getAttribute("zen-workspace-id"));
        });
        separator.after(item);
      }
    } else {
      separator.hidden = true;
    }
    event.target.addEventListener(
      "popuphidden",
      () => {
        this.#contextMenuData = null;
      },
      { once: true }
    );
  }

  updateWorkspaceActionsMenuContainer(event) {
    let workspace;
    if (this.#contextMenuData?.workspaceId) {
      workspace = this.getWorkspaceFromId(this.#contextMenuData.workspaceId);
    } else {
      workspace = this.getActiveWorkspaceFromCache();
    }
    let containerTabId = workspace.containerTabId;
    return window.createUserContextMenu(event, {
      isContextMenu: true,
      excludeUserContextId: containerTabId,
      showDefaultTab: true,
    });
  }

  saveWorkspace(workspaceData) {
    if (this.privateWindowOrDisabled) {
      return;
    }
    const workspacesData = this._workspaceCache;
    const index = workspacesData.findIndex((ws) => ws.uuid === workspaceData.uuid);
    if (index !== -1) {
      workspacesData[index] = workspaceData;
    } else {
      workspacesData.push(workspaceData);
    }
    this.#propagateWorkspaceData();
  }

  removeWorkspace(windowID) {
    let workspacesData = this.getWorkspaces();
    // Remove the workspace from the cache
    workspacesData = workspacesData.filter((workspace) => workspace.uuid !== windowID);
    this.#propagateWorkspaceData(workspacesData);
  }

  isWorkspaceActive(workspace) {
    return workspace.uuid === this.activeWorkspace;
  }

  getActiveWorkspace() {
    return this.getActiveWorkspaceFromCache();
  }

  workspaceHasIcon(workspace) {
    return workspace.icon && workspace.icon !== "";
  }

  getWorkspaceIcon(workspace) {
    if (this.workspaceHasIcon(workspace)) {
      return workspace.icon;
    }
    try {
      return new Intl.Segmenter().segment(workspace.name).containing().segment.toUpperCase();
    } catch {
      return Array.from(workspace.name)[0]?.toUpperCase();
    }
  }

  get shouldShowContainers() {
    return (
      Services.prefs.getBoolPref("privacy.userContext.ui.enabled") &&
      !!ContextualIdentityService.getPublicIdentities().length
    );
  }

  #propagateWorkspaceData(aSpaceData = null) {
    if (!this.#hasInitialized || this.privateWindowOrDisabled) {
      return;
    }
    window.dispatchEvent(new CustomEvent("ZenWorkspaceDataChanged"), { bubbles: true });
    window.gZenWindowSync.propagateWorkspacesToAllWindows(aSpaceData ?? this._workspaceCache);
  }

  propagateWorkspaces(aWorkspaces) {
    const previousWorkspaces = this._workspaceCache || [];
    let promises = [];
    let hasChanged = false;
    // Remove any workspace elements here that no longer exist
    for (const previousWorkspace of previousWorkspaces) {
      if (
        this.workspaceElement(previousWorkspace.uuid) &&
        !aWorkspaces.find((w) => w.uuid === previousWorkspace.uuid)
      ) {
        let promise = Promise.resolve();
        if (this.isWorkspaceActive(previousWorkspace)) {
          // If the removed workspace was active, switch to another one
          const newActiveWorkspace =
            aWorkspaces.find((w) => w.uuid !== previousWorkspace.uuid) || null;
          promise = this.changeWorkspace(newActiveWorkspace);
        }
        promise = promise.then(() => {
          this.workspaceElement(previousWorkspace.uuid)?.remove();
          delete this.lastSelectedWorkspaceTabs[previousWorkspace.uuid];
        });
        promises.push(promise);
        hasChanged = true;
      }
    }
    // Add any new workspace elements here
    for (const workspace of aWorkspaces) {
      if (!this.workspaceElement(workspace.uuid)) {
        this.#createWorkspaceTabsSection(workspace);
        hasChanged = true;
      }
    }
    // Order the workspace elements correctly
    let previousElement = null;
    const arrowScrollbox = document.getElementById("tabbrowser-arrowscrollbox");
    for (const workspace of aWorkspaces) {
      const workspaceElement = this.workspaceElement(workspace.uuid);
      if (workspaceElement) {
        if (previousElement === null) {
          arrowScrollbox.moveBefore(workspaceElement, arrowScrollbox.firstChild);
          hasChanged = true;
        } else if (previousElement.nextSibling !== workspaceElement) {
          arrowScrollbox.moveBefore(workspaceElement, previousElement.nextSibling);
          hasChanged = true;
        }
        previousElement = workspaceElement;
      }
    }
    return Promise.all(promises).then(() => {
      this._workspaceCache = aWorkspaces;
      if (hasChanged) {
        this.#fireSpaceUIUpdate();
      }
      this._organizeWorkspaceStripLocations(this.getActiveWorkspaceFromCache());
      this.updateTabsContainers();
      this.updateWorkspacesChangeContextMenu();
    });
  }

  async reorderWorkspace(id, newPosition) {
    if (this.privateWindowOrDisabled) {
      return;
    }
    const workspaces = this._workspaceCache;
    const workspace = workspaces.find((w) => w.uuid === id);
    if (!workspace) {
      console.warn(`Workspace with ID ${id} not found for reordering.`);
      return;
    }
    // Remove the workspace from its current position
    const currentIndex = workspaces.indexOf(workspace);
    if (currentIndex === -1) {
      console.warn(`Workspace with ID ${id} not found in the list.`);
      return;
    }
    workspaces.splice(currentIndex, 1);
    // Insert the workspace at the new position
    if (newPosition < 0 || newPosition > workspaces.length) {
      console.warn(`Invalid position ${newPosition} for reordering workspace with ID ${id}.`);
      return;
    }
    workspaces.splice(newPosition, 0, workspace);
    // Propagate the changes if the order has changed
    if (currentIndex !== newPosition) {
      this.#propagateWorkspaceData();
    }
  }

  async openWorkspaceCreation() {
    let createForm;
    const previousWorkspace = this.getActiveWorkspace();
    document.documentElement.setAttribute("zen-creating-workspace", "true");
    await this.createAndSaveWorkspace("Space", undefined, false, 0, {
      beforeChangeCallback: async (workspace) => {
        createForm = document.createXULElement("zen-workspace-creation");
        createForm.setAttribute("workspace-id", workspace.uuid);
        createForm.setAttribute("previous-workspace-id", previousWorkspace?.uuid || "");
        gBrowser.tabContainer.after(createForm);
        await createForm.promiseInitialized;
      },
    });
    createForm.finishSetup();
  }

  #unpinnedTabsInWorkspace(workspaceID) {
    return Array.from(this.allStoredTabs).filter(
      (tab) => tab.getAttribute("zen-workspace-id") === workspaceID && tab.visible && !tab.pinned
    );
  }

  #getClosableTabs(tabs) {
    const remainingTabs = tabs.filter((tab) => {
      const attributes = ["selected", "multiselected", "pictureinpicture", "soundplaying"];
      for (const attr of attributes) {
        if (tab.hasAttribute(attr)) {
          return false;
        }
      }
      const browser = tab.linkedBrowser;
      if (
        window.webrtcUI.browserHasStreams(browser) ||
        browser?.browsingContext?.currentWindowGlobal?.hasActivePeerConnections()
      ) {
        return false;
      }
      return true;
    });
    if (remainingTabs.length === 0) {
      return tabs; // If no tabs are safe to close, return all to force close
    }
    return remainingTabs;
  }

  #deleteAllUnpinnedTabsInWorkspace(tabs) {
    gBrowser.removeTabs(tabs, {
      closeWindowWithLastTab: false,
    });
  }

  async unloadWorkspace() {
    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;

    const tabsToUnload = this.allStoredTabs.filter(
      (tab) =>
        tab.getAttribute("zen-workspace-id") === workspaceId &&
        !tab.hasAttribute("zen-empty-tab") &&
        !tab.hasAttribute("zen-essential") &&
        !tab.hasAttribute("pending")
    );

    if (tabsToUnload.length === 0) {
      return;
    }

    this.log("Unloading workspace", workspaceId);

    await gBrowser.explicitUnloadTabs(tabsToUnload); // TODO: unit test this
  }

  moveTabToWorkspace(tab, workspaceID) {
    return this.moveTabsToWorkspace([tab], workspaceID);
  }

  moveTabsToWorkspace(tabs, workspaceID) {
    for (let tab of tabs) {
      const workspaceContainer = this.workspaceElement(workspaceID);
      const container = tab.pinned
        ? workspaceContainer?.pinnedTabsContainer
        : workspaceContainer?.tabsContainer;
      if (container?.contains(tab)) {
        continue;
      }

      if (tab.hasAttribute("zen-essential")) {
        continue;
      }

      tab.owner = null;
      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);
          });
          continue;
        }
        gBrowser.zenHandleTabMove(tab, () => {
          tab.setAttribute("zen-workspace-id", workspaceID);
          container.insertBefore(tab, container.lastChild);
        });
      }
      // also change glance tab if it's the same tab
      const glanceTab = tab.querySelector(".tabbrowser-tab[zen-glance-tab]");
      if (glanceTab) {
        glanceTab.setAttribute("zen-workspace-id", workspaceID);
      }
    }
    return true;
  }

  #prepareNewWorkspace(space) {
    document.documentElement.setAttribute("zen-workspace-id", space.uuid);
    let tabCount = 0;
    for (let tab of gBrowser.tabs) {
      const isEssential = tab.getAttribute("zen-essential") === "true";
      if (!tab.hasAttribute("zen-workspace-id") && !tab.pinned && !isEssential) {
        this.moveTabToWorkspace(tab, space.uuid);
        tabCount++;
      }
    }
    if (tabCount === 0) {
      this.selectEmptyTab();
    }
  }

  addChangeListeners(
    func,
    opts = {
      once: false,
    }
  ) {
    if (!this._changeListeners) {
      this._changeListeners = [];
    }
    this._changeListeners.push({ func, opts });
  }

  removeChangeListeners(func) {
    if (!this._changeListeners) {
      return;
    }
    this._changeListeners = this._changeListeners.filter((listener) => listener.func !== func);
  }

  async changeWorkspaceWithID(workspaceID, ...args) {
    const workspace = this.getWorkspaceFromId(workspaceID);
    await this.changeWorkspace(workspace, ...args);
  }

  async changeWorkspace(workspace, ...args) {
    if (!this.workspaceEnabled || this.#inChangingWorkspace) {
      return;
    }
    this.#inChangingWorkspace = true;
    try {
      this.log("Changing workspace to", workspace?.uuid);
      await this._performWorkspaceChange(workspace, ...args);
    } catch (e) {
      console.error("gZenWorkspaces: Error changing workspace", e);
    }
    this.#inChangingWorkspace = false;
  }

  _cancelSwipeAnimation() {
    this._animateTabs(this.getActiveWorkspaceFromCache(), true);
  }

  async _performWorkspaceChange(
    workspace,
    { onInit = false, alwaysChange = false, whileScrolling = false } = {}
  ) {
    const previousWorkspace = this.getActiveWorkspace();
    alwaysChange = alwaysChange || onInit;
    this.activeWorkspace = workspace.uuid;
    if (previousWorkspace && previousWorkspace.uuid === workspace.uuid && !alwaysChange) {
      this._cancelSwipeAnimation();
      return;
    }

    const workspaces = this.getWorkspaces();
    gZenFolders.cancelPopupTimer();

    // Refresh tab cache
    for (const otherWorkspace of workspaces) {
      const container = this.workspaceElement(otherWorkspace.uuid);
      container.active = otherWorkspace.uuid === workspace.uuid;
    }
    // note: We are calling this even though it is also called in `updateTabsContainers`. This is mostly
    // due to a race condition where the workspace strip is not updated before the tabs are moved.
    this.makeSureEmptyTabIsFirst();
    gBrowser.pinnedTabsContainer = this.pinnedTabsContainer || gBrowser.pinnedTabsContainer;
    gBrowser.tabContainer.pinnedTabsContainer =
      this.pinnedTabsContainer || gBrowser.tabContainer.pinnedTabsContainer;

    this.tabContainer._invalidateCachedTabs();
    if (!whileScrolling) {
      this._organizeWorkspaceStripLocations(previousWorkspace);
    }

    // Second pass: Handle tab selection
    this.tabContainer._invalidateCachedTabs();
    const tabToSelect = await this._handleTabSelection(workspace, onInit, previousWorkspace.uuid);
    if (tabToSelect.linkedBrowser) {
      gBrowser.warmupTab(tabToSelect);
    }

    // Update UI and state
    const previousWorkspaceIndex = workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid);
    await this._updateWorkspaceState(workspace, onInit, tabToSelect, {
      previousWorkspaceIndex,
      previousWorkspace,
    });
  }

  makeSureEmptyTabIsFirst() {
    const emptyTab = this._emptyTab;
    if (emptyTab) {
      emptyTab.setAttribute("zen-workspace-id", this.activeWorkspace);
      if (emptyTab.linkedBrowser) {
        gBrowser.TabStateFlusher.flush(emptyTab.linkedBrowser);
      }
      const container = this.activeWorkspaceStrip;
      if (container) {
        container.insertBefore(emptyTab, container.firstChild);
      }
    }
    this.#fixTabPositions();
  }

  #fixTabPositions() {
    // See issue https://github.com/zen-browser/desktop/issues/10157
    if (this.tabContainer) {
      this.tabContainer._invalidateCachedTabs();
    }
    // Fix tabs _tPos values relative to the actual order
    const tabs = gBrowser.tabs;
    const usedGroups = new Set();
    let tPos = 0; // _tPos is used for the session store, not needed for folders
    let pPos = 0; // _pPos is used for the pinned tabs manager
    const recurseFolder = (tab) => {
      if (tab.group) {
        recurseFolder(tab.group);
        if (!usedGroups.has(tab.group.id)) {
          usedGroups.add(tab.group.id);
          tab.group._pPos = pPos++;
        }
      }
    };
    for (const tab of tabs) {
      recurseFolder(tab);
      tab._tPos = tPos++;
      if (!tab.hasAttribute("zen-empty-tab")) {
        tab._pPos = pPos++;
      }
    }
  }

  #updatePaddingTopOnTabs(workspaceElement, essentialContainer, forAnimation = false) {
    if (
      workspaceElement &&
      !(this.#inChangingWorkspace && !forAnimation && !this._alwaysAnimatePaddingTop)
    ) {
      delete this._alwaysAnimatePaddingTop;
      const essentialsHeight =
        window.windowUtils.getBoundsWithoutFlushing(essentialContainer).height;
      requestAnimationFrame(() => {
        workspaceElement.style.paddingTop = essentialsHeight + "px";
      });
    }
  }

  _organizeWorkspaceStripLocations(workspace, justMove = false, offsetPixels = 0) {
    if (document.documentElement.hasAttribute("zen-creating-workspace")) {
      // If we are creating a workspace, we don't want to animate the strip
      return;
    }
    this._organizingWorkspaceStrip = true;
    const workspaces = this.getWorkspaces();
    let workspaceIndex = workspaces.findIndex((w) => w.uuid === workspace.uuid);
    if (!justMove) {
      this._fixIndicatorsNames(workspaces);
    }
    const otherContainersEssentials = document.querySelectorAll(
      `#zen-essentials .zen-workspace-tabs-section`
    );
    const workspaceContextId = workspace.containerTabId;
    const nextWorkspaceContextId =
      workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)]?.containerTabId;
    for (const otherWorkspace of workspaces) {
      const element = this.workspaceElement(otherWorkspace.uuid);
      const newTransform = -(workspaceIndex - workspaces.indexOf(otherWorkspace)) * 100;
      element.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
    }
    // Hide other essentials with different containerTabId
    for (const container of otherContainersEssentials) {
      // Get the next workspace contextId, if it's the same, dont apply offsetPixels
      // if it's not we do apply it
      if (
        container.getAttribute("container") != workspace.containerTabId &&
        this.shouldAnimateEssentials
      ) {
        container.setAttribute("hidden", "true");
      } else {
        container.removeAttribute("hidden");
      }
      if (
        nextWorkspaceContextId !== workspaceContextId &&
        offsetPixels &&
        this.shouldAnimateEssentials &&
        (container.getAttribute("container") == nextWorkspaceContextId ||
          container.getAttribute("container") == workspaceContextId)
      ) {
        container.removeAttribute("hidden");
        // Animate from the currently selected workspace
        if (container.getAttribute("container") == workspaceContextId) {
          container.style.transform = `translateX(${offsetPixels / 2}%)`;
        } else {
          // Animate from the next workspace, transitioning towards the current one
          container.style.transform = `translateX(${offsetPixels / 2 + (offsetPixels > 0 ? -100 : 100)}%)`;
        }
      }
    }
    if (offsetPixels) {
      // Find the next workspace we are scrolling to
      const nextWorkspace = workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)];
      if (nextWorkspace) {
        const {
          gradient: nextGradient,
          grain: nextGrain,
          toolbarGradient: nextToolbarGradient,
        } = gZenThemePicker.getGradientForWorkspace(nextWorkspace);
        const existingGrain = gZenThemePicker.getGradientForWorkspace(workspace).grain;
        const percentage = Math.abs(offsetPixels) / 200;
        document.documentElement.style.setProperty("--zen-background-opacity", 1 - percentage);
        if (!this._hasAnimatedBackgrounds) {
          this._hasAnimatedBackgrounds = true;
          document.documentElement.style.setProperty(
            "--zen-main-browser-background-old",
            nextGradient
          );
          document.documentElement.style.setProperty(
            "--zen-main-browser-background-toolbar-old",
            nextToolbarGradient
          );
          document.documentElement.setAttribute("animating-background", "true");
        }
        // Fit the offsetPixels into the grain limits. Both ends may be nextGrain and existingGrain,
        // so we need to use the min and max of both. For example, existing may be 0.2 and next may be 0.5,
        // meaning we should convert the offset to a percentage between 0.2 and 0.5. BUT if existingGrain
        // is 0.5 and nextGrain is 0.2, we should still convert the offset to a percentage between 0.2 and 0.5.
        const minGrain = Math.min(existingGrain, nextGrain);
        const maxGrain = Math.max(existingGrain, nextGrain);
        const grainValue =
          minGrain +
          (maxGrain - minGrain) * (existingGrain > nextGrain ? 1 - percentage : percentage);
        if (!this.#inChangingWorkspace) {
          gZenThemePicker.updateNoise(grainValue);
        }
      }
    } else {
      delete this._hasAnimatedBackgrounds;
    }
    delete this._organizingWorkspaceStrip;
  }

  updateWorkspaceIndicator(currentWorkspace, workspaceIndicator) {
    if (!workspaceIndicator) {
      return;
    }
    const indicatorName = workspaceIndicator.querySelector(".zen-current-workspace-indicator-name");
    const indicatorIcon = workspaceIndicator.querySelector(".zen-current-workspace-indicator-icon");
    const iconStack = workspaceIndicator.querySelector(".zen-current-workspace-indicator-stack");

    if (this.workspaceHasIcon(currentWorkspace)) {
      indicatorIcon.removeAttribute("no-icon");
      iconStack.removeAttribute("no-icon");
    } else {
      indicatorIcon.setAttribute("no-icon", "true");
      iconStack.setAttribute("no-icon", "true");
    }
    const icon = this.getWorkspaceIcon(currentWorkspace);
    indicatorIcon.innerHTML = "";
    if (icon?.endsWith(".svg")) {
      const img = document.createElement("img");
      img.src = icon;
      indicatorIcon.appendChild(img);
    } else {
      indicatorIcon.textContent = icon;
    }
    indicatorName.textContent = currentWorkspace.name;
  }

  _fixIndicatorsNames(workspaces) {
    for (const workspace of workspaces) {
      const workspaceIndicator = this.workspaceElement(workspace.uuid)?.indicator;
      this.updateWorkspaceIndicator(workspace, workspaceIndicator);
    }
  }

  /* eslint-disable complexity */
  async _animateTabs(
    newWorkspace,
    shouldAnimate,
    tabToSelect = null,
    { previousWorkspaceIndex = null, previousWorkspace = null, onInit = false } = {}
  ) {
    gZenUIManager.tabsWrapper.style.scrollbarWidth = "none";
    const kGlobalAnimationDuration = 0.2;
    this._animatingChange = true;
    const animations = [];
    const workspaces = this.getWorkspaces();
    const newWorkspaceIndex = workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
    const isGoingLeft = newWorkspaceIndex <= previousWorkspaceIndex;
    const clonedEssentials = [];
    if (shouldAnimate && this.shouldAnimateEssentials && previousWorkspace) {
      for (const workspace of workspaces) {
        const essentialsContainer = this.getEssentialsSection(workspace.containerTabId);
        if (clonedEssentials[clonedEssentials.length - 1]?.contextId == workspace.containerTabId) {
          clonedEssentials[clonedEssentials.length - 1].repeat++;
          clonedEssentials[clonedEssentials.length - 1].workspaces.push(workspace);
          continue;
        }
        essentialsContainer.setAttribute("hidden", "true");
        const essentialsClone = essentialsContainer.cloneNode(true);
        essentialsClone.removeAttribute("hidden");
        essentialsClone.setAttribute("cloned", "true");
        clonedEssentials.push({
          container: essentialsClone,
          workspaces: [workspace],
          contextId: workspace.containerTabId,
          originalContainer: essentialsContainer,
          repeat: 0,
        });
      }
    }
    document.documentElement.setAttribute("animating-background", "true");
    if (shouldAnimate && previousWorkspace) {
      let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
        "--zen-background-opacity"
      );
      try {
        // Prevent NaN from being set
        if (previousBackgroundOpacity) {
          previousBackgroundOpacity = parseFloat(previousBackgroundOpacity);
        }
      } catch {
        previousBackgroundOpacity = 1;
      }
      if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) {
        previousBackgroundOpacity = 0;
      } else {
        previousBackgroundOpacity = 1 - previousBackgroundOpacity;
      }
      gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
      document.documentElement.style.setProperty(
        "--zen-background-opacity",
        previousBackgroundOpacity
      );
      animations.push(
        gZenUIManager.motion.animate(
          document.documentElement,
          {
            "--zen-background-opacity": [previousBackgroundOpacity, 1],
          },
          {
            type: "spring",
            bounce: 0,
            duration: kGlobalAnimationDuration,
          }
        )
      );
    }
    for (const element of document.querySelectorAll("zen-workspace")) {
      if (element.classList.contains("zen-essentials-container")) {
        continue;
      }
      const existingTransform = element.style.transform;
      const elementWorkspaceId = element.id;
      const elementWorkspaceIndex = workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
      const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
      const newTransform = `translateX(${offset}%)`;
      if (shouldAnimate) {
        const existingPaddingTop = element.style.paddingTop;
        animations.push(
          gZenUIManager.motion.animate(
            element,
            {
              transform: existingTransform ? [existingTransform, newTransform] : newTransform,
              paddingTop: existingTransform
                ? [existingPaddingTop, existingPaddingTop]
                : existingPaddingTop,
            },
            {
              type: "spring",
              bounce: 0,
              duration: kGlobalAnimationDuration,
            }
          )
        );
      }
      element.active = offset === 0;
      if (offset === 0) {
        if (tabToSelect != gBrowser.selectedTab && !onInit) {
          gBrowser.selectedTab = tabToSelect;
        }
      }
    }
    if (this.shouldAnimateEssentials && previousWorkspace) {
      // Animate essentials
      const newWorkspaceEssentialsContainer = clonedEssentials.find((cloned) =>
        cloned.workspaces.some((w) => w.uuid === newWorkspace.uuid)
      );
      // Get a list of essentials containers that are in between the first and last workspace
      const essentialsContainersInBetween = clonedEssentials.filter((cloned) => {
        const essentialsWorkspaces = cloned.workspaces;
        const firstIndex = workspaces.findIndex((w) => w.uuid === essentialsWorkspaces[0].uuid);
        const lastIndex = workspaces.findIndex(
          (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
        );

        const [start, end] = [
          Math.min(previousWorkspaceIndex, newWorkspaceIndex),
          Math.max(previousWorkspaceIndex, newWorkspaceIndex),
        ];

        // Check if any part of the container overlaps with the movement range
        return firstIndex <= end && lastIndex >= start;
      });
      for (const cloned of clonedEssentials) {
        const container = cloned.container;
        const essentialsWorkspaces = cloned.workspaces;
        const repeats = cloned.repeat;
        // Animate like the workspaces above expect essentials are a bit more
        // complicated because they are not based on workspaces but on containers
        // So, if we have the following arangement:
        //  | [workspace1] [workspace2] [workspace3] [workspace4]
        //  | [container1] [container1] [container2] [container1]
        // And if we are changing from workspace 1 to workspace 4,
        // we should be doing the following:
        // First container (repeat 2 times) will stay in place until
        // we reach container 3, then animate to the left and container 2
        // also move to the left after that while container 1 in workspace 4
        // will slide in from the right

        // Get the index from first and last workspace
        const firstWorkspaceIndex = workspaces.findIndex(
          (w) => w.uuid === essentialsWorkspaces[0].uuid
        );
        const lastWorkspaceIndex = workspaces.findIndex(
          (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
        );
        cloned.originalContainer.style.removeProperty("transform");
        // Check if the container is even going to appear on the screen, to save on animation
        if (
          // We also need to check if the container is even going to appear on the screen.
          // In order to do this, we need to check if the container is between the first and last workspace.
          // Note that essential containers can have multiple workspaces,
          // so we need to check if any of the workspaces in the container are between the
          // first and last workspace.
          !essentialsContainersInBetween.find(
            (ce) =>
              ce.workspaces.some((w) => w.uuid === essentialsWorkspaces[0].uuid) &&
              ce.workspaces.some(
                (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
              )
          )
        ) {
          continue;
        }
        cloned.originalContainer.parentNode.appendChild(container);
        let stepsInBetween =
          Math.abs(newWorkspaceIndex - (isGoingLeft ? firstWorkspaceIndex : lastWorkspaceIndex)) +
          1;
        const usingSameContainer =
          newWorkspaceEssentialsContainer.workspaces.some((w) => w.uuid === newWorkspace.uuid) &&
          newWorkspaceEssentialsContainer.workspaces.some((w) => w.uuid === previousWorkspace.uuid);
        let newOffset =
          -(
            newWorkspaceIndex -
            (isGoingLeft ? firstWorkspaceIndex : lastWorkspaceIndex) +
            (!isGoingLeft ? repeats - 1 : -repeats + 1)
          ) * 100;

        let existingOffset =
          -(
            newWorkspaceIndex -
            (isGoingLeft ? lastWorkspaceIndex : firstWorkspaceIndex) +
            (isGoingLeft ? repeats - 1 : -repeats + 1)
          ) * 100;

        // If we are on the same container and both new and old workspace are in the same "essentialsWorkspaces"
        // we can simply not animate the essentials
        if (
          usingSameContainer &&
          essentialsWorkspaces.some((w) => w.uuid === newWorkspace.uuid) &&
          essentialsWorkspaces.some((w) => w.uuid === previousWorkspace.uuid)
        ) {
          newOffset = 0;
          existingOffset = 0;
        }

        const needsOffsetAdjustment =
          stepsInBetween > essentialsWorkspaces.length || usingSameContainer;

        if (repeats > 0 && needsOffsetAdjustment) {
          if (!isGoingLeft) {
            if (existingOffset !== 0) {
              existingOffset += 100;
            }
            if (newOffset !== 0) {
              newOffset += 100;
            }
          } else {
            if (existingOffset !== 0) {
              existingOffset -= 100;
            }
            if (newOffset !== 0) {
              newOffset -= 100;
            }
          }
        }

        // Special case: going forward from single reused container to a new one
        if (!usingSameContainer && !isGoingLeft && lastWorkspaceIndex === newWorkspaceIndex - 1) {
          existingOffset = 0;
          newOffset = -100;
          stepsInBetween = 1;
        }
        if (!usingSameContainer && isGoingLeft && firstWorkspaceIndex === newWorkspaceIndex + 1) {
          existingOffset = 0;
          newOffset = 100;
          stepsInBetween = 1;
        }
        if (
          !usingSameContainer &&
          isGoingLeft &&
          (firstWorkspaceIndex === newWorkspaceIndex - 1 ||
            firstWorkspaceIndex === newWorkspaceIndex)
        ) {
          existingOffset = -100;
          newOffset = 0;
          stepsInBetween = 1;
        }
        if (!usingSameContainer && !isGoingLeft && firstWorkspaceIndex === newWorkspaceIndex) {
          existingOffset = 100;
          newOffset = 0;
          stepsInBetween = 1;
        }

        const newTransform = `translateX(${newOffset}%)`;
        let existingTransform = `translateX(${existingOffset}%)`;
        if (container.style.transform && container.style.transform !== "none") {
          existingTransform = container.style.transform;
        }
        if (shouldAnimate) {
          container.style.transform = existingTransform;
          animations.push(
            gZenUIManager.motion.animate(
              container,
              {
                transform: [
                  existingTransform,
                  new Array(stepsInBetween).fill(newTransform).join(","),
                ],
              },
              {
                type: "spring",
                bounce: 0,
                duration: kGlobalAnimationDuration,
              }
            )
          );
        }
      }
    }
    if (shouldAnimate) {
      gZenUIManager._preventToolbarRebuild = true;
      gZenUIManager.updateTabsToolbar();
    }
    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) {
        cloned.container.remove();
      }
      this._alwaysAnimatePaddingTop = true;
      this.updateTabsContainers();
    }
    const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
    essentialsContainer.removeAttribute("hidden");
    essentialsContainer.style.transform = "none";
    gBrowser.tabContainer._invalidateCachedTabs();
    gZenUIManager.tabsWrapper.style.removeProperty("scrollbar-width");
    this._animatingChange = false;
  }

  _shouldChangeToTab(aTab) {
    return !(aTab?.pinned && aTab?.hasAttribute("pending"));
  }

  async #shouldShowTabInCurrentWorkspace(tab) {
    const currentWorkspace = this.getActiveWorkspaceFromCache();
    return this._shouldShowTab(
      tab,
      currentWorkspace.uuid,
      currentWorkspace.containerTabId,
      this.getWorkspaces()
    );
  }

  _shouldShowTab(tab, workspaceUuid, containerId, workspaces) {
    const isEssential = tab.getAttribute("zen-essential") === "true";
    const tabWorkspaceId = tab.getAttribute("zen-workspace-id");
    const tabContextId = tab.getAttribute("usercontextid") ?? "0";

    if (tab.hasAttribute("zen-glance-tab")) {
      return true; // Always show glance tabs
    }

    // See https://github.com/zen-browser/desktop/issues/10666, we should never
    // show closing tabs and consider them as not part of any workspace. This will
    // invalidate the `lastSelectedTab[previousWorkspaceId]` logic in `_handleTabSelection`
    if (tab.closing) {
      return false; // Never show closing tabs
    }

    // Handle essential tabs
    if (isEssential) {
      if (!this.containerSpecificEssentials) {
        return true; // Show all essential tabs when containerSpecificEssentials is false
      }

      if (containerId) {
        // In workspaces with default container: Show essentials that match the container
        return tabContextId == containerId;
      }
      // In workspaces without a default container: Show essentials that aren't in container-specific workspaces
      // or have usercontextid="0" or no usercontextid
      return (
        !tabContextId ||
        tabContextId === "0" ||
        !workspaces.some((workspace) => workspace.containerTabId === parseInt(tabContextId, 10))
      );
    }

    // For non-essential tabs (both normal and pinned)
    if (!tabWorkspaceId) {
      // Assign workspace ID to tabs without one
      this.moveTabToWorkspace(tab, workspaceUuid);
      return true;
    }

    // Show if tab belongs to current workspace
    return tabWorkspaceId === workspaceUuid;
  }

  async _handleTabSelection(workspace, onInit, previousWorkspaceId) {
    const currentSelectedTab = gBrowser.selectedTab;
    const oldWorkspaceId = previousWorkspaceId;
    const lastSelectedTab = this.lastSelectedWorkspaceTabs[workspace.uuid];

    const containerId = workspace.containerTabId?.toString();
    const workspaces = this.getWorkspaces();

    // Save current tab as last selected for old workspace if it shouldn't be visible in new workspace
    if (oldWorkspaceId && oldWorkspaceId !== workspace.uuid) {
      this.lastSelectedWorkspaceTabs[oldWorkspaceId] =
        gZenGlanceManager.getTabOrGlanceParent(currentSelectedTab);
    }

    let tabToSelect = null;
    // Try last selected tab if it is visible
    if (
      lastSelectedTab &&
      this._shouldShowTab(lastSelectedTab, workspace.uuid, containerId, workspaces)
    ) {
      tabToSelect = lastSelectedTab;
    }
    // Find first suitable tab
    else {
      tabToSelect = gBrowser.visibleTabs.find((tab) => !tab.pinned);
      if (!tabToSelect && gBrowser.visibleTabs.length) {
        tabToSelect = gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
      }
      if (!tabToSelect || !this._shouldChangeToTab(tabToSelect)) {
        // Never select an essential tab
        tabToSelect = null;
      }
    }

    // If we found a tab to select, select it
    if (!onInit && !tabToSelect) {
      // Create new tab if needed and no suitable tab was found
      const newTab = this.selectEmptyTab();
      tabToSelect = newTab;
    }
    if (tabToSelect && !onInit) {
      tabToSelect._visuallySelected = true;
    }

    // Always make sure we always unselect the tab from the old workspace
    if (currentSelectedTab && currentSelectedTab !== tabToSelect) {
      currentSelectedTab._selected = false;
    }
    return tabToSelect;
  }

  async _updateWorkspaceState(
    workspace,
    onInit,
    tabToSelect,
    { previousWorkspaceIndex, previousWorkspace } = {}
  ) {
    // Update document state
    document.documentElement.setAttribute("zen-workspace-id", workspace.uuid);

    // Recalculate new tab observers
    gBrowser.tabContainer.observe(null, "nsPref:changed", "privacy.userContext.enabled");

    gBrowser.tabContainer.arrowScrollbox = this.activeScrollbox;

    // Update workspace UI
    requestAnimationFrame(() => {
      gZenThemePicker.onWorkspaceChange(workspace);
    });

    gZenUIManager.tabsWrapper.scrollbarWidth = "none";
    this.workspaceIcons.activeIndex = workspace.uuid;
    await this._animateTabs(workspace, !onInit && !this._animatingChange, tabToSelect, {
      previousWorkspaceIndex,
      previousWorkspace,
      onInit,
    });
    this._organizeWorkspaceStripLocations(workspace, true);
    gZenUIManager.tabsWrapper.style.scrollbarWidth = "";

    // Notify listeners
    if (this._changeListeners?.length) {
      for (const listener of this._changeListeners) {
        const { func, opts } = listener;
        await func({ workspace, onInit });
        if (opts.once) {
          this.removeChangeListeners(func);
        }
      }
    }

    // Reset bookmarks
    this.#invalidateBookmarkContainers();

    // Update workspace indicator
    await this.updateWorkspaceIndicator(workspace, this.workspaceIndicator);

    // Fix ctrl+tab behavior. Note, we dont call it with "await" because we dont want to wait for it
    this._fixCtrlTabBehavior();

    // Bug: When updating from previous versions, we used to hide the tabs not used in the new workspace
    //  we now need to show them again.
    // TODO: Remove this on future versions
    if (onInit) {
      for (const tab of this.allStoredTabs) {
        gBrowser.showTab(tab);
      }
      for (const tab of gBrowser.tabs) {
        if (!tab.hasAttribute("zen-workspace-id") && !tab.hasAttribute("zen-workspace-id")) {
          tab.setAttribute("zen-workspace-id", workspace.uuid);
        }
      }
      this.#fireSpaceUIUpdate();
    }
  }

  #fireSpaceUIUpdate() {
    window.dispatchEvent(
      new CustomEvent("ZenWorkspacesUIUpdate", {
        bubbles: true,
        detail: { activeIndex: this.activeWorkspace },
      })
    );
  }

  async _fixCtrlTabBehavior() {
    ctrlTab.uninit();
    ctrlTab.readPref();
  }

  #invalidateBookmarkContainers() {
    for (let i = 0, len = this.bookmarkMenus.length; i < len; i++) {
      const element = document.getElementById(this.bookmarkMenus[i]);
      if (element && element._placesView) {
        const placesView = element._placesView;
        placesView.invalidateContainer(placesView._resultNode);
      }
    }
    BookmarkingUI.updateEmptyToolbarMessage();
  }

  updateWorkspacesChangeContextMenu() {
    if (gZenWorkspaces.privateWindowOrDisabled) {
      return;
    }
    const workspaces = this.getWorkspaces();
    const ctxCommand = document.getElementById("cmd_zenCtxDeleteWorkspace");
    if (workspaces.length <= 1) {
      ctxCommand.setAttribute("disabled", "true");
    } else {
      ctxCommand.removeAttribute("disabled");
    }

    let menuPopupID = "moveTabOptionsMenu";
    let menuPopup = document.getElementById(menuPopupID);
    let menubar = document.getElementById("zen-spaces-menubar");
    if (!menuPopup || !menubar) {
      return;
    }
    let itemsToFill = [menubar.querySelector("menupopup"), menuPopup];
    for (const popup of itemsToFill) {
      let isMoveTabPopup = popup.id === menuPopupID;
      for (const item of popup.querySelectorAll(".zen-workspace-context-menu-item")) {
        item.remove();
      }
      const separator = document.createXULElement("menuseparator");
      separator.classList.add("zen-workspace-context-menu-item");
      if (isMoveTabPopup) {
        popup.prepend(separator);
      } else {
        popup.appendChild(separator);
      }
      let i = 0;
      for (let workspace of isMoveTabPopup ? workspaces.reverse() : workspaces) {
        const menuItem = this.generateMenuItemForWorkspace(
          workspace,
          /* disableCurrent = */ isMoveTabPopup
        );
        if (isMoveTabPopup) {
          popup.prepend(menuItem);
          menuItem.setAttribute("command", "cmd_zenChangeWorkspaceTab");
        } else {
          if (i < 10) {
            menuItem.setAttribute("key", `zen-workspace-switch-${i + 1}`);
          }
          menuItem.addEventListener("command", () => {
            this.changeWorkspace(workspace);
          });
          popup.appendChild(menuItem);
        }
        i++;
      }
    }
  }

  #createWorkspaceData(name, icon, containerTabId = 0) {
    if (!this.currentWindowIsSyncing) {
      containerTabId = parseInt(gBrowser.selectedTab.getAttribute("usercontextid")) || 0;
      let label = ContextualIdentityService.getUserContextLabel(containerTabId) || "Default";
      name = this.isPrivateWindow ? "Incognito" : label;
      if (this.isPrivateWindow) {
        icon = gZenEmojiPicker.getSVGURL("eye.svg");
      }
    }
    let workspace = {
      uuid: gZenUIManager.generateUuidv4(),
      icon,
      name,
      theme: nsZenThemePicker.getTheme([]),
      containerTabId,
    };
    return workspace;
  }

  async createAndSaveWorkspace(
    name = "Space",
    icon = undefined,
    dontChange = false,
    containerTabId = 0,
    { beforeChangeCallback } = { beforeChangeCallback: null } // Callback to run before changing workspace
  ) {
    if (!this.workspaceEnabled) {
      return null;
    }
    // get extra tabs remaning (e.g. on new profiles) and just move them to the new workspace
    const extraTabs = Array.from(gBrowser.tabContainer.arrowScrollbox.children).filter(
      (child) =>
        gBrowser.isTab(child) &&
        !child.hasAttribute("zen-workspace-id") &&
        !child.hasAttribute("zen-empty-tab") &&
        !child.hasAttribute("zen-essential")
    );
    let workspaceData = this.#createWorkspaceData(name, icon, containerTabId);
    if (!dontChange) {
      this.#prepareNewWorkspace(workspaceData);
      this.#createWorkspaceTabsSection(workspaceData, extraTabs);
      this._organizeWorkspaceStripLocations(workspaceData);
    }
    this.saveWorkspace(workspaceData);
    if (!dontChange) {
      if (beforeChangeCallback) {
        try {
          await beforeChangeCallback(workspaceData);
        } catch (e) {
          console.error("Error in beforeChangeCallback:", e);
        }
      }
      this.registerPinnedResizeObserver();
      this.updateTabsContainers({
        target: this.workspaceElement(workspaceData.uuid).pinnedTabsContainer,
      });
      let changed = !!extraTabs.length;
      if (changed) {
        gBrowser.tabContainer._invalidateCachedTabs();
        gBrowser.selectedTab = extraTabs[0];
      }
      await this.changeWorkspace(workspaceData);
    }
    this.onWindowResize();
    return workspaceData;
  }

  updateTabsContainers(target = undefined, forAnimation = false) {
    this.makeSureEmptyTabIsFirst();
    if (target && !target.target?.parentNode) {
      target = null;
    }
    this.onPinnedTabsResize(
      // This is what happens when we join a resize observer, an event listener
      // while using it as a method.
      [{ target: (target?.target ? target.target : target) ?? this.pinnedTabsContainer }],
      forAnimation
    );
  }

  updateShouldHideSeparator(arrowScrollbox, pinnedContainer, fromTabSelection = false) {
    const visibleTabsFound = () => {
      let count = 0;
      for (const child of arrowScrollbox.children) {
        if (
          !child.hasAttribute("hidden") &&
          !child.closing &&
          !child.hasAttribute("zen-empty-tab")
        ) {
          count++;
          if (count > 1) {
            // Early return
            return true;
          }
        }
      }
      return false;
    };

    // <= 2 because we have the empty tab and the new tab button
    const shouldHideSeparator = fromTabSelection
      ? pinnedContainer.hasAttribute("hide-separator")
      : !visibleTabsFound();
    if (shouldHideSeparator) {
      pinnedContainer.setAttribute("hide-separator", "true");
    } else {
      const workspaceID = pinnedContainer.getAttribute("zen-workspace-id");
      const tabs = this.#unpinnedTabsInWorkspace(workspaceID);
      const closableTabs = this.#getClosableTabs(tabs);
      const button = pinnedContainer.querySelector(".zen-workspace-close-unpinned-tabs-button");
      if (tabs.length === closableTabs.length) {
        button.setAttribute("can-close", "true");
      } else {
        button.removeAttribute("can-close");
      }
      pinnedContainer.removeAttribute("hide-separator");
    }
  }

  onPinnedTabsResize(entries, forAnimation = false) {
    if (
      document.documentElement.hasAttribute("inDOMFullscreen") ||
      !this._hasInitializedTabsStrip ||
      (this._organizingWorkspaceStrip && !forAnimation) ||
      document.documentElement.hasAttribute("zen-creating-workspace") ||
      document.documentElement.hasAttribute("customizing")
    ) {
      return;
    }
    // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it
    if (typeof forAnimation !== "boolean") {
      forAnimation = false;
    }
    for (const entry of entries) {
      let originalWorkspaceId = entry.target.getAttribute("zen-workspace-id");
      if (!originalWorkspaceId) {
        originalWorkspaceId = entry.target.closest("zen-workspace")?.id || this.activeWorkspace;
      }
      const workspacesIds = [];
      if (entry.target.closest("#zen-essentials")) {
        // Get all workspaces that have the same userContextId
        const userContextId = parseInt(entry.target.getAttribute("container") || "0");
        const workspaces = this.getWorkspaces().filter((w) => w.containerTabId === userContextId);
        workspacesIds.push(...workspaces.map((w) => w.uuid));
      } else {
        workspacesIds.push(originalWorkspaceId);
      }
      for (const workspaceId of workspacesIds) {
        const workspaceElement = this.workspaceElement(workspaceId);
        const workspaceObject = this.getWorkspaceFromId(workspaceId);
        if (!workspaceElement || !workspaceObject) {
          console.warn("Workspace element or object not found for id", workspaceId);
          continue;
        }
        const arrowScrollbox = workspaceElement.tabsContainer;
        const pinnedContainer = workspaceElement.pinnedTabsContainer;
        const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
        const essentialNumChildren = essentialContainer.children.length;
        let essentialHackType = 0;
        if (essentialNumChildren === 6 || essentialNumChildren === 9) {
          essentialHackType = 1;
        } else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) {
          essentialHackType = 2;
        } else if (essentialNumChildren === 5) {
          essentialHackType = 3;
        }
        if (essentialHackType > 0) {
          essentialContainer.setAttribute("data-hack-type", essentialHackType);
        } else {
          essentialContainer.removeAttribute("data-hack-type");
        }
        this.#updatePaddingTopOnTabs(workspaceElement, essentialContainer, forAnimation);
        this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
      }
    }
  }

  async onTabBrowserInserted(event) {
    let tab = event.originalTarget;
    const isEssential = tab.getAttribute("zen-essential") === "true";
    const workspaceID = tab.getAttribute("zen-workspace-id");

    if (!this.workspaceEnabled || isEssential) {
      return;
    }

    if (workspaceID) {
      if (tab.hasAttribute("change-workspace") && this.moveTabToWorkspace(tab, workspaceID)) {
        this.lastSelectedWorkspaceTabs[workspaceID] = gZenGlanceManager.getTabOrGlanceParent(tab);
        tab.removeAttribute("change-workspace");
        const workspace = this.getWorkspaceFromId(workspaceID);
        setTimeout(() => {
          this.changeWorkspace(workspace);
        }, 0);
      }
      return;
    }

    let activeWorkspace = this.getActiveWorkspace();
    if (!activeWorkspace) {
      return;
    }
    if (tab.hasAttribute("zen-workspace-id")) {
      const tabWorkspaceId = tab.getAttribute("zen-workspace-id");
      this.moveTabToWorkspace(tab, tabWorkspaceId);
      await this.changeWorkspaceWithID(tabWorkspaceId);
    } else {
      tab.setAttribute("zen-workspace-id", activeWorkspace.uuid);
    }
  }

  #changeToEmptyTab() {
    const isEmpty = gBrowser.selectedTab.hasAttribute("zen-empty-tab");
    gZenCompactModeManager.sidebar.toggleAttribute("zen-has-empty-tab", isEmpty);
    document.documentElement.setAttribute("zen-has-empty-tab", isEmpty);
  }

  async onLocationChange(event) {
    let tab = event.target;
    this.#changeToEmptyTab();
    if (!this.workspaceEnabled || this.#inChangingWorkspace || this._isClosingWindow) {
      return;
    }

    if (tab.hasAttribute("zen-glance-tab")) {
      // Extract from parent node so we are not selecting the wrong (current) tab
      tab = tab.parentNode.closest(".tabbrowser-tab");
      console.assert(tab, "Tab not found for zen-glance-tab");
    }
    const workspaceID = tab.getAttribute("zen-workspace-id");
    const isEssential = tab.getAttribute("zen-essential") === "true";
    if (tab.hasAttribute("zen-empty-tab")) {
      return;
    }

    if (!isEssential) {
      const activeWorkspace = this.getActiveWorkspace();
      if (!activeWorkspace) {
        return;
      }

      // Only update last selected tab for non-essential tabs in their workspace
      if (workspaceID === activeWorkspace.uuid) {
        this.lastSelectedWorkspaceTabs[workspaceID] = gZenGlanceManager.getTabOrGlanceParent(tab);
      }

      // Switch workspace if needed
      if (workspaceID && workspaceID !== activeWorkspace.uuid && this._hasInitializedTabsStrip) {
        const workspaceToChange = this.getWorkspaceFromId(workspaceID);
        if (!workspaceToChange) {
          return;
        }
        await this.changeWorkspace(workspaceToChange);
      }
    }
  }

  // Context menu management
  async contextChangeContainerTab(event) {
    this._organizingWorkspaceStrip = true;
    let workspaces = this.getWorkspaces();
    let workspace = workspaces.find(
      (w) => w.uuid === (this.#contextMenuData?.workspaceId || this.activeWorkspace)
    );
    let userContextId = parseInt(event.target.getAttribute("data-usercontextid"));
    workspace.containerTabId = userContextId + 0; // +0 to convert to number
    this.saveWorkspace(workspace);
  }

  async closeAllUnpinnedTabs() {
    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
    const unpinnedTabs = this.#unpinnedTabsInWorkspace(workspaceId);
    const closableTabs = this.#getClosableTabs(unpinnedTabs);

    if (!closableTabs.length) {
      return;
    }
    this.#deleteAllUnpinnedTabsInWorkspace(closableTabs);

    const restoreClosedTabsShortcut = gZenKeyboardShortcutsManager.getShortcutDisplayFromCommand(
      "History:RestoreLastClosedTabOrWindowOrSession"
    );

    gZenUIManager.showToast("zen-workspaces-close-all-unpinned-tabs-toast", {
      l10nArgs: {
        shortcut: restoreClosedTabsShortcut,
      },
    });
  }

  async contextDeleteWorkspace() {
    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
    const [title, body] = await document.l10n.formatValues([
      { id: "zen-workspaces-delete-workspace-title" },
      {
        id: "zen-workspaces-delete-workspace-body",
        args: { name: this.getWorkspaceFromId(workspaceId).name },
      },
    ]);
    if (Services.prompt.confirm(null, title, body)) {
      this.removeWorkspace(workspaceId);
    }
  }

  findTabToBlur(tab) {
    if ((!this._shouldChangeToTab(tab) || !tab) && this._emptyTab) {
      return this._emptyTab;
    }
    return tab;
  }

  async changeWorkspaceShortcut(offset = 1, whileScrolling = false, disableWrap = false) {
    // Cycle through workspaces
    let workspaces = this.getWorkspaces();
    let activeWorkspace = this.getActiveWorkspace();
    let workspaceIndex = workspaces.indexOf(activeWorkspace);

    // note: offset can be negative
    let targetIndex = workspaceIndex + offset;
    if (this.shouldWrapAroundNavigation && !disableWrap) {
      // Add length to handle negative indices and loop
      targetIndex = (targetIndex + workspaces.length) % workspaces.length;
    } else {
      // Clamp within bounds to disable looping
      targetIndex = Math.max(0, Math.min(workspaces.length - 1, targetIndex));
    }

    let nextWorkspace = workspaces[targetIndex];
    await this.changeWorkspace(nextWorkspace, { whileScrolling });
    return nextWorkspace;
  }

  #initializeWorkspaceTabContextMenus() {
    if (this.privateWindowOrDisabled) {
      const commandsToDisable = [
        "cmd_zenOpenFolderCreation",
        "cmd_zenOpenWorkspaceCreation",
        "zen-context-menu-new-folder-toolbar",
      ];
      commandsToDisable.forEach((cmd) => {
        const element = document.getElementById(cmd);
        if (element) {
          element.setAttribute("disabled", true);
        }
      });
    }
  }

  async changeTabWorkspace(workspaceID) {
    const tabs = TabContextMenu.contextTab.multiselected
      ? gBrowser.selectedTabs
      : [TabContextMenu.contextTab];
    document.getElementById("tabContextMenu").hidePopup();
    const previousWorkspaceID = document.documentElement.getAttribute("zen-workspace-id");
    for (let tab of tabs) {
      this.moveTabToWorkspace(tab, workspaceID);
      if (this.lastSelectedWorkspaceTabs[previousWorkspaceID] === tab) {
        // This tab is no longer the last selected tab in the previous workspace because it's being moved to
        // the current workspace
        delete this.lastSelectedWorkspaceTabs[previousWorkspaceID];
      }
    }
    // Make sure we select the last tab in the new workspace
    this.lastSelectedWorkspaceTabs[workspaceID] = gZenGlanceManager.getTabOrGlanceParent(
      tabs[tabs.length - 1]
    );
    const workspaces = this.getWorkspaces();
    await this.changeWorkspace(workspaces.find((workspace) => workspace.uuid === workspaceID));
  }

  // Tab browser utilities

  getContextIdIfNeeded(userContextId, fromExternal) {
    if (!this.workspaceEnabled) {
      return [userContextId, false, undefined];
    }

    if (
      this.shouldForceContainerTabsToWorkspace &&
      typeof userContextId !== "undefined" &&
      this._workspaceCache &&
      !fromExternal
    ) {
      // Find all workspaces that match the given userContextId
      const matchingWorkspaces = this._workspaceCache.filter(
        (workspace) => workspace.containerTabId === userContextId
      );

      // Check if exactly one workspace matches
      if (matchingWorkspaces.length === 1) {
        const workspace = matchingWorkspaces[0];
        if (workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) {
          return [userContextId, true, workspace.uuid];
        }
      }
    }

    const activeWorkspace = this.getActiveWorkspaceFromCache();
    const activeWorkspaceUserContextId = activeWorkspace?.containerTabId;

    if (
      fromExternal !== true &&
      typeof userContextId !== "undefined" &&
      userContextId !== activeWorkspaceUserContextId
    ) {
      return [userContextId, false, undefined];
    }
    return [activeWorkspaceUserContextId, true, undefined];
  }

  getTabsToExclude(aTab) {
    const tabWorkspaceId = aTab.getAttribute("zen-workspace-id");
    const containerId = aTab.getAttribute("usercontextid") ?? "0";
    // Return all tabs that are not on the same workspace
    return gBrowser.tabs.filter(
      (tab) =>
        !this._shouldShowTab(tab, tabWorkspaceId, containerId, this._workspaceCache) &&
        !tab.hasAttribute("zen-empty-tab")
    );
  }

  async shortcutSwitchTo(index) {
    const workspaces = this.getWorkspaces();
    // The index may be out of bounds, if it doesnt exist, don't do anything
    if (index >= workspaces.length || index < 0) {
      return;
    }
    const workspaceToSwitch = workspaces[index];
    await this.changeWorkspace(workspaceToSwitch);
  }

  isBookmarkInAnotherWorkspace(bookmark) {
    if (!this._workspaceBookmarksCache?.bookmarks) {
      return false;
    }
    const bookmarkGuid = bookmark.bookmarkGuid;
    const activeWorkspaceUuid = this.activeWorkspace;
    let isInActiveWorkspace = false;
    let isInOtherWorkspace = false;

    for (const [workspaceUuid, bookmarkGuids] of Object.entries(
      this._workspaceBookmarksCache.bookmarks
    )) {
      if (bookmarkGuids.includes(bookmarkGuid)) {
        if (workspaceUuid === activeWorkspaceUuid) {
          isInActiveWorkspace = true;
        } else {
          isInOtherWorkspace = true;
        }
      }
    }

    // Return true only if the bookmark is in another workspace and not in the active one
    return isInOtherWorkspace && !isInActiveWorkspace;
  }

  // Session restore functions
  get allStoredTabs() {
    if (this._allStoredTabs) {
      return this._allStoredTabs;
    }

    const tabs = [];
    // we need to go through each tab in each container
    const essentialsContainer = document.querySelectorAll(
      "#zen-essentials .zen-workspace-tabs-section"
    );
    let pinnedContainers = [];
    let normalContainers = [];
    if (!this._hasInitializedTabsStrip) {
      pinnedContainers = [document.getElementById("pinned-tabs-container")];
      normalContainers = [this.activeWorkspaceStrip];
    } else {
      let workspaces = Array.from(this._workspaceCache || []);
      // Make the active workspace first
      workspaces = workspaces.sort((a, b) =>
        /* eslint-disable no-nested-ternary */
        a.uuid === this.activeWorkspace ? -1 : b.uuid === this.activeWorkspace ? 1 : 0
      );
      for (const workspace of workspaces) {
        const container = this.workspaceElement(workspace.uuid);
        if (container) {
          pinnedContainers.push(container.pinnedTabsContainer);
          normalContainers.push(container.tabsContainer);
        }
      }
    }
    const containers = [...essentialsContainer, ...pinnedContainers, ...normalContainers];
    for (const container of containers) {
      if (container.hasAttribute("cloned")) {
        continue;
      }
      for (const tab of container.children) {
        if (gBrowser.isTab(tab)) {
          tabs.push(tab);
          const glance = tab.querySelector(".tabbrowser-tab[glance-id]");
          if (glance) {
            tabs.push(glance);
          }
        } else if (gBrowser.isTabGroup(tab)) {
          for (const groupTab of tab.tabs) {
            tabs.push(groupTab);
            const glance = groupTab.querySelector(".tabbrowser-tab[glance-id]");
            if (glance) {
              tabs.push(glance);
            }
          }
        }
      }
    }
    return (this._allStoredTabs = tabs);
  }

  get allTabGroups() {
    if (!this._hasInitializedTabsStrip) {
      let children = this.tabboxChildren;
      return children.filter((node) => gBrowser.isTabGroup(node));
    }
    const pinnedContainers = [];
    const normalContainers = [];
    for (const workspace of this._workspaceCache) {
      const container = this.workspaceElement(workspace.uuid);
      if (container) {
        pinnedContainers.push(container.pinnedTabsContainer);
        normalContainers.push(container.tabsContainer);
      }
    }
    const containers = [...pinnedContainers, ...normalContainers];
    const tabGroups = [];
    for (const container of containers) {
      for (const tabGroup of container.querySelectorAll("tab-group")) {
        tabGroups.push(tabGroup);
      }
      for (const tabGroup of container.querySelectorAll("zen-folder")) {
        tabGroups.push(tabGroup);
      }
    }
    return tabGroups;
  }

  get allUsedBrowsers() {
    if (!this._hasInitializedTabsStrip) {
      return gBrowser.browsers;
    }
    const browsers = [];
    for (const tab of this.allStoredTabs) {
      const browser = tab.linkedBrowser;
      if (browser) {
        browsers.push(browser);
      }
    }
    return browsers;
  }

  get pinnedTabCount() {
    return this.pinnedTabsContainer.children.length - 1;
  }

  reorganizeTabsAfterWelcome() {
    const children = gBrowser.tabContainer.arrowScrollbox.children;
    const remainingTabs = Array.from(children).filter((child) => gBrowser.isTab(child));
    for (const tab of remainingTabs) {
      this.moveTabToWorkspace(tab, this.activeWorkspace);
    }
  }

  async switchIfNeeded(browser) {
    const tab = gBrowser.getTabForBrowser(browser);
    await this.switchTabIfNeeded(tab);
  }

  async switchTabIfNeeded(tab) {
    // Validate browser state first
    if (!this._validateBrowserState()) {
      console.warn("Browser state invalid for tab switching");
      return;
    }

    if (!tab) {
      console.warn("switchTabIfNeeded called with null tab");
      return;
    }

    // Validate tab state
    if (tab.closing || !tab.ownerGlobal || tab.ownerGlobal.closed || !tab.linkedBrowser) {
      console.warn("Tab is no longer valid, cannot select it");
      return;
    }

    try {
      const currentWorkspace = this.getActiveWorkspaceFromCache();
      // Check if we need to change workspace
      if (
        (tab.getAttribute("zen-workspace-id") !== this.activeWorkspace &&
          !tab.hasAttribute("zen-essential")) ||
        (currentWorkspace.containerTabId !== parseInt(tab.parentNode.getAttribute("container")) &&
          this.containerSpecificEssentials)
      ) {
        // Use a mutex-like approach to prevent concurrent workspace changes
        if (this._workspaceChangeInProgress) {
          console.warn("Workspace change already in progress, deferring tab switch");
          return;
        }

        let workspaceToSwitch = undefined;
        if (tab.hasAttribute("zen-essential")) {
          // Find first workspace with the same container
          const containerTabId = parseInt(tab.parentNode.getAttribute("container"));
          // +0 to convert to number
          workspaceToSwitch = this._workspaceCache.find(
            (workspace) => workspace.containerTabId + 0 === containerTabId
          );
        } else {
          workspaceToSwitch = this.getWorkspaceFromId(tab.getAttribute("zen-workspace-id"));
        }
        if (!workspaceToSwitch) {
          console.error("No workspace found for tab, cannot switch");
          await this._safelySelectTab(tab);
          return;
        }

        this._workspaceChangeInProgress = true;
        try {
          this.lastSelectedWorkspaceTabs[workspaceToSwitch.uuid] =
            gZenGlanceManager.getTabOrGlanceParent(tab);
          await this.changeWorkspace(workspaceToSwitch);
        } finally {
          this._workspaceChangeInProgress = false;
        }
      }

      // Safely switch to the tab using our debounced method
      await this._safelySelectTab(tab);
    } catch (e) {
      console.error("Error in switchTabIfNeeded:", e);
    }
  }

  getDefaultContainer() {
    if (!this.workspaceEnabled) {
      return 0;
    }
    const workspaces = this._workspaceCache;
    if (!workspaces) {
      return 0;
    }
    const activeWorkspace = this.activeWorkspace;
    const workspace = workspaces.find((w) => w.uuid === activeWorkspace);
    return workspace.containerTabId;
  }

  onWindowResize(event = undefined) {
    if (!(!event || event.target === window)) {
      return;
    }
    gZenUIManager.updateTabsToolbar();
    // Check if workspace icons overflow the parent container
    let parent = this.workspaceIcons;
    if (!parent || this._processingResize) {
      return;
    }
    if (!gZenPinnedTabManager.expandedSidebarMode) {
      for (const icon of parent.children) {
        if (icon.tagName === "toolbarbutton") {
          icon.style.width = ""; // Reset to default size when in expanded mode
        }
      }
      parent.removeAttribute("icons-overflow");
      return;
    }
    const maxButtonSize = 32; // IMPORTANT: This should match the CSS size of the icons
    const minButtonSize = maxButtonSize / 2; // Minimum size for icons when space is limited
    const separation = 3; // Space between icons

    // Calculate the total width needed for all icons
    const totalWidth = Array.from(parent.children).reduce((width, icon) => {
      if (icon.tagName === "toolbarbutton") {
        return width + minButtonSize + separation;
      }
      return width;
    }, 0);

    // Check if the total width exceeds the parent's width
    if (totalWidth > parent.clientWidth) {
      parent.setAttribute("icons-overflow", "true");
    } else {
      parent.removeAttribute("icons-overflow");
    }

    // Set the width of each icon to the maximum size they can fit on
    const widthPerButton = Math.max(
      (parent.clientWidth - separation * (parent.children.length - 1)) / parent.children.length,
      minButtonSize
    );
    for (const icon of parent.children) {
      if (icon.tagName === "toolbarbutton") {
        icon.style.width = `${Math.min(widthPerButton, maxButtonSize)}px`;
      }
    }
  }

  fixTabInsertLocation(tab) {
    if (tab.hasAttribute("zen-essential")) {
      // Essential tabs should always be inserted at the end of the essentials section
      const essentialsSection = this.getEssentialsSection(tab);
      if (essentialsSection) {
        essentialsSection.appendChild(tab);
      }
    } else if (tab.pinned) {
      // Pinned tabs should always be inserted at the end of the pinned tabs container
      const pinnedContainer = this.pinnedTabsContainer;
      if (pinnedContainer) {
        pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
      }
    }
  }

  updateOverflowingTabs() {
    if (!this._hasInitializedTabsStrip) {
      return;
    }
    const currentWorkspaceStrip = this.workspaceElement(this.activeWorkspace);
    if (!currentWorkspaceStrip) {
      return;
    }
    if (currentWorkspaceStrip.overflows) {
      gBrowser.tabContainer.setAttribute("overflow", "true");
    } else {
      gBrowser.tabContainer.removeAttribute("overflow");
    }
  }

  handleTabCloseWindow() {
    if (Services.prefs.getBoolPref("zen.tabs.close-window-with-empty")) {
      document.getElementById("cmd_closeWindow").doCommand();
    }
  }
}

window.gZenWorkspaces = new nsZenWorkspaces();