Bug 1446168 - Load tabbox.css as a document stylesheet. r=bgrins
authorDão Gottwald <dao@mozilla.com>
Fri, 24 Aug 2018 17:33:12 +0200
changeset 491131 91dc894ac30321311d5c83ecf3ba40525ecfc917
parent 491130 2aa4de1d5e146896d0fedf7899ffa96226c4b002
child 491132 b48d2197a9a0b3f5add7032f685177fbb12b21d6
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1446168
milestone63.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 1446168 - Load tabbox.css as a document stylesheet. r=bgrins
browser/base/content/tabbrowser.xml
browser/themes/shared/tabs.inc.css
layout/reftests/xul/mac-tab-toolbar-ref.xul
layout/reftests/xul/mac-tab-toolbar.xul
toolkit/content/widgets.css
toolkit/content/widgets/tabbox.xml
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -548,17 +548,18 @@
                 scrollButtonWidth: arrowScrollbox._scrollButtonDown.getBoundingClientRect().width
               };
             }
 
             let width = 0;
             for (let i = numPinned - 1; i >= 0; i--) {
               let tab = this.children[i];
               width += layoutData.pinnedTabWidth;
-              tab.style.marginInlineStart = -(width + layoutData.scrollButtonWidth) + "px";
+              tab.style.setProperty("margin-inline-start",
+                -(width + layoutData.scrollButtonWidth) + "px", "important");
               tab._pinnedUnscrollable = true;
             }
             this.style.paddingInlineStart = width + "px";
           } else {
             this.removeAttribute("positionpinnedtabs");
 
             for (let i = 0; i < numPinned; i++) {
               let tab = this.children[i];
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -65,18 +65,18 @@
   }
 }
 
 .tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
-  margin: 0;
-  padding: 0;
+  margin: 0 !important /* override tabbox.css */;
+  padding: 0 !important /* override tabbox.css */;
   -moz-box-align: stretch;
 }
 
 /* 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;
--- a/layout/reftests/xul/mac-tab-toolbar-ref.xul
+++ b/layout/reftests/xul/mac-tab-toolbar-ref.xul
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <tabbox id="tab">
     <tabs>
       <tab label="zeroTab" id="0" selected="true" />
       <tab label="firstTab" id="1" />
       <tab label="secondtab" id="2" />
       <tab label="thirdTab" id="3" />
       <tab label="fourthTab" id="4" />
--- a/layout/reftests/xul/mac-tab-toolbar.xul
+++ b/layout/reftests/xul/mac-tab-toolbar.xul
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait">
   <tabbox id="tab">
     <tabs>
       <tab label="zeroTab" id="0" />
       <tab label="firstTab" id="1" />
       <tab label="secondtab" id="2" />
       <tab label="thirdTab" id="3" />
       <tab label="fourthTab" id="4" />
--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -13,10 +13,11 @@
 @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/progressmeter.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");
 @import url("chrome://global/skin/wizard.css");
--- a/toolkit/content/widgets/tabbox.xml
+++ b/toolkit/content/widgets/tabbox.xml
@@ -3,22 +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="tabbox">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <implementation>
       <property name="handleCtrlTab">
         <setter>
         <![CDATA[
           this.setAttribute("handleCtrlTab", val);
           return val;
         ]]>
         </setter>
@@ -212,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>
@@ -528,20 +519,16 @@
         event.stopPropagation();
       ]]>
       </handler>
     </handlers>
 #endif
   </binding>
 
   <binding id="tabpanels">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <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"