PR feedback

Mocksi · Aug 28, 2024 · 4c4fc22 · 4c4fc22
1 parent fc4bbca
commit 4c4fc22
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 64 deletions.
diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -83,22 +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" });
-    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,
-      });
-    }
-  } 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,
+    });
   }
 });
 
@@ -153,16 +156,19 @@ chrome.runtime.onMessageExternal.addListener(
           return true;
         }
 
-        if (request.message === "PLAY") {
-          await chrome.action.setIcon({
-            path: "play-icon.png",
-            tabId: tab.id,
-          });
-        } else if (request.message !== "MINIMIZED") {
-          chrome.action.setIcon({
-            path: "mocksi-icon.png",
-            tabId: tab.id,
-          });
+        // 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(

diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -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");
@@ -92,46 +132,9 @@ chrome.runtime.onMessage.addListener((request) => {
                 reactor.detach();
               }
 
-              // resize iframe
+              // Resize iframe with the new styles
               if (iframeRef.current) {
-                let styles = {};
-                switch (request.message) {
-                  case "ANALYZING":
-                  case "PLAY":
-                  case "RECORDING":
-                    styles = {
-                      display: "block",
-                      height: "150px",
-                      /* top right bottom left */
-                      inset: "0px 10px auto auto",
-                      width: "400px",
-                    };
-                    break;
-                  case "MINIMIZED":
-                    styles = {
-                      display: "none",
-                      /* top right bottom left */
-                      inset: "0px 0px auto auto",
-                    };
-                    break;
-                  case "EDITING":
-                  case "INIT":
-                  case "LIST":
-                  case "READYTORECORD":
-                  case "SETTINGS":
-                  case "STOP_EDITING":
-                  case "STOP_PLAYING":
-                  case "UNAUTHORIZED":
-                    styles = {
-                      display: "block",
-                      height: "600px",
-                      /* top right bottom left */
-                      inset: "auto 10px 10px auto",
-                      width: "500px",
-                    };
-                }
-
-                // set inline styles for iframe
+                const styles = getIframeStyles(request.message);
                 Object.assign(iframeRef.current.style, styles);
               }