CHANGE: Update asset Actions.inputactions to use UI Toolkit framework

Packages/com.unity.inputsystem/CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
+- Changed the UI for `Actions.inputactions` asset to use UI Toolkit framework.
+
 ### Added
 
 - Support for entering the play mode with domain reload turned off (i.e. Faster Enter Playmode feature) [ISX-2411]

Packages/com.unity.inputsystem/InputSystem/Editor/AssetImporter/InputActionImporterEditor.cs

@@ -1,9 +1,10 @@
 #if UNITY_EDITOR
-using System;
 using System.IO;
 using UnityEngine.InputSystem.Utilities;
 using UnityEditor;
 using UnityEditor.AssetImporters;
+using UnityEngine.UIElements;
+using UnityEditor.UIElements;
 
 ////TODO: support for multi-editing
 
@@ -15,90 +16,215 @@
     [CustomEditor(typeof(InputActionImporter))]
     internal class InputActionImporterEditor : ScriptedImporterEditor
     {
-        public override void OnInspectorGUI()
+        public override VisualElement CreateInspectorGUI()
         {
+            var root = new VisualElement();
+            root.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>(
+                InputActionsEditorConstants.PackagePath +
+                "/InputSystem/Editor/AssetImporter/InputActionImporterEditor.uss"));
             var inputActionAsset = GetAsset();
 
             // ScriptedImporterEditor in 2019.2 now requires explicitly updating the SerializedObject
             // like in other types of editors.
             serializedObject.Update();
 
-            EditorGUILayout.Space();
-
             if (inputActionAsset == null)
-                EditorGUILayout.HelpBox("The currently selected object is not an editable input action asset.",
-                    MessageType.Info);
+            {
+                root.Add(new HelpBox(
+                    "The currently selected object is not an editable input action asset.",
+                    HelpBoxMessageType.Info));
+            }
+
+            var editButton = new Button(() => OpenEditor(inputActionAsset))
+            {
+                text = GetOpenEditorButtonText(inputActionAsset)
+            };
+            editButton.AddToClassList("input-action-importer-editor__edit-button");
+            editButton.SetEnabled(inputActionAsset != null);
+            root.Add(editButton);
+
+            var projectWideContainer = new VisualElement();
+            projectWideContainer.AddToClassList("input-action-importer-editor__project-wide-container");
+            root.Add(projectWideContainer);
+            BuildProjectWideSection(projectWideContainer, inputActionAsset);
+
+            BuildCodeGenerationSection(root, inputActionAsset);
+
+            root.Add(new IMGUIContainer(() =>
+            {
+                serializedObject.ApplyModifiedProperties();
+                ApplyRevertGUI();
+            }));
+
+            return root;
+        }
+
+        private void BuildProjectWideSection(VisualElement container, InputActionAsset inputActionAsset)
+        {
+            container.Clear();
 
-            // Button to pop up window to edit the asset.
-            using (new EditorGUI.DisabledScope(inputActionAsset == null))
+            var currentActions = InputSystem.actions;
+
+            if (currentActions == inputActionAsset)
             {
-                if (GUILayout.Button(GetOpenEditorButtonText(inputActionAsset), GUILayout.Height(30)))
-                    OpenEditor(inputActionAsset);
+                container.Add(new HelpBox(
+                    "These actions are assigned as the Project-wide Input Actions.",
+                    HelpBoxMessageType.Info));
+                return;
             }
 
-            EditorGUILayout.Space();
+            var message = "These actions are not assigned as the Project-wide Input Actions for the Input System.";
+            if (currentActions != null)
+            {
+                var currentPath = AssetDatabase.GetAssetPath(currentActions);
+                if (!string.IsNullOrEmpty(currentPath))
+                    message += $" The actions currently assigned as the Project-wide Input Actions are: {currentPath}. ";
+            }
 
-            // Project-wide Input Actions Asset UI.
-            InputAssetEditorUtils.DrawMakeActiveGui(InputSystem.actions, inputActionAsset,
-                inputActionAsset ? inputActionAsset.name : "Null", "Project-wide Input Actions",
-                (value) => InputSystem.actions = value, !EditorApplication.isPlayingOrWillChangePlaymode);
+            container.Add(new HelpBox(message, HelpBoxMessageType.Warning));
 
-            EditorGUILayout.Space();
+            var assignButton = new Button(() =>
+            {
+                InputSystem.actions = inputActionAsset;
+                BuildProjectWideSection(container, inputActionAsset);
+            })
+            {
+                text = "Assign as the Project-wide Input Actions"
+            };
+            assignButton.AddToClassList("input-action-importer-editor__assign-button");
+            assignButton.SetEnabled(!EditorApplication.isPlayingOrWillChangePlaymode);
+            container.Add(assignButton);
+        }
 
