Beautify extension creation webview

gadhagod · Jan 23, 2022 · c73a9a6 · c73a9a6
1 parent b5f0a6c
commit c73a9a6
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 85 deletions.
diff --git a/assets/chrome.png b/assets/chrome.png
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "repository": {
     "url": "https://github.com/gadhagod/vscode-chrome-extension-devtools"
   },
-  "version": "2.0.1",
+  "version": "2.0.2",
   "engines": {
     "vscode": "^1.59.0"
   },

diff --git a/src/commands/create.ts b/src/commands/create.ts
@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { readFileSync } from "fs";
+import { renderWebview } from "../utils";
 import { join } from "path";
 const createExtension = require("chrome-extension-cli-client").createExtension;
 
@@ -17,7 +17,18 @@ export default (context: vscode.ExtensionContext) => {
         }
     );
 
-    initializationScreen.webview.html = readFileSync(vscode.Uri.file(join(context.extensionPath, "webviews", "initializationScreen.html")).fsPath, "utf-8");
+    let stylesSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "webviews", "initialization_screen", "styles.css"))).toString();
+    let scriptSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "webviews", "initialization_screen", "index.js"))).toString();
+    let chromeImgSrc = initializationScreen.webview.asWebviewUri(vscode.Uri.file(join(context.extensionPath, "assets", "chrome.png"))).toString();
+
+    initializationScreen.webview.html = renderWebview(
+        join(context.extensionPath, "webviews", "initialization_screen", "index.html"), 
+        {
+            "index.js": scriptSrc, 
+            "styles.css": stylesSrc, 
+            "/assets/chrome.png": chromeImgSrc
+        }
+    );
 
     initializationScreen.webview.onDidReceiveMessage(
         (res: {
@@ -43,7 +54,7 @@ export default (context: vscode.ExtensionContext) => {
                         status: "GIVE",
                         message: { path: (locations as vscode.Uri[])[0].fsPath }
                     });
-                })
+                });
                 return;
             }
 
@@ -63,18 +74,18 @@ export default (context: vscode.ExtensionContext) => {
 
                 vscode.commands.executeCommand("vscode.openFolder", vscode.Uri.file(join(config.chosenPath, config.projectName)), {
                     forceNewWindow: true
-                })
+                });
             } catch (e) {
-                console.log(e);
+                console.error(e);
                 let err = e as { message: string };
                 vscode.window.showErrorMessage("ERROR: " + (err).message);
                 initializationScreen.webview.postMessage({
                     status: "ERR",
                     message: err.message
-                })
+                });
             }
         },
         undefined,
         context.subscriptions
-    )
-}
+    );
+};
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,4 @@
+import { readFileSync } from "fs";
 import * as vscode from "vscode";
 import * as types from "./types";
 
@@ -16,3 +17,17 @@ export function registerCommands(
         }));
     });
 }
