Bug 1550095 - Remove code duplication for forwarding Fluent strings in shadow DOM on the LoginItem. r=MattN,Pike
☠☠ backed out by 1be22e2d35d1 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Sat, 11 May 2019 02:04:37 +0000
changeset 532309 4a3dacc5d3b2edfa76b28800c9a4f53b144975a4
parent 532308 8f49dfc0e7442a9b239bb13c99dbf72f64063e51
child 532310 93a0674140fc007a0f2d378a90cc4b53b77734e0
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, Pike
bugs1550095
milestone68.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 1550095 - Remove code duplication for forwarding Fluent strings in shadow DOM on the LoginItem. r=MattN,Pike Differential Revision: https://phabricator.services.mozilla.com/D30538
browser/components/aboutlogins/content/aboutLogins.ftl
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-item.js
--- a/browser/components/aboutlogins/content/aboutLogins.ftl
+++ b/browser/components/aboutlogins/content/aboutLogins.ftl
@@ -11,13 +11,13 @@
 ### descendant after translation.
 
 about-logins-page-title = Login Manager
 
 login-list =
   .login-list-header = Logins
 
 login-item =
-  .login-item-hostname = Hostname
-  .login-item-password = Password
-  .login-item-username = Username
-  .login-item-time-created = Time Created
-  .login-item-delete = Delete
+  .delete-button = Delete
+  .hostname-label = Hostname
+  .password-label = Password
+  .time-created-label = Time Created
+  .username-label = Username
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -13,17 +13,21 @@
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list-item.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/aboutLogins.js"></script>
   </head>
   <body>
     <login-list data-l10n-id="login-list"
                 data-l10n-attrs="login-list-header"></login-list>
     <login-item data-l10n-id="login-item"
-                data-l10n-attrs="login-item-hostname, login-item-password, login-item-username, login-item-time-created, login-item-delete"></login-item>
+                data-l10n-attrs="delete-button,
+                                 hostname-label,
+                                 password-label,
+                                 time-created-label,
+                                 username-label"></login-item>
 
     <template id="login-list-template">
       <h2></h2>
       <pre>
       </pre>
     </template>
 
     <template id="login-list-item-template">
@@ -32,17 +36,17 @@
           font-weight: bold;
         }
       </style>
       <span class="login-list-item-hostname"></span>
       <span class="login-list-item-username"></span>
     </template>
 
     <template id="login-item-template">
-      <h2 data-l10n-id="login-item-header"></h2>
+      <h2 class="header"></h2>
       <label>
         <span class="hostname-label"></span>
         <input name="hostname"/>
       </label>
       <label>
         <span class="username-label"></span>
         <input name="username"/>
       </label>
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -23,48 +23,35 @@ class LoginItem extends HTMLElement {
 
     window.addEventListener("AboutLoginsLoginSelected", this);
 
     this.render();
   }
 
   static get observedAttributes() {
     return [
-      "login-item-delete",
-      "login-item-hostname",
-      "login-item-password",
-      "login-item-time-created",
-      "login-item-username",
+      "delete-button",
+      "hostname-label",
+      "password-label",
+      "time-created-label",
+      "username-label",
     ];
   }
 
   /* Fluent doesn't handle localizing into Shadow DOM yet so strings
      need to get reflected in to their targeted element. */
   attributeChangedCallback(attr, oldValue, newValue) {
     if (!this.shadowRoot) {
       return;
     }
 
-    switch (attr) {
-      case "login-item-delete":
-        this.shadowRoot.querySelector(".delete-button").textContent = newValue;
-        break;
-      case "login-item-hostname":
-        this.shadowRoot.querySelector(".hostname-label").textContent = newValue;
-        break;
-      case "login-item-password":
-        this.shadowRoot.querySelector(".password-label").textContent = newValue;
-        break;
-      case "login-item-time-created":
-        this.shadowRoot.querySelector(".time-created-label").textContent = newValue;
-        break;
-      case "login-item-username":
-        this.shadowRoot.querySelector(".username-label").textContent = newValue;
-        break;
-    }
+    // Strings that are reflected to their shadowed element are assigned
+    // to an attribute name that matches a className on the element.
+    let shadowedElement = this.shadowRoot.querySelector("." + attr);
+    shadowedElement.textContent = newValue;
   }
 
   render() {
     this.shadowRoot.querySelector("input[name='hostname']").value = this._login.hostname || "";
     this.shadowRoot.querySelector("input[name='username']").value = this._login.username || "";
     this.shadowRoot.querySelector("input[name='password']").value = this._login.password || "";
     this.shadowRoot.querySelector(".time-created").textContent = this._login.timeCreated || "";
   }