Merge pull request #21512 from anefzaoui/bug-876825

Bug 876825 - Mixed LTR & RTL content support in text input fields and textarea
Conflicts:
	apps/homescreen/elements/search_page.html
	apps/system/index.html

apps/bluetooth/onpair.html

@@ -35,7 +35,7 @@ <h1 id="label-name"></h1>
         </span>
 
         <span id="pin-input-method" hidden>
-          <input type="text" id="pin-input" size="16" maxlength="16" />
+          <input type="text" id="pin-input" size="16" maxlength="16" dir="auto" />
         </span>
 
         <span id="passkey-input-method" hidden>

apps/bookmark/save.html

@@ -40,7 +40,7 @@ <h1 id="edit-bookmark-header" data-l10n-id="edit-bookmark-header"></h1>
       <form id="bookmark-form">
         <label data-l10n-id="website-name">
           <p>
-            <input type="text" id="bookmark-title"></input>
+            <input type="text" id="bookmark-title" dir="auto"></input>
             <button id="bookmark-title-clear" type="reset">Clear</button>
           </p>
         </label>

apps/browser/index.html

@@ -59,7 +59,8 @@
         <form id="url-bar" novalidate>
           <input type="image" id="ssl-indicator" value="" />
           <input type="text" id="url-input" placeholder="Search or enter address"
-                 data-l10n-id="enter-search-or-address" x-inputmode="verbatim"/>
+                 data-l10n-id="enter-search-or-address" x-inputmode="verbatim"
+                 dir="auto" />
           <input type="image" id="url-button" value="" />
         </form>
         <span id="tabs-badge"> 1&#x203A;</span>
@@ -186,7 +187,7 @@ <h3 data-l10n-id="this-is-embarrassing">Well, this is embarrassing.</h3>
         <h1 data-l10n-id="edit-bookmark-header">Edit Bookmark</h1>
       </header>
       <label data-l10n-id="page-title">
-        Page Title <input type="text" id="bookmark-title"></input>
+        Page Title <input type="text" id="bookmark-title" dir="auto"></input>
       </label>
       <label data-l10n-id="address">
         Address <input type="url" id="bookmark-url"></input>
@@ -208,7 +209,7 @@ <h1 data-l10n-id="login-to-a-website">Login to a website</h1>
       </header>
       <span id="http-authentication-message"></span>
       <label data-l10n-id="username">Username
-        <input type="text" id="http-authentication-username" />
+        <input type="text" id="http-authentication-username" dir="auto" />
       </label>
       <label data-l10n-id="password">Password
         <input id="http-authentication-password" type="password" />

apps/calendar/elements/modify_event.html

@@ -19,11 +19,11 @@ <h1 data-l10n-id="edit-event-header" class="done-text">Edit Event</h1>
     <form>
       <ol>
         <li class="title">
-          <input type="text" name="title" data-l10n-id="event-title" x-inputmode="latin-prose" placeholder="Title" />
+          <input type="text" name="title" data-l10n-id="event-title" x-inputmode="latin-prose" placeholder="Title" dir="auto" />
         </li>
 
         <li class="location">
-          <input type="text" name="location" data-l10n-id="event-location" x-inputmode="latin-prose" placeholder="Where?" />
+          <input type="text" name="location" data-l10n-id="event-location" x-inputmode="latin-prose" placeholder="Where?" dir="auto" />
         </li>
 
         <li class="allday">
@@ -81,7 +81,7 @@ <h3 data-l10n-id="remind-me">Remind me</h3>
         </li>
 
         <li class="notes">
-          <textarea name="description" data-l10n-id="event-description" x-inputmode="latin-prose" placeholder="Notes"></textarea>
+          <textarea name="description" data-l10n-id="event-description" x-inputmode="latin-prose" placeholder="Notes" dir="auto"></textarea>
         </li>
 
       </ol>

apps/clock/js/panels/alarm_edit/panel.html

@@ -8,7 +8,7 @@ <h1 class="edit-alarm-title" data-l10n-id="editAlarm">Edit AlarM</h1>
 </header>
 <ul id="edit-alarm" class="compact">
   <li>
