Add Trace Viewer Shortcuts Panel

Helps fix #117

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>

Author: hriday-panchasara

vscode-trace-extension/package.json

@@ -46,6 +46,11 @@
         "command": "openedTraces.openTraceFolder",
         "title": "Open Trace",
         "icon": "$(new-folder)"
+      },
+      {
+        "command": "traceViewer.shortcuts",
+        "title": "Trace Viewer Keyboard and Mouse Shortcuts",
+        "icon": "$(info)"
       }
     ],
     "viewsContainers": {
@@ -114,6 +119,11 @@
           "when": "activeWebviewPanelId == 'react'",
           "command": "outputs.openOverview",
           "group": "navigation@2"
+        },
+        {
+          "when": "activeWebviewPanelId == 'react'",
+          "command": "traceViewer.shortcuts",
+          "group": "navigation@3"
         }
       ]
     },
@@ -131,7 +141,14 @@
           "description": "Enter the trace server's API path, to be appended to the server URL. Eg: 'tsp/api'."
         }
       }
-    }
+    },
+    "keybindings": [
+      {
+        "command": "traceViewer.shortcuts",
+        "key": "ctrl+f1",
+        "mac": "cmd+f1"
+      }
+    ]
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.17",

vscode-trace-extension/src/extension.ts

@@ -4,7 +4,7 @@ import { AnalysisProvider } from './trace-explorer/analysis-tree';
 import { TraceExplorerItemPropertiesProvider } from './trace-explorer/properties/trace-explorer-properties-view-webview-provider';
 import { TraceExplorerAvailableViewsProvider } from './trace-explorer/available-views/trace-explorer-available-views-webview-provider';
 import { TraceExplorerOpenedTracesViewProvider } from './trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider';
-import { fileHandler, openOverviewHandler, resetZoomHandler } from './trace-explorer/trace-tree';
+import { fileHandler, openOverviewHandler, resetZoomHandler, keyboardShortcutsHandler } from './trace-explorer/trace-tree';
 import { TraceServerConnectionStatusService } from './utils/trace-server-status';
 import { updateTspClient } from './utils/tspClient';
 import { TraceExtensionLogger } from './utils/trace-extension-logger';
