Update preview toggle button to mostly match design

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Inspector/GraphInspectorView.cs

         AbstractNodeEditorView m_EditorView;
 
         TypeMapper m_TypeMapper;
-        PreviewView m_Preview;
+        PreviewTextureView m_PreviewTextureView;
 
         AbstractMaterialGraph m_Graph;
         PreviewManager m_PreviewManager;
                     bottomContainer.Add(layersContainer);
                 }
 
-                m_Preview = new PreviewView {name = "preview", image = Texture2D.blackTexture};
-                bottomContainer.Add(m_Preview);
+                m_PreviewTextureView = new PreviewTextureView {name = "preview", image = Texture2D.blackTexture};
+                bottomContainer.Add(m_PreviewTextureView);
 
                 m_PreviewMeshPicker = new Experimental.UIElements.ObjectField() { objectType = typeof(Mesh) };
                 bottomContainer.Add(m_PreviewMeshPicker);
 
         void OnPreviewChanged()
         {
-            m_Preview.image = m_PreviewHandle.texture ?? Texture2D.blackTexture;
+            m_PreviewTextureView.image = m_PreviewHandle.texture ?? Texture2D.blackTexture;
             m_PreviewHandle.mesh = m_PreviewMeshPicker.value as Mesh;
         }
 

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/MaterialNodeView.cs

 using UnityEngine;
 using UnityEngine.Experimental.UIElements;
 using UnityEditor.Graphing;
-using UnityEditor.ShaderGraph;
-using UnityEngine.WSA;
 
 namespace UnityEditor.ShaderGraph.Drawing
 {
-        PreviewData m_Preview;
-        PreviewView m_PreviewImage;
-        VisualElement m_PreviewToggle;
+        PreviewData m_PreviewData;
+        PreviewTextureView m_PreviewTextureView;
+        VisualElement m_PreviewContainer;
 
         public MaterialNodeView(AbstractMaterialNode inNode, PreviewManager previewManager)
         {
             };
             leftContainer.Add(m_ControlsContainer);
 
-            m_PreviewToggle = new VisualElement { name = "toggle", text = "" };
-            m_PreviewToggle.AddManipulator(new Clickable(() => previewExpanded = !previewExpanded));
-                m_PreviewToggle.RemoveFromClassList("inactive");
-            else
-                m_PreviewToggle.AddToClassList("inactive");
-            previewExpanded = node.previewExpanded;
-            leftContainer.Add(m_PreviewToggle);
+            {
+                m_PreviewContainer = new VisualElement { name = "previewContainer" };
+                m_PreviewContainer.AddToClassList("expanded");
+                {
+                    m_PreviewTextureView = new PreviewTextureView
+                    {
+                        name = "preview",
+                        pickingMode = PickingMode.Ignore,
+                        image = Texture2D.whiteTexture
+                    };
+                    m_PreviewData = previewManager.GetPreview(inNode);
+                    m_PreviewData.onPreviewChanged += UpdatePreviewTexture;
+                    UpdatePreviewTexture();
+                    m_PreviewContainer.Add(m_PreviewTextureView);
+
+                    var collapsePreviewButton = new VisualElement { name = "collapse", text = "▲" };
+                    collapsePreviewButton.AddManipulator(new Clickable(() =>
+                    {
+                        node.owner.owner.RegisterCompleteObjectUndo("Collapse Preview");
+                        UpdatePreviewExpandedState(false);
+                    }));
+                    UpdatePreviewExpandedState(node.previewExpanded);
+                    m_PreviewContainer.Add(collapsePreviewButton);
-            m_PreviewImage = new PreviewView
-            {
-                name = "preview",
-                pickingMode = PickingMode.Ignore,
-                image = Texture2D.whiteTexture
-            };
-            m_Preview = previewManager.GetPreview(inNode);
-            m_Preview.onPreviewChanged += UpdatePreviewTexture;
-            UpdatePreviewTexture();
-            leftContainer.Add(m_PreviewImage);
+                    var expandPreviewButton = new VisualElement { name = "expand", text = "▼" };
+                    expandPreviewButton.AddManipulator(new Clickable(() =>
+                    {
+                        node.owner.owner.RegisterCompleteObjectUndo("Expand Preview");
+                        UpdatePreviewExpandedState(true);
+                    }));
+                    m_PreviewContainer.Add(expandPreviewButton);
+                }
+                leftContainer.Add(m_PreviewContainer);
+            }
 
             m_ControlViews = new List<VisualElement>();
             foreach (var propertyInfo in node.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic))
             }
         }
 