-    <input type="text" name="alarm.label" id="alarm-name" data-l10n-id="alarmName" placeholder="Alarm name" maxLength="50" />
+    <input type="text" name="alarm.label" id="alarm-name" data-l10n-id="alarmName" placeholder="Alarm name" maxLength="50" dir="auto" />
   </li>
   <li>
     <label data-l10n-id="time">Time</label>

apps/communications/contacts/elements/form.html

@@ -20,7 +20,7 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
             <button type="reset">Clear</button>
           </p>
           <p class="setbox-item">
-            <input placeholder="Carrier" data-field="carrier" data-l10n-id="carrier" name="tel[#i#][carrier]" class="textfield" type="text" x-inputmode="latin-prose" value="#carrier#" id="carrier_#i#">
+            <input placeholder="Carrier" data-field="carrier" data-l10n-id="carrier" name="tel[#i#][carrier]" class="textfield" type="text" x-inputmode="latin-prose" value="#carrier#" id="carrier_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
         </section>
@@ -48,19 +48,19 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
         </legend>
         <section>
           <p class="setbox-item">
-            <input placeholder="Street" data-field="streetAddress" data-l10n-id="streetAddress" name="adr[#i#][streetAddress]" class="textfield" type="text" x-inputmode="latin-prose" value="#streetAddress#" id="streetAddress_#i#">
+            <input placeholder="Street" data-field="streetAddress" data-l10n-id="streetAddress" name="adr[#i#][streetAddress]" class="textfield" type="text" x-inputmode="latin-prose" value="#streetAddress#" id="streetAddress_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
           <p class="setbox-item">
-            <input placeholder="Zip Code" data-field="postalCode" data-l10n-id="postalCode" name="adr[#i#][postalCode]" class="textfield" type="text" value="#postalCode#" id="postalCode_#i#">
+            <input placeholder="Zip Code" data-field="postalCode" data-l10n-id="postalCode" name="adr[#i#][postalCode]" class="textfield" type="text" value="#postalCode#" id="postalCode_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
           <p class="setbox-item">
-            <input placeholder="City" data-field="locality" data-l10n-id="locality" name="adr[#i#][locality]" class="textfield" type="text" x-inputmode="latin-prose" value="#locality#" id="locality_#i#">
+            <input placeholder="City" data-field="locality" data-l10n-id="locality" name="adr[#i#][locality]" class="textfield" type="text" x-inputmode="latin-prose" value="#locality#" id="locality_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
           <p class="setbox-item">
-            <input placeholder="Country" data-field="countryName" data-l10n-id="countryName" name="adr[#i#][countryName]" class="textfield" type="text" x-inputmode="latin-prose" value="#countryName#" id="countryName_#i#">
+            <input placeholder="Country" data-field="countryName" data-l10n-id="countryName" name="adr[#i#][countryName]" class="textfield" type="text" x-inputmode="latin-prose" value="#countryName#" id="countryName_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
         </section>
@@ -87,7 +87,7 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
       <dl class="setbox fillflow-row">
         <dd class="setbox-body">
           <p class="setbox-item">
-           <input placeholder="Comment" data-l10n-id="comment" name="comment[#i#]" class="textfield" type="text" x-inputmode="latin-prose" value="#note#" id="note_#i#">
+           <input placeholder="Comment" data-l10n-id="comment" name="comment[#i#]" class="textfield" type="text" x-inputmode="latin-prose" value="#note#" id="note_#i#" dir="auto">
            <button type="reset">Clear</button>
           </p>
         </dd>
@@ -112,17 +112,17 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
             </a>
             <div class="item-body-exp">
               <p class="fillflow-row">
-                <input placeholder="Name" data-l10n-id="givenName" name="givenName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="givenName">
+                <input placeholder="Name" data-l10n-id="givenName" name="givenName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="givenName" dir="auto">
                 <button type="reset">Clear</button>
               </p>
               <p class="fillflow-row">
