chore: sdk ui improve default styles and hover feedback (#6846)

Additions
* Updated theme file to include ScenesUIStyleSheet at root level for Scenes UI panel. That change already makes some default UI Toolkit behaviours from Unity to affect some UI components.
* Implemented support for dynamic manipulation of selectedIndex by the scene
* Added Opacity transition logic for Dropdown panel activation
* Added default hover feedback for UiDropdown, UiInput and UiButton:
  * UiTransform border color darkening
  * UiTransform background color darkening
* Added visual feedback for the disabling of UiDropdown, UiInput and UiButton
* Added UiTransform default Border Width, Radius and Color values when those are missing for UiDropdown, UiInput and UiButton
* Added UiTransform default Background Color value when that is missing for UiDropdown and UiInput (UiButton already injects default background from the SDK runtime side depending on the button being "primary" or "secondary")
* Test coverage

Fixes
* Fixed bug that re-applied the selectedIndex property of the Dropdown on any dirty state of the component
* Refactored how registered pointer event callbacks are handled for UiDropdown to avoid closure allocations
* Fixed font property being ignored for UiDropdown and UiInput
* Fixed textAlign property being ignored by UiInput

Author: pravusjif

Explorer/Assets/DCL/Infrastructure/ECS/Unity/ColorComponent/ColorDefaults.cs

@@ -8,6 +8,6 @@ public static class ColorDefaults
 
         public static readonly Color COLOR_BLACK = Color.black;
 
-        public static readonly Color PLACEHOLDER_COLOR = new () { r = 0.3f, g = 0.3f, b = 0.3f, a = 1.0f };
+        public static readonly Color PLACEHOLDER_COLOR = new () { r = 0f, g = 0f, b = 0f, a = 0.5f };
     }
 }

Explorer/Assets/DCL/PluginSystem/World/SceneUIPlugin.cs

@@ -1,6 +1,7 @@
-using Arch.SystemGroups;
+using Arch.SystemGroups;
 using Cysharp.Threading.Tasks;
 using DCL.AssetsProvision;
+using DCL.ECSComponents;
 using DCL.Input;
 using DCL.Optimization.PerformanceBudgeting;
 using DCL.Optimization.Pools;
@@ -18,11 +19,13 @@
 using DCL.SDKComponents.SceneUI.Utils;
 using ECS.ComponentsPooling.Systems;
 using ECS.LifeCycle;
+using ECS.LifeCycle.Systems;
 using System;
 using System.Collections.Generic;
 using System.Threading;
 using UnityEngine;
 using UnityEngine.UIElements;
