From 01fae6d8b01cd97c49b91f2c0e7658177943a5b7 Mon Sep 17 00:00:00 2001 From: Butkovits Atila Date: Wed, 25 Aug 2021 21:15:57 +0300 Subject: [PATCH] Backed out changeset 51400ee7a844 (bug 1725160) for causing failures at browser_newtab_last_LinkMenu.js. --- .../DSLinkMenu/DSLinkMenu.jsx | 12 +- .../data/content/activity-stream.bundle.js | 10 +- .../newtab/test/browser/browser.ini | 1 - .../browser/browser_newtab_last_LinkMenu.js | 150 ------------------ .../DSLinkMenu.test.jsx | 21 ++- 5 files changed, 29 insertions(+), 165 deletions(-) delete mode 100644 browser/components/newtab/test/browser/browser_newtab_last_LinkMenu.js diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx index 1f6180d0627d..469857f6e349 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx @@ -21,12 +21,16 @@ export class DSLinkMenu extends React.PureComponent { } } + nextAnimationFrame() { + return new Promise(resolve => + this.props.windowObj.requestAnimationFrame(resolve) + ); + } + async onMenuShow() { const dsLinkMenuHostDiv = this.contextMenuButtonRef.current.parentElement; - // Force translation so we can be sure it's ready before measuring. - await this.props.windowObj.document.l10n.translateFragment( - dsLinkMenuHostDiv - ); + // Wait for next frame before computing scrollMaxX to allow fluent menu strings to be visible + await this.nextAnimationFrame(); if (this.props.windowObj.scrollMaxX > 0) { dsLinkMenuHostDiv.parentElement.classList.add("last-item"); } diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js index a7da659c2b02..b41f0df8e6b8 100644 --- a/browser/components/newtab/data/content/activity-stream.bundle.js +++ b/browser/components/newtab/data/content/activity-stream.bundle.js @@ -4053,10 +4053,14 @@ class DSLinkMenu extends react__WEBPACK_IMPORTED_MODULE_2___default.a.PureCompon } } - async onMenuShow() { - const dsLinkMenuHostDiv = this.contextMenuButtonRef.current.parentElement; // Force translation so we can be sure it's ready before measuring. + nextAnimationFrame() { + return new Promise(resolve => this.props.windowObj.requestAnimationFrame(resolve)); + } - await this.props.windowObj.document.l10n.translateFragment(dsLinkMenuHostDiv); + async onMenuShow() { + const dsLinkMenuHostDiv = this.contextMenuButtonRef.current.parentElement; // Wait for next frame before computing scrollMaxX to allow fluent menu strings to be visible + + await this.nextAnimationFrame(); if (this.props.windowObj.scrollMaxX > 0) { dsLinkMenuHostDiv.parentElement.classList.add("last-item"); diff --git a/browser/components/newtab/test/browser/browser.ini b/browser/components/newtab/test/browser/browser.ini index 28d52fdd117a..ecbf5171e65d 100644 --- a/browser/components/newtab/test/browser/browser.ini +++ b/browser/components/newtab/test/browser/browser.ini @@ -44,7 +44,6 @@ https_first_disabled = true [browser_getScreenshots.js] [browser_newtab_overrides.js] [browser_newtab_header.js] -[browser_newtab_last_LinkMenu.js] [browser_newtab_trigger.js] [browser_open_tab_focus.js] skip-if = (os == "linux") # Test setup only implemented for OSX and Windows diff --git a/browser/components/newtab/test/browser/browser_newtab_last_LinkMenu.js b/browser/components/newtab/test/browser/browser_newtab_last_LinkMenu.js deleted file mode 100644 index 79be61360f5a..000000000000 --- a/browser/components/newtab/test/browser/browser_newtab_last_LinkMenu.js +++ /dev/null @@ -1,150 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ */ - -"use strict"; - -async function setupPrefs() { - await setDefaultTopSites(); - await SpecialPowers.pushPrefEnv({ - set: [ - [ - "browser.newtabpage.activity-stream.discoverystream.config", - JSON.stringify({ - api_key_pref: "extensions.pocket.oAuthConsumerKey", - collapsible: true, - enabled: true, - show_spocs: false, - hardcoded_layout: false, - personalized: false, - layout_endpoint: - "https://example.com/browser/browser/components/newtab/test/browser/ds_layout.json", - }), - ], - [ - "browser.newtabpage.activity-stream.discoverystream.endpoints", - "https://example.com", - ], - ], - }); -} - -async function resetPrefs() { - // We set 5 prefs in setupPrefs, so we should reset 5 prefs. - // 1 popPrefEnv from pushPrefEnv - // and 4 popPrefEnv happen internally in setDefaultTopSites. - await SpecialPowers.popPrefEnv(); - await SpecialPowers.popPrefEnv(); - await SpecialPowers.popPrefEnv(); - await SpecialPowers.popPrefEnv(); - await SpecialPowers.popPrefEnv(); -} - -let initialHeight; -let initialWidth; -function setSize(width, height) { - initialHeight = window.innerHeight; - initialWidth = window.innerWidth; - let resizePromise = BrowserTestUtils.waitForEvent( - window, - "resize", - false, - e => { - info(`Got resize event (innerHeight: ${window.innerHeight})`); - return window.innerHeight === height; - } - ); - window.resizeTo(width, height); - return resizePromise; -} - -function resetSize() { - let resizePromise = BrowserTestUtils.waitForEvent( - window, - "resize", - false, - e => { - info(`Got resize event (innerHeight: ${window.innerHeight})`); - return window.innerHeight === initialHeight; - } - ); - - window.resizeTo(initialWidth, initialHeight); - return resizePromise; -} - -add_task(async function test_newtab_lasst_LinkMenu() { - await setupPrefs(); - - // Open about:newtab without using the default load listener - let tab = await BrowserTestUtils.openNewForegroundTab( - gBrowser, - "about:newtab", - false - ); - - // Specially wait for potentially preloaded browsers - let browser = tab.linkedBrowser; - await waitForPreloaded(browser); - - // Wait for React to render something - await BrowserTestUtils.waitForCondition( - () => - SpecialPowers.spawn( - browser, - [], - () => content.document.getElementById("root").children.length - ), - "Should render activity stream content" - ); - - // Set the window to a small enough size to trigger menus that might overflow. - await setSize(600, 450); - - // Test context menu position for topsites. - await SpecialPowers.spawn(browser, [], async () => { - const topsiteOuter = content.document.querySelector( - ".top-site-outer:nth-child(2n)" - ); - const topsiteContextMenuButton = topsiteOuter.querySelector( - ".context-menu-button" - ); - - topsiteContextMenuButton.click(); - - await ContentTaskUtils.waitForCondition( - () => topsiteOuter.classList.contains("active"), - "Wait for the menu to be active" - ); - - is( - content.window.scrollMaxX, - 0, - "there should be no horizontal scroll bar" - ); - }); - - // Test context menu position for topstories. - await SpecialPowers.spawn(browser, [], async () => { - const dsCard = content.document.querySelector(".ds-card:nth-child(1n)"); - const dsCarContextMenuButton = dsCard.querySelector(".context-menu-button"); - - dsCarContextMenuButton.click(); - - await ContentTaskUtils.waitForCondition( - () => dsCard.classList.contains("active"), - "Wait for the menu to be active" - ); - - is( - content.window.scrollMaxX, - 0, - "there should be no horizontal scroll bar" - ); - }); - - // Resetting the window size to what it was. - await resetSize(); - // Resetting prefs we set for this test. - await resetPrefs(); - BrowserTestUtils.removeTab(tab); -}); diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx index 3498f85f772a..ba17f99e3a3e 100644 --- a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx +++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx @@ -7,14 +7,10 @@ import React from "react"; describe("", () => { let wrapper; let parentNode; - let fakeDocument; - let fakeWindow; describe("DS link menu actions", () => { beforeEach(() => { - fakeDocument = { l10n: { translateFragment: sinon.stub() } }; - fakeWindow = { document: fakeDocument }; - wrapper = mount(); + wrapper = mount(); parentNode = wrapper.getDOMNode().parentNode; }); @@ -35,20 +31,30 @@ describe("", () => { }); it("Should add active on Menu Show", async () => { + wrapper.instance().nextAnimationFrame = () => {}; await wrapper.instance().onMenuShow(); wrapper.update(); assert.equal(parentNode.className, "active"); }); it("Should add last-item to support resized window", async () => { - fakeWindow = { scrollMaxX: "20", document: fakeDocument }; + const fakeWindow = { scrollMaxX: "20" }; wrapper = mount(); parentNode = wrapper.getDOMNode().parentNode; + wrapper.instance().nextAnimationFrame = () => {}; await wrapper.instance().onMenuShow(); wrapper.update(); assert.equal(parentNode.className, "last-item active"); }); + it("Should call rAF from nextAnimationFrame", () => { + const fakeWindow = { requestAnimationFrame: sinon.stub() }; + wrapper = mount(); + + wrapper.instance().nextAnimationFrame(); + assert.calledOnce(fakeWindow.requestAnimationFrame); + }); + it("should remove .active and .last-item classes from the parent component", () => { const instance = wrapper.instance(); const remove = sinon.stub(); @@ -64,6 +70,7 @@ describe("", () => { it("should add .active and .last-item classes to the parent component", async () => { const instance = wrapper.instance(); const add = sinon.stub(); + instance.nextAnimationFrame = () => {}; instance.contextMenuButtonRef = { current: { parentElement: { parentElement: { classList: { add } } } }, }; @@ -73,7 +80,7 @@ describe("", () => { it("should parse args for fluent correctly ", () => { const title = '"fluent"'; - wrapper = mount(); + wrapper = mount(); const button = wrapper.find( "button[data-l10n-id='newtab-menu-content-tooltip']"