Bug 1473910 - Load "tabprompts.css" as a document stylesheet in the browser window. r=bgrins,dao

MozReview-Commit-ID: HEf70HtNiqQ

--HG--
extra : rebase_source : 8a81b8da19e5506629626c34dd17a2032d4fcafe

browser/base/content/browser.xul

@@ -11,6 +11,12 @@
      both "content" and "skin" packages, which bug 1385444 will unify later. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
+<!-- While these stylesheets are defined in Toolkit, they are only used in the
+     main browser window, so we can load them here. Bug 1474241 is on file to
+     consider moving these widgets to the "browser" folder. -->
+<?xml-stylesheet href="chrome://global/content/tabprompts.css" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/tabprompts.css" type="text/css"?>
+
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/tabbrowser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/downloads/downloads.css" type="text/css"?>

toolkit/components/prompts/content/tabprompts.css

@@ -10,7 +10,7 @@ tabmodalprompt {
   -moz-box-orient: vertical;
 }
 
-.mainContainer {
+.tabmodalprompt-mainContainer {
   min-width: 20em;
   min-height: 12em;
   -moz-user-focus: normal;

toolkit/components/prompts/content/tabprompts.xml

@@ -19,12 +19,6 @@
    xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="tabmodalprompt">
-
-    <resources>
-        <stylesheet src="chrome://global/content/tabprompts.css"/>
-        <stylesheet src="chrome://global/skin/tabprompts.css"/>
-    </resources>
-
     <xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                  role="dialog"
                  aria-describedby="infoBody">
@@ -32,8 +26,8 @@
         <!-- This is based on the guts of commonDialog.xul -->
         <spacer flex="1"/>
         <hbox pack="center">
-            <vbox anonid="mainContainer" class="mainContainer">
-                <grid class="topContainer" flex="1">
+            <vbox anonid="mainContainer" class="tabmodalprompt-mainContainer">
+                <grid class="tabmodalprompt-topContainer" flex="1">
                     <columns>
                         <column/>
                         <column flex="1"/>
@@ -64,7 +58,7 @@
                     </rows>
                 </grid>
                 <xbl:children/>
-                <hbox class="buttonContainer">
+                <hbox class="tabmodalprompt-buttonContainer">
 #ifdef XP_UNIX
                     <button anonid="button3" hidden="true"/>
                     <button anonid="button2" hidden="true"/>

toolkit/themes/osx/global/tabprompts.css

@@ -9,7 +9,7 @@ tabmodalprompt {
   font-size: 110%;
 }
 
-.mainContainer {
+.tabmodalprompt-mainContainer {
   color: black;
   background-color: hsla(0,0%,100%,.95);
   background-clip: padding-box;
@@ -17,17 +17,17 @@ tabmodalprompt {
   border: 1px solid hsla(0,0%,0%,.5);
 }
 
-.topContainer {
+.tabmodalprompt-topContainer {
   padding: 20px;
 }
 
-.buttonContainer {
+.tabmodalprompt-buttonContainer {
   padding: 12px 20px 15px;
   background-color: hsla(0,0%,0%,.05);
   border-top: 1px solid hsla(0,0%,0%,.05);
 }
 
-button {
+.tabmodalprompt-buttonContainer > button {
   -moz-appearance: none;
   padding: 2px 0;
   margin: 0;
@@ -43,21 +43,21 @@ button {
               0 1px 2px hsla(0,0%,0%,.1);
 }
 
-button[default=true] {
+.tabmodalprompt-buttonContainer > button[default=true] {
   background-color: hsl(0,0%,79%);
 }
 
-button:hover {
+.tabmodalprompt-buttonContainer > button:hover {
   background-color: hsl(0,0%,96%);
 }
 
-button:hover:active {
+.tabmodalprompt-buttonContainer > button:hover:active {
   background-image: linear-gradient(hsla(0,0%,100%,.2), transparent);
   background-color: hsl(0,0%,70%);
   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
               0 1px 3px hsla(0,0%,0%,.2);
 }
 
-button:focus {
+.tabmodalprompt-buttonContainer > button:focus {
   box-shadow: var(--focus-ring-box-shadow)
 }

toolkit/themes/windows/global/tabprompts.css

@@ -8,18 +8,18 @@ tabmodalprompt {
   font-family: sans-serif; /* use content font not system UI font */
 }
 
-.mainContainer {
+.tabmodalprompt-mainContainer {
   color: -moz-fieldText;
   background-color: -moz-field;
   border-radius: 2px;
   border: 1px solid threeDDarkShadow;
 }
 
-.topContainer {
+.tabmodalprompt-topContainer {
   padding: 20px;
 }
 
-.buttonContainer {
+.tabmodalprompt-buttonContainer {
   padding: 12px 20px 15px;
   background-color: hsla(0,0%,0%,.05);
   border-top: 1px solid hsla(0,0%,0%,.05);