@@ -65,6 +65,10 @@ export function activate(context: vscode.ExtensionContext): void {
     context.subscriptions.push(vscode.commands.registerCommand('openedTraces.openTraceFolder', () => {
         fileOpenHandler(context, undefined);
     }));
+
+    context.subscriptions.push(vscode.commands.registerCommand('traceViewer.shortcuts', () => {
+        keyboardShortcutsHandler(context.extensionUri);
+    }));
 }
 
 export function deactivate(): void {

vscode-trace-extension/src/trace-explorer/trace-tree.ts

@@ -8,6 +8,7 @@ import { AnalysisProvider } from './analysis-tree';
 import { TraceViewerPanel } from '../trace-viewer-panel/trace-viewer-webview-panel';
 import { getTspClient } from '../utils/tspClient';
 import { traceLogger } from '../extension';
+import { KeyboardShortcutsPanel } from '../trace-viewer-panel/keyboard-shortcuts-panel';
 
 const rootPath = path.resolve(__dirname, '../../..');
 
@@ -106,6 +107,10 @@ export const resetZoomHandler = () => (): void => {
     TraceViewerPanel.resetZoomOnCurrent();
 };
 
+export const keyboardShortcutsHandler = (extensionUri: vscode.Uri): void => {
+    KeyboardShortcutsPanel.createOrShow(extensionUri, 'Trace Viewer Shortcuts');
+};
+
 const openDialog = async (): Promise<vscode.Uri | undefined> => {
     const props: vscode.OpenDialogOptions = {
         title: 'Open Trace',

vscode-trace-extension/src/trace-viewer-panel/keyboard-shortcuts-panel.ts

@@ -0,0 +1,80 @@
+import * as vscode from 'vscode';
+import { getTraceServerUrl } from '../utils/tspClient';
+
+/**
+ * Manages the keyboard and mouse shortcuts panel
+ */
+export class KeyboardShortcutsPanel {
+
+    private static readonly viewType = 'trace.viewer.shortcuts';
+	private static _panel: vscode.WebviewPanel | undefined = undefined;
+
+	public static createOrShow(extensionUri: vscode.Uri, name: string): void {
+	    const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
+
+	    if (this._panel) {
+	        this._panel.reveal(column);
+	    } else {
+	        this._panel = vscode.window.createWebviewPanel(KeyboardShortcutsPanel.viewType, name, column || vscode.ViewColumn.One, {
+	            // Enable javascript in the webview
+	            enableScripts: true,
+	        });
+
+	        // Set the webview's initial html content
+	        this._panel.webview.html = this._getHtmlForWebview(this._panel.webview, extensionUri);
+
+	        // Listen for when the panel is disposed
+	        // This happens when the user closes the panel or when the panel is closed programmatically
+	        this._panel.onDidDispose(() => {
+	            this._panel = undefined;
+	        });
+
+	    }
+	}
+
+	/* eslint-disable max-len */
+	private static _getHtmlForWebview(webview: vscode.Webview, extensionUri: vscode.Uri): string {
+	    // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
+	    const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'pack', 'shortcutsPanel.js'));
+
+	    // Use a nonce to whitelist which scripts can be run
+	    const nonce = getNonce();
+
+	    return `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="utf-8">
+				<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+				<meta name="theme-color" content="#000000">
+				<title>React App</title>
+				<meta http-equiv="Content-Security-Policy"
+					content="default-src 'none';
+					img-src vscode-resource: https:;
+					script-src 'nonce-${nonce}' 'unsafe-eval';
+					style-src ${webview.cspSource} vscode-resource: 'unsafe-inline' http: https: data:;
+					connect-src ${getTraceServerUrl()};
+                    font-src ${webview.cspSource}">
+                <base href="${vscode.Uri.joinPath(extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
+			</head>
+
+			<body>
+				<noscript>You need to enable JavaScript to run this app.</noscript>
+				<div id="root"></div>
+				
+                <script nonce="${nonce}">
+					const vscode = acquireVsCodeApi();
+				</script>
+                <script nonce="${nonce}" src="${scriptUri}"></script>
+            </body>
+			</html>`;
+	}
+}
+
+function getNonce() {
+    let text = '';
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 32; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+}

vscode-trace-webviews/src/style/trace-viewer.css

@@ -24,8 +24,13 @@
     --trace-viewer-statusBar-foreground: var(--vscode-statusBar-foreground);
     --trace-viewer-ui-font-size1: var(--vscode-font-size);
     --trace-viewer-editorWidget-background: var(--vscode-editorWidget-background);
-    --trace-viewer-ui-padding: 6px;
-    --trace-viewer-list-line-height: 16px;
     --trace-viewer-layout-color4: var(--vscode-editorWidget-background);
     --trace-viewer-foreground: var(--vscode-editorWidget-foreground);
+    --trace-viewer-keybindingLabel-background: var(--vscode-keybindingLabel-background);
+    --trace-viewer-keybindingLabel-border: var(--vscode-keybindingLabel-border);
+    --trace-viewer-keybindingLabel-bottomBorder: var(--vscode-keybindingLabel-bottomBorder);
+    --trace-viewer-keybindingLabel-foreground: var(--vscode-keybindingLabel-foreground);
+    --trace-viewer-button-background: var(--vscode-button-background);
+    --trace-viewer-ui-padding: 6px;
+    --trace-viewer-list-line-height: 16px;
 }

vscode-trace-webviews/src/trace-explorer/shortcuts/index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  padding: calc(var(--trace-viewer-ui-padding)*2)
+}
+
+.componentBody {
+  background-color: var(--trace-viewer-editorWidget-background);
+  color: var(--trace-viewer-foreground);
+  padding: calc(var(--trace-viewer-ui-padding)*2)
+}

vscode-trace-webviews/src/trace-explorer/shortcuts/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import ChartShortcutsComponent from './vscode-trace-explorer-shortcuts-widget';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+    <ChartShortcutsComponent />
+);

vscode-trace-webviews/src/trace-explorer/shortcuts/vscode-trace-explorer-shortcuts-widget.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import React from 'react';
+import { KeyboardShortcutsComponent } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-sub-widgets/keyboard-shortcuts-component';
+import 'traceviewer-react-components/style/trace-explorer.css';
+import '../../style/trace-viewer.css';
+
+class ChartShortcutsComponent extends React.Component<{}, {}> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <div className="componentBody">
+                <KeyboardShortcutsComponent />
+            </div>
+        );
+    }
+}
+
+export default ChartShortcutsComponent;

vscode-trace-webviews/webpack.config.js

@@ -6,7 +6,8 @@ module.exports = {
     trace_panel: "./src/trace-viewer/index.tsx",
     openedTracesPanel: "./src/trace-explorer/opened-traces/index.tsx",
     analysisPanel: "./src/trace-explorer/available-views/index.tsx",
-    propertiesPanel: "./src/trace-explorer/properties/index.tsx"
+    propertiesPanel: "./src/trace-explorer/properties/index.tsx",
+    shortcutsPanel: "./src/trace-explorer/shortcuts/index.tsx"
   },
   output: {
     path: path.resolve(__dirname, "../vscode-trace-extension/pack"),