tor-browser

commit d76e7275215f632e4ebe9b8aa8794c77156a97be
parent fb1144d81414f1b911368b142bd632bdd8abf891
Author: Sarah Clements <sclements@mozilla.com>
Date:   Mon, 27 Oct 2025 18:29:05 +0000

Bug 1991763 - Remove container from MozTabSplitViewWrapper r=kcochrane,desktop-theme-reviewers,tabbrowser-reviewers

* Update splitview styles and replace references to splitview parent node
* Container in split view wrapper will point to gBrowser.tabContainer

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

Diffstat:
M
browser/components/tabbrowser/content/tab.js
 | 
6
++----
M
browser/components/tabbrowser/content/tabbrowser.js
 | 
4
+---
M
browser/components/tabbrowser/content/tabsplitview.js
 | 
20
+++-----------------
M
browser/themes/shared/tabbrowser/tabs.css
 | 
32
+++++++++++++-------------------

4 files changed, 19 insertions(+), 43 deletions(-)
diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
@@ -386,10 +386,8 @@
     }
 
     get splitview() {
-      if (
-        this.parentElement?.parentElement?.tagName == "tab-split-view-wrapper"
-      ) {
-        return this.parentElement.parentElement;
+      if (this.parentElement?.tagName == "tab-split-view-wrapper") {
+        return this.parentElement;
       }
       return null;
     }
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
@@ -6570,9 +6570,7 @@
         return;
       }
 
-      this.#handleTabMove(aTab, () =>
-        aSplitViewWrapper.container.appendChild(aTab)
-      );
+      this.#handleTabMove(aTab, () => aSplitViewWrapper.appendChild(aTab));
       this.removeFromMultiSelectedTabs(aTab);
       this.tabContainer._notifyBackgroundTab(aTab);
     }
diff --git a/browser/components/tabbrowser/content/tabsplitview.js b/browser/components/tabbrowser/content/tabsplitview.js
@@ -8,14 +8,6 @@
 // a block to prevent accidentally leaking globals onto `window`.
 {
   class MozTabSplitViewWrapper extends MozXULElement {
-    static markup = `
-      <vbox class="tab-split-view-container" pack="center">
-      </vbox>
-      `;
-
-    /** @type {MozXULElement} */
-    #containerElement;
-
     /** @type {MutationObserver} */
     #tabChangeObserver;
 
@@ -52,15 +44,11 @@
       this._initialized = true;
 
       this.textContent = "";
-      this.appendChild(this.constructor.fragment);
-
-      this.#containerElement = this.querySelector(".tab-split-view-container");
 
       this.#observeTabChanges();
 
       // Mirroring MozTabbrowserTab
-      this.#containerElement.container = gBrowser.tabContainer;
-      this.container = this.#containerElement;
+      this.container = gBrowser.tabContainer;
     }
 
     disconnectedCallback() {
@@ -89,7 +77,7 @@
           }
         });
       }
-      this.#tabChangeObserver.observe(this.#containerElement, {
+      this.#tabChangeObserver.observe(this, {
         childList: true,
       });
     }
@@ -106,9 +94,7 @@
      * @returns {MozTabbrowserTab[]}
      */
     get tabs() {
-      return Array.from(this.#containerElement.children).filter(node =>
-        node.matches("tab")
-      );
+      return Array.from(this.children).filter(node => node.matches("tab"));
     }
 
     /**
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
@@ -1158,7 +1158,6 @@
 
 tab-group > tab-split-view-wrapper {
   #tabbrowser-tabs[orient="vertical"] & {
-    margin-inline-start: var(--space-xxsmall);
     margin-block: calc(var(--space-xsmall) * -1);
 
     .tabbrowser-tab:last-child {
@@ -1180,22 +1179,21 @@ tab-group > tab-split-view-wrapper {
     }
   }
 
-  #tabbrowser-tabs[orient="horizontal"] & > .tab-split-view-container {
+  #tabbrowser-tabs[orient="horizontal"] & {
     margin-inline: 0;
     padding-block-end: 0;
     padding-inline: 0;
   }
 }
 
-#tabbrowser-tabs .tab-split-view-container {
+#tabbrowser-tabs tab-split-view-wrapper {
   display: grid;
   grid-template-columns: 50% 50%;
   margin-inline: var(--space-small);
-  width: 100%;
   padding: var(--space-xsmall);
   border-radius: var(--tab-border-radius);
 
-  tab-split-view-wrapper[hasactivetab] > & {
+  &[hasactivetab] {
     background-color: var(--tab-hover-background-color);
 
     @media (forced-colors) {
@@ -1204,7 +1202,7 @@ tab-group > tab-split-view-wrapper {
     }
   }
 
-  > .tabbrowser-tab {
+  .tabbrowser-tab {
     padding-block: 0 !important;
 
     .tab-background {
@@ -1237,7 +1235,7 @@ tab-group > tab-split-view-wrapper {
     }
   }
 
-  tab-split-view-wrapper:not([hasactivetab]) & {
+  &:not([hasactivetab]) {
     outline: var(--tab-outline);
     outline-offset: var(--tab-outline-offset);
 
@@ -1257,9 +1255,7 @@ tab-group > tab-split-view-wrapper {
       }
 
       &:last-child {
-        tab-split-view-wrapper:not([hasactivetab]) & {
-          border-inline-start: 1px solid var(--toolbarbutton-icon-fill);
-        }
+        border-inline-start: 1px solid var(--toolbarbutton-icon-fill);
       }
     }
   }
@@ -1271,16 +1267,14 @@ tab-group > tab-split-view-wrapper {
     @container vertical-tabs-container (max-width: 210px) {
       grid-template-columns: 1fr;
 
-      tab-split-view-wrapper:not([hasactivetab]) > & {
-        .tabbrowser-tab {
-          &:first-child {
-            border-block-end: 1px solid var(--toolbarbutton-icon-fill);
-            border-inline-end: transparent;
-          }
+      &:not([hasactivetab]) .tabbrowser-tab {
+        &:first-child {
+          border-block-end: 1px solid var(--toolbarbutton-icon-fill);
+          border-inline-end: transparent;
+        }
 
-          &:last-child {
-            border-inline-start: transparent !important;
-          }
+        &:last-child {
+          border-inline-start: transparent !important;
         }
       }
     }