Bug 1598717 - Make the line-height of the 3 password generation lines consistent. r=sfoster
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 04 Dec 2019 20:57:54 +0000
changeset 505573 58bfe894a732551164c906580dada97d91e41668
parent 505572 daf59b9083fb24d85cabe7c19f0a47d62b53cbb4
child 505574 62a4bef34ce79d5f4c75d8577aa8c7a2eff83d87
push id102349
push usermozilla@noorenberghe.ca
push dateWed, 04 Dec 2019 23:41:22 +0000
treeherderautoland@58bfe894a732 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1598717
milestone73.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1598717 - Make the line-height of the 3 password generation lines consistent. r=sfoster Also increase the min-width for password generation popups so at least en-US doesn't wrap. Depends on D55742 Differential Revision: https://phabricator.services.mozilla.com/D55743
browser/base/content/browser.css
browser/themes/shared/autocomplete.inc.css
toolkit/content/widgets/autocomplete-richlistitem.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -697,17 +697,17 @@ toolbar:not(#TabsToolbar) > #personal-bo
 /* Define the minimum width based on the style of result rows.
    The order of the min-width rules below must be in increasing order. */
 #PopupAutoComplete[resultstyles~="loginsFooter"],
 #PopupAutoComplete[resultstyles~="insecureWarning"] {
   min-width: 17em;
 }
 
 #PopupAutoComplete[resultstyles~="generatedPassword"] {
-  min-width: 21em;
+  min-width: 22em;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
   height: auto;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .ac-site-icon,
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@@ -96,21 +96,25 @@
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] {
   /* Workaround bug 451997 and/or bug 492645 */
   display: block;
 }
 
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label > span {
+  /* The font-family is only adjusted on the inner span so that the
+     line-height of .line2-label matches that of .line1-label */
   font-family: monospace;
 }
 
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave > span {
+  /* The font-* properties are only adjusted on the inner span so that the
+     line-height of .generated-password-autosave matches that of .line1-label */
   font-style: italic;
   font-size: 0.85em;
   white-space: normal;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"],
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] {
   /* Separator between logins and generated passwords. This uses --panel-separator-color from default
--- a/toolkit/content/widgets/autocomplete-richlistitem.js
+++ b/toolkit/content/widgets/autocomplete-richlistitem.js
@@ -718,18 +718,25 @@
       this.querySelector(".line2-label").textContent = details.comment;
     }
   }
 
   class MozAutocompleteGeneratedPasswordRichlistitem extends MozAutocompleteTwoLineRichlistitem {
     constructor() {
       super();
 
+      // Line 2 and line 3 both display text with a different line-height than
+      // line 1 but we want the line-height to be the same so we wrap the text
+      // in <span> and only adjust the line-height via font CSS properties on them.
+      this.generatedPasswordText = document.createElement("span");
+
+      this.line3Text = document.createElement("span");
       this.line3 = document.createElement("div");
       this.line3.className = "label-row generated-password-autosave";
+      this.line3.append(this.line3Text);
     }
 
     get _autoSaveString() {
       if (!this.__autoSaveString) {
         let brandShorterName = Services.strings
           .createBundle("chrome://branding/locale/brand.properties")
           .GetStringFromName("brandShorterName");
         this.__autoSaveString = Services.strings
@@ -740,22 +747,27 @@
       }
       return this.__autoSaveString;
     }
 
     _adjustAcItem() {
       let { generatedPassword, willAutoSaveGeneratedPassword } = JSON.parse(
         this.getAttribute("ac-label")
       );
-      this.querySelector(".line2-label").textContent = generatedPassword;
+      let line2Label = this.querySelector(".line2-label");
+      line2Label.textContent = "";
+      this.generatedPasswordText.textContent = generatedPassword;
+      line2Label.append(this.generatedPasswordText);
 
-      this.line3.textContent = willAutoSaveGeneratedPassword
-        ? this._autoSaveString
-        : "";
-      this.querySelector(".labels-wrapper").append(this.line3);
+      if (willAutoSaveGeneratedPassword) {
+        this.line3Text.textContent = this._autoSaveString;
+        this.querySelector(".labels-wrapper").append(this.line3);
+      } else {
+        this.line3.remove();
+      }
 
       super._adjustAcItem();
     }
   }
 
   customElements.define(
     "autocomplete-richlistitem",
     MozElements.MozAutocompleteRichlistitem,