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.

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

Azure edge robotics webview not loading #123318

Closed
mjbvz opened this issue May 7, 2021 · 17 comments
Closed

Azure edge robotics webview not loading #123318

mjbvz opened this issue May 7, 2021 · 17 comments
Assignees
Labels
*caused-by-extension Issue identified to be caused by an extension info-needed Issue requires more information from poster webview Webview issues

Comments

@mjbvz
Copy link
Collaborator

mjbvz commented May 7, 2021

Hello All,
I'm in the Azure Edge Robotics team, maintaining the VSCode extension for ROS. We are hitting this issue as well for our Robot Visualizer. It seems to be related to a move from vscode-resource to https?

For example, we have a workspace rooted at c:\ws\tb, which has sources including stl files.
We convert this to a file URI, then to a webview URI. Before the update, it would look something like:
vscode-resource://c%3A/ws/tb/src/turtlebot3/turtlebot3_description/meshes/wheels/right_tire.stl

but now looks like this:

https://47c83f32-da7e-4be3-9b90-42735e27223e.vscode-webview-test.com/vscode-resource/file///c%3A/ws/tb/src/turtlebot3/turtlebot3_description/meshes/wheels/right_tire.stl 

The file/// does not look right to me.

Originally posted by @ooeygui in #122951 (comment)

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 7, 2021

The uri changes are expected, see https://code.visualstudio.com/updates/v1_56#_service-workers-now-used-to-load-resource-in-webview

I think your extension is hardcoding some assumptions about the result of asWebviewUri:

https://github.com/ms-iot/vscode-ros/blob/0de53b6d3b3dda1067930cf91a455c1a8928fb5d/src/urdfPreview/preview.ts#L132

I don't know what the line is doing but it will need to be re-written. We only say that asWebviewUri returns something that can be used in webviews, not the specific structure of the results

@ooeygui
Copy link
Member

ooeygui commented May 7, 2021

@mjbvz Thank you for the doc pointer. I have updated my code, but still am getting file not found. when attempting to load the new URI. We are using a module which makes some assumptions about the URI, so we do have to modify the return value slightly. (internally it composes its own url by combining a prefix path with the passed in one. So we split the path we pass in. I changed this code to https: )

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 7, 2021

Please share a branch with your code changes

@vjocw
Copy link

vjocw commented May 7, 2021

We are having similar problems. We are not able to load .png or .svg from elements from our Angular application. We do not hardcode vscode-resource or vscode-webview-resource anywhere in our codebase.

We used asWebviewUri for every resource we request in the html.

Our Content-Security Policy is
img-src https://*.vscode-webview-test.com https: data:;

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 7, 2021

@vincentjocodes Please share minimal example code that demonstrates the issue

@mjbvz mjbvz added info-needed Issue requires more information from poster webview Webview issues labels May 7, 2021
@mjbvz
Copy link
Collaborator Author

mjbvz commented May 8, 2021

@ooeygui Sounds like you came up with a code fix on the extension side? Should we close this issue then?

@glouischandra
Copy link

@mjbvz I'm working on creating minimal example code. Meanwhile after debugging further, it seems that the .png request doesn't get picked up by the service worker and times out after 5 minutes. Do you know any reason why the service worker seems to ignore a request? This seems to happen on images that are loaded within JS or CSS (as background-image)

image

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 11, 2021

@glouischandra Is it trying to load the images inside an iframe in the webview? Is the script running in one?

@glouischandra
Copy link

glouischandra commented May 11, 2021

Its trying to load an image inside the webview, there's no additional iframe within the webview (not sure if this is what you're asking for). The script is injected inside webview's body and the source code is located within the extension project itself, like: https://d80db2d4-a744-4854-98f7-b90d109f8c44.vscode-webview-test.com/vscode-resource/file///Users/..../dist/webview/main.js.

This script is an angular application. Interestingly if I just create the same <img src=".../logo.png"> with the same exact URL that angular generated directly in the HTML, ServiceWorker seems to pick it up just fine and download the image.

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 12, 2021

Not sure, a minimal example would definitely help

@ooeygui
Copy link
Member

ooeygui commented May 12, 2021

We have a code fix in flight which corrects this. I'll be pushing a release today.

@glouischandra
Copy link

@mjbvz Here's a minimal repro for the angular webview issue: https://github.com/glouischandra/vscode-156-minimal-repo

@glouischandra
Copy link

@mjbvz any update on the investigation?

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 19, 2021

Can you please slim that example down? Looks like there's a lot of stuff about angular and other components in there right now

@ooeygui
Copy link
Member

ooeygui commented May 19, 2021

We can close this issue now - we released a fix for the ROS VSCode extension. (Since I didn't create this github issue, I cannot close it)

@mjbvz
Copy link
Collaborator Author

mjbvz commented May 19, 2021

Thanks. Let me know if something still doesn't seem to be working correctly on the VS Code side

@mjbvz mjbvz closed this as completed May 19, 2021
@mjbvz mjbvz added the *caused-by-extension Issue identified to be caused by an extension label May 19, 2021
@glouischandra
Copy link

@mjbvz will do, I'll file a separate bug once we slim the example down.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
*caused-by-extension Issue identified to be caused by an extension info-needed Issue requires more information from poster webview Webview issues
Projects
None yet
Development

No branches or pull requests

4 participants