-            // Importer settings UI.
-            var generateWrapperCodeProperty = serializedObject.FindProperty("m_GenerateWrapperCode");
-            EditorGUILayout.PropertyField(generateWrapperCodeProperty, m_GenerateWrapperCodeLabel);
-            if (generateWrapperCodeProperty.boolValue)
+        private void BuildCodeGenerationSection(VisualElement root, InputActionAsset inputActionAsset)
+        {
+            var generateField = new PropertyField(
+                serializedObject.FindProperty("m_GenerateWrapperCode"), "Generate C# Class");
+            root.Add(generateField);
+
+            var codeGenContainer = new VisualElement();
+            root.Add(codeGenContainer);
+
+            // File path with browse button
+            string defaultFileName = "";
+            if (inputActionAsset != null)
             {
-                var wrapperCodePathProperty = serializedObject.FindProperty("m_WrapperCodePath");
-                var wrapperClassNameProperty = serializedObject.FindProperty("m_WrapperClassName");
-                var wrapperCodeNamespaceProperty = serializedObject.FindProperty("m_WrapperCodeNamespace");
+                var assetPath = AssetDatabase.GetAssetPath(inputActionAsset);
+                defaultFileName = Path.ChangeExtension(assetPath, ".cs");
+            }
+
+            var pathRow = new VisualElement();
+            pathRow.AddToClassList("input-action-importer-editor__path-row");
+            codeGenContainer.Add(pathRow);
 
-                EditorGUILayout.BeginHorizontal();
+            var pathField = new TextField("C# Class File") { bindingPath = "m_WrapperCodePath" };
+            pathField.AddToClassList("input-action-importer-editor__path-field");
+            pathField.AddToClassList(BaseField<string>.alignedFieldUssClassName);
+            SetupPlaceholder(pathField, defaultFileName);
+            pathRow.Add(pathField);
 
-                string defaultFileName = "";
-                if (inputActionAsset != null)
+            var browseButton = new Button(() =>
+            {
+                var fileName = EditorUtility.SaveFilePanel("Location for generated C# file",
+                    Path.GetDirectoryName(defaultFileName),
+                    Path.GetFileName(defaultFileName), "cs");
+                if (!string.IsNullOrEmpty(fileName))
                 {
-                    var assetPath = AssetDatabase.GetAssetPath(inputActionAsset);
-                    defaultFileName = Path.ChangeExtension(assetPath, ".cs");
+                    if (fileName.StartsWith(Application.dataPath))
+                        fileName = "Assets/" + fileName.Substring(Application.dataPath.Length + 1);
+
+                    var prop = serializedObject.FindProperty("m_WrapperCodePath");
+                    prop.stringValue = fileName;
+                    serializedObject.ApplyModifiedProperties();
                 }
+            })
+            {
+                text = "…"
+            };
+            browseButton.AddToClassList("input-action-importer-editor__browse-button");
+            pathRow.Add(browseButton);
 
-                wrapperCodePathProperty.PropertyFieldWithDefaultText(m_WrapperCodePathLabel, defaultFileName);
+            // Class name
+            string typeName = inputActionAsset != null
+                ? CSharpCodeHelpers.MakeTypeName(inputActionAsset.name)
+                : null;
 
-                if (GUILayout.Button("…", EditorStyles.miniButton, GUILayout.MaxWidth(20)))
-                {
-                    var fileName = EditorUtility.SaveFilePanel("Location for generated C# file",
-                        Path.GetDirectoryName(defaultFileName),
-                        Path.GetFileName(defaultFileName), "cs");
-                    if (!string.IsNullOrEmpty(fileName))
-                    {
-                        if (fileName.StartsWith(Application.dataPath))
-                            fileName = "Assets/" + fileName.Substring(Application.dataPath.Length + 1);
-
-                        wrapperCodePathProperty.stringValue = fileName;
-                    }
-                }
-                EditorGUILayout.EndHorizontal();
+            var classNameField = new TextField("C# Class Name") { bindingPath = "m_WrapperClassName" };
+            classNameField.AddToClassList(BaseField<string>.alignedFieldUssClassName);
+            SetupPlaceholder(classNameField, typeName ?? "<Class name>");
+            codeGenContainer.Add(classNameField);
 
-                string typeName = null;
-                if (inputActionAsset != null)
-                    typeName = CSharpCodeHelpers.MakeTypeName(inputActionAsset?.name);
-                wrapperClassNameProperty.PropertyFieldWithDefaultText(m_WrapperClassNameLabel, typeName ?? "<Class name>");
+            var classNameError = new HelpBox("Must be a valid C# identifier", HelpBoxMessageType.Error);
+            codeGenContainer.Add(classNameError);
 
-                if (!CSharpCodeHelpers.IsEmptyOrProperIdentifier(wrapperClassNameProperty.stringValue))
-                    EditorGUILayout.HelpBox("Must be a valid C# identifier", MessageType.Error);
+            var classNameProp = serializedObject.FindProperty("m_WrapperClassName");
+            classNameError.style.display = !CSharpCodeHelpers.IsEmptyOrProperIdentifier(classNameProp.stringValue)
+                ? DisplayStyle.Flex : DisplayStyle.None;
 
-                wrapperCodeNamespaceProperty.PropertyFieldWithDefaultText(m_WrapperCodeNamespaceLabel, "<Global namespace>");
+            classNameField.RegisterValueChangedCallback(evt =>
+            {
+                classNameError.style.display = !CSharpCodeHelpers.IsEmptyOrProperIdentifier(evt.newValue)
+                    ? DisplayStyle.Flex : DisplayStyle.None;
+            });
 
-                if (!CSharpCodeHelpers.IsEmptyOrProperNamespaceName(wrapperCodeNamespaceProperty.stringValue))
-                    EditorGUILayout.HelpBox("Must be a valid C# namespace name", MessageType.Error);
-            }
+            // Namespace
+            var namespaceField = new TextField("C# Class Namespace") { bindingPath = "m_WrapperCodeNamespace" };
+            namespaceField.AddToClassList(BaseField<string>.alignedFieldUssClassName);
+            SetupPlaceholder(namespaceField, "<Global namespace>");
+            codeGenContainer.Add(namespaceField);
+
+            var namespaceError = new HelpBox("Must be a valid C# namespace name", HelpBoxMessageType.Error);
+            codeGenContainer.Add(namespaceError);
 
