Bug 1550095 - Remove code duplication for forwarding Fluent strings in shadow DOM on the LoginItem. r=MattN,Pike
☠☠ backed out by 54f367c785cb ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 21:29:02 +0000
changeset 535355 b1519a245b748b1f8b0e938f97e4f20980125c0f
parent 535354 5b16530634db7c61169f6adf32acda2b96922fad
child 535356 9f3df400296282c8f0319bc322138dba94d4d8c6
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [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 || "";
   }