commit d6119e8633b864e36fc2d2da9d26b6e208151f8b
parent 7420cbb45fe087b5ef623e4cb9774d14deaf6f1c
Author: Jonathan Sudiaman <jsudiaman@mozilla.com>
Date: Thu, 18 Dec 2025 13:52:10 +0000
Bug 1997881 - Ensure that find bar is placed on top, and can be clicked in order to select a panel. r=tabbrowser-reviewers,desktop-theme-reviewers,dao
Differential Revision: https://phabricator.services.mozilla.com/D276203
Diffstat:
4 files changed, 86 insertions(+), 8 deletions(-)
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview.js
@@ -47,8 +47,8 @@ add_task(async function test_splitViewCreateAndAddTabs() {
let tab4 = BrowserTestUtils.addTab(gBrowser, "about:blank");
// Add tabs to split view
- let splitview = gBrowser.addTabSplitView([tab1, tab2]);
- let splitview2 = gBrowser.addTabSplitView([tab3, tab4]);
+ let splitview = gBrowser.addTabSplitView([tab1, tab2], { id: "1" });
+ let splitview2 = gBrowser.addTabSplitView([tab3, tab4], { id: "2" });
let tabbrowserTabs = document.getElementById("tabbrowser-tabs");
await BrowserTestUtils.waitForMutationCondition(
tabbrowserTabs,
@@ -61,8 +61,14 @@ add_task(async function test_splitViewCreateAndAddTabs() {
Assert.ok(splitview.tabs.includes(tab1), "tab1 is in split view wrapper");
Assert.ok(splitview.tabs.includes(tab2), "tab2 is in split view wrapper");
- Assert.ok(
- splitview2.splitViewId && splitview.splitViewId !== splitview2.splitViewId,
+ await BrowserTestUtils.waitForMutationCondition(
+ splitview2,
+ { attributeFilter: ["splitViewId"] },
+ () => splitview2.hasAttribute("splitViewId")
+ );
+ Assert.notEqual(
+ splitview.splitViewId,
+ splitview2.splitViewId,
"Split view has different id than split view 2"
);
Assert.equal(splitview2.tabs.length, 2, "Split view 2 has 2 tabs");
@@ -290,3 +296,38 @@ add_task(async function test_resize_split_view_panels() {
BrowserTestUtils.removeTab(tab1);
BrowserTestUtils.removeTab(tab2);
});
+
+add_task(async function test_click_findbar_to_select_panel() {
+ const tab1 = await addTabAndLoadBrowser();
+ const tab2 = await addTabAndLoadBrowser();
+ const panel1 = document.getElementById(tab1.linkedPanel);
+ const panel2 = document.getElementById(tab2.linkedPanel);
+ await BrowserTestUtils.switchTab(gBrowser, tab1);
+
+ info("Activate split view with the first panel selected.");
+ const splitView = gBrowser.addTabSplitView([tab1, tab2]);
+ await SimpleTest.promiseFocus(tab1.linkedBrowser);
+ Assert.ok(
+ panel1.classList.contains("deck-selected"),
+ "First panel is selected."
+ );
+
+ info("Activate Find in Page within the second panel.");
+ const findbar = await gBrowser.getFindBar(tab2);
+ const promiseFindbarOpen = BrowserTestUtils.waitForEvent(
+ findbar,
+ "findbaropen"
+ );
+ findbar.open();
+ await promiseFindbarOpen;
+
+ info("Select the second panel by clicking the find bar.");
+ EventUtils.synthesizeMouseAtCenter(findbar, {});
+ await BrowserTestUtils.waitForMutationCondition(
+ panel2,
+ { attributeFilter: ["class"] },
+ () => panel2.classList.contains("deck-selected")
+ );
+
+ splitView.close();
+});
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview_footer.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_splitview_footer.js
@@ -220,3 +220,33 @@ add_task(async function test_menu_close_tabs() {
await activateCommand(inactivePanel, "splitViewCmd_closeTabs");
await promiseTabsClosed;
});
+
+add_task(async function test_findbar_displayed_over_footer() {
+ const { tabs, splitView } = await setupSplitView();
+ const [tab1, tab2] = tabs;
+ await SimpleTest.promiseFocus(tab1.linkedBrowser);
+
+ info("Activate Find in Page within the second panel.");
+ const findbar = await gBrowser.getFindBar(tab2);
+ const promiseFindbarOpen = BrowserTestUtils.waitForEvent(
+ findbar,
+ "findbaropen"
+ );
+ findbar.open();
+ await promiseFindbarOpen;
+
+ const panel = document.getElementById(tab2.linkedPanel);
+ const footer = panel.querySelector("split-view-footer");
+ const footerRect = footer.getBoundingClientRect();
+ Assert.ok(
+ !footer.contains(
+ document.elementFromPoint(
+ footerRect.left + footerRect.width / 2,
+ footerRect.top + footerRect.height / 2
+ )
+ ),
+ "Findbar is displayed over split view footer."
+ );
+
+ splitView.close();
+});
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
@@ -622,6 +622,7 @@ menupopup::part(drop-indicator) {
color: var(--toolbar-color);
color-scheme: var(--toolbar-color-scheme);
border-top-color: var(--chrome-content-separator-color);
+ z-index: var(--browser-area-z-index-sidebar);
:root[lwtheme] & {
background-color: var(--lwt-accent-color);
diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
@@ -272,7 +272,6 @@
static #SPLIT_VIEW_PANEL_EVENTS = Object.freeze([
"click",
- "focus",
"mouseover",
"mouseout",
]);
@@ -283,7 +282,10 @@
}
handleEvent(e) {
- const browser = e.currentTarget;
+ const browser =
+ e.currentTarget.tagName === "browser"
+ ? e.currentTarget
+ : e.currentTarget.querySelector("browser");
switch (e.type) {
case "click":
case "focus": {
@@ -372,9 +374,11 @@
panelEl?.classList.add("split-view-panel");
panelEl?.setAttribute("column", i);
const browser = panelEl?.querySelector("browser");
+ const browserContainer = panelEl?.querySelector(".browserContainer");
for (const eventType of MozTabpanels.#SPLIT_VIEW_PANEL_EVENTS) {
- browser?.addEventListener(eventType, this);
+ browserContainer?.addEventListener(eventType, this);
}
+ browser?.addEventListener("focus", this);
}
this.#splitViewPanels = newPanels;
this.isSplitViewActive = !!newPanels.length;
@@ -396,9 +400,11 @@
panelEl?.classList.remove("split-view-panel");
panelEl?.removeAttribute("column");
const browser = panelEl?.querySelector("browser");
+ const browserContainer = panelEl?.querySelector(".browserContainer");
for (const eventType of MozTabpanels.#SPLIT_VIEW_PANEL_EVENTS) {
- browser?.removeEventListener(eventType, this);
+ browserContainer?.removeEventListener(eventType, this);
}
+ browser?.removeEventListener("focus", this);
if (updateArray) {
const index = this.#splitViewPanels.indexOf(panel);
if (index !== -1) {
