Final polish pass to RenderGraph Viewer UX

This PR implements polish based on designer & user feedback listed here: https://jira.unity3d.com/browse/XPIPELINE-863

List of changes made:
- Smaller default width of the side panel
- Cap maximum width of the camera dropdown element
- Add "Graph" and "Camera" labels to header dropdowns
- Improve # icon
- Bold Pass names in side panel
- Fix "compatible pass" blinking animation getting out of sync with each other as you hover the blinking elements
- Change active camera selection to automatically trigger a view refresh
- Make resource/pass list panels resizeable vertically (see gif)
![rg-viewer-splitpane-resize2](https://media.github.cds.internal.unity3d.com/user/3380/files/b4ac0467-72f0-44e7-9dcf-be2133e6e21d)

Author: arttu-peltonen

Packages/com.unity.render-pipelines.core/Editor/Icons/RenderGraphViewer/ScriptLink@2x.png

@@ -19,6 +19,7 @@ public partial class RenderGraphViewer
 
         static partial class Names
         {
+            public const string kPanelContainer = "panel-container";
             public const string kResourceListFoldout = "panel-resource-list";
             public const string kPassListFoldout = "panel-pass-list";
             public const string kResourceSearchField = "resource-search-field";
@@ -40,18 +41,31 @@ static partial class Classes
         const string k_SelectionColorBeginTag = "<mark=#3169ACAB>";
         const string k_SelectionColorEndTag = "</mark>";
 
+        TwoPaneSplitView m_SidePanelSplitView;
         bool m_ResourceListExpanded = true;
         bool m_PassListExpanded = true;
+        float m_SidePanelVerticalAspectRatio = 0.5f;
+        float m_SidePanelFixedPaneHeight = 0;
 
         Dictionary<VisualElement, List<TextElement>> m_ResourceDescendantCache = new ();
         Dictionary<VisualElement, List<TextElement>> m_PassDescendantCache = new ();
 
         void InitializeSidePanel()
         {
+            m_SidePanelSplitView = rootVisualElement.Q<TwoPaneSplitView>(Names.kPanelContainer);
+            rootVisualElement.RegisterCallback<GeometryChangedEvent>(_ =>
+            {
+                SaveSplitViewFixedPaneHeight(); // Window resized - save the current pane height
+                UpdatePanelHeights();
+            });
+
             // Callbacks for dynamic height allocation between resource & pass lists
             HeaderFoldout resourceListFoldout = rootVisualElement.Q<HeaderFoldout>(Names.kResourceListFoldout);
             resourceListFoldout.RegisterValueChangedCallback(evt =>
             {
+                if (m_ResourceListExpanded)
+                    SaveSplitViewFixedPaneHeight(); // Closing the foldout - save the current pane height
+
                 m_ResourceListExpanded = resourceListFoldout.value;
                 UpdatePanelHeights();
             });
@@ -61,6 +75,9 @@ void InitializeSidePanel()
             HeaderFoldout passListFoldout = rootVisualElement.Q<HeaderFoldout>(Names.kPassListFoldout);
             passListFoldout.RegisterValueChangedCallback(evt =>
             {
+                if (m_PassListExpanded)
+                    SaveSplitViewFixedPaneHeight(); // Closing the foldout - save the current pane height
+
                 m_PassListExpanded = passListFoldout.value;
                 UpdatePanelHeights();
             });
@@ -247,8 +264,9 @@ void CreateTextElement(VisualElement parent, string text, string className = nul
                 }
 
                 var passItem = new Foldout();
-                passItem.text = string.Join(", ", passNames);
-                passItem.Q<Toggle>().tooltip = passItem.text;
+                var passesText = string.Join(", ", passNames);
+                passItem.text = $"<b>{passesText}</b>";
+                passItem.Q<Toggle>().tooltip = passesText;
                 passItem.value = false;
                 passItem.userData = m_PassIdToVisiblePassIndex[visiblePassElement.passId];
                 passItem.AddToClassList(Classes.kPanelListItem);
@@ -270,71 +288,75 @@ void CreateTextElement(VisualElement parent, string text, string className = nul
                 }
                 else
                 {
+                    CreateTextElement(passItem, "Pass break reasoning", Classes.kSubHeaderText);
                     var msg = $"This is a {k_PassTypeNames[(int) firstPassData.type]}. Only Raster Render Passes can be merged.";
                     msg = msg.Replace("a Unsafe", "an Unsafe");
                     CreateTextElement(passItem, msg);
                 }
 
-                CreateTextElement(passItem, "Render Graph Pass Info", Classes.kSubHeaderText);
-                foreach (int passId in groupedPassIds)
-                {
-                    var pass = m_CurrentDebugData.passList[passId];
-                    Debug.Assert(pass.nrpInfo != null); // This overlay currently assumes NRP compiler
-                    var passFoldout = new Foldout();
-                    passFoldout.text = $"{pass.name} ({k_PassTypeNames[(int) pass.type]})";
-                    passFoldout.AddToClassList(Classes.kAttachmentInfoItem);
-                    passFoldout.AddToClassList(Classes.kCustomFoldoutArrow);
-                    passFoldout.Q<Toggle>().tooltip = passFoldout.text;
-
-                    var foldoutCheckmark = passFoldout.Q("unity-checkmark");
-                    foldoutCheckmark.BringToFront(); // Move foldout checkmark to the right
-
-                    var lineBreak = new VisualElement();
-                    lineBreak.AddToClassList(Classes.kPanelListLineBreak);
-                    passFoldout.Add(lineBreak);
-
-                    CreateTextElement(passFoldout,
-                        $"Attachment dimensions: {pass.nrpInfo.width}x{pass.nrpInfo.height}x{pass.nrpInfo.volumeDepth}");
-                    CreateTextElement(passFoldout, $"Has depth attachment: {pass.nrpInfo.hasDepth}");
-                    CreateTextElement(passFoldout, $"MSAA samples: {pass.nrpInfo.samples}");
-                    CreateTextElement(passFoldout, $"Async compute: {pass.async}");
-
-                    passItem.Add(passFoldout);
-                }
-
-                CreateTextElement(passItem, "Attachment Load/Store Actions", Classes.kSubHeaderText);
-                if (nativePassInfo != null && nativePassInfo.attachmentInfos.Count > 0)
+                if (nativePassInfo != null)
                 {
-                    foreach (var attachmentInfo in nativePassInfo.attachmentInfos)
+                    CreateTextElement(passItem, "Render Graph Pass Info", Classes.kSubHeaderText);
+                    foreach (int passId in groupedPassIds)
                     {
-                        var attachmentFoldout = new Foldout();
-                        attachmentFoldout.text = attachmentInfo.resourceName;
-                        attachmentFoldout.AddToClassList(Classes.kAttachmentInfoItem);
-                        attachmentFoldout.AddToClassList(Classes.kCustomFoldoutArrow);
-                        attachmentFoldout.Q<Toggle>().tooltip = attachmentFoldout.text;
-
-                        var foldoutCheckmark = attachmentFoldout.Q("unity-checkmark");
+                        var pass = m_CurrentDebugData.passList[passId];
+                        Debug.Assert(pass.nrpInfo != null); // This overlay currently assumes NRP compiler
+                        var passFoldout = new Foldout();
+                        passFoldout.text = $"{pass.name} ({k_PassTypeNames[(int) pass.type]})";
+                        passFoldout.AddToClassList(Classes.kAttachmentInfoItem);
+                        passFoldout.AddToClassList(Classes.kCustomFoldoutArrow);
+                        passFoldout.Q<Toggle>().tooltip = passFoldout.text;
+
+                        var foldoutCheckmark = passFoldout.Q("unity-checkmark");
                         foldoutCheckmark.BringToFront(); // Move foldout checkmark to the right
 
                         var lineBreak = new VisualElement();
                         lineBreak.AddToClassList(Classes.kPanelListLineBreak);
-                        attachmentFoldout.Add(lineBreak);
+                        passFoldout.Add(lineBreak);
 
-                        attachmentFoldout.Add(new TextElement
-                        {
-                            text = $"<b>Load action:</b> {attachmentInfo.loadAction} ({attachmentInfo.loadReason})"
-                        });
-                        attachmentFoldout.Add(new TextElement
-                        {
-                            text = $"<b>Store action:</b> {attachmentInfo.storeAction} ({attachmentInfo.storeReason})"
-                        });
+                        CreateTextElement(passFoldout,
+                            $"Attachment dimensions: {pass.nrpInfo.width}x{pass.nrpInfo.height}x{pass.nrpInfo.volumeDepth}");
+                        CreateTextElement(passFoldout, $"Has depth attachment: {pass.nrpInfo.hasDepth}");
+                        CreateTextElement(passFoldout, $"MSAA samples: {pass.nrpInfo.samples}");
+                        CreateTextElement(passFoldout, $"Async compute: {pass.async}");
 
-                        passItem.Add(attachmentFoldout);
+                        passItem.Add(passFoldout);
+                    }
+
+                    CreateTextElement(passItem, "Attachment Load/Store Actions", Classes.kSubHeaderText);
+                    if (nativePassInfo != null && nativePassInfo.attachmentInfos.Count > 0)
+                    {
+                        foreach (var attachmentInfo in nativePassInfo.attachmentInfos)
+                        {
+                            var attachmentFoldout = new Foldout();
+                            attachmentFoldout.text = attachmentInfo.resourceName;
+                            attachmentFoldout.AddToClassList(Classes.kAttachmentInfoItem);
+                            attachmentFoldout.AddToClassList(Classes.kCustomFoldoutArrow);
+                            attachmentFoldout.Q<Toggle>().tooltip = attachmentFoldout.text;
+
+                            var foldoutCheckmark = attachmentFoldout.Q("unity-checkmark");
+                            foldoutCheckmark.BringToFront(); // Move foldout checkmark to the right
+
+                            var lineBreak = new VisualElement();
+                            lineBreak.AddToClassList(Classes.kPanelListLineBreak);
+                            attachmentFoldout.Add(lineBreak);
+
+                            attachmentFoldout.Add(new TextElement
+                            {
+                                text = $"<b>Load action:</b> {attachmentInfo.loadAction} ({attachmentInfo.loadReason})"
+                            });
+                            attachmentFoldout.Add(new TextElement
+                            {
+                                text = $"<b>Store action:</b> {attachmentInfo.storeAction} ({attachmentInfo.storeReason})"
+                            });
+
+                            passItem.Add(attachmentFoldout);
+                        }
+                    }
+                    else
+                    {
+                        CreateTextElement(passItem, "No attachments.");
                     }
-                }
-                else
-                {
-                    CreateTextElement(passItem, "No attachments.");
                 }
 
                 content.Add(passItem);
@@ -343,32 +365,48 @@ void CreateTextElement(VisualElement parent, string text, string className = nul
             }
         }
 
-        void UpdatePanelHeights()
+        void SaveSplitViewFixedPaneHeight()
         {
-            HeaderFoldout resourceListFoldout = rootVisualElement.Q<HeaderFoldout>(Names.kResourceListFoldout);
-            HeaderFoldout passListFoldout = rootVisualElement.Q<HeaderFoldout>(Names.kPassListFoldout);
+            m_SidePanelFixedPaneHeight = m_SidePanelSplitView.fixedPane?.resolvedStyle?.height ?? 0;
+        }
 
+        void UpdatePanelHeights()
+        {
             bool passListExpanded = m_PassListExpanded && (m_CurrentDebugData != null && m_CurrentDebugData.isNRPCompiler);
             const int kFoldoutHeaderHeightPx = 18;
-            if (m_ResourceListExpanded && !passListExpanded)
+            const int kWindowExtraMarginPx = 6;
+
+            float panelHeightPx = focusedWindow.position.height - kHeaderContainerHeightPx - kWindowExtraMarginPx;
+            if (!m_ResourceListExpanded)
+            {
+                m_SidePanelSplitView.fixedPaneInitialDimension = kFoldoutHeaderHeightPx;
+            }
+            else if (!passListExpanded)
             {
-                resourceListFoldout.style.maxHeight = Length.Percent(100);
-                passListFoldout.style.maxHeight = kFoldoutHeaderHeightPx;
+                m_SidePanelSplitView.fixedPaneInitialDimension = panelHeightPx - kFoldoutHeaderHeightPx;
             }
-            else if (!m_ResourceListExpanded && passListExpanded)
+            else
             {
-                resourceListFoldout.style.maxHeight = kFoldoutHeaderHeightPx;
-                passListFoldout.style.maxHeight = Length.Percent(100);
+                // Update aspect ratio in case user has dragged the split view
+                if (m_SidePanelFixedPaneHeight > kFoldoutHeaderHeightPx && m_SidePanelFixedPaneHeight < panelHeightPx - kFoldoutHeaderHeightPx)
+                {
+                    m_SidePanelVerticalAspectRatio = m_SidePanelFixedPaneHeight / panelHeightPx;
+                }
+                m_SidePanelSplitView.fixedPaneInitialDimension = panelHeightPx * m_SidePanelVerticalAspectRatio;
             }
-            else if (m_ResourceListExpanded && passListExpanded)
+
+            // Disable drag line when one of the foldouts is collapsed
+            var dragLine = m_SidePanelSplitView.Q("unity-dragline");
+            var dragLineAnchor = m_SidePanelSplitView.Q("unity-dragline-anchor");
+            if (!m_ResourceListExpanded || !passListExpanded)
             {
-                resourceListFoldout.style.maxHeight = Length.Percent(50);
-                passListFoldout.style.maxHeight = Length.Percent(50);
+                dragLine.pickingMode = PickingMode.Ignore;
+                dragLineAnchor.pickingMode = PickingMode.Ignore;
             }
             else
             {
-                resourceListFoldout.style.maxHeight = kFoldoutHeaderHeightPx;
-                passListFoldout.style.maxHeight = kFoldoutHeaderHeightPx;
+                dragLine.pickingMode = PickingMode.Position;
+                dragLineAnchor.pickingMode = PickingMode.Position;
             }
         }
 

Packages/com.unity.render-pipelines.core/Editor/Icons/RenderGraphViewer/d_ScriptLink@2x.png

@@ -90,6 +90,7 @@ static partial class Classes
         const int kDependencyBlockHeightPx = 26;
         const int kDependencyBlockWidthPx = kPassWidthPx;
         const int kPassTitleAllowanceMargin = 120;
+        const int kHeaderContainerHeightPx = 24;
 
         static readonly Color kReadWriteBlockFillColorDark = new Color32(0xA9, 0xD1, 0x36, 255);
         static readonly Color kReadWriteBlockFillColorLight = new Color32(0x67, 0x9C, 0x33, 255);
@@ -136,7 +137,7 @@ enum EmptyStateReason
         static readonly string[] kEmptyStateMessages =
         {
             "",
-            L10n.Tr("No Render Graph execution has been registered. Activate a viewport to trigger camera rendering."),
+            L10n.Tr("The selected camera is not active. Activate the selected camera to display data in the Render Graph viewer."),
             L10n.Tr("No data to display. Click refresh to capture data."),
             L10n.Tr("Waiting for the selected camera to render. Depending on the camera, you may need to trigger rendering by selecting the Scene or Game view."),
             L10n.Tr("No passes to display. Select a different Pass Filter to display contents."),
@@ -799,11 +800,17 @@ void SelectedRenderGraphChanged(string newRenderGraphName)
                 }
             }
             selectedRenderGraph = null;
+
+            if (m_CurrentDebugData != null)
+                RequestCaptureSelectedExecution();
         }
 
         void SelectedExecutionChanged(string newExecutionName)
         {
             selectedExecutionName = newExecutionName;
+
+            if (m_CurrentDebugData != null)
+                RequestCaptureSelectedExecution();
         }
 
         void ClearEmptyStateMessage()
