Bug 1948391 - Move creating a login to the "More actions" dropdown menu. r=credential-management-reviewers,rsafaeian

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

toolkit/components/satchel/megalist/content/MegalistAlpha.mjs

@@ -85,18 +85,6 @@ export class MegalistAlpha extends MozLitElement {
     await Promise.all(passwordCards.map(el => el.updateComplete));
   }
 
-  async updated(changedProperties) {
-    if (changedProperties.has("viewMode")) {
-      const mozButton = this.shadowRoot.querySelector("#create-login-button");
-      await mozButton.updateComplete;
-      // Need to set aria-expanded on the button element of the moz-button for screen readers to announce the change.
-      mozButton.buttonEl.setAttribute(
-        "aria-expanded",
-        this.viewMode === VIEW_MODES.ADD ? "true" : "false"
-      );
-    }
-  }
-
   #onPasswordRevealClick(concealed, lineIndex) {
     if (concealed) {
       this.#messageToViewModel("Command", {
@@ -578,14 +566,7 @@ export class MegalistAlpha extends MozLitElement {
 
   renderFirstRow() {
     return html`<div class="first-row">
-      ${this.renderSearch()}
-      <moz-button
-        id="create-login-button"
-        @click=${() => this.#onAddButtonClick("toolbar")}
-        data-l10n-id="create-login-button"
-        type="icon"
-        iconSrc="chrome://global/skin/icons/plus.svg"
-      ></moz-button>
+      ${this.renderSearch()} ${this.renderMenu()}
     </div>`;
   }
 
@@ -638,6 +619,11 @@ export class MegalistAlpha extends MozLitElement {
         aria-labelledby="more-options-menubutton"
         data-l10n-id="more-options-popup"
       >
+        <panel-item
+          action="add-password"
+          data-l10n-id="passwords-command-create"
+          @click=${() => this.#onAddButtonClick("toolbar")}
+        ></panel-item>
         <panel-item
           action="import-from-browser"
           data-l10n-id="passwords-command-import-from-browser"
@@ -669,7 +655,7 @@ export class MegalistAlpha extends MozLitElement {
             this.#sendCommand("RemoveAll");
             this.#recordToolbarAction("remove_all", "toolbar");
           }}
-          ?disabled=${!this.header.value.total}
+          ?disabled=${!this.header?.value.total}
         ></panel-item>
         <hr />
         <panel-item
@@ -703,9 +689,7 @@ export class MegalistAlpha extends MozLitElement {
       return "";
     }
 
-    return html`<div class="second-row">
-      ${this.renderRadioButtons()} ${this.renderMenu()}
-    </div>`;
+    return html`<div class="second-row">${this.renderRadioButtons()}</div>`;
   }
 
   async #scrollPasswordCardIntoView(guid) {

toolkit/components/satchel/megalist/content/tests/browser/browser_passwords_create_login.js

@@ -13,14 +13,26 @@ add_setup(async function () {
   registerCleanupFunction(LoginTestUtils.clearData);
 });
 
-async function openLoginForm(megalist, selector = ".first-row > moz-button") {
+const getShadowBtn = (el, selector) =>
+  el.querySelector(selector).shadowRoot.querySelector("button");
+
+async function openLoginForm(megalist, isFromMenuDropdown = true) {
   info("Opening login form.");
-  const addButton = megalist.querySelector(selector);
+
+  let button = megalist.querySelector(".empty-state-add-password");
+  if (isFromMenuDropdown) {
+    const menu = megalist.querySelector("panel-list");
+    const menuButton = megalist.querySelector("#more-options-menubutton");
+    menuButton.click();
+    await BrowserTestUtils.waitForEvent(menu, "shown");
+    button = getShadowBtn(menu, "[action='add-password']");
+  }
+
   const loginFormPromise = BrowserTestUtils.waitForCondition(
     () => megalist.querySelector("login-form"),
     "Login form failed to load."
   );
-  addButton.buttonEl.click();
+  button.click();
   return loginFormPromise;
 }
 
@@ -169,7 +181,7 @@ add_task(async function test_passwords_add_password_empty_state() {
   ok(true, "Empty state rendered.");
 
   info("Add a password via empty state");
-  await openLoginForm(megalist, ".empty-state-add-password");
+  await openLoginForm(megalist, false);
   let events = Glean.contextualManager.toolbarAction.testGetValue();
   assertCPMGleanEvent(events[0], {
     trigger: "empty_state_card",