Bug 1549809 - Stub out LoginFilter custom element. r?MattN draft
authorpulselistener
Sun, 12 May 2019 01:37:01 +0000
changeset 1993840 3e100ffaa027313bf393384f3ca4f0139811261b
parent 1993839 7a54d4cfd536af9693451e9528ea934bba919d95
child 1993841 7bd021939dd296033c6c36adea3d41f1e0304807
push id360343
push userreviewbot
push dateSun, 12 May 2019 01:37:27 +0000
treeherdertry@7bd021939dd2 [default view] [failures only]
reviewersMattN
bugs1549809
milestone68.0a1
Bug 1549809 - Stub out LoginFilter custom element. r?MattN Differential Revision: https://phabricator.services.mozilla.com/D30753 Differential Diff: PHID-DIFF-ag7hlbsfgojbd5vrftyp
browser/components/aboutlogins/content/aboutLogins.ftl
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-filter.css
browser/components/aboutlogins/content/components/login-filter.js
browser/components/aboutlogins/jar.mn
--- a/browser/components/aboutlogins/content/aboutLogins.ftl
+++ b/browser/components/aboutlogins/content/aboutLogins.ftl
@@ -7,16 +7,19 @@
 ### and strings are likely to change often.
 
 ### Fluent isn't translating elements in the shadow DOM so the translated strings
 ### need to be applied to the composed node where they can be moved to the proper
 ### descendant after translation.
 
 about-logins-page-title = Login Manager
 
+login-filter =
+  .placeholder = Search Logins
+
 login-list =
   .login-list-header = Logins
 
 login-item =
   .cancel-button = Cancel
   .delete-button = Delete
   .hostname-label = Website Address
   .password-label = Password
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -4,23 +4,26 @@
 
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; object-src 'none'; script-src resource: chrome:; connect-src https:; img-src https: data: blob:; style-src 'unsafe-inline';"/>
     <title data-l10n-id="about-logins-page-title"></title>
     <link rel="localization" href="browser/aboutLogins.ftl">
+    <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-filter.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-item.js"></script>
     <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>
     <link rel="stylesheet" type="text/css" href="chrome://global/skin/in-content/common.css">
   </head>
   <body>
+    <login-filter data-l10n-id="login-filter"
+                  data-l10n-attrs="placeholder"></login-filter>
     <login-list data-l10n-id="login-list"
                 data-l10n-attrs="login-list-header"></login-list>
     <login-item data-l10n-id="login-item"
                 data-l10n-args='{"timeCreated": 0, "timeChanged": 0, "timeUsed": 0}'
                 data-l10n-attrs="cancel-button,
                                  delete-button,
                                  hostname-label,
                                  password-label,
@@ -60,10 +63,15 @@
         <input type="password" name="password"/>
       </label>
       <p class="time-created meta-info"></p>
       <p class="time-changed meta-info"></p>
       <p class="time-used meta-info"></p>
       <button class="save-changes-button"></button>
       <button class="cancel-button"></button>
     </template>
+
+    <template id="login-filter-template">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-filter.css">
+      <input type="text"/>
+    </template>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-filter.css
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-filter.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+class LoginFilter extends HTMLElement {
+  connectedCallback() {
+    if (this.children.length) {
+      return;
+    }
+
+    let loginFilterTemplate = document.querySelector("#login-filter-template");
+    this.attachShadow({mode: "open"})
+        .appendChild(loginFilterTemplate.content.cloneNode(true));
+  }
+
+  static get observedAttributes() {
+    return ["placeholder"];
+  }
+
+  /* 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 "placeholder":
+        this.shadowRoot.querySelector("input").placeholder = newValue;
+        break;
+    }
+  }
+}
+customElements.define("login-filter", LoginFilter);
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -1,13 +1,15 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
+  content/browser/aboutlogins/components/login-filter.css      (content/components/login-filter.css)
+  content/browser/aboutlogins/components/login-filter.js       (content/components/login-filter.js)
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
   content/browser/aboutlogins/components/login-list.css        (content/components/login-list.css)
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
   content/browser/aboutlogins/components/login-list-item.css   (content/components/login-list-item.css)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)