tor-browser

commit 9871e911c5c15561b192123269e8d68fce40750e
parent 6b22ca04d2a59a17cf16f14be82f61fb45391af9
Author: Jonathan Sudiaman <jsudiaman@mozilla.com>
Date:   Fri, 12 Dec 2025 14:07:21 +0000

Bug 1998666 - Ensure that custom panel widths are reset after removing a split view. r=tabbrowser-reviewers,nsharpley

Differential Revision: https://phabricator.services.mozilla.com/D275635

Diffstat:
M
browser/components/tabbrowser/content/tabsplitview.js
 | 
48
++++++++++++++++++++++++++++++++++++++++++++++++
M
browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js
 | 
28
+++++++++++++++++++++++++++-

2 files changed, 75 insertions(+), 1 deletion(-)
diff --git a/browser/components/tabbrowser/content/tabsplitview.js b/browser/components/tabbrowser/content/tabsplitview.js
@@ -39,6 +39,8 @@
     /** @type {MozTabbrowserTab[]} */
     #tabs = [];
 
+    #storedPanelWidths = new WeakMap();
+
     /**
      * @returns {boolean}
      */
@@ -72,6 +74,7 @@
       this.ownerGlobal.addEventListener("TabSelect", this);
 
       this.#observeTabChanges();
+      this.#restorePanelWidths();
 
       if (this.hasActiveTab) {
         this.#activate();
@@ -93,6 +96,7 @@
       this.#tabChangeObserver?.disconnect();
       this.ownerGlobal.removeEventListener("TabSelect", this);
       this.#deactivate();
+      this.#resetPanelWidths();
       this.container.dispatchEvent(
         new CustomEvent("SplitViewRemoved", {
           bubbles: true,
@@ -142,6 +146,22 @@
     }
 
     /**
+     * Get the list of tab panels from this split view.
+     *
+     * @returns {XULElement[]}
+     */
+    get panels() {
+      const panels = [];
+      for (const { linkedPanel } of this.#tabs) {
+        const el = document.getElementById(linkedPanel);
+        if (el) {
+          panels.push(el);
+        }
+      }
+      return panels;
+    }
+
+    /**
      * Show all Split View tabs in the content area.
      */
     #activate() {
@@ -170,6 +190,34 @@
     }
 
     /**
+     * Remove customized panel widths. Cache width values so that they can be
+     * restored if this Split View is later reactivated.
+     */
+    #resetPanelWidths() {
+      for (const panel of this.panels) {
+        const width = panel.getAttribute("width");
+        if (width) {
+          this.#storedPanelWidths.set(panel, width);
+          panel.removeAttribute("width");
+          panel.style.removeProperty("width");
+        }
+      }
+    }
+
+    /**
+     * Resize panel widths back to cached values.
+     */
+    #restorePanelWidths() {
+      for (const panel of this.panels) {
+        const width = this.#storedPanelWidths.get(panel);
+        if (width) {
+          panel.setAttribute("width", width);
+          panel.style.setProperty("width", width + "px");
+        }
+      }
+    }
+
+    /**
      * add tabs to the split view wrapper
      *
      * @param {MozTabbrowserTab[]} tabs
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js
@@ -231,6 +231,7 @@ add_task(async function test_split_view_preserves_multiple_pairings() {
 add_task(async function test_resize_split_view_panels() {
   const tab1 = await addTabAndLoadBrowser();
   const tab2 = await addTabAndLoadBrowser();
+  const originalTab = gBrowser.selectedTab;
   await BrowserTestUtils.switchTab(gBrowser, tab1);
 
   info("Activate split view.");
@@ -264,5 +265,30 @@ add_task(async function test_resize_split_view_panels() {
     "Right panel is larger."
   );
 
-  splitView.close();
+  info("Ensure that custom width persists after switching tabs.");
+  await BrowserTestUtils.switchTab(gBrowser, originalTab);
+  await BrowserTestUtils.switchTab(gBrowser, tab1);
+  Assert.less(
+    leftPanel.getBoundingClientRect().width,
+    originalLeftWidth,
+    "Left panel is smaller."
+  );
+  Assert.greater(
+    rightPanel.getBoundingClientRect().width,
+    originalRightWidth,
+    "Right panel is larger."
+  );
+
+  info("Separate split view panels to remove the custom width.");
+  splitView.unsplitTabs();
+  for (const panel of [leftPanel, rightPanel]) {
+    await BrowserTestUtils.waitForMutationCondition(
+      panel,
+      { attributeFilter: ["width"] },
+      () => !panel.hasAttribute("width")
+    );
+  }
+
+  BrowserTestUtils.removeTab(tab1);
+  BrowserTestUtils.removeTab(tab2);
 });