Backed out changeset 85d499c8e0bf (bug 1927258) for causing multiple failures tabbrowser related. CLOSED TREE

browser/base/content/navigator-toolbox.inc.xhtml

@@ -55,7 +55,7 @@
 # significantly, there is an optimization in
 # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
 # the current structure that we may want to revisit.
-          <arrowscrollbox id="vertical-pinned-tabs-container" orient="vertical" tabindex="-1"></arrowscrollbox>
+          <html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
           <html:div id="vertical-pinned-tabs-container-separator"></html:div>
           <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
             <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>

browser/components/tabbrowser/content/tabs.js

@@ -77,9 +77,7 @@
     init() {
       this.startupTime = Services.startup.getStartupInfo().start.getTime();
 
-      this.arrowScrollbox = document.getElementById(
-        "tabbrowser-arrowscrollbox"
-      );
+      this.arrowScrollbox = this.querySelector("arrowscrollbox");
       this.arrowScrollbox.addEventListener("wheel", this, true);
       this.arrowScrollbox.addEventListener("underflow", this);
       this.arrowScrollbox.addEventListener("overflow", this);

browser/themes/shared/tabbrowser/tabs.css

@@ -1260,44 +1260,15 @@
 }
 
 #vertical-pinned-tabs-container {
+  --tab-inline-padding: calc((calc(var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2));
+  display: none;
+  grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--vertical-tabs-scrollbar-color);
   /* Fit slightly more than 5 tabs + padding before overflowing */
   max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
-  --tab-inline-padding: calc((calc(var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2));
-
-  &::part(scrollbutton-up), &::part(scrollbutton-down) {
-    display: none;
-  }
-
-  &::part(scrollbox) {
-    scrollbar-width: thin;
-    scrollbar-color: var(--vertical-tabs-scrollbar-color);
-    overflow-y: auto;
-  }
-
-  &::part(items-wrapper) {
-    grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
-    display: grid;
-    padding-inline: var(--tab-pinned-container-margin-inline-expanded);
-  }
-
-  &:not([scrolledtostart])::part(overflow-start-indicator),
-  &:not([scrolledtoend])::part(overflow-end-indicator){
-    background-image: linear-gradient(to top, transparent 0%, var(--toolbox-bgcolor));
-    background-repeat: no-repeat;
-    pointer-events: none;
-    position: relative;
-    height: 16px;
-    z-index: 1;
-  }
-
-  &::part(overflow-start-indicator) {
-    margin-block: 0 -16px;
-  }
-
-  &::part(overflow-end-indicator) {
-    transform: scaleY(-1);
-    margin-block: -16px 0;
-  }
 
   .tab-content {
     justify-content: center;
@@ -1320,6 +1291,8 @@
   }
 
   #tabbrowser-tabs[expanded] > & {
+    padding-inline: var(--tab-pinned-container-margin-inline-expanded);
+
     .tab-background {
       margin-inline: var(--tab-pinned-margin-inline-expanded);
     }

toolkit/content/widgets/arrowscrollbox.js

@@ -27,7 +27,7 @@
       <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-backwards"/>
       <spacer part="overflow-start-indicator"/>
       <scrollbox part="scrollbox" flex="1">
-        <html:slot part="items-wrapper"/>
+        <html:slot/>
       </scrollbox>
       <spacer part="overflow-end-indicator"/>
       <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false" data-l10n-id="overflow-scroll-button-forwards"/>