Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 10 commits into from
+866 −183

Conversation

sharon-wang
Copy link
Member

@sharon-wang sharon-wang commented Dec 16, 2024 •
edited
Loading

Summary

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

  1. From the qa-examples-content directory, locate the OilandGasMetadata.html file
  2. 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"
      image
    • Open the file in an editor and click the View eye icon
      image

Things to verify

  • The file's title should show in the Viewer bar, instead of the file path
    image
  • 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.
    image
  • Copy/Cut/Paste/Select All should all work
    image

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.

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

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 GitHub Actions
Copy link

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

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

sharon-wang
sharon-wang commented Dec 16, 2024
View reviewed changes
extensions/positron-proxy/resources/webview-events.js
@@ -0,0 +1,389 @@
/*---------------------------------------------------------------------------------------------
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not ideal to duplicate this file in the extension 🤷

@sharon-wang sharon-wang marked this pull request as ready for review December 23, 2024 19:03
@sharon-wang sharon-wang requested a review from jmcphers December 23, 2024 19:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jmcphers jmcphers Awaiting requested review from jmcphers

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@sharon-wang