Bug 1550135 - Add a menuitem that links to Preferences. r=MattN,fluent-reviewers,flod

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

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

browser/components/BrowserGlue.jsm

@@ -37,6 +37,7 @@ let LEGACY_ACTORS = {
       events: {
         "AboutLoginsCreateLogin": {wantUntrusted: true},
         "AboutLoginsDeleteLogin": {wantUntrusted: true},
+        "AboutLoginsOpenPreferences": {wantUntrusted: true},
         "AboutLoginsOpenSite": {wantUntrusted: true},
         "AboutLoginsUpdateLogin": {wantUntrusted: true},
         "AboutLoginsInit": {wantUntrusted: true},
@@ -556,6 +557,7 @@ const listeners = {
   mm: {
     "AboutLogins:CreateLogin": ["AboutLoginsParent"],
     "AboutLogins:DeleteLogin": ["AboutLoginsParent"],
+    "AboutLogins:OpenPreferences": ["AboutLoginsParent"],
     "AboutLogins:OpenSite": ["AboutLoginsParent"],
     "AboutLogins:Subscribe": ["AboutLoginsParent"],
     "AboutLogins:UpdateLogin": ["AboutLoginsParent"],

browser/components/aboutlogins/AboutLoginsChild.jsm

@@ -39,6 +39,10 @@ class AboutLoginsChild extends ActorChild {
         this.mm.sendAsyncMessage("AboutLogins:DeleteLogin", {login: event.detail});
         break;
       }
+      case "AboutLoginsOpenPreferences": {
+        this.mm.sendAsyncMessage("AboutLogins:OpenPreferences");
+        break;
+      }
       case "AboutLoginsOpenSite": {
         this.mm.sendAsyncMessage("AboutLogins:OpenSite", {login: event.detail});
         break;

browser/components/aboutlogins/AboutLoginsParent.jsm

@@ -89,6 +89,10 @@ var AboutLoginsParent = {
         Services.logins.removeLogin(login);
         break;
       }
+      case "AboutLogins:OpenPreferences": {
+        message.target.ownerGlobal.openPreferences("privacy-logins");
+        break;
+      }
       case "AboutLogins:OpenSite": {
         let guid = message.data.login.guid;
         let logins = LoginHelper.searchLoginsWithObject({guid});

browser/components/aboutlogins/content/aboutLogins.ftl

@@ -53,3 +53,11 @@ master-password-notification-message = Please enter your master password to view
 master-password-reload-button-label = Log in
 # TODO: Not sure how to use formatValue with these as attributes on a single ID
 master-password-reload-button-accesskey = L
+
+menu-button =
+  .button-title = Open menu
+  .menuitem-preferences =
+    { PLATFORM() ->
+        [windows] Options
+       *[other] Preferences
+    }

browser/components/aboutlogins/content/aboutLogins.html

@@ -26,7 +26,9 @@
       <login-filter data-l10n-id="login-filter"
                     data-l10n-attrs="placeholder"></login-filter>
       <button id="create-login-button" data-l10n-id="create-login-button"></button>
-      <menu-button></menu-button>
+      <menu-button data-l10n-id="menu-button"
+                   data-l10n-attrs="button-title,
+                                    menuitem-preferences"></menu-button>
     </header>
     <login-list data-l10n-id="login-list"
                 data-l10n-args='{"count": 0}'
@@ -132,6 +134,7 @@
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/menu-button.css">
       <button class="menu-button alternate-button"></button>
       <ul class="menu" role="menu" aria-hidden="true">
+        <li role="menuitem" class="menuitem"><button class="menuitem-button menuitem-preferences alternate-button"></button></li>
       </ul>
     </template>
 

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

@@ -40,3 +40,24 @@
   right: auto;
   left: 0;
 }
+
+.menuitem-button {
+  padding: 4px 8px;
+  /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */
+  padding-inline-start: 32px;
+  background-repeat: no-repeat;
+  background-position: left 8px center;
+  background-size: 16px;
+  margin: 0;
+  border-radius: 0;
+  /* Override common.inc.css box-shadow on these buttons */
+  box-shadow: none !important;
+}
+
+.menuitem-button:dir(rtl) {
+  background-position: right 8px center;
+}
+
+.menuitem-preferences {
+  background-image: url("chrome://browser/skin/settings.svg");
+}

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

@@ -2,7 +2,9 @@
  * 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/. */
 
-export default class MenuButton extends HTMLElement {
+import ReflectedFluentElement from "chrome://browser/content/aboutlogins/components/reflected-fluent-element.js";
+
+export default class MenuButton extends ReflectedFluentElement {
   connectedCallback() {
     if (this.children.length) {
       return;
@@ -12,9 +14,28 @@ export default class MenuButton extends HTMLElement {
     this.attachShadow({mode: "open"})
         .appendChild(MenuButtonTemplate.content.cloneNode(true));
 
+    this.reflectFluentStrings();
+
     this.shadowRoot.querySelector(".menu-button").addEventListener("click", this);
   }
 
+  static get reflectedFluentIDs() {
+    return ["button-title", "menuitem-preferences"];
+  }
+
+  static get observedAttributes() {
+    return MenuButton.reflectedFluentIDs;
+  }
+
+  handleSpecialCaseFluentString(attrName) {
+    if (attrName != "button-title") {
+      return false;
+    }
+
+    this.shadowRoot.querySelector(".menu-button").setAttribute("title", this.getAttribute(attrName));
+    return true;
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "click": {
@@ -25,6 +46,13 @@ export default class MenuButton extends HTMLElement {
             event.originalTarget == this.shadowRoot.querySelector(".menu-button")) {
           return;
         }
+        if (event.originalTarget.classList.contains("menuitem-preferences")) {
+          document.dispatchEvent(new CustomEvent("AboutLoginsOpenPreferences", {
+            bubbles: true,
+          }));
+          this.hideMenu();
+          return;
+        }
         this.toggleMenu();
         break;
       }