@@ -1122,12 +1129,22 @@ VisualElement CreatePassListItem(int passId, RenderGraph.DebugData.PassData pass
 
             var passBlock = new VisualElement();
             passBlock.AddToClassList(Classes.kPassBlock);
-            passBlock.RegisterCallback<MouseOverEvent>(_ => passBlock.AddToClassList(Classes.kPassBlockScriptLink));
-            passBlock.RegisterCallback<MouseOutEvent>(_ => passBlock.RemoveFromClassList(Classes.kPassBlockScriptLink));
+            passBlock.RegisterCallback<MouseEnterEvent>(_ =>
+            {
+                var scriptLinkBlock = new VisualElement();
+                scriptLinkBlock.pickingMode = PickingMode.Ignore;
+                scriptLinkBlock.AddToClassList(Classes.kPassBlock);
+                scriptLinkBlock.AddToClassList(Classes.kPassBlockScriptLink);
+                passBlock.Add(scriptLinkBlock);
+            });
+            passBlock.RegisterCallback<MouseLeaveEvent>(_ => passBlock.Clear());
             passBlock.RegisterCallback<MouseUpEvent>(evt =>
             {
-                var scriptAsset = FindScriptAssetByAbsolutePath(pass.scriptInfo.filePath);
-                AssetDatabase.OpenAsset(scriptAsset, pass.scriptInfo.line);
+                if (evt.button == 0)
+                {
+                    var scriptAsset = FindScriptAssetByAbsolutePath(pass.scriptInfo.filePath);
+                    AssetDatabase.OpenAsset(scriptAsset, pass.scriptInfo.line);
+                }
                 evt.StopImmediatePropagation();
             });
 

Packages/com.unity.render-pipelines.core/Editor/RenderGraph/RenderGraphViewer.SidePanel.cs

@@ -72,6 +72,19 @@
     background-color: var(--main-background-color);
 }
 
