Adds History View

Bitmagic.VscExtension/esbuild.js

@@ -47,6 +47,28 @@ const layerViewWebviewConfig = {
     ],
 };
 
+const historyViewWebviewConfig = {
+    ...baseConfig,
+    target: "es2020",
+    format: "esm",
+    entryPoints: [
+        "./src/historyView/historyView.webview.ts"
+    ],
+    outdir: "./out/",
+    plugins: [
+        // Copy webview css files to `out` directory unaltered
+        copy({
+            resolveFrom: "cwd",
+            assets: {
+                from: [
+                    "./src/historyView/historyView.css",
+                ],
+                to: ["./out"],
+            },
+        }),
+    ],
+};
+
 const memoryViewWebviewConfig = {
     ...baseConfig,
     target: "es2020",
@@ -108,12 +130,17 @@ const watchConfig = {
                 ...memoryViewWebviewConfig,
                 ...watchConfig,
             });
+            await build({
+                ...historyViewWebviewConfig,
+                ...watchConfig,
+            });
             console.log("[watch] build finished");
         } else {
             // Build extension and webview code
             await build(extensionConfig);
             await build(layerViewWebviewConfig);
             await build(memoryViewWebviewConfig);
+            await build(historyViewWebviewConfig);
             console.log("build complete");
         }
     } catch (err) {

Bitmagic.VscExtension/package.json

@@ -187,6 +187,11 @@
                 "command": "memoryView.start",
                 "title": "Open The Memory View",
                 "category": "BitMagic"
+            },
+            {
+                "command": "historyView.start",
+                "title": "Open The History View",
+                "category": "BitMagic"
             }
         ],
         "debuggers": [

Bitmagic.VscExtension/paletteViewMedia/paletteView.css

@@ -3,4 +3,4 @@
     min-width: 4px;
     min-height: 4px;
     background-color: blueviolet;
-}
+}

Bitmagic.VscExtension/src/extension.ts

@@ -12,6 +12,7 @@ import Constants from './constants';
 import { LayerView } from './layerView/layerView';
 import { provideVSCodeDesignSystem, vsCodeButton } from "@vscode/webview-ui-toolkit";
 import { MemoryView } from './memoryView/memoryView';
+import { HistoryView } from './historyView/historyView';
 
 const bmOutput = vscode.window.createOutputChannel("BitMagic");
 
