Skip to content

Commit

Permalink
Prepare for first release to OpenVSX
Browse files Browse the repository at this point in the history
- tentative rename of public-facing name of the extension to better reflect
  its nature
- change public-facing mentions of "vscode" to the canonical "VSCode"
- update extension's package.json: add important missing fields, adjust
  some things like "publisher", that needs to align with the configuration
  for the CDT Cloud OpenVSX publisher user,  "eclipse-cdt"
  (https://www.open-vsx.org/namespace/eclipse-cdt).
- add an icon for the registry
- Keep developer-specific information from repo's root README.md and
  move generic information, useful to users of the extension, to extension's
  README (which becomes the information page for the extension when published
  or installed).
- Add an icon for the extension. Though probably not the best ever, re-used
  the one from repo "theia-trace-extension"

Closes #69

Signed-off-by: Marc Dumais <[email protected]>
  • Loading branch information
marcdumais-work committed Jan 23, 2024
1 parent 77ecfef commit e5fa419
Show file tree
Hide file tree
Showing 10 changed files with 83 additions and 32 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ jobs:
java-version: '17'
- name: Install dependencies
run: yarn
- name: Package VS Code Extension
- name: Package VSCode Extension
run: yarn vsce:package
- name: Download sample traces
run: yarn download:sample-traces
Expand Down
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
}
13 changes: 5 additions & 8 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Contributing to Trace Viewer VS Code extension
# Contributing to Trace Viewer VSCode extension

Thanks for your interest in the [Trace Viewer VS Code extension][vscode-ext]!. The following is a set of
guidelines for contributing to the Trace Viewer extension for `VS Code` compatible tools. Information
Thanks for your interest in the [Trace Viewer VSCode extension][vscode-ext]!. The following is a set of
guidelines for contributing to the Trace Viewer extension for `VSCode` compatible tools. Information
about the trace viewer capabilities can also be found in the [Trace Viewer Theia extension][trace-viewer]
repository and its [issue tracers][theia-issues].
repository and its [issue tracker][theia-issues].

## How to Contribute

Expand Down Expand Up @@ -82,14 +82,11 @@ file. Adding the SHA-1 of a commit to this file will make `git-blame` ignore tha

* For GitHub, this file is automatically detected and will ignore all the commits that are included in the file.
* With Git CLI, run `git blame --ignore-revs-file=.git-blame-ignore-revs <pathToSomeFile>` to ignore the commits.
<<<<<<< HEAD
* `git config --global blame.ignoreRevsFile .git-blame-ignore-revs` will automatically detect these files for every repository.
=======
>>>>>>> d126837 (Repository formatted with prettier)

## Contact

For issues related to this extension, please open a GitHub tracker for the [VS Code Trace Extension][vscode-ext] repository.
For issues related to this extension, please open a GitHub tracker for the [VSCode Trace Extension][vscode-ext] repository.

For issues concerning `eclipse-cdt-cloud`, please refer to the contact options listed on the [CDT Cloud website][cdt-cloud-website].

Expand Down
34 changes: 18 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# VSCode Trace Extension

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.
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),

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.

**👋 Want to help?** Read our [contributor guide](CONTRIBUTING.md) and follow the instructions to contribute code.

## Installation instructions
## Installation Instructions

The code was migrated from the [PR in theia-trace-extension][init-contrib].

