Bug 1596724 - Fix print preview toolbar. r=dao

The selectors that changed number inputs when they were used in a XUL
root document no longer make sense now that we're using an html root.
Convert the selector to a class instead. Also, add flex attribute so
the toolbar fills the whole width of the wrapping box.

Differential Revision: https://phabricator.services.mozilla.com/D53241

--HG--
extra : moz-landing-system : lando

browser/components/preferences/connection.xhtml

@@ -73,7 +73,7 @@
           <html:input id="networkProxyHTTP" type="text" style="-moz-box-flex: 1;"
                       preference="network.proxy.http"/>
           <label data-l10n-id="connection-proxy-http-port" control="networkProxyHTTP_Port" />
-          <html:input id="networkProxyHTTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535"
+          <html:input id="networkProxyHTTP_Port" class="proxy-port-input input-number-mozbox" hidespinbuttons="true" type="number" min="0" max="65535"
                       preference="network.proxy.http_port"/>
         </hbox>
         <hbox/>
@@ -87,7 +87,7 @@
         <hbox align="center">
           <html:input id="networkProxySSL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ssl"/>
           <label data-l10n-id="connection-proxy-ssl-port" control="networkProxySSL_Port" />
-          <html:input id="networkProxySSL_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
+          <html:input id="networkProxySSL_Port" class="proxy-port-input input-number-mozbox" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
                       preference="network.proxy.ssl_port"/>
         </hbox>
         <hbox pack="end">
@@ -96,7 +96,7 @@
         <hbox align="center">
           <html:input id="networkProxyFTP" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ftp"/>
           <label data-l10n-id="connection-proxy-ftp-port" control="networkProxyFTP_Port"/>
-          <html:input id="networkProxyFTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
+          <html:input id="networkProxyFTP_Port" class="proxy-port-input input-number-mozbox" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
                       preference="network.proxy.ftp_port"/>
         </hbox>
         <hbox pack="end">
@@ -105,7 +105,7 @@
         <hbox align="center">
           <html:input id="networkProxySOCKS" type="text" style="-moz-box-flex: 1;" preference="network.proxy.socks"/>
           <label data-l10n-id="connection-proxy-socks-port" control="networkProxySOCKS_Port"/>
-          <html:input id="networkProxySOCKS_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
+          <html:input id="networkProxySOCKS_Port" class="proxy-port-input input-number-mozbox" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
                       preference="network.proxy.socks_port"/>
         </hbox>
         <spacer/>

toolkit/components/printing/content/printPreviewToolbar.js

@@ -30,7 +30,7 @@ customElements.define(
       <toolbarbutton id="print-preview-navigateHome" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'home');" data-l10n-id="printpreview-homearrow"/>
       <toolbarbutton id="print-preview-navigatePrevious" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(-1, 0, 0);" data-l10n-id="printpreview-previousarrow"/>
       <hbox align="center" pack="center">
-        <html:input id="print-preview-pageNumber" hidespinbuttons="true" type="number" value="1" min="1"/>
+        <html:input id="print-preview-pageNumber" class="input-number-mozbox" hidespinbuttons="true" type="number" value="1" min="1"/>
         <label data-l10n-id="printpreview-of"/>
         <label id="print-preview-totalPages" value="1"/>
       </hbox>

toolkit/components/printing/content/printUtils.js

@@ -595,6 +595,7 @@ var PrintUtils = {
         is: "printpreview-toolbar",
       });
       printPreviewTB.setAttribute("fullscreentoolbar", true);
+      printPreviewTB.setAttribute("flex", "1");
       printPreviewTB.id = "print-preview-toolbar";
 
       let navToolbox = this._listener.getNavToolbox();

toolkit/themes/shared/numberinput.css

@@ -6,30 +6,29 @@
   == Styles used by the input[type="number"] element.
   ======================================================================= */
 
-@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
+@namespace url("http://www.w3.org/1999/xhtml");
 
-html|input[type="number"] {
+input[type="number"] {
   text-align: right;
 }
 
-html|input[type="number"][hidespinbuttons="true"] {
+input[type="number"][hidespinbuttons="true"] {
   -moz-appearance: textfield !important;
 }
 
 /* input[type=number] uses display: flex; by default which is incompatible with XUL flexbox
    Forcing XUL flexbox allows changing the size of the input. */
-xul|*:root html|input[type="number"],
-xul|*:root html|input[type="number"]::-moz-number-wrapper {
+.input-number-mozbox,
+.input-number-mozbox::-moz-number-wrapper {
   display: -moz-box;
   -moz-box-align: center;
 }
 
-xul|*:root html|input[type="number"]::-moz-number-wrapper,
-xul|*:root html|input[type="number"]::-moz-number-text {
+.input-number-mozbox::-moz-number-wrapper,
+.input-number-mozbox::-moz-number-text {
   -moz-box-flex: 1;
 }
 
-xul|*:root html|input[type="number"]::-moz-number-wrapper {
+.input-number-mozbox::-moz-number-wrapper {
   width: 100%;
 }