Bug 1688072 - Tweak the dimensions of the tabs to get closer to the Proton design. r=fluent-reviewers,dao,flod
☠☠ backed out by d553759a32e2 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Wed, 10 Feb 2021 16:16:20 +0000
changeset 566845 bd374838529f461a22d46353c3301d446a580649
parent 566844 b87c6bdada6e776561fc0adb0adb8d4a8d71609f
child 566846 32f3082f44bbc7820f190bf9379b8f7b19c693ff
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)
reviewersfluent-reviewers, dao, flod
bugs1688072
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 1688072 - Tweak the dimensions of the tabs to get closer to the Proton design. r=fluent-reviewers,dao,flod Differential Revision: https://phabricator.services.mozilla.com/D102802
browser/base/content/tabbrowser-tab.js
browser/locales/en-US/browser/browser.ftl
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/tabbrowser-tab.js
+++ b/browser/base/content/tabbrowser-tab.js
@@ -30,24 +30,24 @@
             <label class="tab-text tab-label" role="presentation"/>
           </hbox>
           <image class="tab-icon-sound" role="presentation"/>
           <vbox class="tab-label-container proton"
                 onoverflow="this.setAttribute('textoverflow', 'true');"
                 onunderflow="this.removeAttribute('textoverflow');"
                 align="start"
                 flex="1">
-            <label class="tab-text tab-label" role="presentation"/>
             <hbox class="tab-icon-sound">
               <image class="tab-icon-sound-image" role="presentation"/>
-              <label class="tab-icon-sound-label tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing" role="presentation"/>
-              <label class="tab-icon-sound-label tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted" role="presentation"/>
+              <label class="tab-icon-sound-label tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing2" role="presentation"/>
+              <label class="tab-icon-sound-label tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted2" role="presentation"/>
               <label class="tab-icon-sound-label tab-icon-sound-blocked-label" data-l10n-id="browser-tab-audio-blocked" role="presentation"/>
               <label class="tab-icon-sound-label tab-icon-sound-pip-label" data-l10n-id="browser-tab-audio-pip" role="presentation"/>
             </hbox>