-                <input placeholder="Last name" data-l10n-id="familyName" name="familyName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="familyName">
+                <input placeholder="Last name" data-l10n-id="familyName" name="familyName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="familyName" dir="auto">
                 <button type="reset">Clear</button>
               </p>
             </div>
             <div>
               <p class="fillflow-row">
-                <input placeholder="Company Name" data-l10n-id="org" name="org" class="textfield" type="text" x-inputmode="latin-prose" value="" id="org">
+                <input placeholder="Company Name" data-l10n-id="org" name="org" class="textfield" type="text" x-inputmode="latin-prose" value="" id="org" dir="auto">
                 <button type="reset">Clear</button>
               </p>
             </div>

apps/communications/contacts/elements/tag.html

@@ -13,7 +13,7 @@ <h1 data-l10n-id="label">Label</h1>
         <ul id="tags-list" class="selection-list compact" role="listbox">
         </ul>
         <p>
-          <input class="textfield" type="text" placeholder="Custom Tag" value="" id='custom-tag' data-l10n-id="customTag">
+          <input class="textfield" type="text" placeholder="Custom Tag" value="" id='custom-tag' data-l10n-id="customTag" dir="auto">
           <button id="custom-tag-reset" type="reset">Clear</button>
         </p>
       </form>

apps/communications/dialer/index.html

@@ -248,7 +248,7 @@ <h1 id="header-title">USSD</h1>
       </section>
       <form id="response" role="region">
         <p>
-          <input id="response-text" type="text" data-l10n-id="type-your-response" placeholder="Type your selection..." required disabled>
+          <input id="response-text" type="text" data-l10n-id="type-your-response" placeholder="Type your selection..." dir="auto" required disabled>
           <button id="response-text-reset" type="reset" data-l10n-id="clear-all-text"> Clear-all-text </button>
         </p>
       </form>

apps/email/js/cards/compose.html

@@ -56,7 +56,7 @@
       <div class="cmp-envelope-line cmp-subject">
         <span class="cmp-subject-label"
                data-l10n-id="compose-subject">SubjecT:</span>
-        <input class="cmp-subject-text" type="text" />
+        <input class="cmp-subject-text" type="text" dir="auto" />
       </div>
       <div class="cmp-envelope-line cmp-attachment-total collapsed">
         <span class="cmp-attachment-label cmp-addr-label"

apps/email/js/cards/message_list.html

@@ -30,7 +30,7 @@ <h1 class="msg-listedit-header-label"></h1>
       <button class="msg-search-cancel" type="submit" data-l10n-id="message-search-cancel">Cancel</button>
       <p>
         <input type="text" required="required" class="msg-search-text"
-             data-l10n-id="message-search-input" />
+             dir="auto" data-l10n-id="message-search-input" />
         <button type="reset" data-l10n-id="form-clear-input"></button>
       </p>
     </form>
@@ -71,7 +71,7 @@ <h1 class="msg-listedit-header-label"></h1>
       <form role="search" class="msg-search-tease-bar msg-nonsearch-only">
         <p>
           <input class="msg-search-text-tease" type="text"
-               data-l10n-id="message-search-input" />
+               dir="auto" data-l10n-id="message-search-input" />
         </p>
       </form>
       <div class="msg-messages-container">

apps/email/js/cards/settings_account_credentials.html

@@ -18,7 +18,7 @@ <h1 class="tng-account-header-label header-label">AccounT NamE</h1>
         <h2 data-l10n-id="settings-username"
           class="tng-server-username-title">
             UsernamE</h2>
-        <input disabled class="tng-server-username-input" type="text" />
+        <input disabled class="tng-server-username-input" type="text" dir="auto" />
       </li>
       <li class="tng-account-server-password settings-input-list">
         <h2 data-l10n-id="settings-password"

apps/email/js/cards/settings_account_servers.html

@@ -19,13 +19,13 @@ <h2 class="tng-account-server-label">ServeR TypE</h2>
           class="tng-server-hostname-title">
             HostnamE</h2>
         <input disabled class="tng-server-hostname-input"
