Replaced webview with Live Preview extension

[vxdguy]

Previewing the coverage summary was lacking the CSS image files due to issues with webview security sandbox settings. Removed all the webview code and used the Microsoft Live Preview extension to render the coverage summary file. Code became much simpler, but introduced dependency on a 3rd party extension.

This PR should fix #250, #298, and many other closed PR's with CSS/image/javascript issues.

PR is loosely based on:

• "How to call one extension from another"
• Microsoft's Live Preview extension for VS Code, where the livePreview.start.internalPreview.atFile command is defined.

Apologies for not meeting all the contribution requirements. This is my very first PR.

I've no idea how to run tests with node, nor how to use containers. I've been learning JS/TS for about a week; it was just enough to make this work.

TODO: package.json probably needs to be updated to show a dependency on the ms-vscode.live-server extension.

Anyway, the attached animated shows me press ctrl-shift-7 to enable gutter colorization, followed by ctrl-shift-6 to preview the coverage summary in a Live Preview window.

[ryanluker]

@vxdguy Thanks for submitting a PR, I have approved the tests to run in the CI system, so you will be able to push to this branch and hopefully see them run! https://github.com/ryanluker/vscode-coverage-gutters/runs/6025116749?check_suite_focus=true

The approach you took looks good to me from a high level and will definitely fix those issues you referred to in the PR body. No need to apologize about the PR either (due to lack of tests or the linting failing) for a first PR in this repo you are doing great 🤓 !

In terms of next steps, you will want to take a look at a few things (I can also assist a bit later in the weekend as well).

1) Fix the typescript compiler warnings. You can run nxp tsc locally to have npm download the typescript compiler and run it, or you can use codespaces (free for open source libraries) which will spin up a linux box based on our container specs. You could also run the scripts mentioned in the package.json npm run build locally or in the codespaces box.

2) Figure out how to "suggest" the live preview extension when people install or update the extension. https://code.visualstudio.com/api/references/extension-manifest#:~:text=example%3A%20vscode.csharp.-,extensionDependencies,-array

Let me know if you have any other questions about the extension or the repo, but otherwise I am looking forward to helping you get this PR into the mainline and out to the users 😁.

[vxdguy]

@ryanluker, the PR doesn't pass the builds. The MacOS and Windows builds looks like they were cancelled. The Ubuntu build is failing tests; I'm not the best person to write javascript test due to zero experience with javascript testing and a week's worth of javascript/typescript experience.

[ryanluker]

@vxdguy I took a bit of a look last weekend but forgot to post here that I almost had something working for the tests. I will tinker a bit more today and see where I get to around getting those cleaned up.

[ryanluker]

@vxdguy Should be all fixed now with these 3 commits, after you take a look I can approve, and we will get this merged in! https://github.com/ryanluker/vscode-coverage-gutters/pull/363/commits/a4736fae52b893e13e06c6f59abb5ce15812ab36 https://github.com/ryanluker/vscode-coverage-gutters/pull/363/commits/46df75d002cb7342423ec3fd5ce545db36ccf39c https://github.com/ryanluker/vscode-coverage-gutters/pull/363/commits/51fa3e8c46b9a7c89929b1e193e6eb69c7fdebe0

One question around the live preview though. I tried it out locally, and I assume this what the in IDE browser should look like? (note there is no styling due to this being the test coverage report)

[ryanluker]

@mattseddon Do you by chance know how to programmatically interact with the live preview editor, https://github.com/microsoft/vscode-livepreview? I wasn't able to see it listed anywhere when I debugged locally. Usually when you access the vscode.window you can see the text documents and make assertions. I was looking to add better assertions than just checking if the extension is active or not 🤔. https://github.com/ryanluker/vscode-coverage-gutters/pull/363/files#diff-e11f5552a6417cfc03e85116d67d338dd473153531dcd834d80fa2a0a19bd72bL22-L24

[mattseddon]

https://github.com/microsoft/vscode-livepreview

👋🏻 . Webviews are a PITA to test and that's if you have access to the WebviewPanel that they are created inside. At least then you can easily test "Whether the panel is visible." and "Whether the panel is active (focused by the user).". It seems like there is no API exposed by ms-vscode.live-server so IMO you have two options for this assertion: // Look to see if the webview is open and showing preview coverage

1. Head down this rabbit hole: https://github.com/webdriverio-community/wdio-vscode-service
2. Close all of the editors at the start of the test with await commands.executeCommand('workbench.action.closeAllEditors') and then check window.visibleTextEditors and window.activeTextEditor after you've opened the preview. The inside of the webview will still be a black box though.

Hope this helps. LMK if you need any clarification or further details.

👍🏻

[ryanluker]

https://github.com/microsoft/vscode-livepreview

👋🏻 . Webviews are a PITA to test and that's if you have access to the WebviewPanel that they are created inside. At least then you can easily test "Whether the panel is visible." and "Whether the panel is active (focused by the user).". It seems like there is no API exposed by ms-vscode.live-server so IMO you have two options for this assertion: // Look to see if the webview is open and showing preview coverage

1. Head down this rabbit hole: https://github.com/webdriverio-community/wdio-vscode-service
2. Close all of the editors at the start of the test with await commands.executeCommand('workbench.action.closeAllEditors') and then check window.visibleTextEditors and window.activeTextEditor after you've opened the preview. The inside of the webview will still be a black box though.

Hope this helps. LMK if you need any clarification or further details.

👍🏻

Yeah I assumed it was PITA when I could find no way to interact with it programmically via the vscode.window or the getExtension helper 😢. Thanks as always @mattseddon 👋🏻!