Changed name in li (list item) from input to label.

media/main.css

@@ -15,9 +15,16 @@ ul.option-list li {
 }
 
 ul.option-list li input.name {
+	vertical-align: middle;
 	width: 70%;
 }
 
 ul.option-list li input.value {
+	vertical-align: middle;
 	width: 25%;
 }
+
+ul.option-list li label.name {
+	vertical-align: middle;
+	width: 70%;
+}

media/main.js

@@ -3,10 +3,9 @@
 (function () {
     const vscode = acquireVsCodeApi();
 
-    const oldState = vscode.getState() || { definedConstants: [], undefinedConstants: [], options: [] };
+    const oldState = vscode.getState() || { constants: [], options: [] };
 
-    let undefinedConstants = oldState.undefinedConstants;
-    let definedConstants = oldState.definedConstants;
+    let constants = oldState.constants;
     let options = oldState.options;
 
     console.log("Started");
@@ -23,9 +22,14 @@
         const message = event.data; // The json data that the extension sent
         console.log("Received message");
         switch (message.type) {
-            case 'update':
+            case 'updateConstants':
                 {
-                    update(message.undefinedConstants, message.definedConstants, message.options);
+                    updateConstants(message.constants);
+                    break;
+                }
+            case 'updateOptions':
+                {
+                    updateOptions(message.options);
                     break;
                 }
             case 'fillTools':
@@ -47,51 +51,74 @@
         }
     }
 
-    /**
-     * @param {Array<{name: string, value: string}>} undefinedConstants
-     * @param {Array<{name: string, value: string}>} definedConstants
-     * @param {Array<{name: string, value: string}>} options
-     */
-    function update(undefinedConstants, definedConstants, options) {
-        function addListItem(ul, name, value) {
-            const li = document.createElement("li");
+    function addConstantItem(ul, name) {
+        const li = document.createElement("li");
 
-            const nameBox = document.createElement("input");
-            nameBox.id = "name-" + name;
-            nameBox.type = "text";
-            nameBox.value = name;
-            nameBox.classList.add("name");
+        const nameBox = document.createElement("label");
+        nameBox.id = "name-" + name;
+        nameBox.appendChild(document.createTextNode(name));
+        nameBox.classList.add("name");
 
-            li.appendChild(nameBox);
+        li.appendChild(nameBox);
 
-            const valueBox = document.createElement("input");
-            valueBox.id = "value-" + name;
-            valueBox.type = "text";
-            valueBox.value = value;
-            valueBox.classList.add("value");
+        const valueBox = document.createElement("input");
+        valueBox.id = "value-" + name;
+        valueBox.type = "text";
+        valueBox.classList.add("value");
 
-            li.appendChild(valueBox);
+        li.appendChild(valueBox);
 
-            ul.appendChild(li);
-        }
+        ul.appendChild(li);
+    }
 
-        const undefinedUl = document.querySelector("#undefined-constants");
-        const definedUl = document.querySelector("#defined-constants");
-        const optionsUl = document.querySelector("#options");
+    function addOptionItem(ul, name, value) {
+        const li = document.createElement("li");
 
-        for (const parameter of undefinedConstants) {
-            addListItem(undefinedUl, parameter.name, parameter.value);
-        }
+        const nameBox = document.createElement("input");
+        nameBox.id = "name-" + name;
+        nameBox.type = "text";
+        nameBox.value = name;
+        nameBox.classList.add("name");
+
+        li.appendChild(nameBox);
+
+        const valueBox = document.createElement("input");
+        valueBox.id = "value-" + name;
+        valueBox.type = "text";
+        valueBox.value = value;
+        valueBox.classList.add("value");
+
+        li.appendChild(valueBox);
 
-        for (const parameter of definedConstants) {
-            addListItem(definedUl, parameter.name, parameter.value);
+        ul.appendChild(li);
+    }
+
+    /**
+     * @param {Array<string>} constants
+     */
+    function updateConstants(constants) {
+        const constantsUl = document.querySelector("#constants");
+
+        constantsUl.innerHTML = "";
+
+        for (const constant of constants) {
+            addConstantItem(constantsUl, constant);
         }
 
+        vscode.setState({ constants: constants });
+    }
+
+    /**
+     * @param {Array<{name: string, value: string}>} options
+     */
+    function updateOptions(options) {
+        const optionsUl = document.querySelector("#options");
+        optionsUl.innerHTML = "";
         for (const option of options) {
             addListItem(optionsUl, option.name, option.value);
         }
 
-        vscode.setState({ definedConstants: definedConstants, undefinedConstants: undefinedConstants, options: options });
+        vscode.setState({ options: options });
     }
 
     vscode.postMessage({ type: "init" });

src/commands.ts

 import { pathToFileURL } from 'url';
 
-import {getParameters, client, provider, modestExecutable } from './extension';
+import {client, provider, modestExecutable } from './extension';
 import * as vscode from 'vscode';
 
 import * as path from "path";

src/extension.ts

@@ -23,6 +23,7 @@ import { fstat, existsSync } from 'fs';
 export let client: LanguageClient | undefined;
 export let provider: ModestSidebarProvider;
 let toolNames: Array<string> | undefined;
+let constants: Array<string> | undefined;
 
 interface ModestTools {
     availableTools: Array<ModestTool>
@@ -153,13 +154,21 @@ export function activate(context: ExtensionContext) {
         }
     });
 
+    vscode.window.onDidChangeActiveTextEditor(textEditor => {
+        if (textEditor) getConstants(textEditor.document);
+    })
+
+    vscode.workspace.onDidSaveTextDocument(textEditor => {
+        getConstants(textEditor)
+    })
+
     provider = new ModestSidebarProvider(context.extensionUri);
 
     context.subscriptions.push(
         vscode.window.registerWebviewViewProvider(ModestSidebarProvider.viewType, provider));
 }
 
-export function initializeTools() {
+function initializeTools() {
     client?.sendRequest<any>("modest/getTools").then(data => {
         toolNames = data.availableTools;
         provider.sendMessage({
@@ -169,16 +178,33 @@ export function initializeTools() {
     });
 }
 
-export function getParameters(toolName: string) {
-    let uri = vscode.window.activeTextEditor?.document.uri;
-    if (uri) {
-        let JSONObject = { "TextDocument": TextDocumentIdentifier.create(uri.toString()), "ToolName": toolName };
-        client?.sendRequest<any>("modest/getParameters", JSONObject).then(data => {
-            console.log(data);
-        });
+function getConstants(document: TextDocument) {
+    if (document.languageId == "modest") {
+        let uri = document.uri;
+        if (uri) {
+            let JSONObject = { "TextDocument": TextDocumentIdentifier.create(uri.toString()) };
+            client?.sendRequest<any>("modest/getConstants", JSONObject).then(data => {
+                constants = data
+                provider.sendMessage({
+                    type: "updateConstants",
+                    constants: constants
+                })
+            });
+        }
     }
 }
 
+function getOptions(toolName: string) {
+    let JSONObject = { "ToolName": toolName };
+    client?.sendRequest<any>("modest/getOptions", JSONObject).then(data => {
+        console.log(data);
+        // provider.sendMessage({
+        //     type: "updateOptions",
+        //     options: data
+        // })
+    });
+}
+
 
 export function deactivate(): Thenable<void> | undefined {
     if (!client) {
@@ -220,9 +246,16 @@ class ModestSidebarProvider implements vscode.WebviewViewProvider {
                             tools: toolNames
                         });
                     }
+                    if (constants) {
+                        provider.sendMessage({
+                            type: "updateConstants",
+                            constants: constants
+                        })
+                    }
+                    break;
                 }
                 case 'toolSelected': {
-                    getParameters(data.toolName);
+                    getOptions(data.toolName);
                     break;
                 }
             }
@@ -268,10 +301,8 @@ class ModestSidebarProvider implements vscode.WebviewViewProvider {
 			</head>
 			<body>
                 <select class="tools-dropdown" id="tools"> </select>
-                <h3>Undefined constants</h3>
-				<ul class="option-list" id="undefined-constants"> </ul>
-                <h3>Defined constants</h3>
-                <ul class="option-list" id="defined-constants"> </ul>
+                <h3>Constants</h3>
+				<ul class="option-list" id="constants"> </ul>
                 <h3>Options</h3>
                 <ul class="option-list" id="options"> </ul>
 				<script nonce="${nonce}" src="${scriptUri}"></script>