inject webview-events.js script into preview html #5766

sharon-wang · 2024-12-16T23:20:53Z

Summary

addresses Support for page load detection, title display, navigation commands, etc. in the Viewer on Posit Workbench #4276
page load detection, title display for HTML files, copy/paste, back/forward navigation, etc. should now work in the Viewer in Positron Server Web / Positron on Workbench

Release Notes

New Features

Support page load detection, title display for HTML files, copy-paste, back/forward navigation, page refresh, etc. in the Viewer for Positron Server Web / Positron on Workbench (Support for page load detection, title display, navigation commands, etc. in the Viewer on Posit Workbench #4276)

Bug Fixes

N/A

Implementation

Mainly, I used the "Create some sort of proxy layer of our own to inject the script" idea from #4276, with a bit of "Run away from home and live in the woods" sprinkled in the process.

Positron Proxy

We now have a scripts_preview.html file that serves a similar purpose for the Viewer as the scripts_help.html for the Help Pane, which is used as a "template" to inject resources like styles and scripts into the HTML content being presented in the Viewer
In particular, we inject the webview-events.js script (see extensions/positron-proxy/resources/webview-events.js) into this template. The webview-events.js script is a copy of the existing Electron version of the script (see src/vs/workbench/contrib/webview/browser/pre/webview-events.js), with a couple modifications for running in a Web context. Changes are fenced between // --- Start Positron Proxy Changes --- and // --- End Positron Proxy Changes --- comments.
The HTMLProxy does this injection only when we are running in Web, so that we don't interfere with the Electron webview-events.js script that is injected from the core Positron code.
Refactored Positron Proxy to load and inject Help or Preview resources, move util functions into the util.ts file and type-related declarations to a types.ts file.
Moved all content rewriting functions to util.ts

Webview land

updated previewOverlayWebview.ts:loadUri() to align more closely with the HTML structure of src/vs/workbench/contrib/positronHelp/browser/resources/help.html
the HTML script in previewOverlayWebview.ts:loadUri() no longer handles reload/navigation and instead forwards messages along to the Webview or the iframe containing the content as applicable
- when forwarding messages to the Webview, the flag __positron_preview_message is passed
added some handling to the onmessage handler in webviewElement.ts to unwrap messages flagged with __positron_preview_message and pass them to the appropriate handlers

HTML Nesting Structure

Here's a summary of the HTML nesting situation, with some pseudo-HTML.

<iframe from={vs/workbench/contrib/webview/browser/pre/index.html}>
    <iframe title="Positron Preview" id="active-frame" from={src/vs/workbench/contrib/webview/browser/pre/fake.html}>
        <body from={src/vs/workbench/contrib/positronPreview/browser/previewOverlayWebview.ts:loadUri()}>
            <iframe id="preview-iframe" title="Preview Content" src={POSITRON_PROXY_URL_OR_HTML_FILE_PATH}>
                <head>
                    <style id="preview-style-defaults" from={extensions/positron-proxy/resources/scripts_preview.html}></style>
                    <style id="preview-style-overrides" from={extensions/positron-proxy/resources/scripts_preview.html}></style>
                    <script id="preview-script" from={extensions/positron-proxy/resources/scripts_preview.html}>
                        {CONTENTS OF extensions/positron-proxy/resources/webview-events.js}
                    </script>
                </head>
                <body>{HTML CONTENT OF FILE IN VIEWER}</body>
            </iframe id="preview-iframe" title="Preview Content" src={POSITRON_PROXY_URL_OR_HTML_FILE_PATH}>
            <script from={src/vs/workbench/contrib/positronPreview/browser/previewOverlayWebview.ts:loadUri()}>
                {FORWARD MESSAGES TO 'preview-iframe' OR TO PARENT WEBVIEW}
            </script>
        </body from={src/vs/workbench/contrib/positronPreview/browser/previewOverlayWebview.ts:loadUri()}>
    </iframe title="Positron Preview" id="active-frame" from={src/vs/workbench/contrib/webview/browser/pre/fake.html}>
</iframe from={vs/workbench/contrib/webview/browser/pre/index.html}>

QA Notes

The changes in this PR should only impact the Viewer in Positron Server Web / Workbench.

The following keyboard actions should work:

Copy/Cut/Paste
Select All

In the Viewer menu bar, the following buttons should work:

forward/back navigation buttons
refresh/reload button
page title should show for HTML files instead of the HTML file path

Preview an HTML file directly

From the qa-examples-content directory, locate the OilandGasMetadata.html file
Open the HTML file in the Viewer by doing one of the following
- Right-click on the file in the File Explorer and select "Open in Viewer"
- Open the file in an editor and click the View eye icon

Things to verify

The file's title should show in the Viewer bar, instead of the file path
Make a change to the OilandGasMetadata.html file, save the changes and click the Refresh button in the Viewer. The page in the Viewer should refresh and show the change you made.
Copy/Cut/Paste/Select All should all work

Preview an HTML page being served

Any of the qa-examples-content directory app frameworks should do, but I tested with the flask_example, as it's easier to test the back/forward navigation and copy/paste keyboard actions.

From the qa-examples-content directory, locate the init.py file
Open the __init__.py file in an editor
Click the Launch App button

Things to verify

Back/Forward navigation buttons work

back_forward_nav_viewer.mp4
1. Click on "Registration"
2. Click on the back arrow -- we should get back to the "Posts" page
3. Click on the forward arrow -- we should go to the "Registration" page
Refresh button works

refresh_button_viewer.mp4
1. Click on "Registration"
2. Enter some text in one of the input boxes
3. Click the Viewer refresh button -- input should be cleared
Copy/Cut/Paste/Select All should all work

github-actions · 2024-12-16T23:21:12Z

E2E Tests 🚀 ^?
This PR will run tests tagged with: @critical

extensions/positron-proxy/resources/webview-events.js

src/vs/workbench/contrib/webview/browser/webviewElement.ts

extensions/positron-proxy/resources/scripts_preview.html

extensions/positron-proxy/resources/webview-events.js

…events

inject webview-events.js script into preview html

d59ba06

sharon-wang commented Dec 16, 2024

View reviewed changes

extensions/positron-proxy/resources/webview-events.js Show resolved Hide resolved

sharon-wang added 9 commits December 19, 2024 14:22

pass messages from preview iframe to webview

ff31136

avoid "require is not defined" error when previewing HTML file

3eb662a

don't prevent default for copy paste or cut events

26c6fb1

move help resources into proxyServerHtmlConfigs

cac1504

move content rewriters to util and add htmlConfig to args

cc2a739

get back, forward and refresh nav working in viewer on web

fc6fc55

move preview resources injection to util file

9d4b174

use handleInnerKeydown from index.html in web based webview-events.js

87ae243

reorder if block

c163acf

sharon-wang marked this pull request as ready for review December 23, 2024 19:03

sharon-wang requested a review from jmcphers December 23, 2024 19:03

jmcphers previously approved these changes Jan 2, 2025

View reviewed changes

sharon-wang added 4 commits January 8, 2025 16:51

make script injecting comments more visually eye-catching

53cebf3

add note to propagate webview-events.js changes to Positron Proxy

dd4fd71

cleanup onmessage code

98d61b8

Merge remote-tracking branch 'origin/main' into preview-html-webview-…

8d3b9c8

…events

sharon-wang dismissed jmcphers’s stale review via 8d3b9c8 January 9, 2025 16:35

change tabs to spaces to fix comment alignment

f5f5fd1

sharon-wang merged commit a13cbeb into main Jan 9, 2025
7 checks passed

sharon-wang deleted the preview-html-webview-events branch January 9, 2025 18:26

github-actions bot locked and limited conversation to collaborators Jan 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

inject webview-events.js script into preview html #5766

inject webview-events.js script into preview html #5766

sharon-wang commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

inject webview-events.js script into preview html #5766

inject webview-events.js script into preview html #5766

Conversation

sharon-wang commented Dec 16, 2024 • edited Loading

Summary

Release Notes

New Features

Bug Fixes

Implementation

Positron Proxy

Webview land

HTML Nesting Structure

QA Notes

Preview an HTML file directly

Things to verify

Preview an HTML page being served

Things to verify

github-actions bot commented Dec 16, 2024 • edited Loading

sharon-wang commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading