Bug 1575905 - Part 2: Surface enable/disable button on theme cards r=rpl,Gijs

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

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

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -195,10 +195,6 @@ addon-card[expanded] .addon-card-message {
   flex-direction: column;
 }
 
-.card-actions {
-  flex-shrink: 0;
-}
-
 .addon-name-container {
   /* Subtract the top line-height so the text and icon align at the top. */
   margin-top: -3px;
@@ -244,6 +240,15 @@ addon-card[expanded] .addon-card-message {
   -moz-context-properties: fill;
 }
 
+.theme-enable-button {
+  min-width: auto;
+  height: auto;
+  font-size: 13px;
+  min-height: auto;
+  height: 24px;
+  margin: 0;
+}
+
 .addon-description {
   font-size: 14px;
   line-height: 20px;
@@ -276,12 +281,6 @@ addon-card:not([expanded]) .addon-description {
   height: 32px;
 }
 
-.more-options-menu {
-  /* Add some negative margin to account for the button's padding */
-  margin-top: -10px;
-  margin-inline-end: -8px;
-}
-
 /* Recommended add-ons on list views */
 .recommended-heading {
   margin-top: 48px;
@@ -438,6 +437,7 @@ addon-details {
   width: 24px;
   height: 24px;
   margin: 0;
+  margin-inline-start: 8px;
   -moz-context-properties: fill;
   fill: currentColor;
   background-image: url("chrome://global/skin/icons/more.svg");

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -119,18 +119,18 @@
                  data-l10n-id="addon-badge-private-browsing-allowed2"
                  hidden>
               </a>
+              <div class="spacer"></div>
+              <button class="theme-enable-button" action="toggle-disabled" hidden></button>
+              <button
+                class="more-options-button"
+                action="more-options"
+                data-l10n-id="addon-options-button"
+                aria-haspopup="menu"
+                aria-expanded="false"></button>
             </div>
             <!-- This ends up in the tab order when the ellipsis happens, but it isn't necessary. -->
             <span class="addon-description" tabindex="-1"></span>
           </div>
-          <div class="more-options-menu">
-            <button
-              class="more-options-button ghost-button"
-              action="more-options"
-              data-l10n-id="addon-options-button"
-              aria-haspopup="menu"
-              aria-expanded="false"></button>
-          </div>
         </div>
         <message-bar class="addon-card-message" align="center" hidden>
           <span></span>

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -1639,12 +1639,18 @@ class AddonOptions extends HTMLElement {
       case "report":
         el.hidden = !isAbuseReportSupported(addon);
         break;
-      case "toggle-disabled": {
-        let toggleDisabledAction = addon.userDisabled ? "enable" : "disable";
-        document.l10n.setAttributes(el, `${toggleDisabledAction}-addon-button`);
-        el.hidden = !hasPermission(addon, toggleDisabledAction);
+      case "toggle-disabled":
+        if (addon.type == "theme") {
+          el.remove();
+        } else {
+          let toggleDisabledAction = addon.userDisabled ? "enable" : "disable";
+          document.l10n.setAttributes(
+            el,
+            `${toggleDisabledAction}-addon-button`
+          );
+          el.hidden = !hasPermission(addon, toggleDisabledAction);
+        }
         break;
-      }
       case "install-update":
         el.hidden = !updateInstall;
         break;
@@ -2731,6 +2737,19 @@ class AddonCard extends HTMLElement {
     }
     name.title = `${addon.name} ${addon.version}`;
 
+    let toggleDisabledAction = addon.userDisabled ? "enable" : "disable";
+    let canToggleDisabled = hasPermission(addon, toggleDisabledAction);
+    let toggleDisabledButton = card.querySelector('[action="toggle-disabled"]');
+    if (toggleDisabledButton) {
+      toggleDisabledButton.hidden = !canToggleDisabled;
+      if (addon.type === "theme") {
+        document.l10n.setAttributes(
+          toggleDisabledButton,
+          `${toggleDisabledAction}-addon-button`
+        );
+      }
+    }
+
     // Set the items in the more options menu.
     this.options.update(this, addon, this.updateInstall);
 
@@ -2824,6 +2843,11 @@ class AddonCard extends HTMLElement {
 
     this.card = importTemplate("card").firstElementChild;
 
+    // Remove the toggle-disabled button(s) based on type.
+    if (addon.type != "theme") {
+      this.card.querySelector(".theme-enable-button").remove();
+    }
+
     let nameContainer = this.card.querySelector(".addon-name-container");
     let headingLevel = this.expanded ? "h1" : "h3";
     let nameHeading = document.createElement(headingLevel);
@@ -2842,7 +2866,7 @@ class AddonCard extends HTMLElement {
     let panelType = addon.type == "plugin" ? "plugin-options" : "addon-options";
     this.options = document.createElement(panelType);
     this.options.render();
-    this.card.querySelector(".more-options-menu").appendChild(this.options);
+    this.card.appendChild(this.options);
     this.optionsButton = this.card.querySelector(".more-options-button");
 
     // Set the contents.
@@ -2915,7 +2939,6 @@ class RecommendedAddonCard extends HTMLElement {
     let heading = card.querySelector(".addon-name-container");
     heading.textContent = "";
     heading.append(importTemplate("addon-name-container-in-disco-card"));
-    card.querySelector(".more-options-menu").remove();
 
     this.setCardContent(card, addon);
     if (addon.type != "theme") {

toolkit/mozapps/extensions/test/browser/browser_html_detail_view.js

@@ -1146,33 +1146,28 @@ add_task(async function testEmptyMoreOptionsMenu() {
   await loaded;
 
   card = getAddonCard(doc, DEFAULT_THEME_ID);
+  let toggleDisabledButton = card.querySelector('[action="toggle-disabled"]');
   enabledItems = card.options.visibleItems;
   is(enabledItems.length, 0, "There are no enabled items");
   moreOptionsButton = card.querySelector(".more-options-button");
   ok(moreOptionsButton.hidden, "The more options button is now hidden");
+  ok(toggleDisabledButton.hidden, "The disable button is hidden");
 
-  // Switch themes, this should show the menu again.
+  // Switch themes, the menu should be hidden, but enable button should appear.
   let darkTheme = await AddonManager.getAddonByID(DARK_THEME_ID);
   let updated = BrowserTestUtils.waitForEvent(card, "update");
   await darkTheme.enable();
   await updated;
 
-  enabledItems = card.options.visibleItems;
-  is(enabledItems.length, 1, "There is one item visible");
-  is(
-    enabledItems[0].getAttribute("action"),
-    "toggle-disabled",
-    "Enable is the item"
-  );
-  ok(!moreOptionsButton.hidden, "The more options button is now visible");
+  ok(moreOptionsButton.hidden, "The more options button is still hidden");
+  ok(!toggleDisabledButton.hidden, "The enable button is visible");
 
   updated = BrowserTestUtils.waitForEvent(card, "update");
-  await enabledItems[0].click();
+  await toggleDisabledButton.click();
   await updated;
 
-  enabledItems = card.options.visibleItems;
-  is(enabledItems.length, 0, "There are no items visible");
-  ok(moreOptionsButton.hidden, "The more options button is hidden again");
+  ok(moreOptionsButton.hidden, "The more options button is hidden");
+  ok(toggleDisabledButton.hidden, "The disable button is hidden");
 
   await closeView(win);
 });