nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1798324 - Update style of extension widgets in the panel. r=mconley,desktop-theme-reviewers,dao,rpl

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D161036
This commit is contained in:
William Durand 2022-11-10 11:29:16 +00:00
parent c7377f9f23
commit 43efb14a1c
8 changed files with 460 additions and 78 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

65
browser/components/extensions/parent/ext-browserAction.js
View file

@ -61,6 +61,13 @@ XPCOMUtils.defineLazyGetter(this, "browserAreas", () => {
};
});
XPCOMUtils.defineLazyPreferenceGetter(
this,
"gUnifiedExtensionsEnabled",
"extensions.unifiedExtensions.enabled",
false
);
function actionWidgetId(widgetId) {
return `${widgetId}-browser-action`;
}
@ -219,7 +226,37 @@ this.browserAction = class extends ExtensionAPIPersistent {
// Ensure the extension context menuitems are available by setting this
// on all button children and the item.
button.setAttribute("data-extensionid", extension.id);
button.classList.add("toolbarbutton-1");
button.classList.add(
"toolbarbutton-1",
"unified-extensions-item-action",
"subviewbutton"
);
if (gUnifiedExtensionsEnabled) {
let contents = document.createXULElement("vbox");
contents.classList.add("unified-extensions-item-contents");
contents.setAttribute("move-after-stack", "true");
let name = document.createXULElement("label");
name.classList.add("unified-extensions-item-name");
contents.appendChild(name);
let messageDefault = document.createXULElement("label");
messageDefault.classList.add(
"unified-extensions-item-message",
"unified-extensions-item-message-default"
);
contents.appendChild(messageDefault);
let messageHover = document.createXULElement("label");
messageHover.classList.add(
"unified-extensions-item-message",
"unified-extensions-item-message-hover"
);
contents.appendChild(messageHover);
button.appendChild(contents);
}
let cog = document.createXULElement("toolbarbutton");
cog.classList.add(
@ -234,6 +271,10 @@ this.browserAction = class extends ExtensionAPIPersistent {
cog.setAttribute("data-extensionid", extension.id);
let node = document.createXULElement("toolbaritem");
node.setAttribute(
"unified-extensions",
String(gUnifiedExtensionsEnabled)
);
node.classList.add(
"toolbaritem-combined-buttons",
"unified-extensions-item"
@ -301,10 +342,7 @@ this.browserAction = class extends ExtensionAPIPersistent {
this.openPopupWithoutUserInteraction =
event.detail?.openPopupWithoutUserInteraction === true;
// TODO: use class name when we update the style of the extensions in
// the panel, see Bug 1798324. For now, the first element is always the
// main/action button.
if (event.target == node.firstElementChild) {
if (event.target.classList.contains("unified-extensions-item-action")) {
return "view";
} else if (
event.target.classList.contains("unified-extensions-item-open-menu")
@ -686,6 +724,12 @@ this.browserAction = class extends ExtensionAPIPersistent {
// This is set on the node so that it looks good in the toolbar.
node.toggleAttribute("attention", attention);
if (gUnifiedExtensionsEnabled) {
button.querySelector(
".unified-extensions-item-name"
).textContent = this.extension?.name;
}
if (tabData.badgeText) {
button.setAttribute("badge", tabData.badgeText);
} else {
@ -736,6 +780,17 @@ this.browserAction = class extends ExtensionAPIPersistent {
let icon16 = IconDetails.getPreferredIcon(icons, this.extension, 16).icon;
let icon32 = IconDetails.getPreferredIcon(icons, this.extension, 32).icon;
let icon64 = IconDetails.getPreferredIcon(icons, this.extension, 64).icon;
if (gUnifiedExtensionsEnabled) {
return `
${getStyle("menupanel-image", icon16)}
${getStyle("menupanel-image-2x", icon32)}
${getStyle("toolbar-image", icon32)}
${getStyle("toolbar-image-2x", icon64)}
`;
}
return `
${getStyle("menupanel-image", icon16)}
${getStyle("menupanel-image-2x", icon32)}

294
browser/components/extensions/test/browser/browser_ext_browserAction_pageAction_icon.js
View file

@ -33,42 +33,104 @@ add_task(async function testDetailsObjects() {
green: getImageData("green"),
};
/* eslint-disable indent, indent-legacy */
const unifiedExtensionsEnabled = SpecialPowers.getBoolPref(
"extensions.unifiedExtensions.enabled",
false
);
// In each `iconDetails` entry below, and for a same resolution, we may
// expect different values (icon URLs) for `browserActionImageURL` and
// `pageActionImageURL` because browser actions use large icons (32px or
// 64px in 2x) and page actions use small icons (16px or 32px in 2x) when
// the unifiedExtensions pref is enabled.
//
// eslint-disable indent, indent-legacy
let iconDetails = [
// Only paths.
{
details: { path: "a.png" },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
},
},
{
details: { path: "/a.png" },
resolutions: {
"1": browser.runtime.getURL("a.png"),
"2": browser.runtime.getURL("a.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("a.png"),
pageActionImageURL: browser.runtime.getURL("a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("a.png"),
pageActionImageURL: browser.runtime.getURL("a.png"),
},
},
},
{
details: { path: { "19": "a.png" } },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
},
},
{
details: { path: { "38": "a.png" } },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
},
},
{
details: { path: { "19": "a.png", "38": "a-x2.png" } },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a-x2.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a-x2.png")
: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a-x2.png"),
pageActionImageURL: browser.runtime.getURL("data/a-x2.png"),
},
},
},
{
details: {
path: { "16": "a-16.png", "32": "a-32.png", "64": "a-64.png" },
},
resolutions: {
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a-32.png")
: browser.runtime.getURL("data/a-16.png"),
pageActionImageURL: browser.runtime.getURL("data/a-16.png"),
},
"2": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a-64.png")
: browser.runtime.getURL("data/a-32.png"),
pageActionImageURL: browser.runtime.getURL("data/a-32.png"),
},
},
},
@ -76,8 +138,18 @@ add_task(async function testDetailsObjects() {
{
details: { path: 'a.png#" \\' },
resolutions: {
"1": browser.runtime.getURL("data/a.png#%22%20%5C"),
"2": browser.runtime.getURL("data/a.png#%22%20%5C"),
"1": {
browserActionImageURL: browser.runtime.getURL(
"data/a.png#%22%20%5C"
),
pageActionImageURL: browser.runtime.getURL("data/a.png#%22%20%5C"),
},
"2": {
browserActionImageURL: browser.runtime.getURL(
"data/a.png#%22%20%5C"
),
pageActionImageURL: browser.runtime.getURL("data/a.png#%22%20%5C"),
},
},
},
@ -85,22 +157,40 @@ add_task(async function testDetailsObjects() {
{
details: { imageData: imageData.red.imageData },
resolutions: {
"1": imageData.red.url,
"2": imageData.red.url,
"1": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
},
},
{
details: { imageData: { "19": imageData.red.imageData } },
resolutions: {
"1": imageData.red.url,
"2": imageData.red.url,
"1": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
},
},
{
details: { imageData: { "38": imageData.red.imageData } },
resolutions: {
"1": imageData.red.url,
"2": imageData.red.url,
"1": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
},
},
{
@ -111,8 +201,16 @@ add_task(async function testDetailsObjects() {
},
},
resolutions: {
"1": imageData.red.url,
"2": imageData.green.url,
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? imageData.green.url
: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: imageData.green.url,
pageActionImageURL: imageData.green.url,
},
},
},
@ -126,8 +224,16 @@ add_task(async function testDetailsObjects() {
imageData: { "38": imageData.red.imageData },
},
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": imageData.red.url,
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? imageData.red.url
: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
},
},
{
@ -136,8 +242,16 @@ add_task(async function testDetailsObjects() {
imageData: { "19": imageData.red.imageData },
},
resolutions: {
"1": imageData.red.url,
"2": browser.runtime.getURL("data/a.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a.png")
: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
},
},
@ -148,8 +262,16 @@ add_task(async function testDetailsObjects() {
imageData: { "38": imageData.red.imageData },
},
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": imageData.red.url,
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? imageData.red.url
: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
},
},
{
@ -158,8 +280,16 @@ add_task(async function testDetailsObjects() {
imageData: imageData.red.imageData,
},
resolutions: {
"1": imageData.red.url,
"2": browser.runtime.getURL("data/a.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a.png")
: imageData.red.url,
pageActionImageURL: imageData.red.url,
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
},
},
@ -167,29 +297,59 @@ add_task(async function testDetailsObjects() {
{
details: { path: { "18": "a.png", "36": "a-x2.png" } },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a-x2.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a-x2.png")
: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a-x2.png"),
pageActionImageURL: browser.runtime.getURL("data/a-x2.png"),
},
},
},
{
details: { path: { "16": "a.png", "30": "a-x2.png" } },
resolutions: {
"1": browser.runtime.getURL("data/a.png"),
"2": browser.runtime.getURL("data/a-x2.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/a-x2.png")
: browser.runtime.getURL("data/a.png"),
pageActionImageURL: browser.runtime.getURL("data/a.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/a-x2.png"),
pageActionImageURL: browser.runtime.getURL("data/a-x2.png"),
},
},
},
{
details: { path: { "16": "16.png", "100": "100.png" } },
resolutions: {
"1": browser.runtime.getURL("data/16.png"),
"2": browser.runtime.getURL("data/100.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/100.png")
: browser.runtime.getURL("data/16.png"),
pageActionImageURL: browser.runtime.getURL("data/16.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/100.png"),
pageActionImageURL: browser.runtime.getURL("data/100.png"),
},
},
},
{
details: { path: { "2": "2.png" } },
resolutions: {
"1": browser.runtime.getURL("data/2.png"),
"2": browser.runtime.getURL("data/2.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("data/2.png"),
pageActionImageURL: browser.runtime.getURL("data/2.png"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/2.png"),
pageActionImageURL: browser.runtime.getURL("data/2.png"),
},
},
},
{
@ -200,8 +360,16 @@ add_task(async function testDetailsObjects() {
},
},
resolutions: {
"1": browser.runtime.getURL("data/16.svg"),
"2": browser.runtime.getURL("data/18.svg"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/18.svg")
: browser.runtime.getURL("data/16.svg"),
pageActionImageURL: browser.runtime.getURL("data/16.svg"),
},
"2": {
browserActionImageURL: browser.runtime.getURL("data/18.svg"),
pageActionImageURL: browser.runtime.getURL("data/18.svg"),
},
},
},
{
@ -215,8 +383,18 @@ add_task(async function testDetailsObjects() {
},
},
resolutions: {
"1": browser.runtime.getURL("data/18.png"),
"2": browser.runtime.getURL("data/36.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/36.png")
: browser.runtime.getURL("data/18.png"),
pageActionImageURL: browser.runtime.getURL("data/18.png"),
},
"2": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/128.png")
: browser.runtime.getURL("data/36.png"),
pageActionImageURL: browser.runtime.getURL("data/36.png"),
},
},
menuResolutions: {
"1": browser.runtime.getURL("data/36.png"),
@ -235,8 +413,18 @@ add_task(async function testDetailsObjects() {
},
},
resolutions: {
"1": browser.runtime.getURL("data/16.png"),
"2": browser.runtime.getURL("data/32.png"),
"1": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/32.png")
: browser.runtime.getURL("data/16.png"),
pageActionImageURL: browser.runtime.getURL("data/16.png"),
},
"2": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/64.png")
: browser.runtime.getURL("data/32.png"),
pageActionImageURL: browser.runtime.getURL("data/32.png"),
},
},
menuResolutions: {
"1": browser.runtime.getURL("data/32.png"),
@ -253,8 +441,16 @@ add_task(async function testDetailsObjects() {
},
},
resolutions: {
"1": browser.runtime.getURL("data/32.png"),
"2": browser.runtime.getURL("data/32.png"),
"1": {
browserActionImageURL: browser.runtime.getURL("data/32.png"),
pageActionImageURL: browser.runtime.getURL("data/32.png"),
},
"2": {
browserActionImageURL: unifiedExtensionsEnabled
? browser.runtime.getURL("data/128.png")
: browser.runtime.getURL("data/32.png"),
pageActionImageURL: browser.runtime.getURL("data/32.png"),
},
},
},
];
@ -396,15 +592,17 @@ add_task(async function testDetailsObjects() {
"window has the required resolution"
);
let imageURL = test.resolutions[resolution];
let { browserActionImageURL, pageActionImageURL } = test.resolutions[
resolution
];
is(
getListStyleImage(browserActionButton),
imageURL,
browserActionImageURL,
`browser action has the correct image at ${resolution}x resolution`
);
is(
getListStyleImage(pageActionImage),
imageURL,
pageActionImageURL,
`page action has the correct image at ${resolution}x resolution`
);

6
browser/components/extensions/test/browser/browser_ext_browserAction_pageAction_icon_permissions.js
View file

@ -74,14 +74,14 @@ add_task(async function testDefaultDetails() {
let icons = [
"foo/bar.png",
"/foo/bar.png",
{ "19": "foo/bar.png" },
{ "38": "foo/bar.png" },
{ "70": "foo/bar.png" },
];
if (window.devicePixelRatio > 1) {
icons.push({ "19": "baz/quux.png", "38": "foo/bar.png" });
icons.push({ "38": "baz/quux.png", "70": "foo/bar.png" });
} else {
icons.push({ "19": "foo/bar.png", "38": "baz/quux@2x.png" });
icons.push({ "38": "foo/bar.png", "70": "baz/quux@2x.png" });
}
let expectedURL = new RegExp(

87
browser/components/extensions/test/browser/browser_unified_extensions_overflowable_toolbar.js
View file

@ -174,6 +174,85 @@ async function withWindowOverflowed(win, taskFn) {
}
}
function verifyExtensionWidget(widget, unifiedExtensionsEnabled) {
Assert.ok(widget, "expected widget");
Assert.equal(
widget.getAttribute("unified-extensions"),
unifiedExtensionsEnabled ? "true" : "false",
`expected unified-extensions attribute to be ${String(
unifiedExtensionsEnabled
)}`
);
let actionButton = widget.firstElementChild;
Assert.ok(
actionButton.classList.contains("unified-extensions-item-action"),
"expected action class on the button"
);
let contents = actionButton.querySelector(
".unified-extensions-item-contents"
);
if (unifiedExtensionsEnabled) {
Assert.ok(
contents,
`expected contents element when unifiedExtensionsEnabled=${unifiedExtensionsEnabled}`
);
// This is needed to correctly position the contents (vbox) element in the
// toolbarbutton.
Assert.equal(
contents.getAttribute("move-after-stack"),
"true",
"expected move-after-stack attribute to be set"
);
// Make sure the contents element is inserted after the stack one (which is
// automagically created by the toolbarbutton element).
Assert.deepEqual(
Array.from(actionButton.childNodes.values()).map(
child => child.classList[0]
),
[
// The stack (which contains the extension icon) should be the first
// child.
"toolbarbutton-badge-stack",
// This is the widget label, which is hidden with CSS.
"toolbarbutton-text",
// This is the contents element, which displays the extension name and
// messages.
"unified-extensions-item-contents",
],
"expected the correct order for the children of the action button"
);
let name = contents.querySelector(".unified-extensions-item-name");
Assert.ok(name, "expected name element");
Assert.ok(
name.textContent.startsWith("Extension "),
"expected name to not be empty"
);
Assert.ok(
contents.querySelector(".unified-extensions-item-message-default"),
"expected message default element"
);
Assert.ok(
contents.querySelector(".unified-extensions-item-message-hover"),
"expected message hover element"
);
} else {
Assert.ok(
!contents,
`expected no contents element when unifiedExtensionsEnabled=${unifiedExtensionsEnabled}`
);
Assert.ok(
actionButton.getAttribute("label")?.startsWith("Extension "),
"expected button's label to not be empty"
);
}
}
/**
* Tests that overflowed browser actions go to the Unified Extensions
* panel, and default toolbar items go into the default overflow
@ -208,6 +287,7 @@ add_task(async function test_overflowable_toolbar() {
extensionIDs.includes(child.dataset.extensionid),
`Unified Extensions overflow list should have ${child.dataset.extensionid}`
);
verifyExtensionWidget(child, true);
}
}
);
@ -239,10 +319,11 @@ add_task(async function test_overflowable_toolbar_legacy() {
// Next, ensure that all of the browser_action buttons from the
// WebExtensions are there as well.
for (const extensionID of extensionIDs) {
Assert.ok(
defaultList.querySelector(`[data-extensionid='${extensionID}']`),
`Default list should have ${extensionID}`
const widget = defaultList.querySelector(
`[data-extensionid='${extensionID}']`
);
Assert.ok(widget, `Default list should have ${extensionID}`);
verifyExtensionWidget(widget, false);
}
Assert.equal(

70
browser/themes/shared/addons/unified-extensions-item.css
View file

@ -30,7 +30,7 @@ unified-extensions-item[attention] {
}
unified-extensions-item[attention] {
background-position-x: left var(--dot-position);
background-position: left var(--dot-position) bottom 0px;
}
unified-extensions-item[attention]:-moz-locale-dir(rtl) {
@ -44,7 +44,7 @@ unified-extensions-item[attention]:-moz-locale-dir(rtl) {
/* The padding-block for menuitems is set to 0 in compact mode which, with the
* extension icon being 32px in this case, makes the item look crowded even for
* compact mode. */
:root[uidensity="compact"] .unified-extensions-item-action {
:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action {
padding-block: 4px;
}
@ -60,7 +60,10 @@ unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-ite
color: inherit;
}
.unified-extensions-item-icon {
.unified-extensions-item-icon,
/* When the unified extensions pref is enabled, we also want to increase the
* size of the icons in the extension CUI widgets. */
#unified-extensions-panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
height: var(--icon-size);
width: var(--icon-size);
margin-inline-end: 6px;
@ -73,6 +76,8 @@ unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-ite
.unified-extensions-item-name,
.unified-extensions-item-message {
margin: 0;
padding-inline-start: .5em;
width: 22em;
word-break: break-word;
}
@ -82,32 +87,67 @@ unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-ite
}
unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-message:not(.unified-extensions-item-message-hover),
unified-extensions-item:not([secondary-button-hovered="true"]) .unified-extensions-item-message-hover {
unified-extensions-item:not([secondary-button-hovered="true"]) .unified-extensions-item-message-hover,
/* The two selectors below are for CUI widgets. */
.unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-message:not(.unified-extensions-item-message-hover),
.unified-extensions-item:not([secondary-button-hovered="true"]) .unified-extensions-item-message-hover {
display: none;
}
.unified-extensions-item-open-menu.subviewbutton {
list-style-image: url("chrome://global/skin/icons/settings.svg");
margin: 0;
margin-inline-end: 8px;
padding: 8px;
margin-inline-end: var(--arrowpanel-menuitem-margin-inline);
/* Have the icon even padding all around by default */
padding: var(--arrowpanel-menuitem-padding-inline);
}
.unified-extensions-item-open-menu.subviewbutton > .toolbarbutton-text {
display: none;
}
/* browser action CUI widget styles */
/* --- browser action CUI widget styles --- */
/* Hide secondary (menu) button when the widget is in the list of widgets in
* customization mode */
toolbaritem:not([cui-areatype="panel"], [overflowedItem=true]).unified-extensions-item .unified-extensions-item-open-menu {
* customization mode. */
toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-open-menu {
display: none;
}
/* Hide subviewbutton label by default, it should only be shown in the overflow
* panel and the palette. */
toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text {
display: none;
}
/* Hide unified extensions content by default */
toolbaritem.unified-extensions-item:not([overflowedItem="true"]) .unified-extensions-item-contents {
display: none;
}
/* Don't flex the menu/cog/gear button when displayed in panel */
toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbutton {
-moz-box-flex: 0;
margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
padding: var(--arrowpanel-menuitem-padding);
}
/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */
/* Align CUI widgets with the custom elements in the unified extensions panel. */
#unified-extensions-panel toolbaritem.unified-extensions-item {
max-width: max-content;
}
/* Show CUI widget label in overflow panel when the unified extensions pref is
* not set. */
.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action .toolbarbutton-text {
text-align: start;
display: block;
}
/* This will be removed as part of 1777484 */
panel toolbaritem.unified-extensions-item .unified-extensions-item-message {
display: none;
}
.widget-overflow-list .unified-extensions-item[attention] {
@ -115,5 +155,13 @@ toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbu
}
.widget-overflow-list .unified-extensions-item[attention]:-moz-locale-dir(rtl) {
background-position: right 12px bottom;
background-position-x: right 12px;
}
#unified-extensions-panel .unified-extensions-item[attention] {
background-position: left calc(12px + var(--arrowpanel-menuitem-margin-inline)) bottom;
}
#unified-extensions-panel .unified-extensions-item[attention]:-moz-locale-dir(rtl) {
background-position-x: right calc(12px + var(--arrowpanel-menuitem-margin-inline));
}

2
browser/themes/shared/tabs.css
View file

@ -620,8 +620,6 @@ toolbar[brighttext] {
--tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(84,255,189));
}
/* Please keep this attention UI in sync with the one defined in
* browser/themes/shared/addons/unified-extensions-item.css */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention] {

8
browser/themes/windows/browser.css
View file

@ -467,12 +467,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
}
/* Make menu items larger when opened through touch. */
#widget-overflow[touchmode] .toolbarbutton-1,
panel[touchmode] .PanelUI-subView .subviewbutton,
menupopup[touchmode] menu,
menupopup[touchmode] menuitem {
panel[touchmode],
menupopup[touchmode] {
--arrowpanel-menuitem-padding-block: 12px;
padding-block: var(--arrowpanel-menuitem-padding-block);
--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
}
#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {

6
toolkit/content/widgets/toolbarbutton.js
View file

@ -161,7 +161,11 @@
if (moveChildren.length) {
let { badgeStack, icon } = this;
for (let child of moveChildren) {
badgeStack.insertBefore(child, icon);
if (child.getAttribute("move-after-stack") === "true") {
this.appendChild(child);
} else {
badgeStack.insertBefore(child, icon);
}
}
}
} else {