Bug 1557817 - Convert basic XUL textbox usages to HTML input in preferences. r=jaws

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

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

browser/components/preferences/applicationManager.xul

@@ -47,6 +47,6 @@
   <vbox id="appDetails">
     <separator class="thin"/>
     <label id="appType"/>
-    <textbox id="appLocation" readonly="true" class="plain"/>
+    <html:input type="text" id="appLocation" readonly="readonly" style="margin-inline: 0;"/>
   </vbox>
 </dialog>

browser/components/preferences/containers.xul

@@ -31,7 +31,7 @@
       <label id="nameLabel" control="name"
              data-l10n-id="containers-name-label"
              data-l10n-attrs="style"/>
-      <textbox id="name" data-l10n-id="containers-name-text" flex="1" oninput="gContainersManager.checkForm();" />
+      <html:input id="name" type="text" data-l10n-id="containers-name-text" oninput="gContainersManager.checkForm();" />
     </hbox>
     <hbox align="center" id="iconWrapper">
       <label id="iconLabel" control="icon"

browser/components/preferences/in-content/home.xul

@@ -29,10 +29,11 @@
     <label control="homeMode" data-l10n-id="home-homepage-mode-label" flex="1" />
 
     <vbox class="homepageMenuItemContainer" flex="1">
-      <textbox id="homePrefHidden"
-              preference="browser.startup.homepage"
-              onsyncfrompreference="return gHomePane.syncFromHomePref();"
-              hidden="true" />
+      <html:input id="homePrefHidden"
+                  type="text"
+                  preference="browser.startup.homepage"
+                  onsyncfrompreference="return gHomePane.syncFromHomePref();"
+                  hidden="true" />
       <menulist id="homeMode"
                 class="check-home-page-controlled"
                 data-preference-related="browser.startup.homepage">

browser/components/preferences/in-content/main.xul

@@ -361,9 +361,10 @@
       <radio id="saveTo"
              value="true"
              data-l10n-id="download-save-to"/>
-      <textbox id="downloadFolder" flex="1"
-               readonly="true"
-               aria-labelledby="saveTo"/>
+      <html:input id="downloadFolder"
+                  type="text"
+                  readonly="readonly"
+                  aria-labelledby="saveTo"/>
       <button id="chooseFolder"
               is="highlightable-button"
               class="accessory-button"

browser/components/preferences/in-content/sync.xul

@@ -182,7 +182,7 @@
     <groupbox>
       <label control="fxaSyncComputerName"><html:h2 data-l10n-id="sync-device-name-header"/></label>
       <hbox id="fxaDeviceName">
-        <textbox id="fxaSyncComputerName" flex="1" disabled="true"/>
+        <html:input id="fxaSyncComputerName" type="text" disabled="true"/>
         <button id="fxaChangeDeviceName"
                 is="highlightable-button"
                 data-l10n-id="sync-device-name-change"/>

browser/components/preferences/permissions.xul

@@ -36,9 +36,10 @@
     <separator class="thin"/>
     <label id="urlLabel" control="url" data-l10n-id="permissions-address"/>
     <hbox align="start">
-      <textbox id="url" flex="1"
-               oninput="gPermissionManager.onHostInput(event.target);"
-               onkeypress="gPermissionManager.onHostKeyPress(event);"/>
+      <html:input id="url" type="text"
+                  style="-moz-box-flex: 1;"
+                  oninput="gPermissionManager.onHostInput(event.target);"
+                  onkeypress="gPermissionManager.onHostKeyPress(event);"/>
     </hbox>
     <hbox pack="end">
       <button id="btnBlock" disabled="true" data-l10n-id="permissions-block"

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -288,6 +288,7 @@ button > hbox > label {
 }
 
 #downloadFolder {
+  -moz-box-flex: 1;
   margin-inline-start: 0;
   padding-inline-start: 30px;
   background-repeat: no-repeat;
@@ -606,6 +607,7 @@ button > hbox > label {
 }
 
 #fxaSyncComputerName {
+  -moz-box-flex: 1;
   margin-inline-start: 0;
   margin-bottom: 4px;
 }

browser/themes/shared/preferences/containers.css

@@ -10,6 +10,10 @@
   --preference-active-color: #858585;
 }
 
+#name {
+  -moz-box-flex: 1;
+}
+
 .radio-buttons {
   display: flex;
   margin-inline-start: 0.35rem;