Extension Guide - Sync Installation Status (#457)

* Extension Guide - Sync Installation Status

Signed-off-by: Rome Li <[email protected]>

* Fix extension name of Project Manager

Signed-off-by: Rome Li <[email protected]>

Author: akaroml

package-lock.json

@@ -134,7 +134,7 @@
     "style-loader": "^0.21.0",
     "ts-loader": "^4.3.0",
     "tslint": "^5.20.1",
-    "typescript": "^2.6.1",
+    "typescript": "^3.7.5",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },

package.json

@@ -67,8 +67,8 @@ <h6 class="font-weight-light">Recommended extensions for Java development.</h5>
                         <tr>
                           <td>
                             <div class="form-check">
-                              <input class="form-check-input" type="checkbox" value="vscjava.vscode-java-project" id="chk.vscjava.vscode-java-project">
-                              <label class="form-check-label" for="chk.vscjava.vscode-java-project">
+                              <input class="form-check-input" type="checkbox" value="vscjava.vscode-java-dependency" id="chk.vscjava.vscode-java-dependency">
+                              <label class="form-check-label" for="chk.vscjava.vscode-java-dependency">
                                 Project Manager for Java
                               </label>
                             </div>
@@ -201,7 +201,7 @@ <h6 class="font-weight-light">Recommended extensions for Java development.</h5>
                 <p class="d-none" ext="vscjava.vscode-java-debug">
                   Debug Java applications.
                 </p>
-                <p class="d-none" ext="vscjava.vscode-java-project">
+                <p class="d-none" ext="vscjava.vscode-java-dependency">
                   Manage Java projects, dependencies, and generate packages.
                 </p>
                 <p class="d-none" ext="vscjava.vscode-java-test">

src/ext-guide/assets/index.html

@@ -72,3 +72,17 @@ function bsHide($elem: JQuery<HTMLElement>) {
 function bsShow($elem: JQuery<HTMLElement>) {
   $elem.removeClass("d-none");
 }
+
+window.addEventListener("message", event => {
+  if (event.data.command === "syncExtensionStatus") {
+    syncExtensionStatus(event.data.installedExtensions);
+  }
+});
+
+function syncExtensionStatus(extensions: string[]) {
+  $("input[type='checkbox']").each((i, elem) => {
+    const isInstalled = extensions.includes(<string>$(elem).val());
+    $(elem).prop("disabled", isInstalled);
+    $(elem).prop("checked", isInstalled);
+  });
+}

src/ext-guide/assets/index.ts

@@ -44,6 +44,20 @@ async function initializeJavaExtGuideView(context: vscode.ExtensionContext, webv
       });
     }
   }));
+
+  vscode.extensions.onDidChange(e => {
+    syncExtensionStatus();
+  });
+
+  function syncExtensionStatus() {
+    const installedExtensions = vscode.extensions.all.map(ext => ext.id.toLowerCase());
+    webviewPanel.webview.postMessage({
+      command: "syncExtensionStatus",
+      installedExtensions: installedExtensions
+    });
+  }
+
+  syncExtensionStatus();
 }
 
 export class JavaExtGuideViewSerializer implements vscode.WebviewPanelSerializer {