Improve ext installation experience (#170)

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

Author: akaroml

package-lock.json

@@ -7,7 +7,7 @@
   "publisher": "vscjava",
   "preview": true,
   "engines": {
-    "vscode": "^1.28.0"
+    "vscode": "^1.32.0"
   },
   "aiKey": "b4a8a622-6ac7-4cf8-83aa-f325e1890795",
   "icon": "logo.png",

package.json

@@ -31,6 +31,15 @@ export async function showExtensionCmdHandler(context: vscode.ExtensionContext,
   vscode.commands.executeCommand("extension.open", extensionName);
 }
 
+export async function installExtensionCmdHandler(context: vscode.ExtensionContext, operationId: string, extensionName: string, displayName: string) {
+  sendInfo(operationId, { extName: extensionName });
+  return vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: `Installing ${displayName||extensionName}...`}, progress => {
+    return vscode.commands.executeCommand("workbench.extensions.installExtension", extensionName);
+  }).then(() => {
+    vscode.window.showInformationMessage(`Successfully installed ${displayName||extensionName}.`);
+  });
+}
+
 export async function openUrlCmdHandler(context: vscode.ExtensionContext, operationId: string, url: string) {
   sendInfo(operationId, { url: url });
   vscode.commands.executeCommand("vscode.open", vscode.Uri.parse(url));

src/commands/handler.ts

@@ -4,7 +4,7 @@
 import * as vscode from "vscode";
 
 import { instrumentCommand } from "../utils";
-import { createMavenProjectCmdHanlder, createSpringBootProjectCmdHandler, showExtensionCmdHandler, openUrlCmdHandler, showReleaseNotesHandler } from "./handler";
+import { createMavenProjectCmdHanlder, createSpringBootProjectCmdHandler, showExtensionCmdHandler, openUrlCmdHandler, showReleaseNotesHandler, installExtensionCmdHandler } from "./handler";
 import { overviewCmdHandler } from "../overview";
 import { javaRuntimeCmdHandler } from "../java-runtime";
 
@@ -16,4 +16,5 @@ export function initialize(context: vscode.ExtensionContext) {
   context.subscriptions.push(vscode.commands.registerCommand("java.helper.openUrl", instrumentCommand(context, "java.helper.openUrl", openUrlCmdHandler)));
   context.subscriptions.push(vscode.commands.registerCommand("java.showReleaseNotes", instrumentCommand(context, "java.showReleaseNotes", showReleaseNotesHandler)));
   context.subscriptions.push(vscode.commands.registerCommand("java.runtime", instrumentCommand(context, "java.runtime", javaRuntimeCmdHandler)));
+  context.subscriptions.push(vscode.commands.registerCommand("java.helper.installExtension", instrumentCommand(context, "java.helper.installExtension", installExtensionCmdHandler)));
 }

src/commands/index.ts

@@ -140,40 +140,40 @@ <h3 class="font-weight-light">Documentation</h3>
         <div class="row mb-3">
           <div class="col">
             <h3 class="font-weight-light">Key Bindings</h3>
-            <div ext="k--kato.intellij-idea-keybindings">
-              <a href="command:java.helper.showExtension?%22k--kato.intellij-idea-keybindings%22" title="Use IntelliJ IDEA hot keys in VS Code...">Use IntelliJ IDEA Key Bindings</a>
+            <div ext="k--kato.intellij-idea-keybindings" displayName="IntelliJ IDEA Key Bindings">
+              <a href="#" title="Use IntelliJ IDEA hot keys in VS Code...">Use IntelliJ IDEA Key Bindings</a>
             </div>
-            <div ext="alphabotsec.vscode-eclipse-keybindings">
-              <a href="command:java.helper.showExtension?%22alphabotsec.vscode-eclipse-keybindings%22" title="Use Eclipse hot keys in VS Code...">Use Eclipse Key Bindings</a>
+            <div ext="alphabotsec.vscode-eclipse-keybindings" displayName="Eclipse Key Bindings">
+              <a href="#" title="Use Eclipse hot keys in VS Code...">Use Eclipse Key Bindings</a>
             </div>
           </div>
         </div>
         <div class="row mb-3">
           <div class="col">
             <h3 class="font-weight-light">Extensions</h3>
-            <div ext="redhat.java">
-              <a href="command:java.helper.showExtension?%22redhat.java%22" title="Install Java Language Support extension...">Install Java Language Support by Red Hat</a>
+            <div ext="redhat.java" displayName="Java Language Support by Red Hat">
+              <a href="#" title="Install Java Language Support extension...">Install Java Language Support by Red Hat</a>
             </div>
-            <div ext="redhat.java">
-              <a href="command:java.helper.showExtension?%22vscjava.vscode-java-debug%22" title="Install Debugger for Java extension...">Install Debugger for Java</a>
+            <div ext="vscjava.vscode-java-debug" displayName="Debugger for Java">
+              <a href="#" title="Install Debugger for Java extension...">Install Debugger for Java</a>
             </div>
-            <div ext="vscjava.vscode-java-test">
-              <a href="command:java.helper.showExtension?%22vscjava.vscode-java-test%22" title="Install Java Test Runner extension...">Install Java Test Runner</a>
+            <div ext="vscjava.vscode-java-test" displayName="Java Test Runner">
+              <a href="#" title="Install Java Test Runner extension...">Install Java Test Runner</a>
             </div>
-            <div ext="vscjava.vscode-maven">
-              <a href="command:java.helper.showExtension?%22vscjava.vscode-maven%22" title="Install Maven for Java extension...">Install Maven for Java</a>
+            <div ext="vscjava.vscode-maven" displayName="Maven for Java">
+              <a href="#" title="Install Maven for Java extension...">Install Maven for Java</a>
             </div>
-            <div ext="adashen.vscode-tomcat">
-              <a href="command:java.helper.showExtension?%22adashen.vscode-tomcat%22" title="Install Tomcat for Java extension...">Install Tomcat for Java</a>
+            <div ext="adashen.vscode-tomcat" displayName="Tomcat for Java">
+              <a href="#" title="Install Tomcat for Java extension...">Install Tomcat for Java</a>
             </div>
-            <div ext="shengchen.vscode-checkstyle">
-              <a href="command:java.helper.showExtension?%22shengchen.vscode-checkstyle%22" title="Install Checkstyle for Java extension...">Install Checkstyle for Java</a>
+            <div ext="shengchen.vscode-checkstyle" displayName="Checkstyle for Java">
+              <a href="#" title="Install Checkstyle for Java extension...">Install Checkstyle for Java</a>
             </div>
-            <div ext="redhat.vscode-xml">
-              <a href="command:java.helper.showExtension?%22redhat.vscode-xml%22" title="Schema validation when editing pom.xml...">Install XML extension</a>
+            <div ext="redhat.vscode-xml" displayName="XML">
+              <a href="#" title="Schema validation when editing pom.xml...">Install XML extension</a>
             </div>
-            <div ext="vscjava.vscode-java-dependency">
-              <a href="command:java.helper.showExtension?%22vscjava.vscode-java-dependency%22" title="Install Java Dependency Viewer extension...">Install Java Dependency Viewer</a>
+            <div ext="vscjava.vscode-java-dependency" displayName="Java Dependency Viewer">
+              <a href="#" title="Install Java Dependency Viewer extension...">Install Java Dependency Viewer</a>
             </div>
           </div>
         </div>
@@ -188,8 +188,8 @@ <h3 class="font-weight-light">Spring</h3>
             <div>
               <a href="command:java.helper.openUrl?%22https%3A%2F%2Fgithub.com%2Fspring-projects%2Fspring-petclinic%22" title="Run PetClinic sample app in VS Code">Spring PetClinic Sample Application</a>
             </div>
-            <div ext="pivotal.vscode-boot-dev-pack">
-              <a href="command:java.helper.showExtension?%22pivotal.vscode-boot-dev-pack%22" title="Install Spring Boot Extension Pack...">Install Spring Boot Extension Pack</a>
+            <div ext="pivotal.vscode-boot-dev-pack" displayName="Spring Boot Extension Pack">
+              <a href="#" title="Install Spring Boot Extension Pack...">Install Spring Boot Extension Pack</a>
             </div>
           </div>
         </div>
@@ -202,11 +202,11 @@ <h3 class="font-weight-light">Microservices</h3>
             <div>
               <a href="command:java.helper.openUrl?%22https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Fazure%2Fdocker%22" title="Learn how to work with Docker in VS Code">Docker in VS Code</a>
             </div>
-            <div ext="ms-kubernetes-tools.vscode-kubernetes-tools">
-              <a href="command:java.helper.showExtension?%22ms-kubernetes-tools.vscode-kubernetes-tools%22" title="Install Kubernetes extension...">Install Kubernetes Extension</a>
+            <div ext="ms-kubernetes-tools.vscode-kubernetes-tools" displayName="Kubernetes">
+              <a href="#" title="Install Kubernetes extension...">Install Kubernetes Extension</a>
             </div>
-            <div ext="peterjausovec.vscode-docker">
-              <a href="command:java.helper.showExtension?%22peterjausovec.vscode-docker%22" title="Install Docker extension...">Install Docker Extension</a>
+            <div ext="ms-azuretools.vscode-docker" displayName="Docker">
+              <a href="#" title="Install Docker extension...">Install Docker Extension</a>
             </div>
           </div>
         </div>

src/overview/assets/index.html

@@ -7,9 +7,9 @@ import "bootstrap/js/src/tab";
 import bytes = require("bytes");
 
 window.addEventListener("message", event => {
-  if (event.data.command === "hideInstalledExtensions") {
-    hideInstalledExtensions(event.data.installedExtensions);
-    hideEmptySections();
+  if (event.data.command === "syncExtensionVisibility") {
+    syncExtensionVisibility(event.data.installedExtensions);
+    syncSectionVisibility();
   } else if (event.data.command === "setOverviewVisibility") {
     $("#showWhenUsingJava").prop("checked", event.data.visibility);
   } else if (event.data.command === "showJavaRuntimePanel") {
@@ -34,20 +34,24 @@ function applyJdkInfo(jdkInfo: any) {
   $("#jdkDownloadLink").removeClass("d-none");
 }
 
-function hideInstalledExtensions(extensions: any) {
+function syncExtensionVisibility(extensions: any) {
   $("div[ext]").each((index, elem) => {
     const anchor = $(elem);
     const ext = (anchor.attr("ext") || "").toLowerCase();
     if (extensions.indexOf(ext) !== -1) {
       anchor.hide();
+    } else {
+      anchor.show();
     }
   });
 }
 
-function hideEmptySections() {
+function syncSectionVisibility() {
   $("div h3").parent().each((i, div) => {
     if (!$(div).children("h3 ~ div").is(":visible")) {
       $(div).hide();
+    } else {
+      $(div).show();
     }
   });
 }
@@ -70,6 +74,18 @@ function requestJdkInfo(jdkVersion: string, jvmImpl: string) {
   });
 }
 
+function installExtension(extName: string, displayName: string) {
+  vscode.postMessage({
+    command: "installExtension",
+    extName: extName,
+    displayName: displayName
+  });
+}
+
+$("div[ext]").click(function () {
+  installExtension($(this).attr("ext"), $(this).attr("displayName"));
+});
+
 $("input[type=radio]").change(() => {
   $("#jdkSpinner").removeClass("d-none");
   $("#jdkDownloadLink").addClass("d-none");

src/overview/assets/index.ts

@@ -58,10 +58,18 @@ async function initializeOverviewView(context: vscode.ExtensionContext, webviewP
 
   context.subscriptions.push(webviewPanel.onDidDispose(onDisposeCallback));
 
-  const installedExtensions = vscode.extensions.all.map(ext => ext.id.toLowerCase());
-  webviewPanel.webview.postMessage({
-    command: "hideInstalledExtensions",
-    installedExtensions: installedExtensions
+  function syncExtensionVisibility() {
+    const installedExtensions = vscode.extensions.all.map(ext => ext.id.toLowerCase());
+    webviewPanel.webview.postMessage({
+      command: "syncExtensionVisibility",
+      installedExtensions: installedExtensions
+    });
+  }
+
+  syncExtensionVisibility();
+
+  vscode.extensions.onDidChange(e => {
+    syncExtensionVisibility();
   });
 
   webviewPanel.webview.postMessage({
@@ -75,6 +83,8 @@ async function initializeOverviewView(context: vscode.ExtensionContext, webviewP
     } else if (e.command === "requestJdkInfo") {
       let jdkInfo = await suggestOpenJdk(e.jdkVersion, e.jvmImpl);
       applyJdkInfo(jdkInfo);
+    } else if (e.command === "installExtension") {
+      await vscode.commands.executeCommand("java.helper.installExtension", e.extName, e.displayName);
     }
   }));
 
@@ -87,7 +97,6 @@ async function initializeOverviewView(context: vscode.ExtensionContext, webviewP
     applyJdkInfo(jdkInfo);
   }
 
-
   function applyJdkInfo(jdkInfo: any) {
     webviewPanel.webview.postMessage({
       command: "applyJdkInfo",

src/overview/index.ts

@@ -22,10 +22,10 @@ export function isExtensionInstalled( extName: string) {
 }
 
 export async function recommendExtension(extName: string, message: string): Promise<void> {
-  const action = "Details";
+  const action = "Install";
   const answer = await vscode.window.showInformationMessage(message, action);
   if (answer === action) {
-    await vscode.commands.executeCommand("java.helper.showExtension", extName);
+    await vscode.commands.executeCommand("java.helper.installExtension", extName, extName);
   }
 }