Updated styling to look like Hugo's mockup + fixes

- HeaderDrawer now extends from DataWatchContainer rather than
GraphElement (don’t do the latter for things that are inside nodes)

MaterialGraphProject/Assets/GraphFramework/SerializableGraph/Editor/Drawing/Drawer/HeaderDrawer.cs

-using RMGUI.GraphView;
+using System;
+using RMGUI.GraphView;
 using UnityEngine;
 using UnityEngine.RMGUI;
 
-    public class HeaderDrawer : GraphElement
+    public class HeaderDrawer : DataWatchContainer
-        public HeaderDrawer(HeaderDrawData data)
+        private HeaderDrawData m_dataProvider;
+
+        public HeaderDrawData dataProvider
+        {
+            get { return m_dataProvider; }
+            set
+            {
+                if (m_dataProvider == value)
+                    return;
+                RemoveWatch();
+                m_dataProvider = value;
+                OnDataChanged();
+                AddWatch();
+            }
+        }
+
+        protected override object toWatch
+        {
+            get { return m_dataProvider; }
+        }
+
+        public HeaderDrawer()
+            m_Title = new VisualElement()
+            {
+                name = "title",
+                content = new GUIContent(),
+                pickingMode = PickingMode.Ignore
+            };
+            AddChild(m_Title);
+
             m_ExpandButton = new VisualElement()
             {
                 name = "expandButton",
             AddChild(m_ExpandButton);
+        }
-            m_Title = new VisualElement()
-            {
-                name = "title",
-                content = new GUIContent(),
-                pickingMode = PickingMode.Ignore
-            };
-            AddChild(m_Title);
-
-            dataProvider = data;
+        public HeaderDrawer(HeaderDrawData dataProvider) : this()
+        {
+            this.dataProvider = dataProvider;
         }
 
         public override void OnDataChanged()
             }
 
             m_Title.content.text = headerData.title;
-            m_ExpandButton.content.text = headerData.expanded ? "-" : "+";
+            m_ExpandButton.content.text = headerData.expanded ? "Collapse" : "Expand";
             m_NodeExpander.data = headerData;
 
             this.Touch(ChangeType.Repaint);

MaterialGraphProject/Assets/GraphFramework/SerializableGraph/Editor/Drawing/Drawer/NodeDrawer.cs

 using UnityEngine;
 using UnityEngine.RMGUI;
 using UnityEditor.Graphing.Util;
+using UnityEngine.RMGUI.StyleSheets;
+        protected VisualContainer m_LeftContainer;
+        protected VisualContainer m_RightContainer;
-        HeaderDrawData m_HeaderData;
-        VisualContainer m_SlotContainer;
+        VisualContainer m_InputContainer;
+        VisualContainer m_OutputContainer;
         List<AnchorDrawData> m_CurrentAnchors;
         VisualContainer m_ControlsContainer;
         List<ControlDrawData> m_CurrentControlDrawData;
         {
             content = new GUIContent("");
-
-
-            AddToClassList("Node");
+            classList = new ClassList("Node");
-            // Add slots (with input & output sub-containers) container
-            m_SlotContainer = new VisualContainer
+            /* 
+             * Layout structure:
+             * node
+             * - left
+             * - - header
+             * - - input
+             * - - controls
+             * - right
+             * - - output
+             */
+
+            m_LeftContainer = new VisualContainer
-                name = "slots", // for USS&Flexbox
-                pickingMode = PickingMode.Ignore,
+                classList = new ClassList("pane", "left"),
+                pickingMode = PickingMode.Ignore
-            AddChild(m_SlotContainer);
+            AddChild(m_LeftContainer);
-            var inputs = new VisualContainer
+            m_RightContainer = new VisualContainer
-                name = "input", // for USS&Flexbox
-                pickingMode = PickingMode.Ignore,
+                classList = new ClassList("pane", "right"),
+                pickingMode = PickingMode.Ignore
-            m_SlotContainer.AddChild(inputs);
+            AddChild(m_RightContainer);
+
+            m_HeaderDrawer = new HeaderDrawer();
+            m_HeaderDrawer.AddToClassList("paneItem");
+            m_LeftContainer.AddChild(m_HeaderDrawer);
-            var outputs = new VisualContainer
+            m_InputContainer = new VisualContainer
-                name = "output", // for USS&Flexbox
+                name = "input",
-            m_SlotContainer.AddChild(outputs);
+            m_InputContainer.AddToClassList("paneItem");
+            m_LeftContainer.AddChild(m_InputContainer);
-            m_CurrentAnchors = new List<AnchorDrawData>();
+            m_ControlsContainer = new VisualContainer
+            {
+                name = "controls",
+                pickingMode = PickingMode.Ignore,
+            };
+            m_ControlsContainer.AddToClassList("paneItem");
+            m_LeftContainer.AddChild(m_ControlsContainer);
-            // Add controls container
-            m_ControlsContainer = new VisualContainer
+            m_OutputContainer = new VisualContainer
-                name = "controls", // for USS&Flexbox
+                name = "output",
-            AddChild(m_ControlsContainer);
+            m_OutputContainer.AddToClassList("paneItem");
+            m_RightContainer.AddChild(m_OutputContainer);
+
+            m_CurrentAnchors = new List<AnchorDrawData>();
 
             m_CurrentControlDrawData = new List<ControlDrawData>();
         }
             var headerData = nodeData.elements.OfType<HeaderDrawData>().FirstOrDefault();
-
-            if (m_HeaderData != null)
-            {
-                m_HeaderDrawer.dataProvider = headerData;
-                m_HeaderData = headerData;
-            }
-            else
-            {
-                m_HeaderDrawer = new HeaderDrawer(headerData);
-                InsertChild(0, m_HeaderDrawer);
-                m_HeaderData = headerData;
-            }
+            m_HeaderDrawer.dataProvider = headerData;
         }
 
         private void AddSlots(NodeDrawData nodeData)
             if (anchors.Count == 0)
                 return;
 
-            var inputsContainer = m_SlotContainer.GetChildAtIndex(0) as VisualContainer;
-            var outputsContainer = m_SlotContainer.GetChildAtIndex(1) as VisualContainer;
-
             if (anchors.ItemsReferenceEquals(m_CurrentAnchors) && m_CurrentExpanded == nodeData.expanded)
             {
                 return;
-            inputsContainer.ClearChildren();
-            outputsContainer.ClearChildren();
+            m_InputContainer.ClearChildren();
+            m_OutputContainer.ClearChildren();
-                    inputsContainer.AddChild(new NodeAnchor(anchor));
+                    m_InputContainer.AddChild(new NodeAnchor(anchor));
-                    outputsContainer.AddChild(new NodeAnchor(anchor));
+                    m_OutputContainer.AddChild(new NodeAnchor(anchor));
             }
         }
 

MaterialGraphProject/Assets/GraphFramework/SerializableGraph/Editor/Drawing/SerializableGraphView.cs

             AddDecorator(new GridBackground());
 
             dataMapper[typeof(NodeDrawData)] = typeof(NodeDrawer);
-            dataMapper[typeof(HeaderDrawData)] = typeof(HeaderDrawer);
         }
 
         private EventPropagation DeleteSelection()

MaterialGraphProject/Assets/GraphFramework/SerializableGraph/Editor/Drawing/Styles/Header.uss

 HeaderDrawer {
     flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    padding-left: 5;
+    padding-right: 5;
+    padding-top: 5;
+    padding-bottom: 5;
+
+    flex: 2;
-	width: 200;
-	text-alignment: middle-center;
+	text-alignment: middle-left;
+    font-size: 12;
+    font-style: bold;
-    text-color: #FFFFFF;
-    position-type: absolute;
-    position-top: 0;
-    position-left: 5;
-    width: 10;
-	text-alignment: middle-center;
-	height: 14;
+    flex: 1;
+    text-color: rgb(153, 153, 153);
+	text-alignment: middle-right;
 }

MaterialGraphProject/Assets/GraphFramework/SerializableGraph/Editor/Drawing/Styles/SerializableGraph.uss

 .Node {
+    flex-direction: row;
+    align-items: stretch;
+}
+
+.Node .pane {
-	padding-top: 15;
-    height: 26;
+    align-items: stretch;
+    padding-left: 4;
+    padding-right: 4;
+    padding-top: 2;
+    padding-bottom: 4;
+    border-radius: 2;
-.Node #slots {
-    flex-direction: row;
-	background-color: #444;
-	width: 200;
+.Node .pane.left {
+    width: 208;
+    background-color: rgb(45, 45, 45);
-.Node #slots #input {
-    flex: 1;
-    flex-direction: column;
+.Node .pane.right {
+    background-color: rgb(32, 33, 33);
+    margin-left: 2;
+    padding-left: 8;
-.Node #slots #output {
-    flex: 1;
-    flex-direction: column;
+.Node .paneItem {
+    margin-top: 2;
-.Node #slots .NodeAnchor {
+.Node .NodeAnchor {
-.Node #slots .NodeAnchor #connector {
+.Node .NodeAnchor #connector {
 	background-color:#FF0;
 	border-color:#FF0;
 	/* width is currently hard-coded */
 }
 
-.Node #slots .NodeAnchor #connector.anchorHighlight {
+.Node .NodeAnchor #connector.anchorHighlight {
-.Node #slots #input .NodeAnchor {
+.Node #input .NodeAnchor {
-.Node #slots #output .NodeAnchor {
+.Node #output .NodeAnchor {
-.Node #slots .NodeAnchor #type {
+.Node .NodeAnchor #type {
-.Node #slots #input .NodeAnchor #type {
+.Node #input .NodeAnchor #type {
-.Node #slots #output .NodeAnchor #type {
+.Node #output .NodeAnchor #type {
     text-alignment: middle-right;
 }
 
-	background-color: #444;
+    padding-left: 4;
 }
 
 .Node #controls #element{

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Drawer/MaterialNodeDrawer.cs

                 name = "preview", // for USS&Flexbox
                 pickingMode = PickingMode.Ignore,
             };
-            AddChild(m_PreviewContainer);
+            m_LeftContainer.AddChild(m_PreviewContainer);
 
             m_currentPreviewData = new List<NodePreviewDrawData>();
         }

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

 }
 
 MaterialGraphView {
-	grid-background-color:#404749;
-	line-color:#20293F;
-	thick-line-color:#030C22;
+	grid-background-color:rgb(20, 21, 21);
+	line-color: rgb(20, 21, 21);
+	thick-line-color: rgb(20, 21, 21);
 	spacing:75.0;
 	thick-lines:10;
 }