Bug 1577271 - Align the website, username and password text to the correct side while maintaining the LTR directionality r=jaws
authorItiel <itiel_yn8@walla.com>
Thu, 05 Sep 2019 17:43:04 +0000
changeset 555098 7e9348302935d301f1e1041f0ddce50238793ee5
parent 555097 2c7f082a865022a45197d3ff60d3bfcfaa6993a4
child 555099 5ccd67751287a0a70811a23e52ac3efc2c870122
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1577271
milestone70.0
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
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-item.css
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -107,18 +107,18 @@
     </template>
 
     <template id="login-list-item-template">
       <li class="login-list-item" role="option">
         <div class="favicon-wrapper">
           <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>
 
     <template id="login-intro-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-intro.css">
@@ -177,31 +177,33 @@
         </div>
         <div class="detail-row">
           <div class="detail-row-contents">
             <label class="detail-cell">
               <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
               <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">
               <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
               <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
             </button>
           </div>
         </div>
         <div class="detail-row">
           <div class="detail-row-contents">
             <label class="detail-cell">
               <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
               <div class="reveal-password-wrapper">
                 <input type="password"
                        name="password"
+                       dir="ltr"
                        required
                        readonly/>
                 <input type="checkbox"
                        class="reveal-password-checkbox"
                        data-l10n-id="login-item-password-reveal-checkbox"/>
               </div>
             </label>
             <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -26,32 +26,47 @@ form {
 :host([data-is-new-login]) .meta-info,
 :host([data-is-new-login]) login-footer,
 :host([data-is-new-login]) .login-item-title,
 :host(:not([data-is-new-login])) .new-login-title,
 :host(:not([data-editing])) .form-actions-row {
   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] {
   all: unset;
   font-size: 1.1em;
   display: inline-block;
   width: -moz-available;
   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 {
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--in-content-box-border-color);
   margin-bottom: 40px;
 }
@@ -181,18 +196,18 @@ input[type="url"][readOnly]:hover:active
 .meta-info:first-of-type::before {
   content: "";
   display: block;
   margin-bottom: 20px;
   border-top: 1px solid var(--in-content-box-border-color);
   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 {
   /* !important is needed to override common.css styling for checkboxes */
   background-color: transparent !important;
   border-width: 0 !important;
   background-image: url("chrome://browser/content/aboutlogins/icons/show-password.svg") !important;
   margin-inline: 10px 0 !important;