+
+/**
+ * Builds a webview's HTML by rendering a template
+ * @param {string} template HTML template file of webview
+ * @param {object} data Data to be passed into template
+ */
+export function renderWebview(template: string, data: object) {
+    let html = readFileSync(vscode.Uri.file(template).fsPath, "utf-8");
+    let variables = Object.keys(data);
+    for(let i = 0; i < variables.length; i++) {
+        html = html.replace(`{{${variables[i]}}}`, (data as any)[variables[i]]);
+    }
+    return html;
+}
diff --git a/webviews/initializationScreen.html b/webviews/initializationScreen.html
diff --git a/webviews/initialization_screen/index.html b/webviews/initialization_screen/index.html
@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="{{styles.css}}">
+
+<center>
+    <img src="{{/assets/chrome.png}}" height="5%" width="5%">
+    <h1 align>New Chrome Extension</h1>
+</center>
+<hr>
+<body>
+    <label for="project_name">Project Name:</label>
+    <input type="text" id="project_name" required>
+
+    <br><br>
+
+    <label for="extension_type">Extension Type <small>[<a href="https://github.com/gadhagod/chrome-extension-cli-client/blob/master/templates/README.md#templates">?</a>]</small>:</label>
+
+    <select id="extension_type">
+        <option value="popup">Popup</option>
+        <option value="override_page">Override page</option>
+        <option value="devtools">Dev tools</option>
+    </select>
+
+    <br><br>
+
+    <label id="location_label" for="choose_location">Location: </label>
+    <button id="choose_location" onclick="getLocation()">Choose</button>
+
+    <br><br>
+
+    <button id="submit" onclick="submit()">Create</button>
+
+    <div id="loading" style="display: none">
+        <hr>
+        <center>
+            <p id="loading_text">Creating extension and installing dependencies.</p>
+            <div id="loader"></div>
+        </center>
+    </div>
+</body>
+
+<script src="{{index.js}}">
+</script>
diff --git a/webviews/initialization_screen/index.js b/webviews/initialization_screen/index.js
@@ -0,0 +1,71 @@
+const vscode = acquireVsCodeApi();
+
+window.addEventListener("message", (data) => {
+    var res = data.data;
+
+    if (res.status === "GIVE") {
+        document.getElementById("location_label").innerHTML = "Location: " + res.message.path;
+    } else if (res.status === "ERR") {
+        document.getElementById("loading").style.display = "none";
+        document.getElementById("project_name").removeAttribute("disabled");
+        document.getElementById("extension_type").removeAttribute("disabled");
+        document.getElementById("choose_location").removeAttribute("disabled");
+        document.getElementById("submit").removeAttribute("disabled");
+    } else if (res.status === "LOAD") {
+        document.getElementById("loader").innerHTML += "\n" + res.message;
+    }
+});
+
+function getLocation() {
+    vscode.postMessage({
+        status: "GET",
+        message: "Get location",
+    });
+}
+
+function submit() {
+    let projectName = document.getElementById("project_name").value;
+    let extensionType = document.getElementById("extension_type").value;
+    let chosenPath = document.getElementById("location_label").innerHTML.replace("Location: ", "");
+
+    document.getElementById("project_name").setAttribute("disabled", "");
+    document.getElementById("extension_type").setAttribute("disabled", "");
+    document.getElementById("choose_location").setAttribute("disabled", "");
+    document.getElementById("submit").setAttribute("disabled", "");
+
+    if (!projectName || !extensionType || !chosenPath) {
+        document.getElementById("project_name").removeAttribute("disabled");
+        document.getElementById("extension_type").removeAttribute("disabled");
+        document.getElementById("choose_location").removeAttribute("disabled");
+        vscode.postMessage({
+            status: "ERR",
+            message: "Missing project configuration",
+        });
+        return;
+    }
+
+    document.getElementById("loading").style.display = "block";
+
+    vscode.postMessage({
+        status: "OK",
+        message: {
+            projectName: projectName,
+            extensionType: extensionType,
+            chosenPath: chosenPath,
+        },
+    });
+}
+
+(async function() {
+    let loadingText = document.getElementById("loading_text");
+    let ellipsisDotCount = 1;
+    setInterval(() => {
+        if(ellipsisDotCount > 2) {
+            loadingText.innerHTML = loadingText.innerHTML.replace("...", ".");
+            ellipsisDotCount = 1;
+        } else {
+            loadingText.innerHTML += ".";
+            ellipsisDotCount++;
+        }
+    }, 1000);
+})();
diff --git a/webviews/initialization_screen/styles.css b/webviews/initialization_screen/styles.css
@@ -0,0 +1,20 @@
+img {
+    margin-top: 1%;
+}
+body {
+    margin-left: 3%;
+}
+#loader {
+    /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader */
+    border: 10px solid rgba(255, 255, 255, 0.061);
+    border-top: 10px solid blue;
+    border-radius: 10%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+}
+@keyframes spin {
+    /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader */
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}