Refactoring userSurvey browser action assets #101

mozilla-rally · Jun 6, 2021 · 63bf991 · 63bf991
1 parent f99f1d6
commit 63bf991
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 82 deletions.
diff --git a/src/browser-action-assets/userSurvey.popupNoPrompt.html b/src/browser-action-assets/userSurvey.popupNoPrompt.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+        <meta content="utf-8" http-equiv="encoding">
+        <style>
+            /* May need to add font bundling or revisit the font choice for cross-browser compatibility. */
+            body {
+                font-family: sans-serif;
+            }
+
+            .icon {
+                max-width: 50px;
+                max-height: 50px;
+                float: left;
+                padding-right: 10px; 
+            }
+        </style>
+    </head>
+    <body>
+        <div style="display: flex; max-width: 280px; padding: 10px;">
+            <img id="icon" class="icon" style="display: none;">
+            <div id="content" class="paragraph" style="padding-left: 10px; padding-right: 10px;"></div>
+        </div>
+        <script src="userSurvey.popupNoPrompt.js"></script>
+    </body>
+</html> 
diff --git a/src/browser-action-assets/userSurvey.popupNoPrompt.js b/src/browser-action-assets/userSurvey.popupNoPrompt.js
@@ -0,0 +1,18 @@
+(async function() {
+    // Load the message from storage
+    const messageStorageKey = "webScience.userSurvey.popupNoPromptMessage";
+    const messageResults = await browser.storage.local.get(messageStorageKey);
+    if(messageResults[messageStorageKey]) {
+        const contentElement = document.getElementById("content");
+        contentElement.textContent = messageResults[messageStorageKey];
+    }
+
+    // Load icon URL from storage
+    const iconUrlStorageKey = "webScience.userSurvey.popupIconUrl";
+    const iconUrlResults = await browser.storage.local.get(iconUrlStorageKey);
+    if(iconUrlResults[iconUrlStorageKey]) {
+        const iconElement = document.getElementById("icon");
+        iconElement.src = iconUrlResults[iconUrlStorageKey];
+        iconElement.style.display = "block";
+    }
+})();
diff --git a/src/html/userSurvey.popupPrompt.html → ...action-assets/userSurvey.popupPrompt.html b/src/html/userSurvey.popupPrompt.html → ...action-assets/userSurvey.popupPrompt.html
@@ -76,39 +76,6 @@
             <a href="#" class="button buttonGray" name="never">Never</a>
             <a href="#" class="button buttonBlue" name="agree">Continue</a>
         </div>
-        <script>
-            (async function() {
-                // Load the message from storage
-                const messageStorageKey = "webScience.userSurvey.popupPromptMessage";
-                const messageResults = await browser.storage.local.get(messageStorageKey);
-                if(messageResults[messageStorageKey]) {
-                    const contentElement = document.getElementById("content");
-                    contentElement.textContent = messageResults[messageStorageKey];
-                }
-
-                // Load icon URL from storage
-                const iconUrlStorageKey = "webScience.userSurvey.popupIconUrl";
-                const iconUrlResults = await browser.storage.local.get(iconUrlStorageKey);
-                if(iconUrlResults[iconUrlStorageKey]) {
-                    const iconElement = document.getElementById("icon");
-                    iconElement.src = iconUrlResults[iconUrlStorageKey];
-                    iconElement.style.display = "block";
-                }
-
-                // Listen for clicks on the buttons
-                document.addEventListener("click", async (e) => {
-                    if (e.target.name === "agree") {
-                        await browser.runtime.sendMessage({ type: "webScience.userSurvey.openSurvey" });
-                    }
-                    else if (e.target.name === "later") {
-                        window.close();
-                    }
-                    else if (e.target.name === "never") {
-                        await browser.runtime.sendMessage({ type: "webScience.userSurvey.cancelSurvey" });
-                        window.close();
-                    }
-                });
-            })();
-        </script>
+        <script src="userSurvey.popupPrompt.js"></script>
     </body>
 </html> 
diff --git a/src/browser-action-assets/userSurvey.popupPrompt.js b/src/browser-action-assets/userSurvey.popupPrompt.js
@@ -0,0 +1,32 @@
+(async function() {
+    // Load the message from storage
+    const messageStorageKey = "webScience.userSurvey.popupPromptMessage";
+    const messageResults = await browser.storage.local.get(messageStorageKey);
+    if(messageResults[messageStorageKey]) {
+        const contentElement = document.getElementById("content");
+        contentElement.textContent = messageResults[messageStorageKey];
+    }
+
+    // Load icon URL from storage
+    const iconUrlStorageKey = "webScience.userSurvey.popupIconUrl";
+    const iconUrlResults = await browser.storage.local.get(iconUrlStorageKey);
+    if(iconUrlResults[iconUrlStorageKey]) {
+        const iconElement = document.getElementById("icon");
+        iconElement.src = iconUrlResults[iconUrlStorageKey];
+        iconElement.style.display = "block";
+    }
+
+    // Listen for clicks on the buttons
+    document.addEventListener("click", async (e) => {
+        if (e.target.name === "agree") {
+            await browser.runtime.sendMessage({ type: "webScience.userSurvey.openSurvey" });
+        }
+        else if (e.target.name === "later") {
+            window.close();
+        }
+        else if (e.target.name === "never") {
+            await browser.runtime.sendMessage({ type: "webScience.userSurvey.cancelSurvey" });
+            window.close();
+        }
+    });
+})();
diff --git a/src/html/userSurvey.popupNoPrompt.html b/src/html/userSurvey.popupNoPrompt.html
diff --git a/src/userSurvey.js b/src/userSurvey.js
@@ -36,8 +36,8 @@ import * as timing from "./timing.js";
 import * as storage from "./storage.js";
 import * as messaging from "./messaging.js";
 import * as permissions from "./permissions.js";
-import popupPromptPage from "include:./html/userSurvey.popupPrompt.html";
-import popupNoPromptPage from "include:./html/userSurvey.popupNoPrompt.html";
+import popupPromptPage from "include:./browser-action-assets/userSurvey.popupPrompt.html";
+import popupNoPromptPage from "include:./browser-action-assets/userSurvey.popupNoPrompt.html";
 
 /**
  * A persistent storage space for data about surveys.