Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 13:21:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1798335 - replace aboutaddons toggles with moz-toggle r=mstriemer,desktop-theme-reviewers,dao,sfoster

Browse Source 
* replaced the toggle in the addons card that controls enabling/disabling the addon
* replaced the toggle that controls optional permissions
* fixed tests, added overrides for fx-toggle styles

Depends on D160971

Differential Revision: https://phabricator.services.mozilla.com/D160815
This commit is contained in:
Hanna Jones 2023-01-19 20:56:02 +00:00
parent 8be066753c
commit 18a071166c
8 changed files with 49 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
browser/base/content/test/webextensions/browser_extension_sideloading.js
View File

@ -48,15 +48,14 @@ function getAddonElement(managerWindow, addonId) {
);
}
function assertSideloadedAddonElementState(addonElement, checked) {
function assertSideloadedAddonElementState(addonElement, pressed) {
const enableBtn = addonElement.querySelector('[action="toggle-disabled"]');
is(
enableBtn.checked,
checked,
`The enable button is ${!checked ? " not " : ""} checked`
enableBtn.pressed,
pressed,
`The enable button is ${!pressed ? " not " : ""} pressed`
);
is(enableBtn.localName, "input", "The enable button is an input");
is(enableBtn.type, "checkbox", "It's a checkbox");
is(enableBtn.localName, "moz-toggle", "The enable button is a toggle");
}
function clickEnableExtension(addonElement) {

2
toolkit/content/jar.mn
View File

@ -96,6 +96,8 @@ toolkit.jar:
content/global/elements/moz-button-group.mjs (widgets/moz-button-group/moz-button-group.mjs)
content/global/elements/moz-input-box.js (widgets/moz-input-box.js)
content/global/elements/moz-support-link.mjs (widgets/moz-support-link/moz-support-link.mjs)
content/global/elements/moz-toggle.css (widgets/moz-toggle/moz-toggle.css)
content/global/elements/moz-toggle.mjs (widgets/moz-toggle/moz-toggle.mjs)
content/global/elements/named-deck.js (widgets/named-deck.js)
content/global/elements/notificationbox.js (widgets/notificationbox.js)
content/global/elements/panel.js (widgets/panel.js)

10
toolkit/content/widgets/moz-toggle/moz-toggle.mjs
View File

@ -6,6 +6,11 @@ import { html, ifDefined } from "../vendor/lit.all.mjs";
import { MozLitElement } from "../lit-utils.mjs";
export default class MozToggle extends MozLitElement {
static shadowRootOptions = {
...MozLitElement.shadowRootOptions,
delegatesFocus: true,
};
static properties = {
pressed: { type: Boolean, reflect: true },
disabled: { type: Boolean, reflect: true },
@ -43,6 +48,11 @@ export default class MozToggle extends MozLitElement {
);
}
// Delegate clicks on the host to the input element
click() {
this.buttonEl.click();
}
labelTemplate() {
if (this.label) {
return html`

7
toolkit/mozapps/extensions/content/aboutaddons.css
View File

@ -687,13 +687,6 @@ addon-permissions-list > .addon-detail-row {
background-position-x: right 0;
}
/* justify the permission toggle */
li.permission-info > label {
display: flex;
justify-content: space-between;
align-items: center;
}
/* using a list-style-image prevents aligning the image */
.addon-permissions-list > li.permission-checked {
background-image: url("chrome://global/skin/icons/check.svg");

4
toolkit/mozapps/extensions/content/aboutaddons.html
View File

@ -14,7 +14,6 @@
<link rel="stylesheet" href="chrome://global/skin/tabprompts.css">
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
<link rel="stylesheet" href="chrome://global/skin/in-content/toggle-button.css">
<link rel="stylesheet" href="chrome://mozapps/content/extensions/aboutaddons.css">
<link rel="stylesheet" href="chrome://mozapps/content/extensions/shortcuts.css">
@ -31,6 +30,7 @@
<script defer src="chrome://mozapps/content/extensions/drag-drop-addon-installer.js"></script>
<script defer src="chrome://mozapps/content/extensions/view-controller.js"></script>
<script defer src="chrome://mozapps/content/extensions/aboutaddons.js"></script>
<script type="module" src="chrome://global/content/elements/moz-toggle.mjs"></script>
</head>
<body>
<drag-drop-addon-installer></drag-drop-addon-installer>
@ -178,7 +178,7 @@
</a>
<div class="spacer"></div>
<button class="theme-enable-button" action="toggle-disabled" hidden></button>
<input type="checkbox" class="toggle-button extension-enable-button" action="toggle-disabled" data-l10n-id="extension-enable-addon-button-label" hidden>
<moz-toggle class="extension-enable-button" action="toggle-disabled" data-l10n-id="extension-enable-addon-button-label" hidden></moz-toggle>
<button
class="more-options-button"
action="more-options"

35
toolkit/mozapps/extensions/content/aboutaddons.js
View File

@ -2153,17 +2153,10 @@ class AddonPermissionsList extends HTMLElement {
let item = document.createElement("li");
item.classList.add("permission-info");
let label = document.createElement("label");
label.textContent = msg;
let toggle = document.createElement("input");
let toggle = document.createElement("moz-toggle");
toggle.setAttribute("label", msg);
toggle.id = `permission-${id}`;
label.setAttribute("for", toggle.id);
item.appendChild(label);
toggle.setAttribute("permission-type", type);
toggle.setAttribute("type", "checkbox");
let checked =
grantedPerms.permissions.includes(perm) ||
@ -2176,13 +2169,12 @@ class AddonPermissionsList extends HTMLElement {
toggle.toggleAttribute("permission-all-sites", true);
}
toggle.checked = checked;
toggle.pressed = checked;
item.classList.toggle("permission-checked", checked);
toggle.setAttribute("permission-key", perm);
toggle.setAttribute("action", "toggle-permission");
toggle.classList.add("toggle-button");
label.appendChild(toggle);
item.appendChild(toggle);
list.appendChild(item);
}
}
@ -2682,12 +2674,6 @@ class AddonCard extends HTMLElement {
if (e.type == "click") {
switch (action) {
case "toggle-permission":
let permission = e.target.getAttribute("permission-key");
let type = e.target.getAttribute("permission-type");
let fname = e.target.checked ? "add" : "remove";
this.setAddonPermission(permission, type, fname);
break;
case "toggle-disabled":
this.recordActionEvent(addon.userDisabled ? "enable" : "disable");
// Keep the checked state the same until the add-on's state changes.
@ -2842,6 +2828,11 @@ class AddonCard extends HTMLElement {
}
break;
}
} else if (e.type == "toggle" && action == "toggle-permission") {
let permission = e.target.getAttribute("permission-key");
let type = e.target.getAttribute("permission-type");
let fname = e.target.pressed ? "add" : "remove";
this.setAddonPermission(permission, type, fname);
} else if (e.type == "change") {
let { name } = e.target;
let telemetryValue = e.target.getAttribute("data-telemetry-value");
@ -2903,6 +2894,7 @@ class AddonCard extends HTMLElement {
this.addEventListener("change", this);
this.addEventListener("click", this);
this.addEventListener("mousedown", this);
this.addEventListener("toggle", this);
this.panel.addEventListener("shown", this);
this.panel.addEventListener("hidden", this);
}
@ -2911,6 +2903,7 @@ class AddonCard extends HTMLElement {
this.removeEventListener("change", this);
this.removeEventListener("click", this);
this.removeEventListener("mousedown", this);
this.removeEventListener("toggle", this);
this.panel.removeEventListener("shown", this);
this.panel.removeEventListener("hidden", this);
}
@ -2972,7 +2965,7 @@ class AddonCard extends HTMLElement {
addon.type === "extension" ||
addon.type === "sitepermission"
) {
toggleDisabledButton.checked = !addon.userDisabled;
toggleDisabledButton.pressed = !addon.userDisabled;
}
}
@ -3233,7 +3226,7 @@ class AddonCard extends HTMLElement {
let checked = !data.removed;
if (target) {
target.closest("li").classList.toggle("permission-checked", checked);
target.checked = checked;
target.pressed = checked;
}
}
if (hasAllSites) {
@ -3241,7 +3234,7 @@ class AddonCard extends HTMLElement {
let target = document.querySelector("[permission-all-sites]");
let checked = await AddonCard.optionalAllSitesGranted(this.addon.id);
target.closest("li").classList.toggle("permission-checked", checked);
target.checked = checked;
target.pressed = checked;
}
}

27
toolkit/mozapps/extensions/test/browser/browser_html_detail_permissions.js
View File

@ -254,9 +254,9 @@ async function runTest(options) {
enabled = !enabled;
}
is(
button.checked,
button.pressed,
enabled,
`permission is set correctly for ${permissions}: ${button.checked}`
`permission is set correctly for ${permissions}: ${button.pressed}`
);
let change;
if (addon.userDisabled || !extension) {
@ -294,14 +294,14 @@ async function runTest(options) {
}
await BrowserTestUtils.waitForCondition(async () => {
return button.checked == !enabled;
return button.pressed == !enabled;
}, "button changed state");
}
// This tests that the button changes state if the permission is
// changed outside of about:addons
async function testExternalPermissionChange(permission, button) {
let enabled = button.checked;
let enabled = button.pressed;
let type = button.getAttribute("permission-type");
let change;
if (addon.userDisabled || !extension) {
@ -336,7 +336,7 @@ async function runTest(options) {
);
await BrowserTestUtils.waitForCondition(async () => {
return button.checked == !enabled;
return button.pressed == !enabled;
}, "button changed state");
}
@ -374,14 +374,14 @@ async function runTest(options) {
// Check the row is a permission row with the correct key on the toggle
// control.
let row = permission_rows.shift();
let label = row.firstElementChild;
let toggle = row.querySelector("moz-toggle");
let label = toggle.labelEl;
let str = optional_strings[name];
if (str) {
is(label.textContent, str, `Expected permission string ${str}`);
is(label.textContent.trim(), str, `Expected permission string ${str}`);
}
let toggle = label.lastElementChild;
ok(
row.classList.contains("permission-info"),
`optional permission row for ${name}`
@ -401,9 +401,9 @@ async function runTest(options) {
await testExternalPermissionChange(perm, toggle);
// change another addon to mess around with optional permission
// values to see if it effects the addon we're testing here. The
// next check would fail if anythign bleeds onto other addons.
// next check would fail if anything bleeds onto other addons.
await testOtherPermissionChange(perm, toggle);
// repeate the "outside" test.
// repeat the "outside" test.
await testExternalPermissionChange(perm, toggle);
}
}
@ -696,8 +696,7 @@ add_task(async function test_OneOfMany_AllSites_toggle() {
is(permission_rows.length, 1, "Only one 'all sites' permission toggle.");
let row = permission_rows[0];
let label = row.firstElementChild;
let toggle = label.lastElementChild;
let toggle = row.querySelector("moz-toggle");
ok(
row.classList.contains("permission-info"),
`optional permission row for "http://*/*"`
@ -707,7 +706,7 @@ add_task(async function test_OneOfMany_AllSites_toggle() {
"http://*/*",
`optional permission toggle exists for "http://*/*"`
);
ok(toggle.checked, "Expect 'all sites' toggle to be set.");
ok(toggle.pressed, "Expect 'all sites' toggle to be set.");
// Revoke the second "all sites" permission, expect toggle to be unchecked.
await ExtensionPermissions.remove("addon9@mochi.test", {
@ -715,7 +714,7 @@ add_task(async function test_OneOfMany_AllSites_toggle() {
origins: ["https://*/*"],
});
await extension.awaitMessage("permission-removed");
ok(!toggle.checked, "Expect 'all sites' toggle to be unchecked.");
ok(!toggle.pressed, "Expect 'all sites' toggle not to be pressed.");
toggle.click();

6
toolkit/mozapps/extensions/test/browser/browser_html_list_view.js
View File

@ -113,7 +113,7 @@ add_task(async function testExtensionList() {
// Disable the extension.
let disableToggle = card.querySelector('[action="toggle-disabled"]');
ok(disableToggle.checked, "The disable toggle is checked");
ok(disableToggle.pressed, "The disable toggle is pressed");
is(
doc.l10n.getAttributes(disableToggle).id,
"extension-enable-addon-button-label",
@ -131,8 +131,8 @@ add_task(async function testExtensionList() {
"The card is now in the disabled section"
);
// The disable button is now enable.
ok(!disableToggle.checked, "The disable toggle is unchecked");
// The disable button is now enabled.
ok(!disableToggle.pressed, "The disable toggle is not pressed");
is(
doc.l10n.getAttributes(disableToggle).id,
"extension-enable-addon-button-label",