@@ -126,7 +127,7 @@ export function activate(context: vscode.ExtensionContext) {
 	// Action Replay
 	LayerView.activate(context);
 	MemoryView.activate(context);
-
+	HistoryView.activate(context);
 
 	// Visualiser
 	// vscode.window.registerTreeDataProvider('x16-visualiser', new VisualiserTree())

Bitmagic.VscExtension/src/historyView/historyView.css

@@ -0,0 +1,63 @@
+span.name
+{
+    color: var(--vscode-debugTokenExpression-name)
+}
+
+span.number
+{
+    color: var(--vscode-debugTokenExpression-number)
+}
+
+span.string
+{
+    color: var(--vscode-debugTokenExpression-string)
+}
+
+span.rawvalue
+{
+    color: var(--vscode-debugTokenExpression-string)
+}
+
+span.label
+{
+    color: var(--vscode-debugTokenExpression-value)
+}
+
+span.clickable
+{
+    cursor: pointer;
+}
+
+span.clickable:hover
+{
+    text-decoration: underline;
+}
+
+p.history
+{
+    margin: 0;
+    font-family:  var(--vscode-editor-font-family);
+    font-weight: var(--vscode-editor-font-weight);
+    font-size: var(--vscode-editor-font-size);
+    white-space: pre;
+}
+
+p.label
+{
+    margin: 0 0 5px 0;
+    font-family:  var(--vscode-editor-font-family);
+    font-weight: var(--vscode-editor-font-weight);
+    font-size: var(--vscode-editor-font-size);
+    white-space: pre;
+}
+
+#results
+{
+    margin-top: 10px;
+}
+
+.display_control
+{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

Bitmagic.VscExtension/src/historyView/historyView.ts

@@ -0,0 +1,143 @@
+import { Disposable, ExtensionContext, Uri, window, ViewColumn, Webview, WebviewPanel, commands, debug, StatusBarAlignment, workspace, Position, Selection, Range, TextDocumentShowOptions } from "vscode";
+import { getUri } from "../utilities/getUri";
+import { getNonce } from "../utilities/getNonce";
+import { messages } from "../memoryView/common";
+
+export class HistoryView {
+    public static currentPanel: HistoryView | undefined;
+
+    public static activate(context: ExtensionContext) {
+        const uri = context.extensionUri;
+
+        context.subscriptions.push(
+            commands.registerCommand('historyView.start', () => {
+                const columnToShowIn = window.activeTextEditor
+                    ? window.activeTextEditor.viewColumn
+                    : undefined;
+
+                if (HistoryView.currentPanel) {
+                    HistoryView.currentPanel._panel.reveal(columnToShowIn);
+                }
+                else {
+                    const panel = window.createWebviewPanel(
+                        'historyView',
+                        'History View',
+                        columnToShowIn || ViewColumn.One,
+                        {
+                            enableScripts: true,
+                            retainContextWhenHidden: true
+                        }
+                    );
+
+                    HistoryView.currentPanel = new HistoryView(panel, uri);
+                }
+            })
+        );
+    }
+
+    private readonly _panel: WebviewPanel;
+    private _disposables: Disposable[] = [];
+
+    private constructor(panel: WebviewPanel, extensionUri: Uri) {
+        this._panel = panel;
+
+        this._panel.onDidDispose(() => { this.dispose(), null, this, this._disposables });
+
+        this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
+
+        this._setWebviewMessageListener(this._panel.webview);
+    }
+
+    private dispose() {
+        HistoryView.currentPanel = undefined;
+
+        this._panel.dispose();
+
+        while (this._disposables.length) {
+            const disposable = this._disposables.pop();
+            if (disposable) {
+                disposable.dispose();
+            }
+        }
+    }
+
+    private _setWebviewMessageListener(webview: Webview) {
+        webview.onDidReceiveMessage(
+            (message: any) => {
+                const command = message.command;
+
+                switch (command) {
+                    case messages.getHistory:
+                        this._getHistory(webview);
+                        return;
+                    case messages.showFile:
+                        this._showFile(message.fileName, message.lineNumber);
+                        return;
+                }
+            },
+            undefined,
+            this._disposables
+        );
+    }
+
+    private _showFile(fileName: string, lineNumber: number) {
+        const p = new Position(lineNumber - 1, 0);
+
+        var o = new ShowOptions();
+        o.selection = new Selection(p, p);
+        workspace.openTextDocument(Uri.file(fileName)).then(d => {
+            window.showTextDocument(d, o);
+            // .then(e => {
+            //     e.selections = [new Selection(p, p)];
+            //     const r = new Range(p, p);
+            //     e.revealRange(r);
+            // });
+        });
+    }
+
+    private _getHistory(webview: Webview) {
+        debug.activeDebugSession?.customRequest(messages.getHistory, {}
+        ).then(i => {
+            webview.postMessage({
+                command: messages.updateHistory, payload:
+                    JSON.stringify(i)
+            });
+        });
+    }
+
+    private _getWebviewContent(webview: Webview, extensionUri: Uri) {
+        const webviewUri = getUri(webview, extensionUri, ["out", "historyView.webview.js"]);
+        const nonce = getNonce();
+        const styleUri = getUri(webview, extensionUri, ["out", "historyView.css"]);
+
+        return /*html*/ `<!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+                <title>Layer View</title>
+                <link rel="stylesheet" href="${styleUri}">
+            </head>
+            <body>
+                <div class="display_control">
+                    <div class="control_holder">
+                        <vscode-button appearance="primary" id="update">Update</vscode-button>
+                    </div>
+                </div>
+                <div class="history_results_container">
+                    <div id="results"></div>
+                </div>
+                <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
+            </body>
+        </html>`;
+    }
+}
+
+class ShowOptions implements TextDocumentShowOptions
+{
+    viewColumn?: ViewColumn;
+    preserveFocus?: boolean;
+    preview?: boolean;
+    selection?: Range;
+}