Bug 1601880 - Added page orientation param to Snippets preview, plus a test for same r=andreio
authoremcminn <emcminn@mozilla.com>
Mon, 06 Jan 2020 16:09:16 +0000
changeset 510368 8a1dc2b6e1046d1fbb0b820664f2a1da71a4bf83
parent 510367 dec7b2cad47c391c5f025f661b9a180fdeeb9255
child 510369 a71328ffbea20d55bc9d2f34cba3aa68c242ee81
push id105215
push useraoprea@mozilla.com
push dateWed, 15 Jan 2020 14:01:37 +0000
treeherderautoland@8a1dc2b6e104 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersandreio
bugs1601880
milestone74.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1601880 - Added page orientation param to Snippets preview, plus a test for same r=andreio The URLSearchParams now has a property "dir", which can be set to "rtl" to preview right-to-left orientation Differential Revision: https://phabricator.services.mozilla.com/D56984
browser/components/newtab/content-src/asrouter/asrouter-content.jsx
browser/components/newtab/data/content/activity-stream.bundle.js
browser/components/newtab/test/unit/asrouter/asrouter-content.test.jsx
--- a/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
+++ b/browser/components/newtab/content-src/asrouter/asrouter-content.jsx
@@ -80,27 +80,33 @@ export const ASRouterUtils = {
         global.location.href.slice(global.location.href.indexOf("endpoint"))
       );
       try {
         const endpoint = new URL(params.get("endpoint"));
         return {
           url: endpoint.href,
           snippetId: params.get("snippetId"),
           theme: this.getPreviewTheme(),
+          dir: this.getPreviewDir(),
         };
       } catch (e) {}
     }
 
     return null;
   },
   getPreviewTheme() {
     return new URLSearchParams(
       global.location.href.slice(global.location.href.indexOf("theme"))
     ).get("theme");
   },
+  getPreviewDir() {
+    return new URLSearchParams(
+      global.location.href.slice(global.location.href.indexOf("dir"))
+    ).get("dir");
+  },
 };
 
 // Note: nextProps/prevProps refer to props passed to <ImpressionsWrapper />, not <ASRouterUISurface />
 function shouldSendImpressionOnUpdate(nextProps, prevProps) {
   return (
     nextProps.message.id &&
     (!prevProps.message || prevProps.message.id !== nextProps.message.id)
   );
@@ -291,16 +297,20 @@ export class ASRouterUISurface extends R
     const endpoint = ASRouterUtils.getPreviewEndpoint();
     if (endpoint && endpoint.theme === "dark") {
       global.window.dispatchEvent(
         new CustomEvent("LightweightTheme:Set", {
           detail: { data: NEWTAB_DARK_THEME },
         })
       );
     }
+    if (endpoint && endpoint.dir === "rtl") {
+      //Set `dir = rtl` on the HTML
+      this.props.document.getElementById("root").dir = "rtl";
+    }
     ASRouterUtils.addListener(this.onMessageFromParent);
     this.requestMessage(endpoint);
   }
 
   componentWillUnmount() {
     ASRouterUtils.removeListener(this.onMessageFromParent);
   }
 
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -2052,26 +2052,31 @@ const ASRouterUtils = {
     if (global.location && global.location.href.includes("endpoint")) {
       const params = new URLSearchParams(global.location.href.slice(global.location.href.indexOf("endpoint")));
 
       try {
         const endpoint = new URL(params.get("endpoint"));
         return {
           url: endpoint.href,
           snippetId: params.get("snippetId"),
-          theme: this.getPreviewTheme()
+          theme: this.getPreviewTheme(),
+          dir: this.getPreviewDir()
         };
       } catch (e) {}
     }
 
     return null;
   },
 
   getPreviewTheme() {
     return new URLSearchParams(global.location.href.slice(global.location.href.indexOf("theme"))).get("theme");
+  },
+
+  getPreviewDir() {
+    return new URLSearchParams(global.location.href.slice(global.location.href.indexOf("dir"))).get("dir");
   }
 
 }; // Note: nextProps/prevProps refer to props passed to <ImpressionsWrapper />, not <ASRouterUISurface />
 
 function shouldSendImpressionOnUpdate(nextProps, prevProps) {
   return nextProps.message.id && (!prevProps.message || prevProps.message.id !== nextProps.message.id);
 }
 
@@ -2306,16 +2311,21 @@ class ASRouterUISurface extends react__W
     if (endpoint && endpoint.theme === "dark") {
       global.window.dispatchEvent(new CustomEvent("LightweightTheme:Set", {
         detail: {
           data: content_src_lib_constants__WEBPACK_IMPORTED_MODULE_5__["NEWTAB_DARK_THEME"]
         }
       }));
     }
 
+    if (endpoint && endpoint.dir === "rtl") {
+      //Set `dir = rtl` on the HTML
+      this.props.document.getElementById("root").dir = "rtl";
+    }
+
     ASRouterUtils.addListener(this.onMessageFromParent);
     this.requestMessage(endpoint);
   }
 
   componentWillUnmount() {
     ASRouterUtils.removeListener(this.onMessageFromParent);
   }
 
--- a/browser/components/newtab/test/unit/asrouter/asrouter-content.test.jsx
+++ b/browser/components/newtab/test/unit/asrouter/asrouter-content.test.jsx
@@ -49,23 +49,25 @@ describe("ASRouterUtils", () => {
 });
 
 describe("ASRouterUISurface", () => {
   let wrapper;
   let globalO;
   let sandbox;
   let headerPortal;
   let footerPortal;
+  let root;
   let fakeDocument;
   let fetchStub;
 
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     headerPortal = document.createElement("div");
     footerPortal = document.createElement("div");
+    root = document.createElement("div");
     sandbox.stub(footerPortal, "querySelector").returns(footerPortal);
     fetchStub = sandbox.stub(global, "fetch").resolves({
       ok: true,
       status: 200,
       json: () => Promise.resolve({}),
     });
     fakeDocument = {
       location: { href: "" },
@@ -94,16 +96,18 @@ describe("ASRouterUISurface", () => {
       },
       get body() {
         return document.createElement("body");
       },
       getElementById(id) {
         switch (id) {
           case "header-asrouter-container":
             return headerPortal;
+          case "root":
+            return root;
           default:
             return footerPortal;
         }
       },
       createElement(tag) {
         return document.createElement(tag);
       },
     };
@@ -195,16 +199,23 @@ describe("ASRouterUISurface", () => {
 
     assert.calledOnce(stub);
     assert.property(stub.firstCall.args[0].detail.data, "ntp_background");
     assert.property(stub.firstCall.args[0].detail.data, "ntp_text");
     assert.property(stub.firstCall.args[0].detail.data, "sidebar");
     assert.property(stub.firstCall.args[0].detail.data, "sidebar_text");
   });
 
+  it("should set `dir=rtl` on the page's root element if the dir param is set", () => {
+    sandbox.stub(ASRouterUtils, "getPreviewEndpoint").returns({ dir: "rtl" });
+
+    wrapper = mount(<ASRouterUISurface document={fakeDocument} />);
+    assert.propertyVal(root, "dir", "rtl");
+  });
+
   describe("snippets", () => {
     it("should send correct event and source when snippet is blocked", () => {
       wrapper.setState({ message: FAKE_MESSAGE });
 
       wrapper.find(".blockButton").simulate("click");
       assert.propertyVal(
         ASRouterUtils.sendTelemetry.firstCall.args[0],
         "event",