Bug 1387413 - Make pinned tabs 40px wide. r=johannh
authorDão Gottwald <dao@mozilla.com>
Fri, 04 Aug 2017 14:48:15 +0200
changeset 372919 faff9011f22c
parent 372918 26a81ecdc084
child 372920 5429ac53da20
push id32284
push userarchaeopteryx@coole-files.de
push date2017-08-04 17:19 +0000
treeherdermozilla-central@357ef8a67e88 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1387413
milestone57.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 1387413 - Make pinned tabs 40px wide. r=johannh MozReview-Commit-ID: ELrYItAvmf
browser/base/content/tabbrowser.xml
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -7347,17 +7347,17 @@
                      class="tab-throbber"
                      role="presentation"
                      layer="true" />
           <xul:image xbl:inherits="src=image,loadingprincipal=iconLoadingPrincipal,fadein,pinned,selected=visuallyselected,busy,crashed,sharing"
                      anonid="tab-icon-image"
                      class="tab-icon-image"
                      validate="never"
                      role="presentation"/>
-          <xul:image xbl:inherits="sharing,selected=visuallyselected"
+          <xul:image xbl:inherits="sharing,selected=visuallyselected,pinned"
                      anonid="sharing-icon"
                      class="tab-sharing-icon-overlay"
                      role="presentation"/>
           <xul:image xbl:inherits="crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked"
                      anonid="overlay-icon"
                      class="tab-icon-overlay"
                      role="presentation"/>
           <xul:hbox class="tab-label-container"
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -44,37 +44,41 @@
 /* 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-inline-end: 9px;
-  padding-inline-start: 9px;
+  padding: 0 9px;
 }
 
 .tab-content[pinned] {
-  padding-inline-end: 3px;
+  padding: 0 12px;
 }
 
 .tab-throbber,
 .tab-icon-image,
 .tab-sharing-icon-overlay,
 .tab-icon-sound,
 .tab-close-button {
   margin-top: 1px;
 }
 
 .tab-throbber,
 .tab-sharing-icon-overlay,
 .tab-icon-image {
   height: 16px;
   width: 16px;
+}
+
+.tab-throbber:not([pinned]),
+.tab-sharing-icon-overlay:not([pinned]),
+.tab-icon-image:not([pinned]) {
   margin-inline-end: 6px;
 }
 
 .tab-icon-image {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 .tab-icon-image[src^="chrome://"] {
@@ -104,16 +108,20 @@
 .tab-sharing-icon-overlay {
   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
   margin-inline-start: -22px;
   position: relative;
   -moz-context-properties: fill;
   fill: rgb(224, 41, 29);
 }
 
+.tab-sharing-icon-overlay[pinned] {
+  margin-inline-start: -16px;
+}
+
 .tab-sharing-icon-overlay[sharing="camera"] {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
 }
 
 .tab-sharing-icon-overlay[sharing="microphone"] {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
 }