Bug 1699515 - Switching to react for Save to Pocket panels. r=gvn

Differential Revision: https://phabricator.services.mozilla.com/D128753

.eslintignore

@@ -42,6 +42,7 @@ browser/components/enterprisepolicies/schemas/schema.jsm
 browser/components/translation/cld2/
 # generated or library files in pocket
 browser/components/pocket/content/panels/js/tmpl.js
+browser/components/pocket/content/panels/js/main.bundle.js
 
 # Ignore newtab files
 browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

browser/components/pocket/.eslintrc.js

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = {
+  plugins: [
+    "react", // require("eslint-plugin-react")
+  ],
+  settings: {
+    react: {
+      version: "17.0.2",
+    },
+  },
+  overrides: [
+    {
+      files: ["content/**/*.js", "content/**/*.jsx"],
+      parserOptions: {
+        sourceType: "module",
+      },
+    },
+  ],
+  rules: {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+  },
+};

browser/components/pocket/.nvmrc

@@ -0,0 +1 @@
+12.22.7

browser/components/pocket/README.md

@@ -0,0 +1,39 @@
+# Pocket Integration
+
+This is mostly everything related to Pocket in the browser. There are a few exceptions, like newtab, some reader mode integration, and some JSWindowActors, that live in other places.
+
+Primarily though this directory includes code for setting up the save to Pocket button, setting up the panels that are used once the Pocket button is clicked, setting up the Pocket context menu item, and a little scaffolding for the reader mode Pocket integration.
+
+## Basic Code Structure
+
+We have three primary areas code wise.
+
+There are some JSMs that handle communication with the browser. This includes some telemetry, some API functions usable by other parts of the browser, like newtab, and some initialization and setup code. These files live in `/content`
+
+There is also some standard js, html, and css that run inside the panels. Panels are the contents inside the drop downs if you click the save to Pocket button. Panels run in their own browser process, and have their own js. This js also has a build/bundle step. These files live in `/content/panels`. We have three panels. There is a sign up panel that is displayed if you click the save to Pocket button while not signed in. There is a saved panel, if you click the save to Pocket button while signed in, and on a page that is savable. Finally there is a home panel, if you click the save to Pocket button while signed in, on a page that is not savable, like about:home.
+
+## Build Panels
+
+We use webpack and node to build the panel bundle. So if you change anything in `/content/panels/js` or `/content/panels/css`, you probably need to build the bundle.
+
+The build step makes changes to the bundle files, that need to be included in your patch.
+
+### Prerequisites
+
+You need node.js installed, and a working local build of Firefox. The current or active version of node is probably fine. At the time of this writing, node version 14 and up is active, and is recommended.
+
+### How to Build
+
+From `/browser/components/pocket`
+
+If you're making a patch that's ready for review:
+run `npm install`
+then `npm run build`
+
+For active development instead of `npm run build` use `npm run watch`, which should update bundles as you work.
+
+## React and JSX
+
+We use React and JSX for most of the panel html and js. You can find the React components in `/content/panels/js/components`.
+
+We are trying to keep the React implementation and dependencies as small as possible.

browser/components/pocket/content/panels/home.html

@@ -13,8 +13,7 @@
         <script src="js/vendor/jquery-2.1.1.min.js"></script>
         <script src="js/vendor/handlebars.runtime.js"></script>
         <script src="js/tmpl.js"></script>
-        <script src="js/messages.js"></script>
-        <script src="js/home.js"></script>
-        <script src="js/main.js"></script>
+        <script src="js/main.bundle.js"></script>
+        <script src="js/home/entry.js"></script>
     </body>
 </html>

browser/components/pocket/content/panels/js/components/PopularTopics.jsx

@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+function PopularTopics(props) {
+  return (
+    <>
+      <h3 data-l10n-id="pocket-panel-home-explore-popular-topics"></h3>
+      <ul>
+        {props.topics.map(item => (
+          <li key={`item-${item.topic}`}>
+            <a
+              className="pkt_ext_topic"
+              href={`https://${props.pockethost}/explore/${item.topic}?utm_source=${props.utmsource}`}
+            >
+              {item.title}
+              <span className="pkt_ext_chevron_right"></span>
+            </a>
+          </li>
+        ))}
+      </ul>
+      <a
+        className="pkt_ext_discover"
+        href={`https://${props.pockethost}/explore?utm_source=${props.utmsource}`}
+        data-l10n-id="pocket-panel-home-discover-more"
+      />
+    </>
+  );
+}
+
+export default PopularTopics;

browser/components/pocket/content/panels/js/home/entry.js

@@ -0,0 +1,17 @@
+/* global PKT_PANEL:false */
+
+function onDOMLoaded() {
+  if (!window.thePKT_PANEL) {
+    var thePKT_PANEL = new PKT_PANEL();
+    /* global thePKT_PANEL */
+    window.thePKT_PANEL = thePKT_PANEL;
+    thePKT_PANEL.initHome();
+  }
+  window.thePKT_PANEL.create();
+}
+
+if (document.readyState != `loading`) {
+  onDOMLoaded();
+} else {
+  document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
+}

browser/components/pocket/content/panels/js/home.js → browser/components/pocket/content/panels/js/home/overlay.js

@@ -1,13 +1,16 @@
 /* global Handlebars:false */
-/* import-globals-from messages.js */
-/* import-globals-from main.js */
 
 /*
-PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
+HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
 */
 