+using Font = UnityEngine.Font;
 
 namespace DCL.PluginSystem.World
 {
@@ -90,14 +93,16 @@ public void InjectToWorld(ref ArchSystemsWorldBuilder<Arch.Core.World> builder,
             UITextReleaseSystem.InjectToWorld(ref builder, componentPoolsRegistry);
             UIBackgroundInstantiationSystem.InjectToWorld(ref builder, componentPoolsRegistry, sharedDependencies.SceneData, frameTimeBudgetProvider, memoryBudgetProvider);
             finalizeWorldSystems.Add(UIBackgroundReleaseSystem.InjectToWorld(ref builder, componentPoolsRegistry));
-            UIInputInstantiationSystem.InjectToWorld(ref builder, componentPoolsRegistry, sharedDependencies.EcsToCRDTWriter, inputBlock);
+            UIInputInstantiationSystem.InjectToWorld(ref builder, componentPoolsRegistry, sharedDependencies.EcsToCRDTWriter, inputBlock, styleFontDefinitions);
             UIInputReleaseSystem.InjectToWorld(ref builder, componentPoolsRegistry);
-            UIDropdownInstantiationSystem.InjectToWorld(ref builder, componentPoolsRegistry, sharedDependencies.EcsToCRDTWriter);
+            UIDropdownInstantiationSystem.InjectToWorld(ref builder, componentPoolsRegistry, sharedDependencies.EcsToCRDTWriter, styleFontDefinitions);
             UIDropdownReleaseSystem.InjectToWorld(ref builder, componentPoolsRegistry);
             UIPointerEventsSystem.InjectToWorld(ref builder, sharedDependencies.SceneStateProvider, sharedDependencies.EcsToCRDTWriter);
             UICanvasInformationSystem.InjectToWorld(ref builder, sharedDependencies.EcsToCRDTWriter);
             UIFixPbPointerEventsSystem.InjectToWorld(ref builder);
 
+            ResetDirtyFlagSystem<PBUiTransform>.InjectToWorld(ref builder);
+            ResetDirtyFlagSystem<PBUiBackground>.InjectToWorld(ref builder);
             finalizeWorldSystems.Add(ReleasePoolableComponentSystem<Label, UITextComponent>.InjectToWorld(ref builder, componentPoolsRegistry));
         }
 

Explorer/Assets/DCL/SDKComponents/SceneUI/Components/UIDropdownComponent.cs

@@ -1,30 +1,48 @@
-using DCL.SDKComponents.SceneUI.Utils;
+using System;
+using DCL.SDKComponents.SceneUI.Utils;
 using UnityEngine.UIElements;
 
 namespace DCL.SDKComponents.SceneUI.Components
 {
     public class UIDropdownComponent
     {
         public readonly DropdownField DropdownField = new ();
-        public TextElement TextElement;
+        public TextElement TextElement { get; private set; }
         public bool IsOnValueChangedTriggered;
+        public int LastIndexSetByScene;
 
-        internal EventCallback<ChangeEvent<string>> currentOnValueChanged;
+        internal Action? cachedScheduledAction;
 
-        public void Initialize(string dropdownName, string dropdownStyleClass, string textElementStyleClass)
+        public void Initialize(string dropdownName)
         {
             DropdownField.name = dropdownName;
-            DropdownField.AddToClassList(dropdownStyleClass);
+            DropdownField.AddToClassList("dcl-dropdown");
             DropdownField.pickingMode = PickingMode.Position;
-            TextElement = DropdownField.Q<TextElement>(className: textElementStyleClass);
+            TextElement = DropdownField.Q<TextElement>(className: "unity-base-popup-field__text");
 
             IsOnValueChangedTriggered = false;
+            LastIndexSetByScene = int.MinValue; // -1 is used for the case of 'accept Empty value'
+
             this.RegisterDropdownCallbacks();
         }
 
         public void Dispose()
         {
             this.UnregisterDropdownCallbacks();
+            DropdownField.UnregisterHoverStyleCallbacks();
+        }
+
+        internal void AnimateDropdownOpacity()
+        {
+            // Unity instantiates and removes the Dropdown elements panel every time it's toggled, so the element
+            // has to be looked up again.
+            var root = DropdownField.panel.visualTree;
+            var dropdownOuterContainer = root.Q(null, "unity-base-dropdown__container-outer");
+            if (dropdownOuterContainer == null)
+                return;
+
+            dropdownOuterContainer.experimental.animation
+                                  .Start(0f, 1f, 200, Extensions.OPACITY_ANIMATION_CALLBACK);
         }
     }
 }

Explorer/Assets/DCL/SDKComponents/SceneUI/Components/UIInputComponent.cs

@@ -1,4 +1,4 @@
-using DCL.Input;
+using DCL.Input;
 using DCL.SDKComponents.SceneUI.Classes;
 using DCL.SDKComponents.SceneUI.Utils;
 using UnityEngine;
@@ -10,6 +10,7 @@ public class UIInputComponent
     {
         public readonly TextField TextField = new ();
         public readonly TextFieldPlaceholder Placeholder = new ();
+        public TextElement TextElement { get; private set; }
         public bool IsOnValueChangedTriggered;
         public bool IsOnSubmitTriggered;
 
@@ -21,16 +22,17 @@ public class UIInputComponent
         public void Initialize(
             IInputBlock inputBlock,
             string textFieldName,
-            string styleClass,
             string text,
             string placeholderValue,
             Color placeholderColorValue)
         {
             TextField.name = textFieldName;
-            TextField.AddToClassList(styleClass);
+            TextField.AddToClassList("dcl-input");
             TextField.pickingMode = PickingMode.Position;
             TextField.SetValueWithoutNotify(text);
 
+            TextElement = TextField.Q<TextElement>();
+
             Placeholder.Initialize(TextField, placeholderValue, placeholderColorValue);
 
             IsOnValueChangedTriggered = false;
@@ -41,6 +43,7 @@ public void Initialize(
         public void Dispose()
         {
             this.UnregisterInputCallbacks();
+            TextField.UnregisterHoverStyleCallbacks();
             Placeholder.Dispose();
         }
     }

Explorer/Assets/DCL/SDKComponents/SceneUI/Components/UITransformComponent.cs

@@ -1,4 +1,4 @@
-using Arch.Core;
+using Arch.Core;
 using CRDT;
 using DCL.ECSComponents;
 using DCL.SDKComponents.SceneUI.Utils;
@@ -97,6 +97,7 @@ public void Dispose()
             if (IsRoot) return;
 
             this.UnregisterPointerCallbacks();
+            reusableTransform.UnregisterHoverStyleCallbacks();
             reusableTransform.tabIndex = 0;
             reusableTransform.RemoveFromHierarchy();
         }

Explorer/Assets/DCL/SDKComponents/SceneUI/ScenesUIDocument.uxml

@@ -1,3 +1,3 @@
-<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
-    <Style src="project://database/Assets/DCL/SDKComponents/SceneUI/ScenesUIStyleSheet.uss" />
+<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
+    <!-- Stylesheet now loaded at DCLSceneDefaultTheme -->
 </ui:UXML>

Explorer/Assets/DCL/SDKComponents/SceneUI/ScenesUIStyleSheet.uss

@@ -1,3 +1,7 @@
+:root {
+    --default-border-radius: 15px; 
+}
+
 /* MAIN CANVAS STYLES */
 .sceneUIMainCanvas {
     width: 100%;
@@ -13,6 +17,7 @@
     align-content: stretch;
     position: absolute;
 }
+
 /* INPUT STYLES */
 .dcl-input {
     flex-grow: 1;
@@ -22,11 +27,7 @@
 .dcl-input > .unity-base-text-field__input {
     margin: 0;
     background-color: rgba(0, 0, 0, 0);
-    border-color: #959595;
-}
-
-.dcl-input:hover > .unity-base-text-field__input {
-    border-color: #808080;
+    border-width: 0;
 }
 
 /* DROPDOWN STYLES */
@@ -35,26 +36,50 @@
     margin : 0;
 }
 
-.dcl-dropdown > .unity-base-popup-field__input > .unity-base-popup-field__text {
+.dcl-dropdown > .unity-base-popup-field__input ,
+.dcl-dropdown > .unity-base-popup-field__input > .unity-base-popup-field__text,
+.dcl-dropdown:hover:enabled > .unity-popup-field__input,
+.unity-base-popup-field:active:enabled > .unity-base-popup-field__input {
     margin: 0;
+    background-color: rgba(0,0,0,0);
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
 }
 
-.dcl-dropdown > .unity-base-popup-field__input,
-.dcl-dropdown:hover > .unity-base-popup-field__input {
-    margin: 0;
-    background-color: rgba(0, 0, 0, 0);
+.unity-base-dropdown__container-outer {
+    background-color: white;
+    border-radius: var(--default-border-radius);
+    color: rgb(0, 0, 0);
+    overflow: hidden;
 }
 
-.unity-base-dropdown__item:hover {
-    background-color: #c2c2c2;
+.unity-base-dropdown__container-inner {
+    background-color: white;
+    margin: 10px;
 }
 
-.unity-enum-field:hover.dcl-dropdown-readonly:hover > .unity-enum-field__input,
-.unity-base-popup-field:hover.dcl-dropdown-readonly:hover > .unity-base-popup-field__input {
-    background-color: #bcbcbc;
+.unity-base-dropdown__item {
+    border-radius: 15px;
+}
+
+.unity-base-dropdown__item:hover:enabled > .unity-base-dropdown__item-content > .unity-base-dropdown__label,
+.unity-base-dropdown__item:hover:enabled {
+    background-color: #ECEBED;
+    color: rgb(0, 0, 0);
+}
+
+.unity-base-dropdown__checkmark,
+.unity-base-dropdown__item:hover:enabled > .unity-base-dropdown__item-content > .unity-base-dropdown__checkmark {
+    margin-top: 5px;
+    -unity-background-image-tint-color: rgb(0, 0, 0);
+    flex-grow: 0;
+    flex-shrink: 0;
+    -unity-background-scale-mode: scale-to-fit;
 }
 
-/* override unity default style to hide the arrow */
 .unity-base-popup-field__arrow {
-    visibility: hidden;
+    margin-right: 10px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    -unity-background-scale-mode: scale-to-fit;
 }

Explorer/Assets/DCL/SDKComponents/SceneUI/Systems/UIBackground/UIBackgroundInstantiationSystem.cs

@@ -89,8 +89,6 @@ private void UpdateUIBackground(ref PBUiBackground sdkModel, ref UIBackgroundCom
             else if (uiBackgroundComponent is { TexturePromise: not null, Status: LifeCycle.LoadingFinished })
                 // Ensure texture has latest data from model
                 uiBackgroundComponent.Image.SetupFromSdkModel(ref sdkModel, uiBackgroundComponent.Image.Texture);
-
-            sdkModel.IsDirty = false;
         }
 
         [Query]

Explorer/Assets/DCL/SDKComponents/SceneUI/Systems/UIDropdown/UIDropdownInstantiationSystem.cs

@@ -1,4 +1,4 @@
-using Arch.Core;
+using Arch.Core;
 using Arch.System;
 using Arch.SystemGroups;
 using CRDT;
@@ -10,52 +10,87 @@
 using DCL.SDKComponents.SceneUI.Groups;
 using DCL.SDKComponents.SceneUI.Utils;
 using ECS.Abstract;
+using ECS.LifeCycle.Components;
+using UnityEngine.UIElements;
 
 namespace DCL.SDKComponents.SceneUI.Systems.UIDropdown
 {
+    /*
+     * As defined in the SDK, UiDropdown entities composition breakdown:
+     * https://github.com/decentraland/js-sdk-toolchain/blob/main/packages/@dcl/react-ecs/src/components/Dropdown/index.tsx#L41-L53
+     * - PBUiDropdown
+     * - (optional, but Explorer queries require it) PBUiTransform
+     * - (optional) PBUiBackground
+     * - (optional) PBPointerEvents
+     */
+
     [UpdateInGroup(typeof(SceneUIComponentInstantiationGroup))]
     [LogCategory(ReportCategory.SCENE_UI)]
     public partial class UIDropdownInstantiationSystem : BaseUnityLoopSystem
     {
         private const string COMPONENT_NAME = "UIDropdown";
+        private const float HOVER_BORDER_DARKEN_FACTOR = 0.3f;
+        private const float HOVER_BACKGROUND_DARKEN_FACTOR = 0.15f;
 
         private readonly IComponentPool<UIDropdownComponent> dropdownsPool;
         private readonly IECSToCRDTWriter ecsToCRDTWriter;
+        private readonly StyleFontDefinition[] styleFontDefinitions;
 
-        public UIDropdownInstantiationSystem(World world, IComponentPoolsRegistry poolsRegistry, IECSToCRDTWriter ecsToCRDTWriter) : base(world)
+        public UIDropdownInstantiationSystem(World world, IComponentPoolsRegistry poolsRegistry, IECSToCRDTWriter ecsToCRDTWriter, in StyleFontDefinition[] styleFontDefinitions) : base(world)
         {
             dropdownsPool = poolsRegistry.GetReferenceTypePool<UIDropdownComponent>();
             this.ecsToCRDTWriter = ecsToCRDTWriter;
+            this.styleFontDefinitions = styleFontDefinitions;
         }
 
         protected override void Update(float t)
         {
+            UpdateUIDropdownTransformDefaultsQuery(World);
+
             InstantiateUIDropdownQuery(World);
             UpdateUIDropdownQuery(World);
+
             TriggerDropdownResultsQuery(World);
         }
 
         [Query]
-        [All(typeof(PBUiDropdown), typeof(UITransformComponent))]
+        [All(typeof(PBUiDropdown))]
         [None(typeof(UIDropdownComponent))]
-        private void InstantiateUIDropdown(in Entity entity, ref UITransformComponent uiTransformComponent)
+        private void InstantiateUIDropdown(in Entity entity, in PBUiTransform pbUiTransform, ref UITransformComponent uiTransformComponent)
         {
             var newDropdown = dropdownsPool.Get();
-            newDropdown.Initialize(UiElementUtils.BuildElementName(COMPONENT_NAME, entity), "dcl-dropdown", "unity-base-popup-field__text");
+            newDropdown.Initialize(UiElementUtils.BuildElementName(COMPONENT_NAME, entity));
             uiTransformComponent.Transform.Add(newDropdown.DropdownField);
+
+            UiElementUtils.ApplyDefaultUiTransformValues(in pbUiTransform, uiTransformComponent.Transform);
+            UiElementUtils.ApplyDefaultUiBackgroundValues(World, entity, uiTransformComponent.Transform);
+            UiElementUtils.ConfigureHoverStylesBehaviour(World, entity, in uiTransformComponent, newDropdown.DropdownField, HOVER_BORDER_DARKEN_FACTOR, HOVER_BACKGROUND_DARKEN_FACTOR);
+
             World.Add(entity, newDropdown);
         }
 
         [Query]
+        [None(typeof(DeleteEntityIntention))]
         private void UpdateUIDropdown(ref UIDropdownComponent uiDropdownComponent, ref PBUiDropdown sdkModel)
         {
-            if (!sdkModel.IsDirty)
-                return;
+            if (!sdkModel.IsDirty) return;
 
-            UiElementUtils.SetupUIDropdownComponent(ref uiDropdownComponent, ref sdkModel);
+            UiElementUtils.SetupUIDropdownComponent(ref uiDropdownComponent, in sdkModel, in styleFontDefinitions);
             sdkModel.IsDirty = false;
         }
 
+        [Query]
+        [All(typeof(UIDropdownComponent))]
+        [None(typeof(DeleteEntityIntention))]
+        private void UpdateUIDropdownTransformDefaults(in Entity entity, in UITransformComponent uiTransformComponent, in PBUiTransform pbUiTransform, ref UIDropdownComponent uiDropdownComponent)
+        {
+            if (!pbUiTransform.IsDirty) return;
+
+            UiElementUtils.ApplyDefaultUiTransformValues(in pbUiTransform, uiTransformComponent.Transform);
+            // Re-configure hover so the stored border colors match the updated transform (e.g. defaults applied above); avoids wrong restore on hover leave when PBUiTransform changed while hovered.
+            UiElementUtils.ConfigureHoverStylesBehaviour(World, entity, in uiTransformComponent, uiDropdownComponent.DropdownField, HOVER_BORDER_DARKEN_FACTOR, HOVER_BACKGROUND_DARKEN_FACTOR);
+        }
+
         [Query]
         private void TriggerDropdownResults(ref UIDropdownComponent uiDropdownComponent, ref CRDTEntity sdkEntity)
         {