Getting started page from command palette

locales/en/package.i18n.json

@@ -1,19 +1,21 @@
 {
-  "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies",
-  "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express",
-  "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator",
-  "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate",
-  "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor",
-  "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor",
-  "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port",
-  "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator",
-  "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File",
-  "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device",
-  "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device",
-  "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator",
-  "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File",
-  "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
-  "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
-  "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
-  "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
+    "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies",
+    "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express",
+    "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator",
+    "deviceSimulatorExpressExtension.commands.common.gettingStarted": "Getting Started",
+
+    "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate",
+    "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor",
+    "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor",
+    "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port",
+    "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator",
+    "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File",
+    "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device",
+    "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device",
+    "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator",
+    "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File",
+    "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
+    "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
+    "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
+    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
 }

package.json

@@ -34,6 +34,7 @@
         "onCommand:deviceSimulatorExpress.common.openSerialMonitor",
         "onCommand:deviceSimulatorExpress.common.runSimulator",
         "onCommand:deviceSimulatorExpress.common.selectSerialPort",
+        "onCommand:deviceSimulatorExpress.common.gettingStarted",
         "onCommand:deviceSimulatorExpress.cpx.deployToDevice",
         "onCommand:deviceSimulatorExpress.cpx.newFile",
         "onCommand:deviceSimulatorExpress.cpx.openSimulator",
@@ -75,6 +76,11 @@
                 "title": "%deviceSimulatorExpressExtension.commands.common.runSimulator%",
                 "category": "%deviceSimulatorExpressExtension.commands.common.label%"
             },
