Bug 1473927 - Load textbox.css and numberbox.css as document stylesheets. r=paolo

editor/reftests/xul/input.css

@@ -8,12 +8,14 @@
   padding-inline-start: 5px;
 }
 
-#mac html|input, #mac html|textarea {
+#mac > html|input,
+#mac > html|textarea {
   margin: 4px;
   padding: 0 1px;
 }
 
-textbox[multiline="true"], html|textarea {
+textbox[multiline="true"],
+html|textarea {
   border: none !important;
   -moz-appearance: none !important;
   background-color: white !important;
@@ -21,7 +23,8 @@ textbox[multiline="true"], html|textarea {
   border-bottom-left-radius: 0;
 }
 
-html|input, html|textarea {
+html|input,
+html|textarea {
   font: inherit;
 }
 

toolkit/content/jar.mn

@@ -4,7 +4,6 @@ toolkit.jar:
    content/global/minimal-xul.css
 *  content/global/xul.css
    content/global/components.css
-   content/global/textbox.css
    content/global/autocomplete.css
    content/global/aboutAbout.js
    content/global/aboutAbout.xhtml

toolkit/content/textbox.css

@@ -1,45 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * 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/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
-@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
-
-html|*.textbox-input {
-  -moz-appearance: none;
-  text-align: inherit;
-  text-shadow: inherit;
-  box-sizing: border-box;
-  -moz-box-flex: 1;
-}
-
-html|*.textbox-textarea {
-  -moz-appearance: none !important;
-  text-shadow: inherit;
-  box-sizing: border-box;
-  -moz-box-flex: 1;
-}
-
-
-@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
-  html|*.textbox-input,
-  html|*.textbox-textarea {
-    /* Be block-level, so that -moz-box-flex can take effect, when we are an item
-       in a -moz-box being emulated by modified modern flex. */
-    display: block;
-  }
-}
-
-/*
-html|*.textbox-input::placeholder,
-html|*.textbox-textarea::placeholder {
-  text-align: left;
-  direction: ltr;
-}
-
-html|*.textbox-input::placeholder:-moz-locale-dir(rtl),
-html|*.textbox-textarea::placeholder:-moz-locale-dir(rtl) {
-  text-align: right;
-  direction: rtl;
-}
-*/

toolkit/content/widgets.css

@@ -23,6 +23,11 @@
 @import url("chrome://global/skin/scrollbox.css");
 @import url("chrome://global/skin/splitter.css");
 @import url("chrome://global/skin/tabbox.css");
+
+/* numberbox.css needs to be loaded after textbox.css since it overrides it */
+@import url("chrome://global/skin/textbox.css");
+@import url("chrome://global/skin/numberbox.css");
+
 @import url("chrome://global/skin/toolbar.css");
 @import url("chrome://global/skin/toolbarbutton.css");
 @import url("chrome://global/skin/tree.css");

toolkit/content/widgets/numberbox.xml

@@ -12,11 +12,6 @@
 
   <binding id="numberbox"
            extends="chrome://global/content/bindings/textbox.xml#textbox">
-
-    <resources>
-      <stylesheet src="chrome://global/skin/numberbox.css"/>
-    </resources>
-
     <content>
       <xul:moz-input-box anonid="moz-input-box" class="numberbox-input-box" flex="1" xbl:inherits="context,disabled,focused">
         <html:input class="numberbox-input textbox-input" type="number" anonid="input"

toolkit/content/widgets/textbox.xml

@@ -19,11 +19,6 @@
    xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="textbox">
-    <resources>
-      <stylesheet src="chrome://global/content/textbox.css"/>
-      <stylesheet src="chrome://global/skin/textbox.css"/>
-    </resources>
-
     <content>
       <children/>
       <xul:moz-input-box anonid="moz-input-box" flex="1" xbl:inherits="context,spellcheck">

toolkit/content/xul.css

@@ -624,6 +624,15 @@ textbox[type="number"] {
   -moz-binding: url("chrome://global/content/bindings/numberbox.xml#numberbox");
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  html|*.textbox-input,
+  html|*.textbox-textarea {
+    /* Be block-level, so that -moz-box-flex can take effect, when we are an item
+       in a -moz-box being emulated by modified modern flex. */
+    display: block;
+  }
+}
+
 .textbox-contextmenu:-moz-locale-dir(rtl) {
   direction: rtl;
 }

toolkit/themes/linux/global/textbox.css

@@ -21,14 +21,22 @@ textbox {
   color: -moz-FieldText;
 }
 
-html|*.textbox-input, 
+html|*.textbox-input,
 html|*.textbox-textarea {
-  margin: 0px !important;
-  border: none !important;
-  padding: 0px 1px !important;
-  background-color: inherit;
+  -moz-appearance: none;
+  margin: 0;
+  border: none;
+  padding: 0 1px;
+  background-color: transparent;
   color: inherit;
   font: inherit;
+  text-shadow: inherit;
+  box-sizing: border-box;
+  -moz-box-flex: 1;
+}
+
+html|*.textbox-input {
+  text-align: inherit;
 }
 
 .textbox-contextmenu {

toolkit/themes/osx/global/in-content/common.css

@@ -89,6 +89,11 @@ html|*.numberbox-input::-moz-number-spin-down  {
   border-radius: 0 0 4px 4px;
 }
 
+textbox[type="search"] {
+  -moz-appearance: none;
+  padding-inline-start: 10px;
+}
+
 xul|textbox[type="search"]:not([searchbutton]) > moz-input-box > .textbox-search-sign {
   list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
   margin-inline-end: 5px;

toolkit/themes/osx/global/textbox.css

@@ -14,14 +14,22 @@ textbox {
   color: -moz-FieldText;
 }
 
-html|*.textbox-input, 
+html|*.textbox-input,
 html|*.textbox-textarea {
-  margin: 0px !important;
-  border: none !important;
-  padding: 0px 1px !important;
-  background-color: inherit;
+  -moz-appearance: none;
+  margin: 0;
+  border: none;
+  padding: 0 1px;
+  background-color: transparent;
   color: inherit;
   font: inherit;
+  text-shadow: inherit;
+  box-sizing: border-box;
+  -moz-box-flex: 1;
+}
+
+html|*.textbox-input {
+  text-align: inherit;
 }
 
 .textbox-contextmenu {

toolkit/themes/shared/in-content/common.inc.css

@@ -393,10 +393,12 @@ html|input[type="text"],
 html|textarea,
 xul|textbox {
   -moz-appearance: none;
-  color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
-  background-color: var(--in-content-box-background);
+  /* !important to override disabled styling from textbox.css. We reduce the
+     opacity instead of changing colors. */
+  color: var(--in-content-text-color) !important;
+  background-color: var(--in-content-box-background) !important;
 }
 
 xul|textbox {

toolkit/themes/windows/global/textbox.css

@@ -21,14 +21,22 @@ textbox {
   color: -moz-FieldText;
 }
 
-html|*.textbox-input, 
+html|*.textbox-input,
 html|*.textbox-textarea {
-  margin: 0px !important;
-  border: none !important;
-  padding: 0px 1px !important;
-  background-color: inherit;
+  -moz-appearance: none;
+  margin: 0;
+  border: none;
+  padding: 0 1px;
+  background-color: transparent;
   color: inherit;
   font: inherit;
+  text-shadow: inherit;
+  box-sizing: border-box;
+  -moz-box-flex: 1;
+}
+
+html|*.textbox-input {
+  text-align: inherit;
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {