Allow skin editor to be invoked from any context

This is kind of how I see things working going forward, where the editor
can be applied to anything in the game which supports it (ie. a results
screen, gameplay screen, etc.) and it will immediately allow changing
the interface.

This adds a test scene which shows this working with gameplay.

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditor.cs

@@ -1,61 +1,36 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-using System;
+using NUnit.Framework;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Framework.Testing;
 using osu.Game.Rulesets;
-using osu.Game.Rulesets.Judgements;
-using osu.Game.Rulesets.Mods;
-using osu.Game.Rulesets.Objects;
 using osu.Game.Rulesets.Osu;
-using osu.Game.Rulesets.Scoring;
-using osu.Game.Screens.Play;
 using osu.Game.Skinning.Editor;
-using osuTK.Input;
 
 namespace osu.Game.Tests.Visual.Gameplay
 {
-    public class TestSceneSkinEditor : SkinnableTestScene
+    public class TestSceneSkinEditor : PlayerTestScene
     {
+        private SkinEditor skinEditor;
+
         [SetUpSteps]
-        public void SetUpSteps()
+        public override void SetUpSteps()
         {
-            AddStep("create editor overlay", () =>
+            base.SetUpSteps();
+
+            AddStep("add editor overlay", () =>
             {
-                SetContents(() =>
+                skinEditor?.Expire();
-                {
+                LoadComponentAsync(skinEditor = new SkinEditor(Player), Add);
-                    var ruleset = new OsuRuleset();
-                    var working = CreateWorkingBeatmap(ruleset.RulesetInfo);
-                    var beatmap = working.GetPlayableBeatmap(ruleset.RulesetInfo);
-
-                    ScoreProcessor scoreProcessor = new ScoreProcessor();
-
-                    var drawableRuleset = ruleset.CreateDrawableRulesetWith(beatmap);
-
-                    var hudOverlay = new HUDOverlay(scoreProcessor, null, drawableRuleset, Array.Empty<Mod>());
-
-                    // Add any key just to display the key counter visually.
-                    hudOverlay.KeyCounter.Add(new KeyCounterKeyboard(Key.Space));
-                    hudOverlay.ComboCounter.Current.Value = 1;
-
-                    // Apply a miss judgement
-                    scoreProcessor.ApplyResult(new JudgementResult(new HitObject(), new Judgement()) { Type = HitResult.Good });
-
-                    return new Container
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Children = new Drawable[]
-                        {
-                            drawableRuleset,
-                            new SkinEditor(hudOverlay),
-                        }
-                    };
-                });
             });
         }
 
-        protected override Ruleset CreateRulesetForSkinProvider() => new OsuRuleset();
+        [Test]
+        public void TestToggleEditor()
+        {
+            AddToggleStep("toggle editor visibility", visible => skinEditor.ToggleVisibility());
+        }
+
+        protected override Ruleset CreatePlayerRuleset() => new OsuRuleset();
     }
 }

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditorMultipleSkins.cs

@@ -0,0 +1,61 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Rulesets.Scoring;
+using osu.Game.Screens.Play;
+using osu.Game.Skinning.Editor;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.Gameplay
+{
+    public class TestSceneSkinEditorMultipleSkins : SkinnableTestScene
+    {
+        [SetUpSteps]
+        public void SetUpSteps()
+        {
+            AddStep("create editor overlay", () =>
+            {
+                SetContents(() =>
+                {
+                    var ruleset = new OsuRuleset();
+                    var working = CreateWorkingBeatmap(ruleset.RulesetInfo);
+                    var beatmap = working.GetPlayableBeatmap(ruleset.RulesetInfo);
+
+                    ScoreProcessor scoreProcessor = new ScoreProcessor();
+
+                    var drawableRuleset = ruleset.CreateDrawableRulesetWith(beatmap);
+
+                    var hudOverlay = new HUDOverlay(scoreProcessor, null, drawableRuleset, Array.Empty<Mod>())
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                    };
+
+                    // Add any key just to display the key counter visually.
+                    hudOverlay.KeyCounter.Add(new KeyCounterKeyboard(Key.Space));
+                    hudOverlay.ComboCounter.Current.Value = 1;
+
+                    return new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new Drawable[]
+                        {
+                            drawableRuleset,
+                            hudOverlay,
+                            new SkinEditor(hudOverlay),
+                        }
+                    };
+                });
+            });
+        }
+
+        protected override Ruleset CreateRulesetForSkinProvider() => new OsuRuleset();
+    }
+}

osu.Game/Skinning/Editor/SkinEditor.cs

@@ -1,15 +1,21 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Cursor;
 
 namespace osu.Game.Skinning.Editor
 {
-    public class SkinEditor : CompositeDrawable
+    public class SkinEditor : VisibilityContainer
     {
         private readonly Drawable target;
+        private Container border;
+
+        protected override bool StartHidden => true;
 
         public SkinEditor(Drawable target)
         {
@@ -18,19 +24,67 @@ namespace osu.Game.Skinning.Editor
             RelativeSizeAxes = Axes.Both;
         }
 
-        protected override void LoadComplete()
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
         {
-            base.LoadComplete();
-
             InternalChild = new OsuContextMenuContainer
             {
                 RelativeSizeAxes = Axes.Both,
-                Children = new[]
+                Children = new Drawable[]
                 {
-                    target,
+                    border = new Container
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Both,
+                        Masking = true,
+                        BorderColour = colours.Yellow,
+                        BorderThickness = 5,
+                        CornerRadius = 5,
+                        Children = new Drawable[]
+                        {
+                            new Box
+                            {
+                                AlwaysPresent = true,
+                                Alpha = 0,
+                                RelativeSizeAxes = Axes.Both,
+                            },
+                        }
+                    },
                     new SkinBlueprintContainer(target),
                 }
             };
         }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            Show();
+        }
+
+        private const double transition_duration = 500;
+        private const float visible_target_scale = 0.8f;
+
+        protected override void PopIn()
+        {
+            if (IsLoaded)
+            {
+                target.ScaleTo(visible_target_scale, transition_duration, Easing.OutQuint);
+                border.ScaleTo(visible_target_scale, transition_duration, Easing.OutQuint);
+            }
+
+            this.FadeIn(transition_duration);
+        }
+
+        protected override void PopOut()
+        {
+            if (IsLoaded)
+            {
+                target.ScaleTo(1, transition_duration, Easing.OutQuint);
+                border.ScaleTo(1, transition_duration, Easing.OutQuint);
+            }
+
+            this.FadeOut(transition_duration, Easing.OutQuint);
+        }
     }
 }