Bug 1473927 - Load textbox.css and numberbox.css as document stylesheets. r=paolo
☠☠ backed out by 300994021360 ☠ ☠
authorDão Gottwald <dao@mozilla.com>
Mon, 08 Oct 2018 19:47:56 +0200
changeset 488395 82b600b76a387c9740bfc88195c01fa2ec7d0163
parent 488394 ee7654dbc546241723d810176f476d0a74fc5c9b
child 488396 63a27bd95ecf32de88ec20328adf7ee2b8f11cfe
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewerspaolo
bugs1473927
milestone64.0a1
Bug 1473927 - Load textbox.css and numberbox.css as document stylesheets. r=paolo
editor/reftests/xul/input.css
toolkit/content/jar.mn
toolkit/content/moz.build
toolkit/content/textbox.css
toolkit/content/widgets.css
toolkit/content/widgets/numberbox.xml
toolkit/content/widgets/textbox.xml
toolkit/content/xul.css
toolkit/themes/linux/global/textbox.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/osx/global/textbox.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/textbox.css
--- a/editor/reftests/xul/input.css
+++ b/editor/reftests/xul/input.css
@@ -3,30 +3,33 @@
 
 :root > html|input,
 :root > html|textarea {
   margin: 2px 4px;
   padding: 2px 2px 3px;
   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;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-html|input, html|textarea {
+html|input,
+html|textarea {
   font: inherit;
 }
 
 html|input.empty {
   color: graytext;
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -1,15 +1,14 @@
 toolkit.jar:
 %  content global %content/global/ contentaccessible=yes
 *  content/global/license.html
    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
 #ifdef MOZILLA_OFFICIAL
    content/global/aboutRights.xhtml
 #else
    content/global/aboutRights.xhtml           (aboutRights-unbranded.xhtml)
 #endif
--- a/toolkit/content/moz.build
+++ b/toolkit/content/moz.build
@@ -262,19 +262,16 @@ with Files('minimal-xul.css'):
     BUG_COMPONENT = ('Toolkit', 'XUL Widgets')
 
 with Files('plugins*'):
     BUG_COMPONENT = ('Toolkit', 'XUL Widgets')
 
 with Files('resetProfile*'):
     BUG_COMPONENT = ('Firefox', 'Migration')
 
-with Files('textbox*'):
-    BUG_COMPONENT = ('Toolkit', 'XUL Widgets')
-
 with Files('timepicker*'):
     BUG_COMPONENT = ('Toolkit', 'XUL Widgets')
 
 with Files('treeUtils.js'):
     BUG_COMPONENT = ('Toolkit', 'General')
 
 with Files('viewZoomOverlay.js'):
     BUG_COMPONENT = ('Toolkit', 'General')
deleted file mode 100644
--- a/toolkit/content/textbox.css
+++ /dev/null
@@ -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;
-}
-*/
--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -18,12 +18,17 @@
 @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/radio.css");
 @import url("chrome://global/skin/richlistbox.css");
 @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");
 @import url("chrome://global/skin/wizard.css");
--- a/toolkit/content/widgets/numberbox.xml
+++ b/toolkit/content/widgets/numberbox.xml
@@ -7,21 +7,16 @@
 <bindings id="numberboxBindings"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:xbl="http://www.mozilla.org/xbl">
 
   <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"
                     xbl:inherits="value,min,max,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>
       </xul:moz-input-box>
     </content>
 
     <implementation>
--- a/toolkit/content/widgets/textbox.xml
+++ b/toolkit/content/widgets/textbox.xml
@@ -14,21 +14,16 @@
 
 <bindings id="textboxBindings"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    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">
         <html:input class="textbox-input" anonid="input"
                     xbl:inherits="value,type,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,noinitialfocus,mozactionhint,spellcheck"/>
       </xul:moz-input-box>
     </content>
 
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -619,16 +619,25 @@ textbox[resizable="true"] > moz-input-bo
 textbox[type="search"] {
   -moz-binding: url("chrome://global/content/bindings/textbox.xml#search-textbox");
 }
 
 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;
 }
 
 /********** autocomplete textbox **********/
 
 /* SeaMonkey uses its own autocomplete and the toolkit's autocomplete widget */
 %ifndef MOZ_SUITE
--- a/toolkit/themes/linux/global/textbox.css
+++ b/toolkit/themes/linux/global/textbox.css
@@ -16,24 +16,32 @@ textbox {
   cursor: text;
   margin: 2px 4px;
   padding: 2px 2px 3px;
   padding-inline-start: 4px;
   background-color: -moz-Field;
   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 {
   cursor: default;
 }
 
 /* ..... readonly state ..... */
 
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -84,16 +84,21 @@ xul|radio[focused="true"] > .radio-check
 html|*.numberbox-input::-moz-number-spin-up {
   border-radius: 4px 4px 0 0;
 }
 
 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;
 }
 
 html|button {
   /* XUL button min-width */
   min-width: 79px;
--- a/toolkit/themes/osx/global/textbox.css
+++ b/toolkit/themes/osx/global/textbox.css
@@ -9,24 +9,32 @@ textbox {
   -moz-appearance: textfield;
   cursor: text;
   margin: 4px;
   padding: 0px;
   background-color: -moz-Field;
   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 {
   cursor: default;
 }
 
 textbox[readonly="true"] {
   background-color: -moz-Dialog;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -388,20 +388,22 @@ xul|button[type="menu"] > xul|menupopup 
 /* textboxes */
 
 html|input[type="email"],
 html|input[type="tel"],
 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 {
   min-height: 30px;
   padding-right: 10px;
   padding-left: 10px;
 }
 
--- a/toolkit/themes/windows/global/textbox.css
+++ b/toolkit/themes/windows/global/textbox.css
@@ -16,24 +16,32 @@ textbox {
   cursor: text;
   margin: 2px 4px;
   padding: 2px 2px 3px;
   padding-inline-start: 4px;
   background-color: -moz-Field;
   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) {
   textbox html|*.textbox-input::placeholder {
     font-style: italic;
   }
 }