+            {
+                "command": "deviceSimulatorExpress.common.gettingStarted",
+                "title": "%deviceSimulatorExpressExtension.commands.common.gettingStarted%",
+                "category": "%deviceSimulatorExpressExtension.commands.common.label%"
+            },
             {
                 "command": "deviceSimulatorExpress.cpx.deployToDevice",
                 "title": "%deviceSimulatorExpressExtension.commands.cpx.deployToDevice%",

package.nls.json

@@ -1,19 +1,21 @@
 {
-  "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies",
-  "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express",
-  "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator",
-  "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate",
-  "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor",
-  "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor",
-  "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port",
-  "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator",
-  "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File",
-  "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device",
-  "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device",
-  "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator",
-  "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File",
-  "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
-  "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
-  "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
-  "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
+    "deviceSimulatorExpressExtension.commands.common.installDependencies": "Install Extension Dependencies",
+    "deviceSimulatorExpressExtension.commands.common.label": "Device Simulator Express",
+    "deviceSimulatorExpressExtension.commands.common.runSimulator": "Run Simulator",
+    "deviceSimulatorExpressExtension.commands.common.gettingStarted": "Getting Started",
+
+    "deviceSimulatorExpressExtension.commands.common.changeBaudRate": "Change Baud Rate",
+    "deviceSimulatorExpressExtension.commands.common.closeSerialMonitor": "Close Serial Monitor",
+    "deviceSimulatorExpressExtension.commands.common.openSerialMonitor": "Open Serial Monitor",
+    "deviceSimulatorExpressExtension.commands.common.selectSerialPort": "Select Serial Port",
+    "deviceSimulatorExpressExtension.commands.cpx.openSimulator": "[Circuit Playground Express] Open Simulator",
+    "deviceSimulatorExpressExtension.commands.cpx.newFile": "[Circuit Playground Express] New File",
+    "deviceSimulatorExpressExtension.commands.cpx.deployToDevice": "[Circuit Playground Express] Deploy to Device",
+    "deviceSimulatorExpressExtension.commands.microbit.deployToDevice": "[micro:bit] Deploy to Device",
+    "deviceSimulatorExpressExtension.commands.microbit.openSimulator": "[micro:bit] Open Simulator",
+    "deviceSimulatorExpressExtension.commands.microbit.newFile": "[micro:bit] New File",
+    "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
+    "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
+    "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
+    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
 }

src/constants.ts

@@ -25,6 +25,10 @@ export const CONFIG = {
 };
 
 export const CONSTANTS = {
+    WEBVIEW_TYPE: {
+        SIMULATOR: "simulator",
+        TUTORIAL: "tutorial",
+    },
     DEBUG_CONFIGURATION_TYPE: "deviceSimulatorExpress",
     DEVICE_NAME: {
         CPX: "CPX",
@@ -320,6 +324,7 @@ export enum TelemetryEventName {
     COMMAND_SERIAL_MONITOR_OPEN = "COMMAND.SERIAL_MONITOR.OPEN",
     COMMAND_SERIAL_MONITOR_BAUD_RATE = "COMMAND.SERIAL_MONITOR.BAUD_RATE",
     COMMAND_SERIAL_MONITOR_CLOSE = "COMMAND.SERIAL_MONITOR.CLOSE",
+    COMMAND_GETTING_STARTED = "COMMAND.GETTING_STARTED",
 
     CPX_COMMAND_DEPLOY_DEVICE = "CPX.COMMAND.DEPLOY.DEVICE",
     CPX_COMMAND_NEW_FILE = "CPX.COMMAND.NEW.FILE.CPX",

src/extension.ts

@@ -35,7 +35,12 @@ import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurati
 import getPackageInfo from "./telemetry/getPackageInfo";
 import TelemetryAI from "./telemetry/telemetryAI";
 import { UsbDetector } from "./usbDetector";
-import { VSCODE_MESSAGES_TO_WEBVIEW, WEBVIEW_MESSAGES } from "./view/constants";
+import {
+    VSCODE_MESSAGES_TO_WEBVIEW,
+    WEBVIEW_MESSAGES,
+    WEBVIEW_TYPES,
+} from "./view/constants";
+import { WebviewService } from "./service/webviewService";
 
 let telemetryAI: TelemetryAI;
 let pythonExecutablePath: string = GLOBAL_ENV_VARS.PYTHON;
@@ -53,14 +58,6 @@ const fileSelectionService = new FileSelectionService(messagingService);
 
 export let outChannel: vscode.OutputChannel | undefined;
 
-function loadScript(context: vscode.ExtensionContext, scriptPath: string) {
-    return `<script initialDevice=${deviceSelectionService.getCurrentActiveDevice()} src="${vscode.Uri.file(
-        context.asAbsolutePath(scriptPath)
-    )
-        .with({ scheme: "vscode-resource" })
-        .toString()}"></script>`;
-}
-
 const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => {
     if (currentPanel) {
         currentPanel.webview.postMessage({
@@ -71,14 +68,13 @@ const sendCurrentDeviceMessage = (currentPanel: vscode.WebviewPanel) => {
 };
 // Extension activation
 export async function activate(context: vscode.ExtensionContext) {
-    console.info(CONSTANTS.INFO.EXTENSION_ACTIVATED);
-
     telemetryAI = new TelemetryAI(context);
     setupService = new SetupService(telemetryAI);
     let currentPanel: vscode.WebviewPanel | undefined;
     let childProcess: cp.ChildProcess | undefined;
     let messageListener: vscode.Disposable;
     let activeEditorListener: vscode.Disposable;
+    const webviewService = new WebviewService(context, deviceSelectionService);
 
     // Add our library path to settings.json for autocomplete functionality
     updatePythonExtraPaths();
@@ -130,7 +126,7 @@ export async function activate(context: vscode.ExtensionContext) {
             currentPanel.reveal(vscode.ViewColumn.Beside);
         } else {
             currentPanel = vscode.window.createWebviewPanel(
-                "adafruitSimulator",
+                CONSTANTS.WEBVIEW_TYPE.SIMULATOR,
                 CONSTANTS.LABEL.WEBVIEW_PANEL,
                 { preserveFocus: true, viewColumn: vscode.ViewColumn.Beside },
                 {
@@ -147,7 +143,10 @@ export async function activate(context: vscode.ExtensionContext) {
                 }
             );
 
-            currentPanel.webview.html = getWebviewContent(context);
+            currentPanel.webview.html = webviewService.getWebviewContent(
+                WEBVIEW_TYPES.SIMULATOR,
+                true
+            );
             messagingService.setWebview(currentPanel.webview);
 
             if (messageListener !== undefined) {
@@ -303,6 +302,16 @@ export async function activate(context: vscode.ExtensionContext) {
         openWebview();
     };
 
+    const gettingStartedOpen: vscode.Disposable = vscode.commands.registerCommand(
+        "deviceSimulatorExpress.common.gettingStarted",
+        () => {
+            telemetryAI.trackFeatureUsage(
+                TelemetryEventName.COMMAND_GETTING_STARTED
+            );
+            webviewService.openTutorialPanel();
+        }
+    );
+
     // Open Simulator on the webview
     const cpxOpenSimulator: vscode.Disposable = vscode.commands.registerCommand(
         "deviceSimulatorExpress.cpx.openSimulator",
@@ -1059,6 +1068,7 @@ export async function activate(context: vscode.ExtensionContext) {
         microbitOpenSimulator,
         microbitNewFile,
         microbitDeployToDevice,
+        gettingStartedOpen,
         vscode.debug.registerDebugConfigurationProvider(
             CONSTANTS.DEBUG_CONFIGURATION_TYPE,
             simulatorDebugConfiguration
@@ -1321,27 +1331,6 @@ const updateConfigLists = (
         .update(section, Array.from(extraItemsSet), scope);
 };
 
-function getWebviewContent(context: vscode.ExtensionContext) {
-    return `<!DOCTYPE html>
-          <html lang="en">
-          <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-            <title>${CONSTANTS.NAME}</title>
-            </head>
-          <body>
-            <div id="root"></div>
-            <script >
-              const vscode = acquireVsCodeApi();
-            </script>
-            <script ></script>
-            ${loadScript(context, "out/vendor.js")}
-            ${loadScript(context, "out/simulator.js")}
-          </body>
-          </html>`;
-}
-
 // this method is called when your extension is deactivated
 export async function deactivate() {
     const monitor: SerialMonitor = SerialMonitor.getInstance();

src/service/webviewService.ts

@@ -0,0 +1,104 @@
+import * as path from "path";
+import * as vscode from "vscode";
+import CONSTANTS from "../constants";
+import { WEBVIEW_ATTRIBUTES_KEY, WEBVIEW_TYPES } from "../view/constants";
+import { DeviceSelectionService } from "./deviceSelectionService";
+
+// Manages different type of webview
+export class WebviewService {
+    private tutorialPanel: vscode.WebviewPanel | undefined;
+    private context: vscode.ExtensionContext;
+    private deviceSelectionService: DeviceSelectionService;
+
+    constructor(
+        context: vscode.ExtensionContext,
+        deviceSelectionService: DeviceSelectionService
+    ) {
+        this.context = context;
+        this.deviceSelectionService = deviceSelectionService;
+    }
+
+    public openTutorialPanel() {
+        if (this.tutorialPanel) {
+            this.tutorialPanel.reveal(vscode.ViewColumn.Beside);
+        } else {
+            this.createTutorialPanel();
+        }
+    }
+
+    public getWebviewContent(webviewType: string, hasDevice: boolean) {
+        return `<!DOCTYPE html>
+              <html lang="en">
+              <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+                <title>${CONSTANTS.NAME}</title>
+                </head>
+              <body>
+                <div id="root"></div>
+                <script >
+                  const vscode = acquireVsCodeApi();
+                </script>
+                <script ></script>
+                ${this.loadScript(
+                    this.context,
+                    webviewType,
+                    "out/vendor.js",
+                    hasDevice
+                )}
+                ${this.loadScript(
+                    this.context,
+                    webviewType,
+                    "out/simulator.js",
+                    hasDevice
+                )}
+              </body>
+              </html>`;
+    }
+
+    private createTutorialPanel() {
+        this.tutorialPanel = vscode.window.createWebviewPanel(
+            CONSTANTS.WEBVIEW_TYPE.TUTORIAL,
+            CONSTANTS.LABEL.WEBVIEW_PANEL,
+            { preserveFocus: true, viewColumn: vscode.ViewColumn.One },
+            {
+                enableScripts: true,
+            }
+        );
+        this.tutorialPanel.webview.html = this.getWebviewContent(
+            WEBVIEW_TYPES.GETTING_STARTED,
+            false
+        );
+        this.tutorialPanel.onDidDispose(() => {
+            this.disposeTutorialPanel();
+        });
+    }
+
+    private disposeTutorialPanel() {
+        this.tutorialPanel = undefined;
+    }
+
+    private loadScript(
+        context: vscode.ExtensionContext,
+        attributeValue: string,
+        scriptPath: string,
+        hasDevice: boolean
+    ) {
+        let attributeString: string;
+        if (hasDevice) {
+            attributeString = `${
+                WEBVIEW_ATTRIBUTES_KEY.TYPE
+            }=${attributeValue} ${
+                WEBVIEW_ATTRIBUTES_KEY.INITIAL_DEVICE
+            }=${this.deviceSelectionService.getCurrentActiveDevice()}`;
+        } else {
+            attributeString = `${WEBVIEW_ATTRIBUTES_KEY.TYPE}=${attributeValue} `;
+        }
+        return `<script ${attributeString} src="${vscode.Uri.file(
+            context.asAbsolutePath(scriptPath)
+        )
+            .with({ scheme: "vscode-resource" })
+            .toString()}"></script>`;
+    }
+}