1 files changed, 118 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/main.js b/browser/components/pocket/content/panels/js/main.js
new file mode 100644
index 0000000000..46424d7919
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/main.js
@@ -0,0 +1,118 @@
+/* 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/. */
+/* global RPMGetStringPref:false */
+
+import HomeOverlay from "./home/overlay.js";
+import SignupOverlay from "./signup/overlay.js";
+import SavedOverlay from "./saved/overlay.js";
+import StyleGuideOverlay from "./style-guide/overlay.js";
+import pktPanelMessaging from "./messages.js";
+
+var PKT_PANEL = function () {};
+
+PKT_PANEL.prototype = {
+  initHome() {
+    this.overlay = new HomeOverlay();
+    this.init();
+  },
+
+  initSignup() {
+    this.overlay = new SignupOverlay();
+    this.init();
+  },
+
+  initSaved() {
+    this.overlay = new SavedOverlay();
+    this.init();
+  },
+
+  initStyleGuide() {
+    this.overlay = new StyleGuideOverlay();
+    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.
+    // In this case, the resize tries to fire with 0 height,
+    // and because it's a static page, it only does one mutation.
+    // 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;
+  },
+
+  resizeParent() {
+    let clientHeight = document.body.clientHeight;
+    if (this.overlay.tagsDropdownOpen) {
+      clientHeight = Math.max(clientHeight, 252);
+    }
+
+    // We can ignore 0 height here.
+    // We rely on intersection observer to do the
+    // resize for 0 height loads.
+    if (clientHeight) {
+      pktPanelMessaging.sendMessage("PKT_resizePanel", {
+        width: document.body.clientWidth,
+        height: clientHeight,
+      });
+    }
+  },
+
+  setupIntersectionObserver() {
+    const observer = new IntersectionObserver(entries => {
+      if (entries.find(e => e.isIntersecting)) {
+        this.resizeParent();
+        observer.unobserve(document.body);
+      }
+    });
+    observer.observe(document.body);
+  },
+
+  setupMutationObserver() {
+    // Select the node that will be observed for mutations
+    const targetNode = document.body;
+
+    // Options for the observer (which mutations to observe)
+    const config = { attributes: false, childList: true, subtree: true };
+
+    // Callback function to execute when mutations are observed
+    const callback = (mutationList, observer) => {
+      mutationList.forEach(mutation => {
+        switch (mutation.type) {
+          case "childList": {
+            /* One or more children have been added to and/or removed
+               from the tree.
+               (See mutation.addedNodes and mutation.removedNodes.) */
+            this.resizeParent();
+            break;
+          }
+        }
+      });
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+
+    // Start observing the target node for configured mutations
+    observer.observe(targetNode, config);
+  },
+
+  create() {
+    const pockethost =
+      RPMGetStringPref("extensions.pocket.site") || "getpocket.com";
+    this.overlay.create({ pockethost });
+  },
+};
+
+window.PKT_PANEL = PKT_PANEL;
+window.pktPanelMessaging = pktPanelMessaging;