Dyn 5107 webview2 update in guided tours (#13142)

RobertGlobant20 · web-flow · commit 9316af867c74 · 2022-08-02T22:40:10.000-04:00
* DYN-5107-WebView2Update-GuidedTours

I replaced the WebBrowser component used in Guided Tours by WebView2.
The WebBrowserWindow was removed due that the component was inserted directly in the PopupWindow.
Also I noticed that some code for hiding the Guided Tour Popups when Dynamo is in background was producing a crash in the WebView2 component, then I removed the code in GuidesManager.cs.

* DYN-5107-WebView2Update-GuidedTours Code Review

The methods LoadWebBrowser, LoadResouces and LoadResourceAndReplaceByKey were moved to the ResourceUtilities class so they can be used in other places
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -56,6 +56,7 @@
   <ItemGroup>
   <PackageReference Include="DynamoVisualProgramming.LibG_228_0_0" Version="2.13.0.9046" />
   <PackageReference Include="Greg" Version="2.3.0.1646" />
+  <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1264.42" />
 	<PackageReference Include="Newtonsoft.Json" Version="8.0.3" />
 	<PackageReference Include="RestSharp" Version="106.12.0" />
 	<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" CopyXML="true" />
@@ -355,9 +356,6 @@
     <Compile Include="Views\GuidedTour\ExitGuideWindow.xaml.cs">
       <DependentUpon>ExitGuideWindow.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Views\GuidedTour\WebBrowserWindow.xaml.cs">
-      <DependentUpon>WebBrowserWindow.xaml</DependentUpon>
-    </Compile>
     <Compile Include="Views\GuidedTour\RealTimeInfoWindow.xaml.cs">
       <DependentUpon>RealTimeInfoWindow.xaml</DependentUpon>
     </Compile>
@@ -514,10 +512,6 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Views\GuidedTour\WebBrowserWindow.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
     <Page Include="Views\Core\ConnectorContextMenuView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/GuidesManager.cs b/src/DynamoCoreWpf/UI/GuidedTour/GuidesManager.cs
@@ -278,24 +278,6 @@ internal void CreateExitModal(ExitGuide exitGuide)
             exitGuideWindow.IsOpen = true;
         }
 
-        /// <summary>
-        /// Shows/Hides the Popup based in if the DynamoView is Active or not
-        /// </summary>
-        /// <param name="isActive"></param>
-        internal void ManagePopupActivation(bool isActive)
-        {
-            if (GuideFlowEvents.IsAnyGuideActive)
-            {
-                if (currentGuide.CurrentStep.stepUIPopup.IsOpen == !isActive)
-                    currentGuide.CurrentStep.stepUIPopup.IsOpen = isActive;
-            }
-            else if (GuideFlowEvents.IsAnyGuideActive == false && GuideFlowEvents.IsGuideExited == false)
-            {
-                if(exitGuideWindow != null && currentGuide.Name.Equals(GuidesManager.PackagesGuideName))
-                    exitGuideWindow.IsOpen = isActive;
-            }
-        }
-
         private void ContinueTourButton_Click(object sender, RoutedEventArgs e)
         {
             exitGuideWindow.IsOpen = false;
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/Step.cs b/src/DynamoCoreWpf/UI/GuidedTour/Step.cs
@@ -272,6 +272,15 @@ internal void Hide(Guide.GuideFlow currentFlow)
         {
             stepUIPopup.IsOpen = false;
 
+            if (HostPopupInfo.HtmlPage != null && !string.IsNullOrEmpty(HostPopupInfo.HtmlPage.FileName))
+            {
+                var webBrowser = (stepUIPopup as PopupWindow).webBrowserComponent;
+                if(webBrowser != null)
+                {
+                    webBrowser.Dispose();
+                }               
+            }
+
             //Disable the HightlightArea functionality
             SetHighlightSection(false);
 
@@ -421,7 +430,6 @@ public void UpdateLocation()
             if(stepUIPopup is PopupWindow)
             {
                 var stepUiPopupWindow = (PopupWindow)stepUIPopup;
-                UpdatePopupLocationInvoke(stepUiPopupWindow?.webBrowserWindow);
             }
         }
 
@@ -485,7 +493,7 @@ private void UpdatePopupLocationInvoke(Popup popUp)
                 positionMethod.Invoke(popUp, null);
             }
         }
