corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1799694 - Avoid flickering when messages have different lengths. r=rpl,mconley,desktop-theme-reviewers,Itiel

Browse Source 
This is a completely redesign based on mconley's idea to use `deck`.
That removes a lot of code and makes things a lot better.

Depends on D163077

Differential Revision: https://phabricator.services.mozilla.com/D162390
This commit is contained in:
William Durand
2022-11-27 17:07:44 +00:00
parent ef7a4e1a24
commit 80f9f71d60
9 changed files with 342 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
browser/components/extensions/parent/ext-browserAction.js
View File

@@ -244,23 +244,37 @@ this.browserAction = class extends ExtensionAPIPersistent {
name.classList.add("unified-extensions-item-name");
contents.appendChild(name);
// This deck (and its labels) should be kept in sync with
// `browser/base/content/unified-extensions-viewcache.inc.xhtml`.
let deck = document.createXULElement("deck");
deck.classList.add("unified-extensions-item-message-deck");
let messageDefault = document.createXULElement("label");
messageDefault.classList.add(
"unified-extensions-item-message",
"unified-extensions-item-message-default"
);
contents.appendChild(messageDefault);
deck.appendChild(messageDefault);
let messageHover = document.createXULElement("label");
messageHover.classList.add(
"unified-extensions-item-message",
"unified-extensions-item-message-hover"
);
messageHover.setAttribute(
deck.appendChild(messageHover);
let messageHoverForMenuButton = document.createXULElement("label");
messageHoverForMenuButton.classList.add(
"unified-extensions-item-message",
"unified-extensions-item-message-hover-menu-button"
);
messageHoverForMenuButton.setAttribute(
"data-l10n-id",
"unified-extensions-item-message-manage"
);
contents.appendChild(messageHover);
deck.appendChild(messageHoverForMenuButton);
contents.appendChild(deck);
button.appendChild(contents);
}
@@ -571,20 +585,25 @@ this.browserAction = class extends ExtensionAPIPersistent {
handleMenuButtonEvent(event) {
let window = event.target.ownerGlobal;
let { node } = window.gBrowser && this.widget.forWindow(window);
let messageDeck = node?.querySelector(
".unified-extensions-item-message-deck"
);
switch (event.type) {
case "focus":
case "mouseover": {
if (node) {
node.setAttribute("secondary-button-hovered", true);
if (messageDeck) {
messageDeck.selectedIndex =
window.gUnifiedExtensions.MESSAGE_DECK_INDEX_MENU_HOVER;
}
break;
}
case "blur":
case "mouseout": {
if (node) {
node.removeAttribute("secondary-button-hovered");
if (messageDeck) {
messageDeck.selectedIndex =
window.gUnifiedExtensions.MESSAGE_DECK_INDEX_DEFAULT;
}
break;
}
@@ -645,21 +664,9 @@ this.browserAction = class extends ExtensionAPIPersistent {
let { node } = window.gBrowser && this.widget.forWindow(window);
if (gUnifiedExtensionsEnabled && node) {
const policy = WebExtensionPolicy.getByID(this.extension.id);
const messages = OriginControls.getStateMessageIDs({
policy,
uri: window.gBrowser.currentURI,
isAction: true,
hasPopup: !!popupURL,
});
if (messages?.onHover) {
node.ownerDocument.l10n.setAttributes(
node.querySelector(".unified-extensions-item-message-default"),
messages.onHover
);
node.dataset.showsHoverMessage = true;
}
node.querySelector(
".unified-extensions-item-message-deck"
).selectedIndex = window.gUnifiedExtensions.MESSAGE_DECK_INDEX_HOVER;
}
// We don't want to preload the popup on focus (for now).
@@ -683,24 +690,10 @@ this.browserAction = class extends ExtensionAPIPersistent {
case "mouseout": {
let { node } = window.gBrowser && this.widget.forWindow(window);
if (gUnifiedExtensionsEnabled && node) {
let tab = window.gBrowser.selectedTab;
let popupURL = this.action.getPopupUrl(tab);
const policy = WebExtensionPolicy.getByID(this.extension.id);
const messages = OriginControls.getStateMessageIDs({
policy,
uri: window.gBrowser.currentURI,
isAction: true,
hasPopup: !!popupURL,
});
if (messages?.default) {
node.ownerDocument.l10n.setAttributes(
node.querySelector(".unified-extensions-item-message-default"),
messages.default
);
delete node.dataset.showsHoverMessage;
}
node.querySelector(
".unified-extensions-item-message-deck"
).selectedIndex =
window.gUnifiedExtensions.MESSAGE_DECK_INDEX_DEFAULT;
}
// We don't want to clear the popup on blur for now.
@@ -851,7 +844,7 @@ this.browserAction = class extends ExtensionAPIPersistent {
let title = tabData.title || this.extension.name;
let messages;
if (gUnifiedExtensionsEnabled && !node.dataset.showsHoverMessage) {
if (gUnifiedExtensionsEnabled) {
let policy = WebExtensionPolicy.getByID(this.extension.id);
messages = OriginControls.getStateMessageIDs({
policy,
@@ -881,16 +874,21 @@ this.browserAction = class extends ExtensionAPIPersistent {
).textContent = this.extension?.name;
if (messages) {
const messageElement = button.querySelector(
const messageDefaultElement = button.querySelector(
".unified-extensions-item-message-default"
);
node.ownerDocument.l10n.setAttributes(
messageElement,
messageDefaultElement,
messages.default
);
// TODO: Bug 1799694 - adjust min-height property on the
// `.unified-extensions-item-contents` element.
const messageHoverElement = button.querySelector(
".unified-extensions-item-message-hover"
);
node.ownerDocument.l10n.setAttributes(
messageHoverElement,
messages.onHover || messages.default
);
}
}