Bug 1446168 - Remove the "tab-base" binding and import the "tabbox.css" file as a document stylesheet. r=bgrins draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 09 Jul 2018 14:28:37 +0100
changeset 815602 5d12b23ebdcd6177790643b4d92c1097032657bc
parent 815535 721ad06a848fa442f7f406c8bceb8d31db2aed0d
push id115567
push userpaolo.mozmail@amadzone.org
push dateMon, 09 Jul 2018 13:33:06 +0000
reviewersbgrins
bugs1446168
milestone63.0a1
Bug 1446168 - Remove the "tab-base" binding and import the "tabbox.css" file as a document stylesheet. r=bgrins MozReview-Commit-ID: 68sgwXYfDWV
browser/base/content/browser.css
browser/themes/osx/browser.css
browser/themes/osx/compacttheme.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
toolkit/content/widgets.css
toolkit/content/widgets/tabbox.xml
toolkit/themes/linux/global/tabbox.css
toolkit/themes/windows/global/tabbox.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -152,51 +152,51 @@ panelview[mainview] > .panel-header {
 #TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
   visibility: collapse;
 }
 
 #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
   visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
 }
 
-.tabbrowser-tab:not([pinned]) {
+#tabbrowser-tabs > .tabbrowser-tab:not([pinned]) {
   -moz-box-flex: 100;
   max-width: 225px;
   min-width: var(--tab-min-width);
   width: 0;
   transition: min-width 100ms ease-out,
               max-width 100ms ease-out;
 }
 
-:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
+:root[uidensity=touch] #tabbrowser-tabs > .tabbrowser-tab:not([pinned]) {
   /* Touch mode needs additional space for the close button. */
   min-width: calc(var(--tab-min-width) + 10px);
 }
 
-.tabbrowser-tab:not([pinned]):not([fadein]) {
+#tabbrowser-tabs > .tabbrowser-tab:not([pinned]):not([fadein]) {
   max-width: 0.1px;
   min-width: 0.1px;
   visibility: hidden;
 }
 
 .tab-icon-image[fadein],
 .tab-close-button[fadein],
-.tabbrowser-tab[fadein]::after,
+#tabbrowser-tabs > .tabbrowser-tab[fadein]::after,
 .tab-background[fadein] {
   /* This transition is only wanted for opening tabs. */
   transition: visibility 0ms 25ms;
 }
 
 .tab-icon-image:not([fadein]),
 .tab-close-button:not([fadein]),
-.tabbrowser-tab:not([fadein])::after,
+#tabbrowser-tabs > .tabbrowser-tab:not([fadein])::after,
 .tab-background:not([fadein]) {
   visibility: hidden;
 }
 
 .tab-label:not([fadein]),
 .tab-throbber:not([fadein]),
 .tab-throbber-fallback:not([fadein]) {
   display: none;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -635,27 +635,27 @@ html|input.urlbar-input {
 .tab-icon-overlay {
   opacity: 0.9999;
 }
 
 .tab-label-container:not([selected="true"]) {
   opacity: .7;
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   font: message-box;
   border: none;
 }
 
-.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   /* overriding tabbox.css */
   color: hsl(240, 5%, 5%);
 }
 
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
@@ -678,17 +678,17 @@ html|input.urlbar-input {
 :root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: -moz-mac-vibrant-titlebar-dark;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
 }
 
-.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
 
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }
 
 /**
--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -9,11 +9,11 @@
   background: var(--chrome-background-color);
 }
 
 #TabsToolbar:-moz-lwtheme-darktext {
   -moz-appearance: -moz-mac-vibrant-titlebar-light;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
 }
 
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -60,29 +60,29 @@
   .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
     /* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
        page-title widths (when we'd rather have it be as wide as the window and
        compress the tabs to their minimum size): */
     max-width: 100%;
   }
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 0;
   -moz-box-align: stretch;
 }
 
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
 
 .tab-content {
   padding: 0 @horizontalTabPadding@;
 }
 
@@ -487,22 +487,22 @@
   opacity: 0;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
   transition: opacity 150ms ease;
 }
 
-.tabbrowser-tab:not([visuallyselected=true]),
-.tabbrowser-tab:-moz-lwtheme {
+#tabbrowser-tabs > .tabbrowser-tab:not([visuallyselected=true]),
+#tabbrowser-tabs > .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
-.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
   color: var(--lwt-tab-text, var(--toolbar-color, inherit));
 }
 
 .tab-line {
   height: 2px;
 }
 
 /* Selected tab */
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -157,31 +157,31 @@
     /* Always show full-height tab separators on tabs with borders. */
     .tabbrowser-tab:not(:-moz-lwtheme)::before,
     .tabbrowser-tab:not(:-moz-lwtheme)::after {
       border-image: none !important;
     }
 
     /* Show border on tabs with background colors and
      * show the tabs toolbar background color inside tabs. */
-    .tabbrowser-tab:not(:-moz-lwtheme) {
+    #tabbrowser-tabs > .tabbrowser-tab:not(:-moz-lwtheme) {
       background-color: hsl(235,33%,19%) !important;
       border-top: 1px solid var(--tabs-border-color);
       background-clip: padding-box;
     }
 
     /* The top border on top of the tab background is replaced
      * by the slightly transparent outside tabs-border-color. */
     .tab-background:not(:-moz-lwtheme) {
       border-top-style: none !important;
     }
 
     /* The border at the end of the tab strip is replaced
      * by the slightly transparent outside tabs-border-color. */