+#current-graph-dropdown {
+    max-width: 200px;
+}
+
+#current-execution-dropdown {
+    max-width: 300px;
+}
+
+#header-container DropdownField .unity-base-popup-field__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Passes */
 
 #pass-list-scroll-view {
@@ -168,14 +181,6 @@
     transition-timing-function: ease-in-out;
 }
 
-/* this needs to be declared after other pass block USS classes because they have equal selector precedence and
-   we want this to have the highest priority */
-.pass-block.pass-block-script-link {
-    -unity-background-scale-mode:scale-to-fit;
-    border-width: 0;
-    transition-duration: 0s; /* block the compatibility highlight animation */
-}
-
 .pass-block.pass-compatibility-message-indicator--compatible {
     background-color: var(--native-pass-accent-compatible-color);
 }
@@ -184,6 +189,13 @@
     background-color: var(--pass-block-color--async);
 }
 
+.pass-block.pass-block-script-link {
+    /*-unity-background-scale-mode:scale-to-fit;*/
+    border-width: 2px;
+    margin: -1px;
+    padding: 0;
+}
+
 #pass-list-corner-occluder {
     position: absolute;
     min-width: var(--resource-column-width);
@@ -384,20 +396,27 @@
     flex-grow: 1;
     flex-shrink: 1;
     min-height: 18px;
+    background-color: var(--side-panel-background-color);
+}
+
+#panel-resource-list-scroll-view {
+    min-height: 30px;
 }
 
 #panel-pass-list {
     flex-grow: 0;
     flex-shrink: 1;
     min-height: 18px;
+    border-bottom-width: 0;
+    background-color: var(--side-panel-background-color);
 }
 
-#panel-container .header-foldout {
-    margin: 0; /* Counteract built-in margins inside HeaderFoldout */
+#panel-pass-list-scroll-view {
+    min-height: 30px;
 }
 
-#panel-pass-list {
-    border-bottom-width: 0;
+#panel-container .header-foldout {
+    margin: 0; /* Counteract built-in margins inside HeaderFoldout */
 }
 
 #panel-container .header-foldout > Toggle {