Bug 1559355 - Add underscore prefixes to private methods. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D35115

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/components/login-filter.js

@@ -25,7 +25,7 @@ export default class LoginFilter extends ReflectedFluentElement {
   handleEvent(event) {
     switch (event.type) {
       case "input": {
-        this.dispatchFilterEvent(event.originalTarget.value);
+        this._dispatchFilterEvent(event.originalTarget.value);
         break;
       }
     }
@@ -45,7 +45,7 @@ export default class LoginFilter extends ReflectedFluentElement {
 
   set value(val) {
     this._input.value = val;
-    this.dispatchFilterEvent(val);
+    this._dispatchFilterEvent(val);
   }
 
   handleSpecialCaseFluentString(attrName) {
@@ -58,7 +58,7 @@ export default class LoginFilter extends ReflectedFluentElement {
     return true;
   }
 
-  dispatchFilterEvent(value) {
+  _dispatchFilterEvent(value) {
     this.dispatchEvent(new CustomEvent("AboutLoginsFilterLogins", {
       bubbles: true,
       composed: true,

browser/components/aboutlogins/content/components/login-item.js

@@ -111,7 +111,7 @@ export default class LoginItem extends ReflectedFluentElement {
       }
       case "password-hide-title":
       case "password-show-title": {
-        this.updatePasswordRevealState();
+        this._updatePasswordRevealState();
         break;
       }
       case "username-placeholder": {
@@ -136,7 +136,7 @@ export default class LoginItem extends ReflectedFluentElement {
     this._originInput.defaultValue = this._login.origin || "";
     this._usernameInput.defaultValue = this._login.username || "";
     this._passwordInput.defaultValue = this._login.password || "";
-    this.updatePasswordRevealState();
+    this._updatePasswordRevealState();
   }
 
   handleEvent(event) {
@@ -159,7 +159,7 @@ export default class LoginItem extends ReflectedFluentElement {
       case "click": {
         let classList = event.target.classList;
         if (classList.contains("reveal-password-checkbox")) {
-          this.updatePasswordRevealState();
+          this._updatePasswordRevealState();
 
           let method = this._revealCheckbox.checked ? "show" : "hide";
           recordTelemetryEvent({object: "password", method});
@@ -174,7 +174,7 @@ export default class LoginItem extends ReflectedFluentElement {
           } else {
             // TODO, should select the first login if it exists
             // or show the no-logins view otherwise
-            this.toggleEditing();
+            this._toggleEditing();
             this.render();
           }
 
@@ -194,7 +194,7 @@ export default class LoginItem extends ReflectedFluentElement {
           return;
         }
         if (classList.contains("edit-button")) {
-          this.toggleEditing();
+          this._toggleEditing();
 
           recordTelemetryEvent({object: "existing_login", method: "edit"});
           return;
@@ -249,7 +249,7 @@ export default class LoginItem extends ReflectedFluentElement {
     } else {
       this.dataset.isNewLogin = true;
     }
-    this.toggleEditing(!login.guid);
+    this._toggleEditing(!login.guid);
 
     this._revealCheckbox.checked = false;
 
@@ -269,7 +269,7 @@ export default class LoginItem extends ReflectedFluentElement {
       return;
     }
 
-    this.toggleEditing(false);
+    this._toggleEditing(false);
     this._login = login;
     this.render();
   }
@@ -286,7 +286,7 @@ export default class LoginItem extends ReflectedFluentElement {
       return;
     }
 
-    this.toggleEditing(false);
+    this._toggleEditing(false);
     this._login = login;
     this.render();
   }
@@ -303,55 +303,11 @@ export default class LoginItem extends ReflectedFluentElement {
       return;
     }
 
-    this.toggleEditing(false);
+    this._toggleEditing(false);
     this._login = {};
     this.render();
   }
 
-  /**
-   * Toggles the login-item view from editing to non-editing mode.
-   *
-   * @param {boolean} force When true puts the form in 'edit' mode, otherwise
-   *                        puts the form in read-only mode.
-   */
-  toggleEditing(force) {
-    let shouldEdit = force !== undefined ? force : !this.dataset.editing;
-
-    if (!shouldEdit) {
-      delete this.dataset.isNewLogin;
-    }
-
-    if (shouldEdit) {
-      this._passwordInput.style.removeProperty("width");
-    } else {
-      // Need to set a shorter width than -moz-available so the reveal checkbox
-      // will still appear next to the password.
-      this._passwordInput.style.width = (this._login.password || "").length + "ch";
-    }
-
-    this._deleteButton.disabled = this.dataset.isNewLogin;
-    this._editButton.disabled = shouldEdit;
-    this._originInput.readOnly = !this.dataset.isNewLogin;
-    this._usernameInput.readOnly = !shouldEdit;
-    this._passwordInput.readOnly = !shouldEdit;
-    if (shouldEdit) {
-      this.dataset.editing = true;
-    } else {
-      delete this.dataset.editing;
-    }
-  }
-
-  updatePasswordRevealState() {
-    let labelAttr = this._revealCheckbox.checked ? "password-show-title"
-                                                 : "password-hide-title";
-    this._revealCheckbox.setAttribute("aria-label", this.getAttribute(labelAttr));
-    this._revealCheckbox.setAttribute("title", this.getAttribute(labelAttr));
-
-    let {checked} = this._revealCheckbox;
-    let inputType = checked ? "type" : "password";
-    this._passwordInput.setAttribute("type", inputType);
-  }
-
   /**
    * Checks that the edit/new-login form has valid values present for their
    * respective required fields.
@@ -384,5 +340,49 @@ export default class LoginItem extends ReflectedFluentElement {
       origin: this._originInput.value.trim(),
     };
   }
+
+  /**
+   * Toggles the login-item view from editing to non-editing mode.
+   *
+   * @param {boolean} force When true puts the form in 'edit' mode, otherwise
+   *                        puts the form in read-only mode.
+   */
+  _toggleEditing(force) {
+    let shouldEdit = force !== undefined ? force : !this.dataset.editing;
+
+    if (!shouldEdit) {
+      delete this.dataset.isNewLogin;
+    }
+
+    if (shouldEdit) {
+      this._passwordInput.style.removeProperty("width");
+    } else {
+      // Need to set a shorter width than -moz-available so the reveal checkbox
+      // will still appear next to the password.
+      this._passwordInput.style.width = (this._login.password || "").length + "ch";
+    }
+
+    this._deleteButton.disabled = this.dataset.isNewLogin;
+    this._editButton.disabled = shouldEdit;
+    this._originInput.readOnly = !this.dataset.isNewLogin;
+    this._usernameInput.readOnly = !shouldEdit;
+    this._passwordInput.readOnly = !shouldEdit;
+    if (shouldEdit) {
+      this.dataset.editing = true;
+    } else {
+      delete this.dataset.editing;
+    }
+  }
+
+  _updatePasswordRevealState() {
+    let labelAttr = this._revealCheckbox.checked ? "password-show-title"
+                                                 : "password-hide-title";
+    this._revealCheckbox.setAttribute("aria-label", this.getAttribute(labelAttr));
+    this._revealCheckbox.setAttribute("title", this.getAttribute(labelAttr));
+
+    let {checked} = this._revealCheckbox;
+    let inputType = checked ? "type" : "password";
+    this._passwordInput.setAttribute("type", inputType);
+  }
 }
 customElements.define("login-item", LoginItem);

browser/components/aboutlogins/content/components/login-list.js

@@ -67,38 +67,6 @@ export default class LoginList extends ReflectedFluentElement {
     document.l10n.setAttributes(this, "login-list", {count: visibleLoginCount});
   }
 
-  /**
-   * Filters the displayed logins in the list to only those matching the
-   * cached filter value.
-   */
-  _applyFilter() {
-    let matchingLoginGuids;
-    if (this._filter) {
-      matchingLoginGuids = this._logins.filter(login => {
-        return login.origin.toLocaleLowerCase().includes(this._filter) ||
-               login.username.toLocaleLowerCase().includes(this._filter);
-      }).map(login => login.guid);
-    } else {
-      matchingLoginGuids = this._logins.map(login => login.guid);
-    }
-
-    for (let listItem of this._list.querySelectorAll("login-list-item")) {
-      if (!listItem.dataset.guid) {
-        // Don't hide the 'New Login' item if it is present.
-        continue;
-      }
-      if (matchingLoginGuids.includes(listItem.dataset.guid)) {
-        if (listItem.hidden) {
-          listItem.hidden = false;
-        }
-      } else if (!listItem.hidden) {
-        listItem.hidden = true;
-      }
-    }
-
-    return matchingLoginGuids.length;
-  }
-
   handleEvent(event) {
     switch (event.type) {
       case "change": {
@@ -194,5 +162,37 @@ export default class LoginList extends ReflectedFluentElement {
     this._logins = this._logins.filter(l => l.guid != login.guid);
     this.render();
   }
+
+  /**
+   * Filters the displayed logins in the list to only those matching the
+   * cached filter value.
+   */
+  _applyFilter() {
+    let matchingLoginGuids;
+    if (this._filter) {
+      matchingLoginGuids = this._logins.filter(login => {
+        return login.origin.toLocaleLowerCase().includes(this._filter) ||
+               login.username.toLocaleLowerCase().includes(this._filter);
+      }).map(login => login.guid);
+    } else {
+      matchingLoginGuids = this._logins.map(login => login.guid);
+    }
+
+    for (let listItem of this._list.querySelectorAll("login-list-item")) {
+      if (!listItem.dataset.guid) {
+        // Don't hide the 'New Login' item if it is present.
+        continue;
+      }
+      if (matchingLoginGuids.includes(listItem.dataset.guid)) {
+        if (listItem.hidden) {
+          listItem.hidden = false;
+        }
+      } else if (!listItem.hidden) {
+        listItem.hidden = true;
+      }
+    }
+
+    return matchingLoginGuids.length;
+  }
 }
 customElements.define("login-list", LoginList);

browser/components/aboutlogins/content/components/menu-button.js

@@ -68,37 +68,37 @@ export default class MenuButton extends ReflectedFluentElement {
           document.dispatchEvent(new CustomEvent(eventName, {
             bubbles: true,
           }));
-          this.hideMenu();
+          this._hideMenu();
           break;
         }
-        this.toggleMenu();
+        this._toggleMenu();
         break;
       }
     }
   }
 
-  /**
-   * Toggles the visibility of the menu.
-   */
-  toggleMenu() {
-    let wasHidden = this._menu.hidden;
-    if (wasHidden) {
-      this.showMenu();
-    } else {
-      this.hideMenu();
-    }
-  }
-
-  hideMenu() {
+  _hideMenu() {
     this._menu.hidden = true;
     document.documentElement.removeEventListener("click", this, true);
   }
 
-  showMenu() {
+  _showMenu() {
     this._menu.hidden = false;
 
     // Add a catch-all event listener to close the menu.
     document.documentElement.addEventListener("click", this, true);
   }
+
+  /**
+   * Toggles the visibility of the menu.
+   */
+  _toggleMenu() {
+    let wasHidden = this._menu.hidden;
+    if (wasHidden) {
+      this._showMenu();
+    } else {
+      this._hideMenu();
+    }
+  }
 }
 customElements.define("menu-button", MenuButton);

browser/components/aboutlogins/content/components/reflected-fluent-element.js

@@ -3,33 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export default class ReflectedFluentElement extends HTMLElement {
-  _isReflectedAttributePresent(attr) {
-    return this.constructor.reflectedFluentIDs.includes(attr.name);
-  }
-
   connectedCallback() {
-    this.reflectFluentStrings();
-  }
-
-  /*
-   * Called to apply any localized strings that Fluent may have applied
-   * to the element before the custom element was defined.
-   */
-  reflectFluentStrings() {
-    for (let reflectedFluentID of this.constructor.reflectedFluentIDs) {
-      if (this.hasAttribute(reflectedFluentID)) {
-        if (this.handleSpecialCaseFluentString &&
-            this.handleSpecialCaseFluentString(reflectedFluentID)) {
-          continue;
-        }
-
-        let attrValue = this.getAttribute(reflectedFluentID);
-        // 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("." + reflectedFluentID);
-        shadowedElement.textContent = attrValue;
-      }
-    }
+    this._reflectFluentStrings();
   }
 
   /*
@@ -56,5 +31,30 @@ export default class ReflectedFluentElement extends HTMLElement {
     let shadowedElement = this.shadowRoot.querySelector("." + attr);
     shadowedElement.textContent = newValue;
   }
+
+  _isReflectedAttributePresent(attr) {
+    return this.constructor.reflectedFluentIDs.includes(attr.name);
+  }
+
+  /*
+   * Called to apply any localized strings that Fluent may have applied
+   * to the element before the custom element was defined.
+   */
+  _reflectFluentStrings() {
+    for (let reflectedFluentID of this.constructor.reflectedFluentIDs) {
+      if (this.hasAttribute(reflectedFluentID)) {
+        if (this.handleSpecialCaseFluentString &&
+            this.handleSpecialCaseFluentString(reflectedFluentID)) {
+          continue;
+        }
+
+        let attrValue = this.getAttribute(reflectedFluentID);
+        // 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("." + reflectedFluentID);
+        shadowedElement.textContent = attrValue;
+      }
+    }
+  }
 }
 customElements.define("reflected-fluent-element", ReflectedFluentElement);