-    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
+    #tabbrowser-tabs > .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
       border-inline-end: 1px solid var(--tabs-border-color);
     }
 
     .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
       display: none !important;
     }
   }
 }
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -29,17 +29,17 @@
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #TabsToolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
-    .tabbrowser-tab {
+    #tabbrowser-tabs > .tabbrowser-tab {
       color: var(--chrome-color) !important;
     }
 
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover and multiselect state for the light theme. */
     .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext,
     .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
@@ -87,31 +87,31 @@
   /* Always show full-height tab separators on tabs with borders. */
   .tabbrowser-tab::before,
   .tabbrowser-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
-  .tabbrowser-tab {
+  #tabbrowser-tabs > .tabbrowser-tab {
     background-color: var(--chrome-background-color) !important;
     border-top: 1px solid var(--tabs-border-color);
     background-clip: padding-box;
   }
 
   /* The top border on top of the tab background is replaced
    * by the slightly transparent outside tabs-border-color. */
   .tab-background {
     border-top-style: none !important;
   }
 
   /* The border at the end of the tab strip is replaced
    * by the slightly transparent outside tabs-border-color. */
-  .tabbrowser-tab[last-visible-tab] {
+  #tabbrowser-tabs > .tabbrowser-tab[last-visible-tab] {
     border-inline-end: 1px solid var(--tabs-border-color);
   }
 
   .tabbrowser-tab[last-visible-tab]::after {
     display: none !important;
   }
 
   /* Use default window colors */
--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -13,9 +13,10 @@
 @import url("chrome://global/skin/dropmarker.css");
 @import url("chrome://global/skin/groupbox.css");
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/menulist.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/popup.css");
 @import url("chrome://global/skin/richlistbox.css");
 @import url("chrome://global/skin/splitter.css");
+@import url("chrome://global/skin/tabbox.css");
 @import url("chrome://global/skin/toolbar.css");
--- a/toolkit/content/widgets/tabbox.xml
+++ b/toolkit/content/widgets/tabbox.xml
@@ -3,25 +3,17 @@
    - 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/. -->
 
 
 <bindings id="tabBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
-
-  <binding id="tab-base">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-  </binding>
-
-  <binding id="tabbox"
-           extends="chrome://global/content/bindings/tabbox.xml#tab-base">
+  <binding id="tabbox">
     <implementation>
       <property name="handleCtrlTab">
         <setter>
         <![CDATA[
           this.setAttribute("handleCtrlTab", val);
           return val;
         ]]>
         </setter>
@@ -215,20 +207,16 @@
                     .getService(Ci.nsIEventListenerService);
         els.removeSystemEventListener(this._eventNode, "keydown", this, false);
       </destructor>
     </implementation>
   </binding>
 
   <binding id="tabs"
            extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <content>
       <xul:spacer class="tabs-left"/>
       <children/>
       <xul:spacer class="tabs-right" flex="1"/>
     </content>
 
     <implementation implements="nsIDOMXULSelectControlElement, nsIDOMXULRelatedElement">
       <constructor>
@@ -531,18 +519,17 @@
 
         event.stopPropagation();
       ]]>
       </handler>
     </handlers>
 #endif
   </binding>
 
-  <binding id="tabpanels"
-           extends="chrome://global/content/bindings/tabbox.xml#tab-base">
+  <binding id="tabpanels">
     <implementation implements="nsIDOMXULRelatedElement">
       <!-- nsIDOMXULRelatedElement -->
       <method name="getRelatedElement">
         <parameter name="aTabPanelElm"/>
         <body>
         <![CDATA[
           if (!aTabPanelElm)
             return null;
@@ -644,20 +631,16 @@
           ]]>
         </setter>
       </property>
     </implementation>
   </binding>
 
   <binding id="tab" display="xul:button"
            extends="chrome://global/content/bindings/general.xml#basetext">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <content>
       <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected,visuallyselected" flex="1">
         <xul:image class="tab-icon"
                    xbl:inherits="validate,src=image"
                    role="presentation"/>
         <xul:label class="tab-text"
                    xbl:inherits="value=label,accesskey,crop,disabled"
                    flex="1"
--- a/toolkit/themes/linux/global/tabbox.css
+++ b/toolkit/themes/linux/global/tabbox.css
@@ -44,25 +44,8 @@ tab[visuallyselected="true"] {
 
 tab + tab {
   margin-inline-start: -2px;
 }
 
 .tab-text {
   margin: 0 !important;
 }
-
-/* ::::: tab-bottom ::::::::::
-   :: Tabs that are attached to the bottom of a panel, but not necessarily
-   :: a tabpanels.
-   ::::: */
-
-.tab-bottom {
-  margin-top: 0;
-  margin-bottom: 2px;
-}
-
-.tab-bottom[visuallyselected="true"] {
-  margin-bottom: 0;
-  margin-top: -2px;
-  padding-top: 6px;
-  padding-bottom: 4px;
-}
--- a/toolkit/themes/windows/global/tabbox.css
+++ b/toolkit/themes/windows/global/tabbox.css
@@ -38,25 +38,8 @@ tab:-moz-focusring > .tab-middle {
   /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
 }
 
 tab:first-of-type[visuallyselected="true"] {
   padding-right: 5px;
   padding-left: 5px;
 }
-
-/* ::::: tab-bottom ::::::::::
-   :: Tabs that are attached to the bottom of a panel, but not necessarily
-   :: a tabpanels.
-   ::::: */
-
-.tab-bottom {
-  margin-top: 0;
-  margin-bottom: 2px;
-  padding: 2px 4px 1px 4px;
-}
-
-.tab-bottom[visuallyselected="true"] {
-  margin-bottom: 0;
-  padding: 4px 6px 1px 6px;
-}
-