Bug 1770808 - Preserve space around the Fx View button / tabstrip separator when there are pinned tabs and tabs overflow. r=Gijs
authorDão Gottwald <dao@mozilla.com>
Tue, 24 May 2022 17:05:28 +0000
changeset 618780 4f01d8feefa0983c83535469a5b7bf8b6dbe8997
parent 618779 7566630b701de4706ebadc990ca4a14102064ea7
child 618781 018450d728de69038a07e2ec1b01ad2fcde130d0
push id163414
push userdgottwald@mozilla.com
push dateTue, 24 May 2022 17:07:51 +0000
treeherderautoland@4f01d8feefa0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1770808
milestone102.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 1770808 - Preserve space around the Fx View button / tabstrip separator when there are pinned tabs and tabs overflow. r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D147101
browser/base/content/tabbrowser-tabs.js
browser/themes/osx/browser.css
browser/themes/shared/tabs.css
--- a/browser/base/content/tabbrowser-tabs.js
+++ b/browser/base/content/tabbrowser-tabs.js
@@ -1469,27 +1469,30 @@
           width += layoutData.pinnedTabWidth;
           tab.style.setProperty(
             "margin-inline-start",
             -(width + layoutData.scrollStartOffset) + "px",
             "important"
           );
           tab._pinnedUnscrollable = true;
         }
-        this.style.paddingInlineStart = width + "px";
+        this.style.setProperty(
+          "--tab-overflow-pinned-tabs-width",
+          width + "px"
+        );
       } else {
         this.removeAttribute("positionpinnedtabs");
 
         for (let i = 0; i < numPinned; i++) {
           let tab = tabs[i];
           tab.style.marginInlineStart = "";
           tab._pinnedUnscrollable = false;
         }
 
-        this.style.paddingInlineStart = "";
+        this.style.removeProperty("--tab-overflow-pinned-tabs-width");
       }
 
       if (this._lastNumPinned != numPinned) {
         this._lastNumPinned = numPinned;
         this._handleTabSelect(true);
       }
     }
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -404,17 +404,16 @@ moz-input-box > menupopup .context-menu-
 .tabbrowser-tab[multiselected],
 .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
 #tabbrowser-tabs {
   -moz-box-align: stretch;
-  padding-inline: 0;
   margin-bottom: 0;
   position: static;
 }
 
 /* Bookmark drag and drop styles */
 
 .bookmark-item[dragover-into="true"] {
   background: SelectedItem !important;
--- a/browser/themes/shared/tabs.css
+++ b/browser/themes/shared/tabs.css
@@ -43,16 +43,18 @@
 
 :root[uidensity=touch] {
   --tab-min-height: 41px;
 }
 
 #tabbrowser-tabs {
   --tab-min-width: 76px;
   --tab-loading-fill: #0A84FF;
+  --tab-overflow-pinned-tabs-width: 0px;
+  padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
 }
 
 #tabbrowser-tabpanels {
   background-color: var(--tabpanel-background-color);
 }
 
 #tabbrowser-tabs,
 #tabbrowser-arrowscrollbox,
@@ -677,17 +679,17 @@
     display: none;
   }
 }
 
 /* Firefox View button */
 
 :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs {
   border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
-  padding-inline-start: 4px;
+  padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 4px);
   margin-inline-start: 4px;
 }
 
 :root[privatebrowsingmode=temporary] #firefox-view-button {
   display: none;
 }
 
 /* Tab bar scroll arrows */