-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Helps fix #117 Signed-off-by: hriday-panchasara <[email protected]>
- Loading branch information
1 parent
4452e1b
commit 3bb9428
Showing
9 changed files
with
160 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
vscode-trace-extension/src/trace-viewer-panel/keyboard-shortcuts-panel.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
vscode-trace-webviews/src/trace-explorer/shortcuts/index.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| } |
10 changes: 10 additions & 0 deletions
10
vscode-trace-webviews/src/trace-explorer/shortcuts/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> | ||
| ); |
21 changes: 21 additions & 0 deletions
21
...de-trace-webviews/src/trace-explorer/shortcuts/vscode-trace-explorer-shortcuts-widget.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters