Bug 1387413 - Make pinned tabs 40px wide. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Fri, 04 Aug 2017 14:48:15 +0200
changeset 621167 96ddf62d9f7870c24678ddbb5d202362553777c4
parent 620862 32083f24a1bb2c33050b4c972783f066432194eb
child 640928 35370589ae606650c7b8102e426210eb80e39396
push id72289
push userdgottwald@mozilla.com
push dateFri, 04 Aug 2017 12:48:39 +0000
reviewersjohannh
bugs1387413
milestone57.0a1
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
@@ -7340,17 +7340,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");
 }