-          type="text" />
+          type="text" dir="auto" />
       </li>
       <li class="tng-account-server-port settings-input-list">
         <h2 data-l10n-id="settings-port"
           class="tng-server-port-title">PorT</h2>
         <input disabled class="tng-server-port-input"
-          type="text" />
+          type="text" dir="auto" />
       </li>
     </div>
     <!-- nothing is editable, nothing is saved; collapse. -->

apps/email/js/cards/setup_account_info.html

@@ -19,6 +19,7 @@
                data-l10n-id="setup-info-name"
                x-inputmode="verbatim"
                inputmode="verbatim"
+               dir="auto"
                required />
         <button type="reset"></button>
       </p>

apps/email/js/cards/setup_manual_config.html

@@ -20,6 +20,7 @@
                  data-l10n-id="setup-info-name"
                  x-inputmode="verbatim"
                  inputmode="verbatim"
+                 dir="auto"
                  required />
           <button type="reset"></button>
         </p>
@@ -67,6 +68,7 @@ <h2 data-l10n-id="setup-manual-account-type">AccounT TypE</h2>
                    data-l10n-id="setup-manual-hostname"
                    x-inputmode="verbatim"
                    inputmode="verbatim"
+                   dir="auto"
                    data-maybe-required />
             <button type="reset"></button>
           </p>
@@ -75,6 +77,7 @@ <h2 data-l10n-id="setup-manual-account-type">AccounT TypE</h2>
                    data-l10n-id="setup-manual-username"
                    x-inputmode="verbatim"
                    inputmode="verbatim"
+                   dir="auto"
                    data-maybe-required />
             <button type="reset"></button>
           </p>
@@ -97,7 +100,7 @@ <h2 data-l10n-id="setup-manual-account-type">AccounT TypE</h2>
           <p>
             <input class="sup-manual-composite-port" type="text"
                    data-l10n-id="setup-manual-port" value="993"
-                   data-maybe-required />
+                   dir="auto" data-maybe-required />
             <button type="reset"></button>
           </p>
         </div>
@@ -111,6 +114,7 @@ <h2 data-l10n-id="setup-manual-smtp-header">SmtP SettingS</h2>
                    data-l10n-id="setup-manual-hostname"
                    x-inputmode="verbatim"
                    inputmode="verbatim"
+                   dir="auto"
                    data-maybe-required />
             <button type="reset"></button>
           </p>
@@ -119,6 +123,7 @@ <h2 data-l10n-id="setup-manual-smtp-header">SmtP SettingS</h2>
                    data-l10n-id="setup-manual-username"
                    x-inputmode="verbatim"
                    inputmode="verbatim"
+                   dir="auto"
                    data-maybe-required />
             <button type="reset"></button>
           </p>
@@ -141,7 +146,7 @@ <h2 data-l10n-id="setup-manual-smtp-header">SmtP SettingS</h2>
           <p>
             <input class="sup-manual-smtp-port" type="text"
                    data-l10n-id="setup-manual-port" value="465"
-                   data-maybe-required />
+                   dir="auto" data-maybe-required />
             <button type="reset"></button>
           </p>
         </div>
@@ -159,13 +164,14 @@ <h2 data-l10n-id="setup-manual-activesync-header">
                    data-l10n-id="setup-manual-hostname"
                    x-inputmode="verbatim"
                    inputmode="verbatim"
+                   dir="auto"
                    data-maybe-required />
             <button type="reset"></button>
           </p>
           <p>
             <input class="sup-manual-activesync-username" type="text"
                    data-l10n-id="setup-manual-activesync-username"
-                   data-maybe-required />
+                   dir="auto" data-maybe-required />
             <button type="reset"></button>
           </p>
         </div>

apps/ftu/index.html

@@ -278,11 +278,11 @@ <h1 id="main-title"></h1>
           <form data-type="list">
             <ul>
               <li class="hidden">
-                <input type="text" id="wifi_ssid" value=""></input>
+                <input type="text" id="wifi_ssid" value="" dir="auto"></input>
               </li>
               <li>
                 <label id="label_wifi_user" for="wifi_user" data-l10n-id="identity">User</label>