-            // Using ApplyRevertGUI requires calling Update and ApplyModifiedProperties around the serializedObject,
-            // and will print warning messages otherwise (see warning message in ApplyRevertGUI implementation).
-            serializedObject.ApplyModifiedProperties();
+            var namespaceProp = serializedObject.FindProperty("m_WrapperCodeNamespace");
+            namespaceError.style.display = !CSharpCodeHelpers.IsEmptyOrProperNamespaceName(namespaceProp.stringValue)
+                ? DisplayStyle.Flex : DisplayStyle.None;
 
-            ApplyRevertGUI();
+            namespaceField.RegisterValueChangedCallback(evt =>
+            {
+                namespaceError.style.display = !CSharpCodeHelpers.IsEmptyOrProperNamespaceName(evt.newValue)
+                    ? DisplayStyle.Flex : DisplayStyle.None;
+            });
+
+            // Show/hide code gen fields based on toggle
+            var generateProp = serializedObject.FindProperty("m_GenerateWrapperCode");
+            codeGenContainer.style.display = generateProp.boolValue ? DisplayStyle.Flex : DisplayStyle.None;
+
+            generateField.RegisterValueChangeCallback(evt =>
+            {
+                codeGenContainer.style.display = evt.changedProperty.boolValue
+                    ? DisplayStyle.Flex : DisplayStyle.None;
+            });
+        }
+
+        private static void SetupPlaceholder(TextField textField, string placeholder)
+        {
+            if (string.IsNullOrEmpty(placeholder))
+                return;
+
+            var placeholderLabel = new Label(placeholder);
+            placeholderLabel.pickingMode = PickingMode.Ignore;
+            placeholderLabel.AddToClassList("input-action-importer-editor__placeholder");
+
+            textField.RegisterCallback<GeometryChangedEvent>(_ =>
+            {
+                var textInput = textField.Q("unity-text-input");
+                if (textInput != null && placeholderLabel.parent != textInput)
+                {
+                    textInput.Add(placeholderLabel);
+                    UpdatePlaceholder(textField, placeholderLabel);
+                }
+            });
+
+            textField.RegisterValueChangedCallback(_ => UpdatePlaceholder(textField, placeholderLabel));
+            textField.RegisterCallback<FocusInEvent>(_ => placeholderLabel.style.display = DisplayStyle.None);
+            textField.RegisterCallback<FocusOutEvent>(_ => UpdatePlaceholder(textField, placeholderLabel));
+        }
+
+        private static void UpdatePlaceholder(TextField textField, Label placeholder)
+        {
+            placeholder.style.display = string.IsNullOrEmpty(textField.value)
+                ? DisplayStyle.Flex : DisplayStyle.None;
         }
 
         private InputActionAsset GetAsset()