-var PKT_PANEL_OVERLAY = function(options) {
+import React from "react";
+import ReactDOM from "react-dom";
+import PopularTopics from "../components/PopularTopics";
+import pktPanelMessaging from "../messages.js";
+
+var HomeOverlay = function(options) {
   this.inited = false;
   this.active = false;
   this.pockethost = "getpocket.com";
@@ -17,23 +20,23 @@ var PKT_PANEL_OVERLAY = function(options) {
   };
 
   this.setupClickEvents = function() {
-    thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_mylist`), {
+    pktPanelMessaging.clickHelper(document.querySelector(`.pkt_ext_mylist`), {
       source: `home_view_list`,
     });
-    thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_discover`), {
+    pktPanelMessaging.clickHelper(document.querySelector(`.pkt_ext_discover`), {
       source: `home_discover`,
     });
 
     document.querySelectorAll(`.pkt_ext_topic`).forEach((el, position) => {
-      thePKT_PANEL.clickHelper(el, {
+      pktPanelMessaging.clickHelper(el, {
         source: `home_topic`,
         position,
       });
     });
   };
 };
 
-PKT_PANEL_OVERLAY.prototype = {
+HomeOverlay.prototype = {
   create() {
     var host = window.location.href.match(/pockethost=([\w|\.]*)&?/);
     if (host && host.length > 1) {
@@ -73,19 +76,19 @@ PKT_PANEL_OVERLAY.prototype = {
     // We only have topic pages in English,
     // so ensure we only show a topics section for English browsers.
     if (this.locale.startsWith("en")) {
-      const data = {
-        pockethost: templateData.pockethost,
-        utmsource: templateData.utmsource,
-        topics: [
-          { title: "Self Improvement", topic: "self-improvement" },
-          { title: "Food", topic: "food" },
-          { title: "Entertainment", topic: "entertainment" },
-          { title: "Science", topic: "science" },
-        ],
-      };
-      document
-        .querySelector(`.pkt_ext_more`)
-        .append(this.parseHTML(Handlebars.templates.popular_topics(data)));
+      ReactDOM.render(
+        <PopularTopics
+          pockethost={templateData.pockethost}
+          utmsource={templateData.utmsource}
+          topics={[
+            { title: "Self Improvement", topic: "self-improvement" },
+            { title: "Food", topic: "food" },
+            { title: "Entertainment", topic: "entertainment" },
+            { title: "Science", topic: "science" },
+          ]}
+        />,
+        document.querySelector(`.pkt_ext_more`)
+      );
     } else if (enableLocalizedExploreMore) {
       // For non English, we have a slightly different component to the page.
       document
@@ -100,3 +103,5 @@ PKT_PANEL_OVERLAY.prototype = {
     pktPanelMessaging.sendMessage("PKT_show_home");
   },
 };
+
+export default HomeOverlay;

browser/components/pocket/content/panels/js/main.bundle.js.LICENSE.txt

@@ -0,0 +1,32 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

browser/components/pocket/content/panels/js/main.js

@@ -1,14 +1,31 @@
-/* global PKT_PANEL_OVERLAY:false */
-/* import-globals-from messages.js */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import HomeOverlay from "./home/overlay.js";
+import SignupOverlay from "./signup/overlay.js";
+import SavedOverlay from "./saved/overlay.js";
+import pktPanelMessaging from "./messages.js";
 
 var PKT_PANEL = function() {};
 
 PKT_PANEL.prototype = {
-  init() {
-    if (this.inited) {
-      return;
-    }
-    this.overlay = new PKT_PANEL_OVERLAY();
+  initHome() {
+    this.overlay = new HomeOverlay();
+    this.init();
+  },
+
+  initSignup() {
+    this.overlay = new SignupOverlay();
+    this.init();
+  },
+
+  initSaved() {
+    this.overlay = new SavedOverlay();
+    this.init();
+  },
+
+  setupObservers() {
     this.setupMutationObserver();
     // Mutation observer isn't always enough for fast loading, static pages.
     // Sometimes the mutation observer fires before the page is totally visible.
@@ -17,7 +34,13 @@ PKT_PANEL.prototype = {
     // So in this case, we have a backup intersection observer that fires when
     // the page is first visible, and thus, the page is going to guarantee a height.
     this.setupIntersectionObserver();
+  },
 
+  init() {
+    if (this.inited) {
+      return;
+    }
+    this.setupObservers();
     this.inited = true;
   },
 
@@ -38,21 +61,6 @@ PKT_PANEL.prototype = {
     }
   },
 
-  // Click helper to reduce bugs caused by oversight
-  // from different implementations of similar code.
-  clickHelper(element, { source = "", position }) {
-    element?.addEventListener(`click`, event => {
-      event.preventDefault();
-
-      pktPanelMessaging.sendMessage("PKT_openTabWithUrl", {
-        url: event.currentTarget.getAttribute(`href`),
-        activate: true,
-        source,
-        position,
-      });
-    });
-  },
-
   setupIntersectionObserver() {
     const observer = new IntersectionObserver(entries => {
       if (entries.find(e => e.isIntersecting)) {
@@ -97,18 +105,5 @@ PKT_PANEL.prototype = {
   },
 };
 
-function onDOMLoaded() {
-  if (!window.thePKT_PANEL) {
-    var thePKT_PANEL = new PKT_PANEL();
-    /* global thePKT_PANEL */
-    window.thePKT_PANEL = thePKT_PANEL;
-    thePKT_PANEL.init();
-  }
-  window.thePKT_PANEL.create();
-}
-
-if (document.readyState != `loading`) {
-  onDOMLoaded();
-} else {
-  document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
-}
+window.PKT_PANEL = PKT_PANEL;
+window.pktPanelMessaging = pktPanelMessaging;