Bug 1575905 - Part 2: Surface enable/disable button on theme cards r=rpl,Gijs (a3fe9e28) · Commits · The Tor Project / Applications / Tor Browser

toolkit/mozapps/extensions/content/aboutaddons.css

+10 −10

Original line number	Diff line number	Diff line
		@@ -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

+8 −8

Original line number	Diff line number	Diff line
		@@ -119,18 +119,18 @@
		data-l10n-id="addon-badge-private-browsing-allowed2"
		hidden>
		</a>
		</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">
		<div class="spacer"></div>
		<button class="theme-enable-button" action="toggle-disabled" hidden></button>
		<button
		class="more-options-button ghost-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>
		<message-bar class="addon-card-message" align="center" hidden>
		<span></span>

toolkit/mozapps/extensions/content/aboutaddons.js

+30 −7

Original line number	Diff line number	Diff line
		@@ -1639,12 +1639,18 @@ class AddonOptions extends HTMLElement {
		case "report":
		el.hidden = !isAbuseReportSupported(addon);
		break;
		case "toggle-disabled": {
		case "toggle-disabled":
		if (addon.type == "theme") {
		el.remove();
		} else {
		let toggleDisabledAction = addon.userDisabled ? "enable" : "disable";
		document.l10n.setAttributes(el, `${toggleDisabledAction}-addon-button`);
		document.l10n.setAttributes(
		el,
		`${toggleDisabledAction}-addon-button`
		);
		el.hidden = !hasPermission(addon, toggleDisabledAction);
		break;
		}
		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

+8 −13

Original line number	Diff line number	Diff line
		@@ -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);
		});