Dyn 5106 webview2 documentation browser #13212
Conversation
I replaced the WebBrowser component by WebView2 in the file DocumentationBrowserView.xaml, also I added some functions for initializing WebView2, The method ShouldAllowNavigation was modified due that WebView2 doesn't have the Navigating event and also the event handler receive different parameters then modified the function to implement the same behavior than the previous one. Also I noticed that WebView2 CORS was blocking to load the jpg images that are shown for several nodes, then I had to create a mapped virtual directory in this way the html will be able to load the images and show them in the web page. Finally I removed a tag in all the html that was making the web page compatible for IE based browsers (due that now we are using WebView2 a Chromium based browser).
|
SelfServe Job passed. |
|
GIF showing documentation browser with several nodes. |
|
GIF showing the behavior when a link is opened |
src/DocumentationBrowserViewExtension/DocumentationBrowserView.xaml.cs
Outdated
Show resolved
Hide resolved
| await documentationBrowser.EnsureCoreWebView2Async(); | ||
|
|
||
| //Due that the Web Browser(WebView2 - Chromium) security CORS is blocking the load of resources like images then we need to create a virtual folder in which the image are located. | ||
| this.documentationBrowser.CoreWebView2.SetVirtualHostNameToFolderMapping(VIRTUAL_FOLDER_MAPPING, FALLBACK_DOC_DIRECTORY_NAME, CoreWebView2HostResourceAccessKind.DenyCors); |
There was a problem hiding this comment.
From your testing, how costly is this operation?
There was a problem hiding this comment.
@QilongTang not sure exactly what you mean by costly, but if you refer to the time that takes WebView2 for loading the webpage and the image, at first glance I didn't notice any difference by using the full path "file:///C:/pathtoimage/image.png" against "http://virtualfolder/image.png", if you want I can check how we can measure the loading time and see the differences.
There was a problem hiding this comment.
I think you will need to consider how to this works for the other fallback docs folders as well, like the Revit/host one.
There was a problem hiding this comment.
@mjkkirschner do you know if when Dynamo is running over Revit both paths (DynamoCoreDirectory, HostApplicationDirectory) could have values (see image below)? or just one and the other will be empty?
Because if only one has value then we should use an if ........ else if ...... structure, right? Just to not follow the same pattern.
There was a problem hiding this comment.
yes, @RobertGlobant20 I think they will both have values, one folder will contain docs for core nodes, the other docs for the host.
| @@ -14,6 +19,10 @@ public partial class DocumentationBrowserView : UserControl, IDisposable | |||
| { | |||
| private const string ABOUT_BLANK_URI = "about:blank"; | |||
| private readonly DocumentationBrowserViewModel viewModel; | |||
| private const string FALLBACK_DOC_DIRECTORY_NAME = "fallback_docs"; | |||
There was a problem hiding this comment.
isn't this string already defined somewhere in this project?
There was a problem hiding this comment.
@mjkkirschner yes, is defined in PackageDocumentationManager.cs and DocumentationBrowserViewExtension.cs (I just move it here).
Do you have any idea in which place I can place it so we can use it in both places?
Due that the fallback_doc directory path can change depending if Dynamo is executed as Sandbox or if is over Revit then the path can be different so I added a code that will create the virtual directory depending of the correct fallback_doc directory path. Also I modified the Md2Html class so now it will be inserting in the image source (<img src) the prefix "http://appassets" so it can be loaded from a virtual directory created by the DocumentationBrowser.
src/DocumentationBrowserViewExtension/DocumentationBrowserViewExtension.cs
Outdated
Show resolved
Hide resolved
src/DocumentationBrowserViewExtension/DocumentationBrowserViewExtension.cs
Outdated
Show resolved
Hide resolved
src/DocumentationBrowserViewExtension/DocumentationBrowserView.xaml.cs
Outdated
Show resolved
Hide resolved
- changing the visibility for the property FallbackDirectoryName - renaming coreDir by docsDir
…ub.com/RobertGlobant20/Dynamo into DYN-5106-WebView2-DocumentationBrowser
|
Rebuilding SelfServe at https://master-5.jenkins.autodesk.com/job/Dynamo/job/DynamoSelfServe/job/pullRequestValidation/6806/ just for sanity checking |
Fixing CanCreateNodeDocumenationHtmlFromNodeAnnotationEventArgsWithPackageNodeWithAddtionalDocumentation test due that it was using and old format of the html <img> tab, then I updated the image to use the virtual folder and http.
@QilongTang I notice that it was using the wrong URL for |
|
Passed both, also the next SelfServe passed https://master-5.jenkins.autodesk.com/job/Dynamo/job/DynamoSelfServe/job/pullRequestValidation/6814/ |
Purpose
I replaced the WebBrowser component by WebView2 in the file DocumentationBrowserView.xaml, also I added some functions for initializing WebView2,
The method ShouldAllowNavigation was modified due that WebView2 doesn't have the Navigating event and also the event handler receive different parameters then modified the function to implement the same behavior than the previous one.
Also I noticed that WebView2 CORS was blocking to load the jpg images that are shown for several nodes, then I had to create a mapped virtual directory in this way the html will be able to load the images and show them in the web page.
Finally I removed a tag in all the html that was making the web page compatible for IE based browsers (due that now we are using WebView2 a Chromium based browser).
Declarations
Check these if you believe they are true
*.resxfilesRelease Notes
Replacing WebBrowser by WebView2 in DocumentationBrowser
Reviewers
@QilongTang
FYIs