-
+        
         /// <summary>
         /// This method will execute an UIAutomation action over a specific UIElement
         /// </summary>
diff --git a/src/DynamoCoreWpf/Utilities/ResourceUtilities.cs b/src/DynamoCoreWpf/Utilities/ResourceUtilities.cs
@@ -1,7 +1,9 @@
 ﻿using Dynamo.Logging;
 using Dynamo.Wpf.Properties;
 using Dynamo.Wpf.UI.GuidedTour;
+using Microsoft.Web.WebView2.Wpf;
 using System;
+using System.Collections.Generic;
 using System.Globalization;
 using System.IO;
 using System.Linq;
@@ -319,5 +321,62 @@ internal static object ExecuteJSFunction(UIElement MainWindow, HostControlInfo p
             }
             return resultJSHTML;
         }
+
+        /// <summary>
+        /// Loads HTML file from resource assembly and replace it's key values by base64 files
+        /// </summary>
+        /// <param name="htmlPage">Contains filename and resources to be loaded in page</param>
+        /// <param name="webBrowserComponent">WebView2 instance that will be initialized</param>
+        /// <param name="resourcesPath">Path of the resources that will be loaded into the HTML page</param>
+        /// <param name="fontStylePath">Path to the Font Style that will be used in some part of the HTML page</param>
+        /// <param name="localAssembly">Local Assembly in which the resource will be loaded</param>
+        internal static async void LoadWebBrowser(HtmlPage htmlPage, WebView2 webBrowserComponent, string resourcesPath, string fontStylePath, Assembly localAssembly)
+        {
+            var bodyHtmlPage = ResourceUtilities.LoadContentFromResources(htmlPage.FileName, localAssembly, false, false);
+
+            bodyHtmlPage = LoadResouces(bodyHtmlPage, htmlPage.Resources, resourcesPath);
+            bodyHtmlPage = LoadResourceAndReplaceByKey(bodyHtmlPage, "#fontStyle", fontStylePath);
+            await webBrowserComponent.EnsureCoreWebView2Async();
+            webBrowserComponent.NavigateToString(bodyHtmlPage);
+        }
+
+        /// <summary>
+        /// Loads resource from a dictionary and replaces its key by an embedded file
+        /// </summary>
+        /// <param name="bodyHtmlPage">Html page string</param>
+        /// <param name="resources">Resources to be loaded</param>
+        /// <param name="resourcesPath">Path to resources</param>
+        /// <returns></returns>
+        internal static string LoadResouces(string bodyHtmlPage, Dictionary<string, string> resources, string resourcesPath)
+        {
+            if (resources != null && resources.Any())
+            {
+                foreach (var resource in resources)
+                {
+                    bodyHtmlPage = LoadResourceAndReplaceByKey(bodyHtmlPage, resource.Key, $"{resourcesPath}.{resource.Value}");
+                }
+            }
+            return bodyHtmlPage;
+        }
+
+        /// <summary>
+        /// Finds a key word inside the html page and replace by a resource file
+        /// </summary>
+        /// <param name="bodyHtmlPage">Current html page</param>
+        /// <param name="key">Key that is going to be replaced</param>
+        /// <param name="resourceFile">Resource file to be included in the page</param>
+        /// <returns></returns>
+        internal static string LoadResourceAndReplaceByKey(string bodyHtmlPage, string key, string resourceFile)
+        {
+            Stream resourceStream = ResourceUtilities.LoadResourceByUrl(resourceFile);
+
+            if (resourceStream != null)
+            {
+                var resourceBase64 = ResourceUtilities.ConvertToBase64(resourceStream);
+                bodyHtmlPage = bodyHtmlPage.Replace(key, resourceBase64);
+            }
+
+            return bodyHtmlPage;
+        }
     }
 }
