Improve UI of New Extension page #13
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,47 @@ | ||
| # VSCode Chrome Extension Developer Tools | ||
|
|
||
|   \ | ||
| VSCode support for Chrome extension development. | ||
| [View on Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=aaravb.chrome-extension-developer-tools). | ||
|
|
||
| ## Features | ||
|
|
||
| - Initialize chrome extensions in VSCode. | ||
| - Package chrome extensions in VSCode. | ||
| - Webpack integrations. | ||
| - `manifest.json` documentation through hovers. | ||
|
|
||
| ## Usage | ||
|
|
||
| This extension provides three commands that enable you to create, watch, and build a Chrome extension. | ||
|
|
||
| To run any of the commands listed below, open the `Command Palette` (use `Ctrl + P`) and type the desired command: | ||
|
|
||
| 1. **Chrome Extension: Create New**: | ||
|
|
||
| - Description: Creates a new Chrome extension (opens a webview for parameters). | ||
| - ID: `chrome-extension-developer-tools.create` | ||
|
|
||
| 2. **Chrome Extension: Watch Files**: | ||
|
|
||
| - Description: Uses webpack to watch extension files. | ||
| - ID: `chrome-extension-developer-tools.watch` | ||
|
|
||
| 3. **Chrome Extension: Build Files**: | ||
|
|
||
| - Description: Uses webpack to package Chrome extension for publishing. | ||
| - ID: `chrome-extension-developer-tools.build` | ||
|
|
||
| ## For Contribution Opportunities | ||
|
|
||
| We welcome contributions to this project! If you're interested in helping, feel free to take on any of the following tasks or propose your own ideas: | ||
|
|
||
| - **TODO**: | ||
|
|
||
| - [ ] **Convert 'Create New Extension' into a Dialog/Window**: Refactor the current 'Create New ]Extension' functionality so that it opens as a dialog or window, rather than a full page. | ||
|
|
||
| - [ ] **Design a New Icon for the Extension**: Create and implement a new icon to represent the extension. | ||
| - [ ] **Customizable Project Templates**: Enable users to add their own custom templates or modify existing ones while creating a project. | ||
| - [ ] **Add Dependency Selection**: Allow users to choose additional dependencies they would like to include during project creation. | ||
|
|
||
| We are open to other suggestions, so feel free to share your ideas! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,47 @@ | ||
| <link rel="stylesheet" href="{{styles.css}}" /> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="header"> | ||
| <div class="icon"> | ||
| <img src="{{/assets/chrome.png}}" alt="icon" /> | ||
| </div> | ||
| <p class="title">Create New Chrome Extension</p> | ||
| </div> | ||
| <div class="project-form"> | ||
| <div class="inputs"> | ||
| <input type="text" id="project_name" placeholder="Project Name" /> | ||
| <div class="extension_type_container"> | ||
| <label for="extension_type"> | ||
| Extension Type: | ||
| <a | ||
| id="extension_type_info" | ||
| href="https://github.com/gadhagod/chrome-extension-cli-client/blob/master/templates/README.md#templates" | ||
| > | ||
| (?) | ||
| </a> | ||
| </label> | ||
| <select name="Extension Type" id="extension_type"> | ||
| <option value="popup">Popup</option> | ||
| <option value="override_page">Override page</option> | ||
| <option value="devtools">Dev tools</option> | ||
| </select> | ||
| </div> | ||
| <div class="location_container"> | ||
| <label for="choose_location"> | ||
| Choose Location: | ||
| <button id="choose_location" onclick="getLocation()">Choose</button> | ||
| </label> | ||
| <span id="location_label">(no location selected)</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button id="submit" onclick="submit()">Create</button> | ||
| </div> | ||
|
|
||
| <div class="loading" style="visibility: hidden"> | ||
| <p class="loading_text">Setting up project.</p> | ||
| <div class="loader"></div> | ||
| </div> | ||
| </body> | ||
|
|
||
| <script src="{{index.js}}"></script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,71 @@ | ||
| const vscode = acquireVsCodeApi(); | ||
|
|
||
| window.addEventListener("message", data => { | ||
| var res = data.data; | ||
|
|
||
| if (res.status === "GIVE") { | ||
| document.getElementById("location_label").innerHTML = res.message.path; | ||
| } else if (res.status === "ERR") { | ||
| document.querySelector(".loading").style.display = "none"; | ||
|
There was a problem hiding this comment. Is there a specific reason for using querySelector over getElementById here? |
||
| 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.querySelector(".loading").style.visibility = "visible"; | ||
|
|
||
| vscode.postMessage({ | ||
| status: "OK", | ||
| message: { | ||
| projectName: projectName, | ||
| extensionType: extensionType, | ||
| chosenPath: chosenPath, | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| (async function () { | ||
| let loadingText = document.querySelector(".loading_text"); | ||
| let ellipsisDotCount = 1; | ||
| setInterval(() => { | ||
| if (ellipsisDotCount > 2) { | ||
| loadingText.innerHTML = loadingText.innerHTML.replace("...", "."); | ||
| ellipsisDotCount = 1; | ||
| } else { | ||
| loadingText.innerHTML += "."; | ||
| ellipsisDotCount++; | ||
| } | ||
| }, 500); | ||
|
|
||
| })(); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we keep the indentation to 4 spaces please?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sure, I guess it was my editors default setting and i didn't pay much attention to it