DYN-5656 Dynamo UI Blocking Action (#14778)

* DYN-5656 Dynamo UI Blocking Action

I've implementing the functionality of adding the GuideBackground (overlay) when the Preferences panel or the PackageSearchWindow are opened and removing it when those windows are closed. In this way when we have the GuideBackground the user won't be able to interact with the background.
I've added this functionality in the DynamoView but due that the GuideBackground is not working with the Library, I had to implement the overlay functionality in the library.html and the functions needed to set the overlay from .NET.

* DYN-5656 Dynamo UI Blocking Action

Fixing Columns and Rows hardcoded values

src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs

@@ -42,6 +42,7 @@
 using Dynamo.Wpf.Views;
 using Dynamo.Wpf.Views.Debug;
 using Dynamo.Wpf.Views.FileTrust;
+using Dynamo.Wpf.Views.GuidedTour;
 using Dynamo.Wpf.Windows;
 using HelixToolkit.Wpf.SharpDX;
 using ICSharpCode.AvalonEdit;
@@ -2317,7 +2318,45 @@ private void HandlePackageManagerWindowClosed(object sender, EventArgs e)
 
         internal void EnableEnvironment(bool isEnabled)
         {
-            this.mainGrid.IsEnabled = isEnabled;
+            this.mainGrid.IsEnabled = isEnabled;       
+        }
+
+        /// <summary>
+        /// Adds/Removes an overlay so the user won't be able to interact with the background (this behavior was implemented for Dynamo and for Library)
+        /// </summary>
+        /// <param name="isEnabled">True if the overlay is enable otherwise will be false</param>
+        internal void EnableOverlayBlocker(bool isEnabled)
+        {
+            object[] parametersInvokeScript = new object[] { "fullOverlayVisible", new object[] { isEnabled } };
+            ResourceUtilities.ExecuteJSFunction(this, parametersInvokeScript);
+
+            if (isEnabled)
+            {
+                //By default the shortcutsBarGrid has a ZIndex = 1 then will be shown over the overlay that's why we need to change the ZIndex
+                Panel.SetZIndex(shortcutsBarGrid, 0);
+                var backgroundElement = new GuideBackground(this)
+                {
+                    Name = "BackgroundBlocker",
+                    HorizontalAlignment = HorizontalAlignment.Left,
+                    VerticalAlignment = VerticalAlignment.Top,
+                    Visibility = Visibility.Visible
+                };
+
+                //adds the overlay to the main Dynamo grid
+                mainGrid.Children.Add(backgroundElement);
+                Grid.SetColumnSpan(backgroundElement, mainGrid.ColumnDefinitions.Count);
+                Grid.SetRowSpan(backgroundElement, mainGrid.RowDefinitions.Count);
+            }
+            else
+            {
+                //Restoring the ZIndex value to the default one.
+                Panel.SetZIndex(shortcutsBarGrid, 1);
+                var backgroundElement = mainGrid.Children.OfType<GuideBackground>().FirstOrDefault();
+                if (backgroundElement != null)
+                {
+                    mainGrid.Children.Remove(backgroundElement);
+                }
+            }
         }
 
         /// <summary>

src/DynamoCoreWpf/Views/Menu/PreferencesView.xaml.cs

@@ -98,6 +98,7 @@ public PreferencesView(DynamoView dynamoView)
             stylesCustomColors = new ObservableCollection<CustomColorItem>();
             UpdateZoomScaleValueLabel(LibraryZoomScalingSlider, lblZoomScalingValue);
             UpdateZoomScaleValueLabel(PythonZoomScalingSlider, lblPythonScalingValue);
+            dynamoView.EnableOverlayBlocker(true);
         }
 
         /// <summary>
@@ -171,6 +172,7 @@ private void CloseButton_Click(object sender, RoutedEventArgs e)
 
             dynViewModel.PreferencesViewModel.TrustedPathsViewModel.PropertyChanged -= TrustedPathsViewModel_PropertyChanged;
             dynViewModel.CheckCustomGroupStylesChanges(originalCustomGroupStyles);
+            (this.Owner as DynamoView).EnableOverlayBlocker(false);
 
             Close();
         }

src/DynamoCoreWpf/Views/PackageManager/PackageManagerView.xaml.cs

@@ -68,6 +68,7 @@ public PackageManagerView(DynamoView dynamoView, PackageManagerViewModel package
                 Categories.PackageManager);
 
             this.dynamoView = dynamoView;
+            dynamoView.EnableOverlayBlocker(true);
         }
 
         private void OnRequestShowFileDialog(object sender, PackagePathEventArgs e)
@@ -130,6 +131,7 @@ private void PackageManagerPanel_MouseDown(object sender, MouseButtonEventArgs e
         private void CloseButton_Click(object sender, RoutedEventArgs e)
         {
             Analytics.TrackEvent(Actions.Close, Categories.PackageManager);
+            (this.Owner as DynamoView).EnableOverlayBlocker(false);
 
             Close();
         }

src/LibraryViewExtensionWebView2/web/library/library.html

@@ -88,11 +88,25 @@
             margin-top: 0.15rem;
             vertical-align: top !important;
         }
+
+        #overlay {
+            position: fixed;
+            display: none;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.5);
+            z-index: 2;
+        }
     </style>
 
 </head>
 
 <body onresize="bodyResizeEvent()">
+    <div id="overlay"></div>
     <!-- Placeholders must exist before all other scripts that try to access them -->
     <div class="OuterMostContainer" id="libraryContainerPlaceholder"></div>
     <!-- The main library view component -->
@@ -413,6 +427,14 @@
 
             document.dispatchEvent(kbEvent);
         }
+
+        //This function will show the overlay over the Library when the Preferences/PackageManagerSearch are opened otherwiser is not visible
+        function fullOverlayVisible(enableOverlay) {
+            if (enableOverlay)
+                document.getElementById("overlay").style.display = "block";
+            else
+                document.getElementById("overlay").style.display = "none";
+        }
     </script>
 
 </body>