Bug 1577271 - Align the website, username and password text to the correct side while maintaining the LTR directionality r=jaws

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -112,8 +112,8 @@
           <img class="favicon" src="" alt=""/>
         </div>
         <div class="labels">
-          <span class="title"></span>
-          <span class="username"></span>
+          <span class="title" dir="auto"></span>
+          <span class="username" dir="ltr"></span>
         </div>
       </li>
     </template>
@@ -182,6 +182,7 @@
               <input type="text"
                      name="username"
                      data-l10n-id="login-item-username"
+                     dir="ltr"
                      readonly/>
             </label>
             <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
@@ -197,6 +198,7 @@
               <div class="reveal-password-wrapper">
                 <input type="password"
                        name="password"
+                       dir="ltr"
                        required
                        readonly/>
                 <input type="checkbox"

browser/components/aboutlogins/content/components/login-item.css

@@ -31,6 +31,12 @@ form {
   display: none;
 }
 
+input[type="password"],
+input[type="text"],
+input[type="url"] {
+  text-align: match-parent !important; /* override `all: unset` in the rule below */
+}
+
 input[type="password"][readOnly],
 input[type="text"][readOnly],
 input[type="url"][readOnly] {
@@ -41,12 +47,21 @@ input[type="url"][readOnly] {
   background-color: transparent !important; /* override common.inc.css */
   text-overflow: ellipsis;
   overflow: hidden;
-  text-align: match-parent;
 }
 
-.detail-cell input:not([type="checkbox"]),
+/* We can't use `margin-inline-start` here because we force
+ * the input to have dir="ltr", so we set the margin manually
+ * using the parent element's directionality. */
+.detail-cell:dir(ltr) input:not([type="checkbox"]) {
+  margin-left: 0;
+}
+
+.detail-cell:dir(rtl) input:not([type="checkbox"]) {
+  margin-right: 0;
+}
+
 .save-changes-button {
-  margin-inline-start: 0; /* align all elements on the start side */
+  margin-inline-start: 0; /* Align the button on the start side */
 }
 
 .header {
@@ -186,8 +201,8 @@ input[type="url"][readOnly]:hover:active {
   width: 40px;
 }
 
-:host(:not([editing])) input[name='password'] {
-  font-family: monospace;
+input[name="password"] {
+  font-family: monospace !important; /* override `all: unset` in the rule above */
 }
 
 .reveal-password-checkbox {