summaryrefslogtreecommitdiffstats
path: root/browser/components/customizableui
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/customizableui')
-rw-r--r--browser/components/customizableui/CustomizableUI.sys.mjs23
-rw-r--r--browser/components/customizableui/PanelMultiView.sys.mjs51
-rw-r--r--browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js43
3 files changed, 42 insertions, 75 deletions
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index d748b93a92..5b09402dc1 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -1251,8 +1251,8 @@ var CustomizableUIInternal = {
},
addPanelCloseListeners(aPanel) {
- Services.els.addSystemEventListener(aPanel, "click", this, false);
- Services.els.addSystemEventListener(aPanel, "keypress", this, false);
+ aPanel.addEventListener("click", this, { mozSystemGroup: true });
+ aPanel.addEventListener("keypress", this, { mozSystemGroup: true });
let win = aPanel.ownerGlobal;
if (!gPanelsForWindow.has(win)) {
gPanelsForWindow.set(win, new Set());
@@ -1261,8 +1261,8 @@ var CustomizableUIInternal = {
},
removePanelCloseListeners(aPanel) {
- Services.els.removeSystemEventListener(aPanel, "click", this, false);
- Services.els.removeSystemEventListener(aPanel, "keypress", this, false);
+ aPanel.removeEventListener("click", this, { mozSystemGroup: true });
+ aPanel.removeEventListener("keypress", this, { mozSystemGroup: true });
let win = aPanel.ownerGlobal;
let panels = gPanelsForWindow.get(win);
if (panels) {
@@ -5483,7 +5483,10 @@ class OverflowableToolbar {
let mainViewId = multiview.getAttribute("mainViewId");
let mainView = doc.getElementById(mainViewId);
let contextMenu = doc.getElementById(mainView.getAttribute("context"));
- Services.els.addSystemEventListener(contextMenu, "command", this, true);
+ contextMenu.addEventListener("command", this, {
+ capture: true,
+ mozSystemGroup: true,
+ });
let anchor = this.#defaultListButton.icon;
let popupshown = false;
@@ -6082,12 +6085,10 @@ class OverflowableToolbar {
let contextMenuId = this.#defaultListPanel.getAttribute("context");
if (contextMenuId) {
let contextMenu = doc.getElementById(contextMenuId);
- Services.els.removeSystemEventListener(
- contextMenu,
- "command",
- this,
- true
- );
+ contextMenu.removeEventListener("command", this, {
+ capture: true,
+ mozSystemGroup: true,
+ });
}
}
diff --git a/browser/components/customizableui/PanelMultiView.sys.mjs b/browser/components/customizableui/PanelMultiView.sys.mjs
index a97889f08a..e390bf7bf8 100644
--- a/browser/components/customizableui/PanelMultiView.sys.mjs
+++ b/browser/components/customizableui/PanelMultiView.sys.mjs
@@ -412,7 +412,6 @@ export var PanelMultiView = class extends AssociatedToNode {
this.openViews = [];
this._panel.addEventListener("popupshowing", this);
- this._panel.addEventListener("popuppositioned", this);
this._panel.addEventListener("popuphidden", this);
this._panel.addEventListener("popupshown", this);
@@ -434,7 +433,6 @@ export var PanelMultiView = class extends AssociatedToNode {
this._panel.removeEventListener("mousemove", this);
this._panel.removeEventListener("popupshowing", this);
- this._panel.removeEventListener("popuppositioned", this);
this._panel.removeEventListener("popupshown", this);
this._panel.removeEventListener("popuphidden", this);
this.document.documentElement.removeEventListener("keydown", this, true);
@@ -1181,47 +1179,6 @@ export var PanelMultiView = class extends AssociatedToNode {
}
}
- _calculateMaxHeight(aEvent) {
- // While opening the panel, we have to limit the maximum height of any
- // view based on the space that will be available. We cannot just use
- // window.screen.availTop and availHeight because these may return an
- // incorrect value when the window spans multiple screens.
- let anchor = this._panel.anchorNode;
- let anchorRect = anchor.getBoundingClientRect();
- let screen = anchor.screen;
-
- // GetAvailRect returns screen-device pixels, which we can convert to CSS
- // pixels here.
- let availTop = {},
- availHeight = {};
- screen.GetAvailRect({}, availTop, {}, availHeight);
- let cssAvailTop = availTop.value / screen.defaultCSSScaleFactor;
-
- // The distance from the anchor to the available margin of the screen is
- // based on whether the panel will open towards the top or the bottom.
- let maxHeight;
- if (aEvent.alignmentPosition.startsWith("before_")) {
- maxHeight = anchor.screenY - cssAvailTop;
- } else {
- let anchorScreenBottom = anchor.screenY + anchorRect.height;
- let cssAvailHeight = availHeight.value / screen.defaultCSSScaleFactor;
- maxHeight = cssAvailTop + cssAvailHeight - anchorScreenBottom;
- }
-
- // To go from the maximum height of the panel to the maximum height of
- // the view stack, we need to subtract the height of the arrow and the
- // height of the opposite margin, but we cannot get their actual values
- // because the panel is not visible yet. However, we know that this is
- // currently 11px on Mac, 13px on Windows, and 13px on Linux. We also
- // want an extra margin, both for visual reasons and to prevent glitches
- // due to small rounding errors. So, we just use a value that makes
- // sense for all platforms. If the arrow visuals change significantly,
- // this value will be easy to adjust.
- const EXTRA_MARGIN_PX = 20;
- maxHeight -= EXTRA_MARGIN_PX;
- return maxHeight;
- }
-
handleEvent(aEvent) {
// Only process actual popup events from the panel or events we generate
// ourselves, but not from menus being shown from within the panel.
@@ -1262,14 +1219,6 @@ export var PanelMultiView = class extends AssociatedToNode {
}
break;
}
- case "popuppositioned": {
- if (this._panel.state == "showing") {
- let maxHeight = this._calculateMaxHeight(aEvent);
- this._viewStack.style.maxHeight = maxHeight + "px";
- this._offscreenViewStack.style.maxHeight = maxHeight + "px";
- }
- break;
- }
case "popupshown":
// The main view is always open and visible when the panel is first
// shown, so we can check the height of the description elements it
diff --git a/browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js b/browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js
index 0f89bd5d1c..7187effdb1 100644
--- a/browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js
+++ b/browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js
@@ -10,12 +10,21 @@ const {
"resource://testing-common/FirefoxViewTestUtils.sys.mjs"
);
+/**
+ * Bug 1856572 - This test is to ensure that fluent strings in Firefox View
+ * can be updated after opening Customize Mode
+ * **/
add_task(async function test_data_l10n_customize_mode() {
FirefoxViewTestUtilsInit(this);
await withFirefoxView({ win: window }, async function (browser) {
/**
* Bug 1856572, Bug 1857622: Without requesting two animation frames
* the "missing Fluent strings" issue will not reproduce.
+ *
+ * Given the precondition that we open Firefox View, then open Customize Mode, then
+ * navigate back to Firefox View in a quick succession, as long as Fluent
+ * controlled strings can be updated by changing their Fluent IDs then this
+ * test is valid.
*/
await new Promise(r =>
requestAnimationFrame(() => requestAnimationFrame(r))
@@ -23,39 +32,47 @@ add_task(async function test_data_l10n_customize_mode() {
await startCustomizing();
await endCustomizing();
await openFirefoxViewTab(window);
-
const { document } = browser.contentWindow;
- let header = document.querySelector("h1");
- document.l10n.setAttributes(header, "firefoxview-overview-header");
+ let secondPageNavButton = document.querySelectorAll(
+ "moz-page-nav-button"
+ )[0];
+ document.l10n.setAttributes(
+ secondPageNavButton,
+ "firefoxview-overview-header"
+ );
let previousText = await document.l10n.formatValue(
- "firefoxview-page-title"
+ "firefoxview-opentabs-nav"
+ );
+ let translatedText = await window.content.document.l10n.formatValue(
+ "firefoxview-overview-header"
);
/**
* This should be replaced with
- * BrowserTestUtils.waitForMutationCondition(header, {characterData: true}, ...)
+ * BrowserTestUtils.waitForMutationCondition(secondPageNavButton, {characterData: true}, ...)
* but apparently Fluent manipulation of textContent doesn't result
* in a characterData mutation occurring.
*/
await BrowserTestUtils.waitForCondition(() => {
- return header.textContent != previousText;
+ return (
+ secondPageNavButton.textContent !== previousText &&
+ secondPageNavButton.textContent === translatedText
+ );
}, "waiting for text content to change");
Assert.equal(
- header.getAttribute("data-l10n-id"),
+ secondPageNavButton.getAttribute("data-l10n-id"),
"firefoxview-overview-header",
"data-l10n-id should be updated"
);
Assert.notEqual(
previousText,
- header.textContent,
- "The header's text content should be updated"
- );
- let translatedText = await window.content.document.l10n.formatValue(
- "firefoxview-overview-header"
+ secondPageNavButton.textContent,
+ "The second page-nav button text content should be updated"
);
+
Assert.equal(
translatedText,
- header.textContent,
+ secondPageNavButton.textContent,
"The changed text should be the translated value of 'firefoxview-overview-header"
);
});