-        bool previewExpanded
+        void UpdatePreviewExpandedState(bool expanded)
-            get { return node.previewExpanded; }
-            set
+            node.previewExpanded = expanded;
+            if (expanded)
+            {
+                m_PreviewContainer.AddToClassList("expanded");
+                m_PreviewContainer.RemoveFromClassList("collapsed");
+            }
+            else
-                node.previewExpanded = value;
-                m_PreviewToggle.text = node.previewExpanded ? "▲" : "▼";
+                m_PreviewContainer.RemoveFromClassList("expanded");
+                m_PreviewContainer.AddToClassList("collapsed");
             }
         }
 
         public void OnModified(ModificationScope scope)
         {
             UpdateTitle();
+            if (node.hasPreview)
+                UpdatePreviewExpandedState(node.previewExpanded);
             expanded = node.drawState.expanded;
 
             // Update slots to match node modification
         void OnResize(Vector2 deltaSize)
         {
             var updatedWidth = leftContainer.layout.width + deltaSize.x;
-            var updatedHeight = m_PreviewImage.layout.height + deltaSize.y;
+            var updatedHeight = m_PreviewTextureView.layout.height + deltaSize.y;
 
             var previewNode = node as PreviewNode;
             if (previewNode != null)
 
         void UpdatePreviewTexture()
         {
-            if (m_Preview.texture == null || !node.previewExpanded)
+            if (m_PreviewData.texture == null || !node.previewExpanded)
-                m_PreviewImage.visible = false;
-                m_PreviewImage.RemoveFromClassList("visible");
-                m_PreviewImage.AddToClassList("hidden");
-                m_PreviewImage.image = Texture2D.whiteTexture;
+                m_PreviewTextureView.visible = false;
+                m_PreviewTextureView.image = Texture2D.blackTexture;
-                m_PreviewImage.visible = true;
-                m_PreviewImage.AddToClassList("visible");
-                m_PreviewImage.RemoveFromClassList("hidden");
-                m_PreviewImage.image = m_Preview.texture;
+                m_PreviewTextureView.visible = true;
+                m_PreviewTextureView.AddToClassList("visible");
+                m_PreviewTextureView.RemoveFromClassList("hidden");
+                m_PreviewTextureView.image = m_PreviewData.texture;
             }
             Dirty(ChangeType.Repaint);
         }
             var height = previewNode.height;
 
             leftContainer.style.width = width;
-            m_PreviewImage.style.height = height;
+            m_PreviewTextureView.style.height = height;
-            if (m_Preview != null)
+            if (m_PreviewData != null)
-                m_Preview.onPreviewChanged -= UpdatePreviewTexture;
-                m_Preview = null;
+                m_PreviewData.onPreviewChanged -= UpdatePreviewTexture;
+                m_PreviewData = null;
             }
         }
     }

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/PreviewTextureView.cs

 
 namespace UnityEditor.ShaderGraph.Drawing
 {
-    public sealed class PreviewView : VisualElement
+    public sealed class PreviewTextureView : VisualElement
     {
         Texture m_Image;
 

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Resources/Styles/MaterialGraph.uss

     background-color: rgb(20, 21, 21);
 }
 
-MaterialNodeView > .mainContainer > #left > #preview.active {
+MaterialNodeView > .mainContainer > #left > #previewContainer {
-MaterialNodeView > .mainContainer > #left > #preview.visible {
-	height: 200;
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.active,
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.visible {
+    width: 200;
+    height: 200;
-MaterialNodeView > .mainContainer > #left > #toggle {
-    text-color: rgb(153, 153, 153);
+MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #collapse {
+    height: 0;
+}
+
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse {
+    background-color: rgba(0, 0, 0, 0.5);
+    text-color: rgba(255, 255, 255, 0.75);
+    border-color: rgba(255, 255, 255, 0.75);
+    border-radius: 2;
+    position-left: 87;
+    position-right: 87;
+    position-top: 5;
+    position-type: absolute;
+    height: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+    border-right-width: 0;
-MaterialNodeView > .mainContainer > #left > #toggle.inactive {
-    height: 0;
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded:hover > #collapse {
+    border-top-width: 1;
+    border-bottom-width: 1;
+    border-left-width: 1;
+    border-right-width: 1;
+    height: 26;
-MaterialNodeView > .mainContainer > #left > #toggle:hover {
-	background-color: rgba(0, 0, 0, 0.33);
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:hover {
+    background-color: rgba(0, 0, 0, 0.75);
+    text-color: rgba(255, 255, 255, 1);
+    border-color: rgba(255, 255, 255, 1);
-MaterialNodeView > .mainContainer > #left > #toggle:active {
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:active {
+}
+
+MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #expand {
+    height: 0;
+}
+
+MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand {
+    text-alignment: middle-center;
+    text-color: rgb(153, 153, 153);
+    align-self: center;
+    width: 50;
+}
+
+MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+    text-color: rgba(255, 255, 255, 1);
+
 }
 
 MaterialNodeView > #resize {