Bug 1473910 - Load "tabprompts.css" as a document stylesheet in the browser window. r=dao
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 09 Jul 2018 10:09:17 +0100
changeset 439503 df5adaaa7e64ce2ba46c6bbaa1e02f555b08a603
parent 439502 463344943de8904defdc9f08ec8062290c290b75
child 439504 505f6ee17c143053ce2293d85bd8ad6f8946748d
push id34776
push usernerli@mozilla.com
push dateThu, 04 Oct 2018 04:03:46 +0000
treeherdermozilla-central@8b1f1ebed0f0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1473910
milestone64.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 1473910 - Load "tabprompts.css" as a document stylesheet in the browser window. r=dao MozReview-Commit-ID: HEf70HtNiqQ
browser/base/content/browser.xul
toolkit/components/prompts/content/tabprompts.css
toolkit/components/prompts/content/tabprompts.xml
toolkit/themes/osx/global/tabprompts.css
toolkit/themes/windows/global/tabprompts.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -6,16 +6,22 @@
 # 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/.
 
 <!-- The "global.css" stylesheet is imported first to allow other stylesheets to
      override rules using selectors with the same specificity. This applies to
      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"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/usercontext/usercontext.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/controlcenter/panel.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/customizableui/panelUI.css" type="text/css"?>
--- a/toolkit/components/prompts/content/tabprompts.css
+++ b/toolkit/components/prompts/content/tabprompts.css
@@ -5,17 +5,17 @@
 /* Tab Modal Prompt boxes */
 tabmodalprompt {
   width: 100%;
   height: 100%;
   -moz-box-pack: center;
   -moz-box-orient: vertical;
 }
 
-.mainContainer {
+.tabmodalprompt-mainContainer {
   min-width: 20em;
   min-height: 12em;
   -moz-user-focus: normal;
 }
 
 .infoTitle {
   margin-bottom: 1em !important;
   font-weight: bold;
@@ -25,11 +25,11 @@ tabmodalprompt {
   margin: 0 !important;
   -moz-user-focus: normal;
   -moz-user-select: text;
   cursor: text !important;
   white-space: pre-wrap;
   unicode-bidi: plaintext;
 }
 
-label[value=""] {
+tabmodalprompt label[value=""] {
   visibility: collapse;
 }
--- a/toolkit/components/prompts/content/tabprompts.xml
+++ b/toolkit/components/prompts/content/tabprompts.xml
@@ -14,31 +14,25 @@
 ]>
 
 <bindings id="tabPrompts"
    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="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">
 
         <!-- 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"/>
                     </columns>
 
                     <rows>
                         <vbox anonid="infoContainer" align="center" pack="center" flex="1">
                             <description anonid="infoTitle" class="infoTitle" hidden="true" />
@@ -59,17 +53,17 @@
                             <spacer/>
                             <checkbox anonid="checkbox"/>
                         </row>
 
                         <xbl:children includes="row"/>
                     </rows>
                 </grid>
                 <xbl:children/>
-                <hbox class="buttonContainer">
+                <hbox class="tabmodalprompt-buttonContainer">
 #ifdef XP_UNIX
                     <button anonid="button3" hidden="true"/>
                     <button anonid="button2" hidden="true"/>
                     <spacer anonid="buttonSpacer" flex="1"/>
                     <button anonid="button1" label="&cancelButton.label;"/>
                     <button anonid="button0" label="&okButton.label;"/>
 #else
                     <button anonid="button3" hidden="true"/>
--- a/toolkit/themes/osx/global/tabprompts.css
+++ b/toolkit/themes/osx/global/tabprompts.css
@@ -4,60 +4,60 @@
 
 /* Tab Modal Prompt boxes */
 tabmodalprompt {
   background-color: hsla(0,0%,10%,.5);
   font-family: sans-serif; /* use content font not system UI font */
   font-size: 110%;
 }
 
-.mainContainer {
+.tabmodalprompt-mainContainer {
   color: black;
   background-color: hsla(0,0%,100%,.95);
   background-clip: padding-box;
   border-radius: 2px;
   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;
   margin-inline-start: 8px;
   border-radius: 2px;
   color: black !important;
   background-color: hsl(0,0%,90%);
   background-image: linear-gradient(hsla(0,0%,100%,.7), transparent);
   background-clip: padding-box;
   border: 1px solid;
   border-color: hsl(0,0%,65%) hsl(0,0%,60%) hsl(0,0%,50%);
   box-shadow: 0 1px 0 hsla(0,0%,100%,.9) inset,
               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)
 }
--- a/toolkit/themes/windows/global/tabprompts.css
+++ b/toolkit/themes/windows/global/tabprompts.css
@@ -3,24 +3,24 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Tab Modal Prompt boxes */
 tabmodalprompt {
   background-color: hsla(0,0%,10%,.5);
   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);
 }