Bug 1553373 - Change to use html:input type=password instead of xul:textbox type=password in Master Password dialogs since they use common styling which defines proper styling for html:input[type=password] now. r=dao

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

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

toolkit/mozapps/preferences/changemp.js

@@ -38,8 +38,7 @@ function process() {
     let msgBox = document.getElementById("message");
     if ((token.needsLogin() && token.needsUserInit) || !token.needsLogin()) {
       oldpwbox.setAttribute("hidden", "true");
-      document.l10n.setAttributes(msgBox, "password-not-set");
-      msgBox.setAttribute("hidden", "false");
+      msgBox.removeAttribute("hidden");
 
       if (!token.needsLogin()) {
         oldpwbox.setAttribute("inited", "empty");
@@ -51,7 +50,7 @@ function process() {
       document.getElementById("pw1").focus();
     } else {
       // Select old password field
-      oldpwbox.setAttribute("hidden", "false");
+      oldpwbox.removeAttribute("hidden");
       msgBox.setAttribute("hidden", "true");
       oldpwbox.setAttribute("inited", "false");
       oldpwbox.focus();

toolkit/mozapps/preferences/changemp.xul

@@ -25,7 +25,7 @@
   <vbox>
     <hbox>
       <label flex="1" control="oldpw" data-l10n-id="set-password-old-password"></label>
-      <textbox id="oldpw" type="password"/>
+      <html:input id="oldpw" type="password"/>
       <!-- This textbox is inserted as a workaround to the fact that making the 'type'
             & 'disabled' property of the 'oldpw' textbox toggle between ['password' &
             'false'] and ['text' & 'true'] - as would be necessary if the menu has more
@@ -33,16 +33,16 @@
             either the textbox 'oldpw' or the textbox 'message' would be displayed,
             depending on the state of the token selected
       -->
-      <textbox id="message" disabled="true" />
+      <html:input type="text" data-l10n-attrs="value" data-l10n-id="password-not-set" id="message" disabled="true" />
     </hbox>
     <hbox>
       <label flex="1" control="pw1" data-l10n-id="set-password-new-password"></label>
-      <textbox id="pw1" type="password"
-               oninput="setPasswordStrength(); checkPasswords();"/>
+      <html:input id="pw1" type="password"
+                  oninput="setPasswordStrength(); checkPasswords();"/>
     </hbox>
     <hbox>
       <label flex="1" control="pw2" data-l10n-id="set-password-reenter-password"></label>
-      <textbox id="pw2" type="password" oninput="checkPasswords();"/>
+      <html:input id="pw2" type="password" oninput="checkPasswords();"/>
     </hbox>
   </vbox>
 

toolkit/mozapps/preferences/removemp.xul

@@ -31,9 +31,9 @@
 
     <hbox align="center">
       <label control="password" data-l10n-id="remove-password-old-password"/> 
-      <textbox id="password" type="password"
-               oninput="gRemovePasswordDialog.validateInput();"
-               aria-describedby="warnings"/>
+      <html:input id="password" type="password"
+                  oninput="gRemovePasswordDialog.validateInput();"
+                  aria-describedby="warnings"/>
     </hbox>
   </groupbox>
   

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

@@ -86,3 +86,12 @@ html|button {
   /* XUL button min-width */
   min-width: 79px;
 }
+
+html|input[type="email"],
+html|input[type="tel"],
+html|input[type="text"],
+html|input[type="password"],
+html|input[type="number"],
+html|textarea {
+  margin: 4px;
+}

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

@@ -462,6 +462,7 @@ html|textarea {
   font-family: inherit;
   font-size: inherit;
   padding: 5px 8px;
+  margin: 2px 4px;
 }
 
 html|input[type="email"]:enabled:not(:focus):hover,