Expand All @@ -15,37 +17,37 @@ It depends on the trace viewer plugins from the [theia trace extension package][
- traceviewer-react-components
- tsp-typescript-client

To build the vscode extension, run the `yarn` command:
To build the VSCode extension, run the `yarn` command:

``` bash
yarn
```

## Running the extension
## Debugging the extension

Then from vscode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).
Then from VSCode, press `f5` to run the extension. The trace server needs to be started separately as described [here](#run-the-trace-server).

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.

Open the `Trace Viewer` view (`View` -> `Open view...`).

![open-trace][open-trace]

2 tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.
Two tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.

The `Views` tab shows all the available views for the selected trace. Click on a view to open the view under the timeline.

![open-output][open-output]

## Package as VsCode extension
## Package the extension (vsix)

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.
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.

The packaging will produce a `vscode-trace-extension-x.x.x.vsix` file in the subdirectory `vscode-trace-extension` of the repository.

## Running the extension in VsCode, VsCodium or Theia application
## Running the extension in VSCode, VsCodium or Theia application

The packaged VSIX file can be installed in an existing `VsCode`, `VsCodium` or `Theia` application by using [Install from a vsix][install].
The packaged VSIX file can be installed in an existing `VSCode`, `VSCodium` or `Theia` application by using [Install from a vsix][install].

The trace server needs to be started separately as described [here](#run-the-trace-server).

Expand All @@ -64,15 +66,15 @@ When having to modify the code of the extension (in the `vscode-trace-extension`

For changes in the webview part (in the `vscode-trace-webviews` folder), you can run the `yarn` command, simply re-opening a trace should show the changes. It is also possible to watch for changes with `yarn watch` or `ctrl-shift-b` and selecting the task `npm: watch - vscode-trace-webviews`.

For more information about `VsCode WebView API` see [here][vscode-webview].
For more information about `VSCode WebView API` see [here][vscode-webview].

### Communication between components

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.
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.

Inside a webview or inside the extension signals can be used where data structures can be passed on.

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`.
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`.

```mermaid
sequenceDiagram
Expand Down Expand Up @@ -100,9 +102,9 @@ sequenceDiagram

### Debugging the extension

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`.
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`.

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!)_
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!)_

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.

Expand Down Expand Up @@ -232,7 +234,7 @@ onWebviewPanelCreated(listener: (data: vscode.WebviewPanel) => void): void

```javascript
//The following retrieves the API object from the vscode-trace-extension
const ext = vscode.extensions.getExtension("tracecompass-community.vscode-trace-extension");
const ext = vscode.extensions.getExtension("eclipse-cdt.vscode-trace-extension");
const importedApi = ext.exports;
```

Expand Down
1 change: 0 additions & 1 deletion vscode-trace-common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"name": "vscode-trace-common",
"private": "true",
"version": "0.0.0",
"publisher": "tracecompass-community",
"categories": [
"Other"
],
Expand Down
41 changes: 41 additions & 0 deletions vscode-trace-extension/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Trace Viewer for VSCode

This extension adds trace viewing capabilities to VSCode and compatible tools.

For information about building this extension from sources, debugging, etc, please see [Developing.md](https://github.com/eclipse-cdt-cloud/vscode-trace-extension/tree/master/doc/Developing.md)

## Using the extension

Open the `Trace Viewer` view (`View` -> `Open view...`).

Then find the trace folder in the file explorer and open it using `Open with Trace Viewer` from the context menu:

![open-trace][open-trace]

Two tabs will be visible: `Traces` and `Views`. The `Traces` tab will show all available traces on the trace server.

The `Views` tab shows all the available views for the selected trace. Click on a view to open the view under the timeline.

![open-output][open-output]

[open-output]: https://raw.githubusercontent.com/eclipse-cdt-cloud/vscode-trace-extension/master/doc/images/vscode-trace-extension-001.png
[open-trace]: https://raw.githubusercontent.com/eclipse-cdt-cloud/vscode-trace-extension/master/doc/images/vscode-open-with-trace-viewer-001.png

## Obtain the Trace Server (Eclipse Trace Compass)

In order to open and view traces, you need a trace server running on the same machine as the trace extension. You can use the Eclipse Trace Compass server:

Dwonload the Latest "incubator" build: [Linux x86_64](https://download.eclipse.org/tracecompass.incubator/trace-server/rcp/trace-compass-server-latest-linux.gtk.x86_64.tar.gz) ()

Extract it:
> tar -xf trace-compass-server-latest-linux.gtk.x86_64.tar.gz
and start it:
> ./trace-compass-server-latest-linux.gtk.x86_64/tracecompass-server",
Other architectures / Operating systems: [link](https://download.eclipse.org/tracecompass.incubator/trace-server/rcp/)



yarn download:server
yarn start:server
Binary file added vscode-trace-extension/images/extension-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 16 additions & 3 deletions vscode-trace-extension/package.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
{
"name": "vscode-trace-extension",
"displayName": "VsCode Trace Extension",
"description": "VsCode trace extension for visualizing traces analyzed by a trace server and data provide over the Trace Server Protocol (TSP)",
"displayName": "Trace Viewer for VSCode",
"description": "Viewer that permits visualizing traces and contained data, analyzed by a trace server, and provided over the Trace Server Protocol (TSP)",
"version": "0.1.0",
"license": "EPL-2.0",
"engines": {
"vscode": "^1.52.0"
},
"publisher": "tracecompass-community",
"publisher": "eclipse-cdt",
"icon": "images/extension-icon.png",
"categories": [
"Visualization",
"Data Science",
"Other"
],
"keywords": [
"Trace Compass",
"trace",
"visualization",
"Eclipse Foundation"
],
"repository": "https://github.com/eclipse-cdt-cloud/vscode-trace-extension/",
"bugs": {
"url": "https://github.com/eclipse-cdt-cloud/vscode-trace-extension/issues"
},
"activationEvents": [
"onStartupFinished"
],
Expand Down
2 changes: 1 addition & 1 deletion vscode-trace-extension/src/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ async function startTraceServerIfAvailable(pathToTrace?: string): Promise<void>
if (pathToTrace) {
await traceServerManager.startServer(pathToTrace);
}
const traceServerExtension = vscode.extensions.getExtension('tracecompass-community.' + extensionId);
const traceServerExtension = vscode.extensions.getExtension('eclipse-cdt.' + extensionId);
if (!traceServerExtension) {
return;
}
Expand Down
1 change: 0 additions & 1 deletion vscode-trace-webviews/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"engines": {
"vscode": "^1.52.0"
},
"publisher": "tracecompass-community",
"categories": [
"Other"
],
Expand Down

0 comments on commit e5fa419

Please sign in to comment.