Commit a3fe9e28 authored by Mark Striemer's avatar Mark Striemer
Browse files

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
parent 96337440
......@@ -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");
......
......@@ -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>
......
......@@ -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") {
......
......@@ -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);
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment