Update Gradient UIs to UIElements

com.unity.shadergraph/Editor/Drawing/Controls/GradientControl.cs

 using UnityEngine;
 using UnityEditor.Graphing;
 using UnityEngine.Experimental.UIElements;
+using UnityEditor.Experimental.UIElements;
 using UnityEditor.ShaderGraph;
 
 namespace UnityEditor.ShaderGraph.Drawing.Controls
         public Gradient gradient = new Gradient();
     }
 
-    public class GradientControlView : VisualElement, INodeModificationListener
+    public class GradientControlView : VisualElement
     {
         GUIContent m_Label;
 
         [SerializeField]
         SerializedProperty m_SerializedProperty;
 
-        IMGUIContainer m_Container;
-
-            m_Label = new GUIContent(label ?? ObjectNames.NicifyVariableName(propertyInfo.Name));
+            AddStyleSheetPath("Styles/Controls/GradientControlView");
+
+            new GUIContent(label ?? ObjectNames.NicifyVariableName(propertyInfo.Name));
+
-            m_Container = new IMGUIContainer(OnGUIHandler);
-            Add(m_Container);
-        }
-        public void OnNodeModified(ModificationScope scope)
-        {
-            if (scope == ModificationScope.Node)
-                m_Container.Dirty(ChangeType.Repaint);
-        }
-
-        void OnGUIHandler()
-        {
-            m_SerializedObject.Update();
-            using (var changeCheckScope = new EditorGUI.ChangeCheckScope())
+            var gradientPanel = new VisualElement { name = "gradientPanel" };
+            if (!string.IsNullOrEmpty(label))
+                gradientPanel.Add(new Label(label));
+
+            var gradientField = new GradientField() { value = m_GradientObject.gradient };
+            gradientField.OnValueChanged(OnValueChanged);
+            gradientPanel.Add(gradientField);
+
+            Add(gradientPanel);
+        }
+
+        void OnValueChanged(ChangeEvent<Gradient> evt)
+        {
+            m_SerializedObject.Update();
+            var value = (Gradient)m_PropertyInfo.GetValue(m_Node, null);
+            if (!evt.newValue.Equals(value))
-                EditorGUILayout.PropertyField(m_SerializedProperty, m_Label, true, null);
+                m_GradientObject.gradient.SetKeys(evt.newValue.colorKeys, evt.newValue.alphaKeys);
+                m_GradientObject.gradient.mode = evt.newValue.mode;
-                if (changeCheckScope.changed)
-                {
-                    m_Node.owner.owner.RegisterCompleteObjectUndo("Change " + m_Node.name);
-                    m_PropertyInfo.SetValue(m_Node, m_GradientObject.gradient, null);
-                    Dirty(ChangeType.Repaint);
-                }
+
+                m_Node.owner.owner.RegisterCompleteObjectUndo("Change " + m_Node.name);
+                m_PropertyInfo.SetValue(m_Node, m_GradientObject.gradient, null);
+                Dirty(ChangeType.Repaint);
             }
         }
     }

com.unity.shadergraph/Editor/Drawing/Views/Slots/GradientSlotControlView.cs

 
 namespace UnityEditor.ShaderGraph.Drawing.Slots
 {
-    public class GradientSlotControlView : VisualElement, INodeModificationListener
+    public class GradientSlotControlView : VisualElement
     {
         GradientInputMaterialSlot m_Slot;
 
         [SerializeField]
         SerializedProperty m_SerializedProperty;
 
-        IMGUIContainer m_Container;
-
+            AddStyleSheetPath("Styles/Controls/GradientSlotControlView");
+            
-            m_Container = new IMGUIContainer(OnGUIHandler);
-            Add(m_Container);
-        }
+            
+            m_GradientObject.gradient.SetKeys(m_Slot.value.colorKeys, m_Slot.value.alphaKeys);
+            m_GradientObject.gradient.mode = m_Slot.value.mode;
-        public void OnNodeModified(ModificationScope scope)
-        {
-            if (scope == ModificationScope.Node)
-                m_Container.Dirty(ChangeType.Repaint);
+            var gradientField = new GradientField() { value = m_GradientObject.gradient };
+            gradientField.OnValueChanged(OnValueChanged);
+            Add(gradientField);
-        void OnGUIHandler()
+        void OnValueChanged(ChangeEvent<Gradient> evt)
-            m_GradientObject.gradient.SetKeys(m_Slot.value.colorKeys, m_Slot.value.alphaKeys);
-            m_GradientObject.gradient.mode = m_Slot.value.mode;
-
-            using (var changeCheckScope = new EditorGUI.ChangeCheckScope())
+            if (!evt.newValue.Equals(m_Slot.value))
-                EditorGUILayout.PropertyField(m_SerializedProperty, new GUIContent(""), true, null);
+                m_GradientObject.gradient.SetKeys(evt.newValue.colorKeys, evt.newValue.alphaKeys);
+                m_GradientObject.gradient.mode = evt.newValue.mode;
-                if (changeCheckScope.changed)
-                {
-                    m_Slot.owner.owner.owner.RegisterCompleteObjectUndo("Change Gradient");
-                    m_Slot.value = m_GradientObject.gradient;
-                    m_Slot.owner.Dirty(ModificationScope.Node);
-                    m_Container.Dirty(ChangeType.Repaint);
-                }
+
+                m_Slot.owner.owner.owner.RegisterCompleteObjectUndo("Change Gradient");
+                m_Slot.value = m_GradientObject.gradient;
+                m_Slot.owner.Dirty(ModificationScope.Node);
             }
         }
     }

com.unity.shadergraph/Editor/Resources/Styles/Controls/GradientControlView.uss

+GradientControlView > #gradientPanel {
+    flex-direction: row;
+}
+
+GradientControlView > #gradientPanel > GradientField {
+    flex: 1;
+    margin-left: 8;
+    margin-right: 8;
+    margin-top: 4;
+    margin-bottom: 4;
+}
+
+GradientControlView > #gradientPanel > Label {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-left: 8;
+    margin-right: 8;
+    margin-top: 4;
+    margin-bottom: 4;
+}

com.unity.shadergraph/Editor/Resources/Styles/Controls/GradientControlView.uss.meta

+fileFormatVersion: 2
+guid: 8d3443495105d4166996158d4b321c21
+ScriptedImporter:
+  fileIDToRecycleName:
+    11400000: stylesheet
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}

com.unity.shadergraph/Editor/Resources/Styles/Controls/GradientSlotControlView.uss

+GradientSlotControlView {
+    flex-direction: row;
+    align-items: center;
+}
+
+GradientSlotControlView > GradientField {
+    margin-left: 0;
+    margin-right: 0;
+    width: 41;
+}

com.unity.shadergraph/Editor/Resources/Styles/Controls/GradientSlotControlView.uss.meta

+fileFormatVersion: 2
+guid: 76dc05b36584d4d0085b786ca1b29fe3
+ScriptedImporter:
+  fileIDToRecycleName:
+    11400000: stylesheet
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}