MOC-226: play mode icon (#164)

* add play icon * cleanup * mo cleanup * a little more cleanup * logging * editing * fix regression from cleanup * PR feedback --------- Co-authored-by: Kayla Fitzsimmons <[email protected]>
Mocksi · Aug 28, 2024 · b002319 · b002319
1 parent 9ff3303
commit b002319
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 38 deletions.
diff --git a/apps/mocksi-lite-next/public/play-icon.png b/apps/mocksi-lite-next/public/play-icon.png
diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -1,7 +1,12 @@
 import { jwtDecode } from "jwt-decode";
 
 console.log("background script loaded");
+
 const MOCKSI_AUTH = "mocksi-auth";
+let prevRequest = {
+  data: {},
+  message: "INIT",
+};
 
 const getAuth = async (): Promise<null | {
   accessToken: string;
@@ -78,10 +83,25 @@ addEventListener("install", () => {
 
 // when user clicks toolbar mount extension
 chrome.action.onClicked.addListener((tab) => {
-  if (tab.id) {
-    chrome.tabs.sendMessage(tab.id, { message: "mount-extension" });
-  } else {
+  if (!tab?.id) {
     console.log("No tab found, could not mount extension");
+    return;
+  }
+
+  chrome.tabs.sendMessage(tab.id, { message: "mount-extension" });
+
+  if (prevRequest.message) {
+    chrome.tabs.sendMessage(tab.id, {
+      data: prevRequest.data,
+      message: prevRequest.message,
+    });
+  }
+
+  if (prevRequest.message === "PLAY") {
+    chrome.action.setIcon({
+      path: "play-icon.png",
+      tabId: tab.id,
+    });
   }
 });
 
@@ -98,7 +118,10 @@ chrome.runtime.onMessage.addListener(
 
 chrome.runtime.onMessageExternal.addListener(
   (request, _sender, sendResponse) => {
-    console.log("Received message from external:", request);
+    // This logging is useful and only shows up in the service worker
+    console.log(" ");
+    console.log("Previous message from external:", prevRequest);
+    console.log("Received new message from external:", request);
 
     // execute in async block so that we return true
     // synchronously, telling chrome to wait for the response
@@ -132,6 +155,22 @@ chrome.runtime.onMessageExternal.addListener(
           console.log("No active tab found, could not send message");
           return true;
         }
+
+        // handle icon changes triggered by messaging
+        switch (request.message) {
+          case "MINIMIZED": // No action needed for "MINIMIZED"
+            break;
+          case "PLAY":
+            await chrome.action.setIcon({
+              path: "play-icon.png",
+              tabId: tab.id,
+            });
+            break;
+          default:
+            chrome.action.setIcon({ path: "mocksi-icon.png", tabId: tab.id });
+            break;
+        }
+
         chrome.tabs.sendMessage(
           tab.id,
           {
@@ -145,6 +184,11 @@ chrome.runtime.onMessageExternal.addListener(
       }
     })();
 
+    // Store last app state so we can return to the correct state when the
+    // menu is reopened
+    if (request.message !== "MINIMIZED") {
+      prevRequest = request;
+    }
     return true;
   },
 );
diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -1,5 +1,5 @@
-import { AppliedModifications, Reactor } from "@repo/reactor";
 import type { ModificationRequest } from "@repo/reactor";
+import { Reactor } from "@repo/reactor";
 import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -27,6 +27,46 @@ window.addEventListener("message", (event: MessageEvent) => {
   }
 });
 
+// Function to get styles based on the message,
+function getIframeStyles(message: string): Partial<CSSStyleDeclaration> {
+  switch (message) {
+    case "ANALYZING":
+    case "PLAY":
+    case "RECORDING":
+      return {
+        display: "block",
+        height: "150px",
+        inset: "0px 10px auto auto",
+        width: "400px",
+      };
+
+    case "MINIMIZED":
+      return {
+        display: "none",
+        inset: "0px 0px auto auto",
+      };
+
+    case "EDITING":
+    case "INIT":
+    case "LIST":
+    case "NEW_EDIT":
+    case "READYTORECORD":
+    case "SETTINGS":
+    case "STOP_EDITING":
+    case "STOP_PLAYING":
+    case "UNAUTHORIZED":
+      return {
+        display: "block",
+        height: "600px",
+        inset: "auto 10px 10px auto",
+        width: "500px",
+      };
+
+    default:
+      return {};
+  }
+}
+
 chrome.runtime.onMessage.addListener((request) => {
   if (request.message === "mount-extension") {
     const rootContainer = document.querySelector("#__mocksi__root");
@@ -91,38 +131,10 @@ chrome.runtime.onMessage.addListener((request) => {
               ) {
                 reactor.detach();
               }
-              // resize iframe
-              if (iframeRef.current) {
-                let styles = {};
-                switch (request.message) {
-                  case "ANALYZING":
-                  case "PLAY":
-                  case "RECORDING":
-                    styles = {
-                      bottom: "auto",
-                      height: "150px",
-                      top: "0px",
-                      width: "400px",
-                    };
-                    break;
-                  case "MINIMIZED":
-                    styles = {
-                      bottom: "auto",
-                      height: "0",
-                      top: "auto",
-                      width: "0",
-                    };
-                    break;
-                  default:
-                    styles = {
-                      bottom: "10px",
-                      height: "600px",
-                      top: "auto",
-                      width: "500px",
-                    };
-                }
 
-                // set inline styles for iframe
+              // Resize iframe with the new styles
+              if (iframeRef.current) {
+                const styles = getIframeStyles(request.message);
                 Object.assign(iframeRef.current.style, styles);
               }
 
@@ -142,16 +154,17 @@ chrome.runtime.onMessage.addListener((request) => {
           {ReactDOM.createPortal(
             <>
               <iframe
+                loading="lazy"
                 ref={iframeRef}
                 seamless={true}
                 src={`${import.meta.env.VITE_NEST_APP}/extension`}
                 style={{
                   colorScheme: "light",
                   position: "fixed",
-                  bottom: "10px",
-                  right: "15px",
+                  display: "block",
                   height: "600px",
                   width: "500px",
+                  inset: "auto 10px 10px auto",
                   boxShadow: "none",
                   zIndex: 99998,
                   border: "none",