-                <input type="text" id="wifi_user" data-l10n-id="identityInput" placeholder="User" x-inputmode="verbatim"></input>
+                <input type="text" id="wifi_user" data-l10n-id="identityInput" placeholder="User" x-inputmode="verbatim" dir="auto"></input>
               </li>
               <li>
                 <label for="wifi_password" data-l10n-id="password">Password</label>
@@ -304,7 +304,7 @@ <h1 id="main-title"></h1>
                 <label id="label_wifi_ssid" for="hidden-wifi-ssid" data-l10n-id="ssid-name">
                   SSID Network Name
                 </label>
-                <input type="text" name="wifi_ssid" id="hidden-wifi-ssid"/>
+                <input type="text" name="wifi_ssid" id="hidden-wifi-ssid" dir="auto"/>
               </li>
               <li>
                 <label id="label_wifi_security" for="hidden-wifi-security" data-l10n-id="security">
@@ -323,7 +323,7 @@ <h1 id="main-title"></h1>
                 <label id="label_wifi_identity" for="hidden-wifi-identity" data-l10n-id="identity">
                   Identity
                 </label>
-                <input type="text" name="wifi_identity" id="hidden-wifi-identity"/>
+                <input type="text" name="wifi_identity" id="hidden-wifi-identity" dir="auto"/>
               </li>
               <li>
                 <label id="label_hidden_wifi_password" for="hidden-wifi-password" data-l10n-id="password">

apps/homescreen/elements/edit_dialog.html

@@ -12,7 +12,7 @@ <h1 data-l10n-id="edit-dialog-header">Edit</h1>
       </header>
       <form>
         <label data-l10n-id="edit-dialog-name">
-          Website Name<input type="text" id="edit-dialog-name"></input>
+          Website Name<input type="text" id="edit-dialog-name" dir="auto"></input>
         </label>
         <label data-l10n-id="edit-dialog-url">
           Address <input type="url" id="edit-dialog-url"></input>

apps/homescreen/elements/search_page.html

@@ -53,7 +53,7 @@ <h2 class="title"></h2>
             <fieldset>
               <div id="search-q-bg">
                 <input type="text" id="search-q" name="search-q" maxlength="128" autocorrect="off" x-inputmode="verbatim"
-                data-l10n-id="evme-searchbar-default2"/>
+                data-l10n-id="evme-searchbar-default2" dir="auto"/>
               </div>
               <div id="helper-tip"><b></b></div>
             </fieldset>

apps/music/index.html

@@ -48,7 +48,7 @@ <h1 id="title-text" data-l10n-id="music">Music</h1>
         <form id="views-tiles-search" role="search" class="skin-dark">
           <button id="views-tiles-search-close" data-l10n-id="search-close" type="submit">close</button>
           <p>
-            <input id="views-tiles-search-input" type="text"
+            <input id="views-tiles-search-input" type="text" dir="auto"
                    data-l10n-id="search-music" placeholder="SearcH MusiC">
             <button id="views-tiles-search-clear" type="reset">Clear</button>
           </p>

apps/pdfjs/content/web/viewer.html

@@ -75,7 +75,7 @@ <h1 id="activityTitle"></h1>
         </button>
       </div>
       <div class="clearBoth"></div>
-      <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+      <textarea id="errorMoreInfo" hidden='true' readonly="readonly" dir="auto"></textarea>
     </div>
 
     <!-- BEGIN STUBS -->

apps/settings/elements/bluetooth.html

@@ -54,7 +54,7 @@ <h2 data-l10n-id="bluetooth-devices-in-area">Devices found</h2>
       <section>
         <h1 data-l10n-id="change-phone-name">Change phone name</h1>
         <p>
-          <input type="text" id="update-device-name-input" value=""/>
+          <input type="text" id="update-device-name-input" value="" dir="auto"/>
           <span data-l10n-id="change-phone-name-desc">Change the name of your device as it appears in your computer</span>
         </p>
       </section>