+            <label class="tab-text tab-label" role="presentation"/>
           </vbox>
           <image class="tab-close-button close-icon" role="presentation"/>
         </hbox>
       </stack>
       `;
     }
 
     constructor() {
--- a/browser/locales/en-US/browser/browser.ftl
+++ b/browser/locales/en-US/browser/browser.ftl
@@ -349,18 +349,20 @@ browser-window-maximize-button =
     .tooltiptext = Maximize
 browser-window-restore-down-button =
     .tooltiptext = Restore Down
 browser-window-close-button =
     .tooltiptext = Close
 
 ## Tab actions
 
-browser-tab-audio-playing = Playing
-browser-tab-audio-muted = Muted
+# This label should be written in all capital letters if your locale supports them.
+browser-tab-audio-playing2 = PLAYING
+# This label should be written in all capital letters if your locale supports them.
+browser-tab-audio-muted2 = MUTED
 # This label should be written in all capital letters if your locale supports them.
 browser-tab-audio-blocked = AUTOPLAY BLOCKED
 # This label should be written in all capital letters if your locale supports them.
 browser-tab-audio-pip = PICTURE-IN-PICTURE
 
 ## Bookmarks toolbar items
 
 browser-import-button2 =
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,26 +1,26 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
-%filter substitution
-%define horizontalTabPadding 9px
 
 :root {
   --tab-min-height: 33px;
+  --inline-tab-padding: 9px;
 }
 
 @supports -moz-bool-pref("browser.proton.tabs.enabled") {
 :root {
-  --tab-min-height: calc(1.2em + 1.7em); /* line-heights of both lines of text when visible */
+  --tab-min-height: 36px;
   --proton-tab-radius: 4px;
   --proton-shadow-blur-radius: 6px;
-  --proton-tab-block-margin: 2px;
+  --proton-tab-block-margin: 4px;
+  --inline-tab-padding: 12.5px;
 }
 } /*** END proton ***/
 
 :root[uidensity=compact] {
   --tab-min-height: 29px;
 }
 
 :root[uidensity=touch] {
@@ -55,22 +55,23 @@
 }
 
 #tabbrowser-tabs,
 #tabbrowser-arrowscrollbox,
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
   min-height: var(--tab-min-height);
 }
 
+.tab-background,
 .tab-stack {
   min-height: inherit;
 }
 
 @supports -moz-bool-pref("browser.proton.tabs.enabled") {
-#tabbrowser-arrowscrollbox::part(scrollbox) {
+#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
   /* Add padding to match the shadow's blur radius so the
     shadow doesn't get clipped when either the first or
     last tab is selected */
   padding-inline: var(--proton-shadow-blur-radius);
 }
 } /*** END proton ***/
 
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
@@ -96,16 +97,25 @@
   padding: 0 !important /* override tabbox.css */;
   -moz-box-align: stretch;
 }
 
 @supports -moz-bool-pref("browser.proton.tabs.enabled") {
 .tabbrowser-tab {
   border-radius: var(--proton-tab-radius);
   min-height: var(--tab-min-height);
+  margin-inline: 2px !important;
+}
+
+.tabbrowser-tab[first-visible-tab] {
+  margin-inline-start: 0 !important;
+}
+
+.tabbrowser-tab[last-visible-tab] {
+  margin-inline-end: 0 !important;
 }
 
 /* tabbrowser-tab keyboard focus */
 .keyboard-focused-tab > .tab-stack > .tab-background,
 .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
   outline: var(--focus-outline);
   -moz-outline-radius: var(--proton-tab-radius);
   outline-offset: -2px;
@@ -115,17 +125,17 @@
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
 .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
 
 .tab-content {
-  padding: 0 @horizontalTabPadding@;
+  padding: 0 var(--inline-tab-padding);
 }
 
 :root:not([uidensity=compact]) .tab-content[pinned] {
   padding: 0 12px;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   :root[sessionrestored] .tab-loading-burst {
@@ -185,45 +195,53 @@
     }
     100% {
       opacity: 0;
       transform: scale(40);
     }
   }
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-throbber,
 .tab-icon-pending,
 .tab-icon-image,
+.tab-icon-sound,
 .tab-sharing-icon-overlay,
 .tab-close-button {
   margin-top: 1px;
 }
-
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
-.tab-icon-sound {
-  margin-top: 1px;
-}
 } /*** END !proton ***/
 
 .tab-throbber,
 .tab-throbber-tabslist,
 .tab-icon-pending,
 .tab-icon-image,
 .tab-sharing-icon-overlay {
   height: 16px;
   width: 16px;
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-throbber:not([pinned]),
 .tab-sharing-icon-overlay:not([pinned]),
 .tab-icon-pending:not([pinned]),
 .tab-icon-image:not([pinned]) {
   margin-inline-end: 6px;
 }
+} /*** END !proton ***/
+
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+.tab-throbber:not([pinned]),
+.tab-sharing-icon-overlay:not([pinned]),
+.tab-icon-pending:not([pinned]),
+.tab-icon-image:not([pinned]) {
+  margin-inline-end: 5.5px;
+}
+} /*** END proton ***/
 
 @media (prefers-reduced-motion: reduce) {
   .tab-throbber[busy] {
     background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
     background-position: center;
     background-repeat: no-repeat;
     -moz-context-properties: fill;
     fill: currentColor;
@@ -424,29 +442,44 @@
     :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png");
     }
   }
 }
 
 .tab-label {
   margin-inline: 0;
+}
+
+.tab-close-button {
+  -moz-context-properties: fill, fill-opacity, stroke-opacity;
+  stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
+.tab-label {
   /* Maintain consistent alignment in case of font fallback for non-Latin characters. */
   line-height: 1.7em;
 }
 
 .tab-close-button {
   margin-inline-end: -2px;
-  -moz-context-properties: fill, fill-opacity, stroke-opacity;
-  stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
+} /*** END !proton ***/
+
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+.tab-close-button {
+  margin-inline-end: 0;
+  width: 16px;
+}
+} /*** END proton ***/
 
 :root[uidensity=touch] .tab-close-button {
-  margin-inline-end: -@horizontalTabPadding@;
-  padding: 10px calc(@horizontalTabPadding@ - 2px);
+  margin-inline-end: calc(-1 * var(--inline-tab-padding));
+  padding: 10px calc(var(--inline-tab-padding) - 2px);
 }
 
 @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-label-container.proton {
   display: none;
 }
 
 .tab-icon-sound {
@@ -461,29 +494,37 @@
 
 @supports -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-label-container:not(.proton),
 .tab-label-container:not(.proton) + .tab-icon-sound {
   display: none;
 }
 
 .tab-icon-sound {
-  font-size: .9em;
-  line-height: 1.2em;
   -moz-box-align: center;
+  font-size: .75em;
+}
+
+.tab-icon-sound-image,
+.tab-icon-sound-label {
+  /* Set height back to equivalent of parent's 1em based
+     on the .tab-icon-sound having a reduced font-size */
+  height: 1.3333em;
 }
 
 .tab-icon-sound-image {
-  margin-block: 1px;
-  width: 16px;
-  height: 16px;
   padding: 0;
   -moz-context-properties: fill;
   fill: currentColor;
 }
+
+.tab-icon-sound-label {
+  margin: 0;
+  padding-inline-start: 3px;
+}
 } /*** END proton ***/
 
 @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted],
 .tab-icon-sound[activemedia-blocked] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
 }
@@ -636,16 +677,20 @@
 
 :root[sizemode=maximized] .tabbrowser-tab {
   margin-top: 0 !important;
 }
 
 .tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background {
   box-shadow: 0 2px var(--proton-shadow-blur-radius) rgba(58,57,68,.2);
 }
+
+.tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background:-moz-lwtheme-brighttext {
+  box-shadow: 0 2px var(--proton-shadow-blur-radius) rgba(58,57,68,.1);
+}
 } /*** END proton ***/
 
 %ifdef MENUBAR_CAN_AUTOHIDE
 #toolbar-menubar:not([autohide=true]) + #TabsToolbar,
 %endif
 :root:not([tabsintitlebar]),
 :root[extradragspace] {
   --tabs-top-border-width: 1px;
@@ -728,27 +773,29 @@
 }
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) {
   opacity: 0.5;
 }
 
 /* Pinned tabs */
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned]::after {
   display: block;
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
 }
 
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] > .tab-stack {
   border-inline-end: 1px solid transparent;
 }
+} /*** END !proton ***/
 
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
   background-image: url(chrome://browser/skin/tabbrowser/indicator-tab-attention.svg);
   background-position: center bottom calc(-4px + var(--tabs-navbar-shadow-size));
   background-repeat: no-repeat;
 }