@@ -131,7 +257,6 @@
 
         private static void OpenEditor(InputActionAsset asset)
         {
-            // Redirect to Project-settings Input Actions editor if this is the project-wide actions asset
             if (IsProjectWideActionsAsset(asset))
             {
                 SettingsService.OpenProjectSettings(InputSettingsPath.kSettingsRootPath);
@@ -140,11 +265,6 @@
 
             InputActionsEditorWindow.OpenEditor(asset);
         }
-
-        private readonly GUIContent m_GenerateWrapperCodeLabel = EditorGUIUtility.TrTextContent("Generate C# Class");
-        private readonly GUIContent m_WrapperCodePathLabel = EditorGUIUtility.TrTextContent("C# Class File");
-        private readonly GUIContent m_WrapperClassNameLabel = EditorGUIUtility.TrTextContent("C# Class Name");
-        private readonly GUIContent m_WrapperCodeNamespaceLabel = EditorGUIUtility.TrTextContent("C# Class Namespace");
     }
 }
 #endif // UNITY_EDITOR

Packages/com.unity.inputsystem/InputSystem/Editor/AssetImporter/InputActionImporterEditor.uss

@@ -0,0 +1,36 @@
+.input-action-importer-editor__edit-button {
+    min-height: 30px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    white-space: normal;
+    overflow: hidden;
+}
+
+.input-action-importer-editor__assign-button {
+    white-space: normal;
+    overflow: hidden;
+}
+
+.input-action-importer-editor__project-wide-container {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+.input-action-importer-editor__path-row {
+    flex-direction: row;
+    align-items: center;
+}
+
+.input-action-importer-editor__path-field {
+    flex-grow: 1;
+}
+
+.input-action-importer-editor__browse-button {
+    width: 25px;
+}
+
+.input-action-importer-editor__placeholder {
+    position: absolute;
+    opacity: 0.5;
+    padding-left: 2px;
+}