tor-browser

commit 8643584f9975af01652504e322ca9b8c6f21728d
parent 5a2ddefa4bde79ba4770d12a809bffd39fefc524
Author: Jonathan Sudiaman <jsudiaman@mozilla.com>
Date:   Thu,  9 Oct 2025 16:09:26 +0000

Bug 1986942 - Split view content panel styling r=desktop-theme-reviewers,tabbrowser-reviewers,nsharpley,dao

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

Diffstat:
M
browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js
 | 
15
+++++++++++++++
M
browser/themes/shared/tabbrowser/content-area.css
 | 
12
++++++++++++
M
toolkit/content/widgets/tabbox.js
 | 
14
++++++++++++++

3 files changed, 41 insertions(+), 0 deletions(-)
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js
@@ -129,6 +129,21 @@ add_task(async function test_split_view_panels() {
     await checkSplitViewPanelVisible(tab, true);
   }
 
+  info("Select tabs using tab panels.");
+  await SimpleTest.promiseFocus(tab1.linkedBrowser);
+  let panel = document.getElementById(tab1.linkedPanel);
+  Assert.ok(
+    panel.classList.contains("deck-selected"),
+    "First panel is selected."
+  );
+
+  await SimpleTest.promiseFocus(tab2.linkedBrowser);
+  panel = document.getElementById(tab2.linkedPanel);
+  Assert.ok(
+    panel.classList.contains("deck-selected"),
+    "Second panel is selected."
+  );
+
   info("Switch to a non-split view tab.");
   await BrowserTestUtils.switchTab(gBrowser, originalTab);
   for (const tab of splitView.tabs) {
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
@@ -159,10 +159,21 @@
       flex: 1;
       min-width: var(--panel-min-width);
       max-width: calc(100% - var(--panel-min-width));
+      margin: var(--space-xsmall);
+    }
+
+    .browserStack {
+      border-radius: var(--border-radius-medium);
+      overflow: clip;
+
+      .deck-selected > .browserContainer > & {
+        outline: var(--focus-outline);
+      }
     }
 
     .split-view-panel[column="0"] {
       order: 0;
+      margin-inline-end: 0;
     }
 
     .split-view-splitter {
@@ -172,6 +183,7 @@
 
     .split-view-panel[column="1"] {
       order: 2;
+      margin-inline-start: 0;
     }
 
     /* Panels with a custom width shouldn't grow. */
diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
@@ -275,6 +275,18 @@
       this._tabbox = null;
     }
 
+    handleEvent(e) {
+      switch (e.type) {
+        case "focus": {
+          const browser = e.currentTarget;
+          const tab = browser.getTabBrowser().getTabForBrowser(browser);
+          const tabstrip = this.tabbox.tabs;
+          tabstrip.selectedItem = tab;
+          break;
+        }
+      }
+    }
+
     get tabbox() {
       // Memoize the result rather than replacing this getter, so that
       // it can be reset if the parent changes.
@@ -349,6 +361,7 @@
         const panelEl = document.getElementById(panel);
         panelEl?.classList.add("split-view-panel");
         panelEl?.setAttribute("column", i);
+        panelEl?.querySelector("browser")?.addEventListener("focus", this);
       }
       this.#splitViewPanels = newPanels;
       this.#isSplitViewActive = !!newPanels.length;
@@ -369,6 +382,7 @@
       const panelEl = document.getElementById(panel);
       panelEl?.classList.remove("split-view-panel");
       panelEl?.removeAttribute("column");
+      panelEl?.querySelector("browser")?.removeEventListener("focus", this);
       if (updateArray) {
         const index = this.#splitViewPanels.indexOf(panel);
         if (index !== -1) {