diff --git a/browser/components/sidebar/SidebarState.sys.mjs b/browser/components/sidebar/SidebarState.sys.mjs index 963d8dcbe3a7..ae0e3890ad9d 100644 --- a/browser/components/sidebar/SidebarState.sys.mjs +++ b/browser/components/sidebar/SidebarState.sys.mjs @@ -286,10 +286,9 @@ export class SidebarState { this.#props.launcherExpanded = false; return; } - const previousExpanded = this.#props.launcherExpanded; this.#props.launcherExpanded = expanded; this.#launcherEl.expanded = expanded; - if (expanded && !previousExpanded) { + if (expanded) { Glean.sidebar.expand.record(); } // Marking the tab container element as expanded or not simplifies the CSS logic @@ -336,17 +335,18 @@ export class SidebarState { set launcherWidth(width) { this.#props.launcherWidth = width; - const { document, requestAnimationFrame } = this.#controllerGlobal; - if (!document.documentElement.hasAttribute("inDOMFullscreen")) { - requestAnimationFrame(() => { - this.#panelEl.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${width}px)`; - // Expand the launcher when it gets wide enough. - if (lazy.verticalTabsEnabled) { - this.launcherExpanded = width >= LAUNCHER_MINIMUM_WIDTH; - } else { - this.launcherExpanded = false; - } - }); + if ( + !this.#controllerGlobal.document.documentElement.hasAttribute( + "inDOMFullscreen" + ) + ) { + this.#panelEl.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${width}px)`; + // Expand the launcher when it gets wide enough. + if (lazy.verticalTabsEnabled) { + this.launcherExpanded = width >= LAUNCHER_MINIMUM_WIDTH; + } else { + this.launcherExpanded = false; + } } } diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js index 2e8e7141fc34..a9c4c8fbb2f5 100644 --- a/browser/components/sidebar/browser-sidebar.js +++ b/browser/components/sidebar/browser-sidebar.js @@ -364,7 +364,6 @@ var SidebarController = { } if (this._mainResizeObserver) { this._mainResizeObserver.disconnect(); - this._mainResizeObserverAdded = false; } this._mainResizeObserver = new ResizeObserver(([entry]) => this._handleLauncherResize(entry) diff --git a/browser/components/sidebar/tests/browser/browser_resize_sidebar.js b/browser/components/sidebar/tests/browser/browser_resize_sidebar.js index e959c4ea58d5..06ff41175956 100644 --- a/browser/components/sidebar/tests/browser/browser_resize_sidebar.js +++ b/browser/components/sidebar/tests/browser/browser_resize_sidebar.js @@ -11,7 +11,6 @@ add_setup(async () => { ["sidebar.verticalTabs", true], ], }); - await flushTaskQueue(); await SidebarController.initializeUIState({ launcherExpanded: false, launcherVisible: true, @@ -27,16 +26,24 @@ async function dragLauncher(deltaX, shouldExpand) { info(`Drag the launcher by ${deltaX} px.`); const splitter = SidebarController._launcherSplitter; - await flushTaskQueue(); EventUtils.synthesizeMouseAtCenter(splitter, { type: "mousedown" }); - await flushTaskQueue(); EventUtils.synthesizeMouse(splitter, deltaX, 0, { type: "mousemove" }); - await flushTaskQueue(); - EventUtils.synthesizeMouse(splitter, 0, 0, { type: "mouseup" }); + // Using synthesizeMouse() sometimes fails to trigger the resize observer, + // even if the splitter was dragged successfully. Invoke the resize handler + // explicitly to avoid this issue. + const resizeEntry = { + contentBoxSize: [ + { + inlineSize: SidebarController.sidebarMain.getBoundingClientRect().width, + }, + ], + }; + SidebarController._handleLauncherResize(resizeEntry); await TestUtils.waitForCondition( () => SidebarController.sidebarMain.expanded == shouldExpand, `The sidebar is ${shouldExpand ? "expanded" : "collapsed"}.` ); + EventUtils.synthesizeMouse(splitter, 0, 0, { type: "mouseup" }); AccessibilityUtils.resetEnv(); } @@ -110,28 +117,3 @@ add_task(async function test_drag_show_and_hide_for_horizontal_tabs() { ok(!SidebarController.sidebarContainer.hidden, "Sidebar is not hidden."); ok(!SidebarController.sidebarContainer.expanded, "Sidebar is not expanded."); }); - -add_task(async function test_resize_after_toggling_revamp() { - await SidebarController.initializeUIState({ - launcherExpanded: true, - }); - - info("Disable and then re-enable sidebar and vertical tabs."); - await SpecialPowers.pushPrefEnv({ - set: [ - ["sidebar.revamp", false], - ["sidebar.verticalTabs", false], - ], - }); - await SpecialPowers.popPrefEnv(); - - info("Resize the vertical tab strip."); - const originalWidth = getLauncherWidth(); - await dragLauncher(200, true); - const newWidth = getLauncherWidth(); - Assert.greater( - parseInt(newWidth), - parseInt(originalWidth), - "Vertical tab strip was resized." - ); -}); diff --git a/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js b/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js index c16172bd1c5e..673cc066becb 100644 --- a/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js +++ b/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js @@ -12,7 +12,6 @@ add_setup(async () => { "always-show", "Sanity check the visibilty pref when verticalTabs are enabled" ); - await flushTaskQueue(); }); registerCleanupFunction(async () => { await SpecialPowers.popPrefEnv(); @@ -38,8 +37,9 @@ add_task(async function test_toggle_collapse_close_button() { let selectedTab = gBrowser.selectedTab.querySelector(".tab-close-button"); let computedStyle = window.getComputedStyle(selectedTab); - await TestUtils.waitForCondition( - () => computedStyle.opacity == "0", + is( + computedStyle.opacity, + "0", "The selected tab is not showing the close button." ); @@ -99,7 +99,6 @@ add_task(async function test_toggle_collapse_close_button() { {} ); AccessibilityUtils.resetEnv(); - await flushTaskQueue(); is(gBrowser.tabs.length, 1, "Tabstrip now has one tab"); // Expand the sidebar and make sure the collased close button no longer shows diff --git a/browser/components/sidebar/tests/browser/browser_toolbar_sidebar_button.js b/browser/components/sidebar/tests/browser/browser_toolbar_sidebar_button.js index 2ec4a732f396..9d3bc8e447a9 100644 --- a/browser/components/sidebar/tests/browser/browser_toolbar_sidebar_button.js +++ b/browser/components/sidebar/tests/browser/browser_toolbar_sidebar_button.js @@ -88,11 +88,14 @@ add_task(async function test_toolbar_sidebar_button() { }); add_task(async function test_expanded_state_for_always_show() { + info( + `Current window's sidebarMain.expanded: ${window.SidebarController.sidebarMain?.expanded}` + ); const win = await BrowserTestUtils.openNewBrowserWindow(); const { SidebarController, document } = win; const { sidebarMain, toolbarButton } = SidebarController; await SidebarController.promiseInitialized; - await flushTaskQueue(win); + info(`New window's sidebarMain.expanded: ${sidebarMain?.expanded}`); const checkExpandedState = async ( expanded, @@ -128,19 +131,22 @@ add_task(async function test_expanded_state_for_always_show() { ? "Toolbar button expanded attribute is present." : "Toolbar button expanded attribute is absent." ); - await flushTaskQueue(win); }; - info("Set default expanded state."); - await SidebarController.initializeUIState({ - launcherVisible: true, - launcherExpanded: false, - }); + info("Check default expanded state."); await checkExpandedState(false); - + ok( + BrowserTestUtils.isVisible(sidebarMain), + "The sidebar launcher is visible" + ); + ok( + !toolbarButton.hasAttribute("checked"), + "The toolbar button is not checked." + ); info("Toggle expanded state via toolbar button."); EventUtils.synthesizeMouseAtCenter(toolbarButton, {}, win); await checkExpandedState(true); + ok(toolbarButton.hasAttribute("checked"), "The toolbar button is checked."); EventUtils.synthesizeMouseAtCenter(toolbarButton, {}, win); await checkExpandedState(false); @@ -224,7 +230,6 @@ add_task(async function test_states_for_hide_sidebar() { () => !button.hasAttribute("expanded"), "Toolbar button expanded attribute is absent." ); - await flushTaskQueue(win); }; // Hide the sidebar @@ -298,7 +303,6 @@ add_task(async function test_states_for_hide_sidebar_vertical() { ? "Toolbar button expanded attribute is present." : "Toolbar button expanded attribute is absent." ); - await flushTaskQueue(win); }; // Check initial sidebar state - it should be hidden @@ -383,10 +387,7 @@ add_task(async function test_sidebar_button_runtime_pref_enabled() { }); const sidebar = document.querySelector("sidebar-main"); button.click(); - await TestUtils.waitForCondition( - () => !sidebar.expanded, - "Sidebar collapsed by click" - ); + Assert.ok(!sidebar.expanded, "Sidebar collapsed by click"); }); /** diff --git a/browser/components/sidebar/tests/browser/head.js b/browser/components/sidebar/tests/browser/head.js index 12492c122bb3..da797b23cf19 100644 --- a/browser/components/sidebar/tests/browser/head.js +++ b/browser/components/sidebar/tests/browser/head.js @@ -146,15 +146,3 @@ async function toggleSidebarPanel(win, commandID) { registerCleanupFunction(() => { Services.fog.testResetFOG(); }); - -/** - * Wait for rendering and microtasks / macrotasks to finish. - */ -async function flushTaskQueue({ requestAnimationFrame, setTimeout } = window) { - await new Promise(resolve => { - requestAnimationFrame(() => { - requestAnimationFrame(resolve); - }); - }); - await new Promise(r => setTimeout(r, 0)); -}