diff --git a/src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs b/src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs
@@ -2508,12 +2508,6 @@ private void FileTrustWarning_Click(object sender, RoutedEventArgs e)
 
         private void DynamoView_Activated(object sender, EventArgs e)
         {
-            if (dynamoViewModel.MainGuideManager != null && dynamoViewModel.MainGuideManager.currentGuide != null)
-            {
-                dynamoViewModel.MainGuideManager.ManagePopupActivation(true);
-            }
-
-
             if (fileTrustWarningPopup != null)
             {
                 fileTrustWarningPopup.ManagePopupActivation(true);
@@ -2522,9 +2516,6 @@ private void DynamoView_Activated(object sender, EventArgs e)
 
         private void DynamoView_Deactivated(object sender, EventArgs e)
         {
-            if (dynamoViewModel.MainGuideManager != null && dynamoViewModel.MainGuideManager.currentGuide != null)
-                dynamoViewModel.MainGuideManager.ManagePopupActivation(false);
-
             if(fileTrustWarningPopup != null)
                 fileTrustWarningPopup.ManagePopupActivation(false);
         }
diff --git a/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml b/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml
@@ -87,6 +87,7 @@
             </Grid.RowDefinitions>
 
             <Grid Grid.Row="0"
+                  x:Name="contentGrid"
                   DataContext="{Binding Step}">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="50"/>
@@ -102,7 +103,7 @@
                         <SolidColorBrush Color="{StaticResource PopupTitleBorderColor}" 
                                          Opacity="0.3"/>
                     </Border.BorderBrush>
-                    <Grid>
+                    <Grid x:Name="titleGrid">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="10*"/>
                             <ColumnDefinition Width="*"/>
@@ -135,6 +136,7 @@
             
             
             <Grid Grid.Row="1" 
+                  x:Name="bottomGrid"
                   Margin="0,10,0,10">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*"/>
diff --git a/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml.cs b/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml.cs
@@ -1,11 +1,13 @@
 ﻿using System;
-using System.IO;
 using System.Reflection;
 using System.Windows;
+using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
 using System.Windows.Input;
+using Dynamo.Utilities;
 using Dynamo.Wpf.UI.GuidedTour;
 using Dynamo.Wpf.ViewModels.GuidedTour;
+using Microsoft.Web.WebView2.Wpf;
 
 namespace Dynamo.Wpf.Views.GuidedTour
 {
@@ -23,7 +25,11 @@ public partial class PopupWindow : Popup
         //Field that indicates wheter popups are left-aligned or right-aligned
         private const string menuDropAligment = "_menuDropAlignment";
 
-        internal WebBrowserWindow webBrowserWindow;
+        internal WebView2 webBrowserComponent;
+        //Assembly path to the Font file
+        private const string mainFontStylePath = "Dynamo.Wpf.Views.GuidedTour.HtmlPages.Resources.ArtifaktElement-Regular.woff";
+        //Assembly path to the Resources folder
+        private const string resourcesPath = "Dynamo.Wpf.Views.GuidedTour.HtmlPages.Resources";
 
         public PopupWindow(PopupWindowViewModel viewModel, HostControlInfo hInfo)
         {
@@ -75,10 +81,13 @@ private void EnsureStandardPopupAlignment()
 
         private void PopupWindow_Closed(object sender, EventArgs e)
         {
-            if (webBrowserWindow != null)
-                webBrowserWindow.IsOpen = false;
+            if (webBrowserComponent != null)
+            {
+                webBrowserComponent.Visibility = Visibility.Collapsed;
+            }
 
-            if(isClosingTour)
+
+            if (isClosingTour)
             {
                 Opened -= PopupWindow_Opened;
                 Closed -= PopupWindow_Closed;
@@ -89,13 +98,29 @@ private void PopupWindow_Opened(object sender, EventArgs e)
         {
             if (hostControlInfo.HtmlPage != null && !string.IsNullOrEmpty(hostControlInfo.HtmlPage.FileName))
             {
-                ContentRichTextBox.Visibility = Visibility.Hidden;
-
-                webBrowserWindow = new WebBrowserWindow(popupViewModel, hostControlInfo);
-                webBrowserWindow.IsOpen = true;
+                ContentRichTextBox.Visibility = Visibility.Hidden;            
+                InitWebView2Component();
             }
         }
 
+        private async void InitWebView2Component()
+        {
+            webBrowserComponent = new WebView2();
+            webBrowserComponent.Margin = new System.Windows.Thickness(popupBordersOffSet, 0, 0, 0);
+            webBrowserComponent.Width = popupViewModel.Width;
+            //The height is subtracted by a const that sums the height of the header and footer of the popup
+            var heightBottom = bottomGrid.ActualHeight;
+            var heightTitle = titleGrid.ActualHeight;
+            //popupBordersOffSet * 2 because is one offset at the top and the other one at the bottom of the Popup
+            webBrowserComponent.Height = popupViewModel.Height - (heightBottom + heightTitle + popupBordersOffSet * 2);
+            contentGrid.Children.Add(webBrowserComponent);
+            Grid.SetRow(webBrowserComponent, 1);
+
+            ResourceUtilities.LoadWebBrowser(hostControlInfo.HtmlPage, webBrowserComponent, resourcesPath, mainFontStylePath, GetType().Assembly);
+        }
+
+       
+
         private void StartTourButton_Click(object sender, System.Windows.RoutedEventArgs e)
         {
             GuideFlowEvents.OnGuidedTourNext();
diff --git a/src/DynamoCoreWpf/Views/GuidedTour/WebBrowserWindow.xaml b/src/DynamoCoreWpf/Views/GuidedTour/WebBrowserWindow.xaml
diff --git a/src/DynamoCoreWpf/Views/GuidedTour/WebBrowserWindow.xaml.cs b/src/DynamoCoreWpf/Views/GuidedTour/WebBrowserWindow.xaml.cs

Original file line number	Diff line number	Diff line change
`@@ -272,6 +272,15 @@ internal void Hide(Guide.GuideFlow currentFlow)`
`272`	`272`	`{`
`273`	`273`	`stepUIPopup.IsOpen = false;`
`274`	`274`
	`275`	`+ if (HostPopupInfo.HtmlPage != null && !string.IsNullOrEmpty(HostPopupInfo.HtmlPage.FileName))`
	`276`	`+ {`
	`277`	`+ var webBrowser = (stepUIPopup as PopupWindow).webBrowserComponent;`
	`278`	`+ if(webBrowser != null)`
	`279`	`+ {`
	`280`	`+ webBrowser.Dispose();`
	`281`	`+ }`
	`282`	`+ }`
	`283`	`+`
`275`	`284`	`//Disable the HightlightArea functionality`
`276`	`285`	`SetHighlightSection(false);`
`277`	`286`
`@@ -421,7 +430,6 @@ public void UpdateLocation()`
`421`	`430`	`if(stepUIPopup is PopupWindow)`
`422`	`431`	`{`
`423`	`432`	`var stepUiPopupWindow = (PopupWindow)stepUIPopup;`
`424`		`- UpdatePopupLocationInvoke(stepUiPopupWindow?.webBrowserWindow);`
`425`	`433`	`}`
`426`	`434`	`}`
`427`	`435`
`@@ -485,7 +493,7 @@ private void UpdatePopupLocationInvoke(Popup popUp)`
`485`	`493`	`positionMethod.Invoke(popUp, null);`
`486`	`494`	`}`
`487`	`495`	`}`
`488`		`-`
	`496`	`+`
`489`	`497`	`/// <summary>`
`490`	`498`	`/// This method will execute an UIAutomation action over a specific UIElement`
`491`	`499`	`/// </summary>`
Original file line number	Diff line number	Diff line change
`@@ -2508,12 +2508,6 @@ private void FileTrustWarning_Click(object sender, RoutedEventArgs e)`
`2508`	`2508`
`2509`	`2509`	`private void DynamoView_Activated(object sender, EventArgs e)`
`2510`	`2510`	`{`
`2511`		`- if (dynamoViewModel.MainGuideManager != null && dynamoViewModel.MainGuideManager.currentGuide != null)`
`2512`		`- {`
`2513`		`- dynamoViewModel.MainGuideManager.ManagePopupActivation(true);`
`2514`		`- }`
`2515`		`-`
`2516`		`-`
`2517`	`2511`	`if (fileTrustWarningPopup != null)`
`2518`	`2512`	`{`
`2519`	`2513`	`fileTrustWarningPopup.ManagePopupActivation(true);`
`@@ -2522,9 +2516,6 @@ private void DynamoView_Activated(object sender, EventArgs e)`
`2522`	`2516`
`2523`	`2517`	`private void DynamoView_Deactivated(object sender, EventArgs e)`
`2524`	`2518`	`{`
`2525`		`- if (dynamoViewModel.MainGuideManager != null && dynamoViewModel.MainGuideManager.currentGuide != null)`
`2526`		`- dynamoViewModel.MainGuideManager.ManagePopupActivation(false);`
`2527`		`-`
`2528`	`2519`	`if(fileTrustWarningPopup != null)`
`2529`	`2520`	`fileTrustWarningPopup.ManagePopupActivation(false);`
`2530`	`2521`	`}`