Backed out changeset 51400ee7a844 (bug 1725160) for causing failures at browser_newtab_last_LinkMenu.js.

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");
     }

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");

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

browser/components/newtab/test/browser/browser_newtab_last_LinkMenu.js

@@ -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);
-});

browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx

@@ -7,14 +7,10 @@ import React from "react";
 describe("<DSLinkMenu>", () => {
   let wrapper;
   let parentNode;
-  let fakeDocument;
-  let fakeWindow;
 
   describe("DS link menu actions", () => {
     beforeEach(() => {
-      fakeDocument = { l10n: { translateFragment: sinon.stub() } };
-      fakeWindow = { document: fakeDocument };
-      wrapper = mount(<DSLinkMenu windowObj={fakeWindow} />);
+      wrapper = mount(<DSLinkMenu />);
       parentNode = wrapper.getDOMNode().parentNode;
     });
 
@@ -35,20 +31,30 @@ describe("<DSLinkMenu>", () => {
     });
 
     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(<DSLinkMenu windowObj={fakeWindow} />);
       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(<DSLinkMenu windowObj={fakeWindow} />);
+
+      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("<DSLinkMenu>", () => {
     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("<DSLinkMenu>", () => {
 
     it("should parse args for fluent correctly ", () => {
       const title = '"fluent"';
-      wrapper = mount(<DSLinkMenu title={title} windowObj={fakeWindow} />);
+      wrapper = mount(<DSLinkMenu title={title} />);
 
       const button = wrapper.find(
         "button[data-l10n-id='newtab-menu-content-tooltip']"