You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+17-15Lines changed: 17 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,12 @@
1
1
# VSCode Trace Extension
2
2
3
-
This project started from the [vscode webview react project][vscode-webview-react]. It works this way, with the extension itself being in the `vscode-trace-extension` directory and the react application being in the `vscode-trace-webapps` directory.
3
+
This document contains information that may be useful for developers that want to build, modify, enhance and/or debug this extension. If you only intend to consume the extension, it might be easier to get it from the [public OpenVSX registry](https://www.open-vsx.org/extension/eclipse-cdt/vscode-trace-extension),
4
+
5
+
This project started from the [VSCode webview react project][vscode-webview-react]. It works this way, with the extension itself being in the `vscode-trace-extension` directory and the react application being in the `vscode-trace-webapps` directory.
4
6
5
7
**👋 Want to help?** Read our [contributor guide](CONTRIBUTING.md) and follow the instructions to contribute code.
6
8
7
-
## Installation instructions
9
+
## Installation Instructions
8
10
9
11
The code was migrated from the [PR in theia-trace-extension][init-contrib].
10
12
@@ -15,37 +17,37 @@ It depends on the trace viewer plugins from the [theia trace extension package][
15
17
- traceviewer-react-components
16
18
- tsp-typescript-client
17
19
18
-
To build the vscode extension, run the `yarn` command:
20
+
To build the VSCode extension, run the `yarn` command:
19
21
20
22
```bash
21
23
yarn
22
24
```
23
25
24
26
## Running the extension
25
27
26
-
Then from vscode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).
28
+
Then from VSCode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).
27
29
28
30
To open a trace use the VSCode file explorer to navigate to the trace directory. Then right mouse click on the trace and select menu option `Open with Trace Viewer`. See [here](#get-sample-traces) to get some sample traces.
29
31
30
32
Open the `Trace Viewer` view (`View` -> `Open view...`).
31
33
32
34
![open-trace][open-trace]
33
35
34
-
2 tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.
36
+
Two tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.
35
37
36
38
The `Views` tab shows all the available views for the selected trace. Click on a view to open the view under the timeline.
37
39
38
40
![open-output][open-output]
39
41
40
-
## Package as VsCode extension
42
+
## Package as a VSCode extension (.vsix)
41
43
42
-
To package it as VsCode extension, run the command `yarn vsce:package`. If you get errors about case-sensitive files, just delete the node_modules folder and run `yarn` again.
44
+
To package it as VSCode extension, run the command `yarn vsce:package`. If you get errors about case-sensitive files, just delete the node_modules folder and run `yarn` again.
43
45
44
46
The packaging will produce a `vscode-trace-extension-x.x.x.vsix` file in the subdirectory `vscode-trace-extension` of the repository.
45
47
46
-
## Running the extension in VsCode, VsCodium or Theia application
48
+
## Running the extension in VSCode, VsCodium or Theia application
47
49
48
-
The packaged VSIX file can be installed in an existing `VsCode`, `VsCodium` or `Theia` application by using [Install from a vsix][install].
50
+
The packaged VSIX file can be installed in an existing `VSCode`, `VSCodium` or `Theia` application by using [Install from a vsix][install].
49
51
50
52
The trace server needs to be started separately as described [here](#run-the-trace-server).
From the root directory execute `yarn run watch`. This will watch and bundle `vscode-trace-common`, `vscode-trace-extension`, and `vscode-trace-webviews`. All outputs will be in one terminal. Changes can be observed and tested in the `Extension Development Host` by pressing `F5`.
64
66
65
-
For more information about `VsCode WebView API` see [here][vscode-webview].
67
+
For more information about `VSCode WebView API` see [here][vscode-webview].
66
68
67
69
### Communication between components
68
70
69
-
To communicate between VsCode extension and webviews use the [VsCode message API][vscode-messages]. When using `vscode.postMessage(data)` data structure `data` will be serialized to JSON before being propagated. Be aware that it cannot include data structures like `BigInt`. Proper handling of such data structures need to be implemented when sending and receiving messages.
71
+
To communicate between VSCode extension and webviews use the [VSCode message API][vscode-messages]. When using `vscode.postMessage(data)` data structure `data` will be serialized to JSON before being propagated. Be aware that it cannot include data structures like `BigInt`. Proper handling of such data structures need to be implemented when sending and receiving messages.
70
72
71
73
Inside a webview or inside the extension signals can be used where data structures can be passed on.
72
74
73
-
The following sequence diagram shows how the `experiment-selected` signal (with payload `Experiment`) is propagated inside the application. The webview `Opened Traces WebView App` is sending the signal to the`VsCode extension` which is forwarding the signal to the `Available Views WebView App`.
75
+
The following sequence diagram shows how the `experiment-selected` signal (with payload `Experiment`) is propagated inside the application. The webview `Opened Traces WebView App` is sending the signal to the`VSCode extension` which is forwarding the signal to the `Available Views WebView App`.
74
76
75
77
```mermaid
76
78
sequenceDiagram
@@ -98,9 +100,9 @@ sequenceDiagram
98
100
99
101
### Debugging the extension
100
102
101
-
It is straightforward to debug the code of the vscode extension itself (the code in `vscode-trace-extension`) by just putting breakpoints in vscode and running the extension with `f5`.
103
+
It is straightforward to debug the code of the VSCode extension itself (the code in `vscode-trace-extension`) by just putting breakpoints in VSCode and running the extension with `f5`.
102
104
103
-
The react-app is another matter. The panel is a webview that is running in its own context, so current vscode does not have access to it. _(Patches welcome!)_
105
+
The react-app is another matter. The panel is a webview that is running in its own context, so current VSCode does not have access to it. _(Patches welcome!)_
104
106
105
107
Each panel is its own small web application, so to debug, while in the context of the webview, press `ctrl-shift-p` and enter the command `Developer: Open Webview Developer Tools`. This will open the developer tools. The code is in the `Sources` tab of the developer tools window that opens.
The Github workflows are setup to make this relatively simple.
4
+
5
+
When it's desired to have a new release:
6
+
7
+
- open a Pull Request that steps the version of the extension in `vscode-trace-extension/package.json`
8
+
- As part of the PR, update file RELEASE \[1\] in the repo root. Add or modify it to reflect the new version-to-be-released.
9
+
e.g.
10
+
> tag: v0.1.0 # The tag number will be created. Required.
11
+
12
+
- The PR should be automatically updated, and automatically generated release noted added to it
13
+
- Upon merging the PR, the GH release will automatically be created, and the release notes added to document it. A release tag, for the new relase will also be created in the repo.
14
+
- The release tag should trigger a publish workflow that will build and release a new version of the extension to openvsx.org
15
+
16
+
\[1\]: Here is the action that we use. For more details see its documentation: https://github.com/pipe-cd/actions-gh-release#actions-gh-release
0 commit comments