Bug 1688294 - Account for the padding on the scrollbox when positioning pinned tabs. r=Gijs
☠☠ backed out by d553759a32e2 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Wed, 10 Feb 2021 16:16:20 +0000
changeset 566846 32f3082f44bbc7820f190bf9379b8f7b19c693ff
parent 566845 bd374838529f461a22d46353c3301d446a580649
child 566847 2badb161c9cae0d54ce26fd558567ffcb2fb638f
push id38191
push userbtara@mozilla.com
push dateThu, 11 Feb 2021 05:02:45 +0000
treeherdermozilla-central@5cbcb80f72bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1688294
milestone87.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1688294 - Account for the padding on the scrollbox when positioning pinned tabs. r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D103953
browser/base/content/tabbrowser-tabs.js
--- a/browser/base/content/tabbrowser-tabs.js
+++ b/browser/base/content/tabbrowser-tabs.js
@@ -1309,45 +1309,61 @@
 
     uiDensityChanged() {
       this._positionPinnedTabs();
       this._updateCloseButtons();
       this._handleTabSelect(true);
     }
 
     _positionPinnedTabs() {
-      let numPinned = gBrowser._numPinnedTabs;
+      let tabs = this._getVisibleTabs();
+      let numPinned = tabs.filter(t => t.pinned).length;
       let doPosition =
         this.getAttribute("overflow") == "true" &&
-        this._getVisibleTabs().length > numPinned &&
+        tabs.length > numPinned &&
         numPinned > 0;
-      let tabs = this.allTabs;
 
       if (doPosition) {
         this.setAttribute("positionpinnedtabs", "true");
 
         let layoutData = this._pinnedTabsLayoutCache;
         let uiDensity = document.documentElement.getAttribute("uidensity");
         if (!layoutData || layoutData.uiDensity != uiDensity) {
           let arrowScrollbox = this.arrowScrollbox;
+          let firstTab = tabs[0];
+          let firstTabCS = getComputedStyle(firstTab);
+          let scrollbox = this.arrowScrollbox.shadowRoot.querySelector(
+            `[part="scrollbox"]`
+          );
+          let scrollboxCS = getComputedStyle(scrollbox);
           layoutData = this._pinnedTabsLayoutCache = {
             uiDensity,
-            pinnedTabWidth: this.allTabs[0].getBoundingClientRect().width,
+            scrollboxPadding: parseFloat(scrollboxCS.paddingInlineStart),
+            pinnedTabWidth:
+              firstTab.getBoundingClientRect().width +
+              /* Re-use the first tabs margin-inline-end because we remove
+                 the margin-inline-start from the first tab. All tabs
+                 (excluding first and last) should have equal start and end margins. */
+              2 * parseFloat(firstTabCS.marginInlineEnd),
             scrollButtonWidth: arrowScrollbox._scrollButtonDown.getBoundingClientRect()
               .width,
           };
         }
 
         let width = 0;
         for (let i = numPinned - 1; i >= 0; i--) {
           let tab = tabs[i];
           width += layoutData.pinnedTabWidth;
           tab.style.setProperty(
             "margin-inline-start",
-            -(width + layoutData.scrollButtonWidth) + "px",
+            -(
+              width +
+              layoutData.scrollButtonWidth +
+              layoutData.scrollboxPadding
+            ) + "px",
             "important"
           );
           tab._pinnedUnscrollable = true;
         }
         this.style.paddingInlineStart = width + "px";
       } else {
         this.removeAttribute("positionpinnedtabs");