Reduce editor opacity of several editor components when hovering over composer

Addresses https://github.com/ppy/osu/discussions/24384.

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -7,6 +7,7 @@ using System;
 using System.Collections.Generic;
 using System.Collections.Specialized;
 using System.Linq;
+using JetBrains.Annotations;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.EnumExtensions;
@@ -78,14 +79,16 @@ namespace osu.Game.Rulesets.Edit
 
         protected InputManager InputManager { get; private set; }
 
+        private Box leftToolboxBackground;
+        private Box rightToolboxBackground;
+
         private EditorRadioButtonCollection toolboxCollection;
-
         private FillFlowContainer togglesCollection;
-
         private FillFlowContainer sampleBankTogglesCollection;
 
         private IBindable<bool> hasTiming;
         private Bindable<bool> autoSeekOnPlacement;
+        private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
 
         protected DrawableRuleset<TObject> DrawableRuleset { get; private set; }
 
@@ -97,11 +100,14 @@ namespace osu.Game.Rulesets.Edit
         protected override IReadOnlyDependencyContainer CreateChildDependencies(IReadOnlyDependencyContainer parent) =>
             dependencies = new DependencyContainer(base.CreateChildDependencies(parent));
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(OsuConfigManager config)
+        private void load(OsuConfigManager config, [CanBeNull] Editor editor)
         {
             autoSeekOnPlacement = config.GetBindable<bool>(OsuSetting.EditorAutoSeekOnPlacement);
 
+            if (editor != null)
+                composerFocusMode.BindTo(editor.ComposerFocusMode);
+
             Config = Dependencies.Get<IRulesetConfigCache>().GetConfigFor(Ruleset);
 
             try
@@ -126,7 +132,7 @@ namespace osu.Game.Rulesets.Edit
 
             InternalChildren = new[]
             {
-                PlayfieldContentContainer = new Container
+                PlayfieldContentContainer = new ContentContainer
                 {
                     Name = "Playfield content",
                     RelativeSizeAxes = Axes.Y,
@@ -146,7 +152,7 @@ namespace osu.Game.Rulesets.Edit
                     AutoSizeAxes = Axes.X,
                     Children = new Drawable[]
                     {
-                        new Box
+                        leftToolboxBackground = new Box
                         {
                             Colour = colourProvider.Background5,
                             RelativeSizeAxes = Axes.Both,
@@ -191,7 +197,7 @@ namespace osu.Game.Rulesets.Edit
                     AutoSizeAxes = Axes.X,
                     Children = new Drawable[]
                     {
-                        new Box
+                        rightToolboxBackground = new Box
                         {
                             Colour = colourProvider.Background5,
                             RelativeSizeAxes = Axes.Both,
@@ -260,6 +266,13 @@ namespace osu.Game.Rulesets.Edit
                     item.Selected.Disabled = !hasTiming.NewValue;
                 }
             }, true);
+
+            composerFocusMode.BindValueChanged(_ =>
+            {
+                float targetAlpha = composerFocusMode.Value ? 0.5f : 1;
+                leftToolboxBackground.FadeTo(targetAlpha, 400, Easing.OutQuint);
+                rightToolboxBackground.FadeTo(targetAlpha, 400, Easing.OutQuint);
+            }, true);
         }
 
         protected override void Update()
@@ -507,6 +520,31 @@ namespace osu.Game.Rulesets.Edit
         }
 
         #endregion
+
+        private partial class ContentContainer : Container
+        {
+            public override bool HandlePositionalInput => true;
+
+            private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
+
+            [BackgroundDependencyLoader(true)]
+            private void load([CanBeNull] Editor editor)
+            {
+                if (editor != null)
+                    composerFocusMode.BindTo(editor.ComposerFocusMode);
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                composerFocusMode.Value = true;
+                return false;
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                composerFocusMode.Value = false;
+            }
+        }
     }
 
     /// <summary>

osu.Game/Screens/Edit/BottomBar.cs

@@ -1,16 +1,13 @@
 // 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.
 
-#nullable disable
-
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Effects;
-using osu.Framework.Graphics.Shapes;
+using osu.Framework.Testing;
-using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Screens.Edit.Components;
 using osu.Game.Screens.Edit.Components.Timelines.Summary;
@@ -21,12 +18,13 @@ namespace osu.Game.Screens.Edit
 {
     internal partial class BottomBar : CompositeDrawable
     {
-        public TestGameplayButton TestGameplayButton { get; private set; }
+        public TestGameplayButton TestGameplayButton { get; private set; } = null!;
 
-        private IBindable<bool> saveInProgress;
+        private IBindable<bool> saveInProgress = null!;
+        private Bindable<bool> composerFocusMode = null!;
 
         [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider, Editor editor)
+        private void load(Editor editor)
         {
             Anchor = Anchor.BottomLeft;
             Origin = Anchor.BottomLeft;
@@ -45,11 +43,6 @@ namespace osu.Game.Screens.Edit
 
             InternalChildren = new Drawable[]
             {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = colourProvider.Background4,
-                },
                 new GridContainer
                 {
                     RelativeSizeAxes = Axes.Both,
@@ -79,6 +72,7 @@ namespace osu.Game.Screens.Edit
             };
 
             saveInProgress = editor.MutationTracker.InProgress.GetBoundCopy();
+            composerFocusMode = editor.ComposerFocusMode.GetBoundCopy();
         }
 
         protected override void LoadComplete()
@@ -86,6 +80,13 @@ namespace osu.Game.Screens.Edit
             base.LoadComplete();
 
             saveInProgress.BindValueChanged(_ => TestGameplayButton.Enabled.Value = !saveInProgress.Value, true);
+            composerFocusMode.BindValueChanged(_ =>
+            {
+                float targetAlpha = composerFocusMode.Value ? 0.5f : 1;
+
+                foreach (var c in this.ChildrenOfType<BottomBarContainer>())
+                    c.Background.FadeTo(targetAlpha, 400, Easing.OutQuint);
+            }, true);
         }
     }
 }

osu.Game/Screens/Edit/Components/BottomBarContainer.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Screens.Edit.Components
 
         protected readonly IBindable<Track> Track = new Bindable<Track>();
 
-        protected readonly Drawable Background;
+        public readonly Drawable Background;
         private readonly Container content;
 
         protected override Container<Drawable> Content => content;

osu.Game/Screens/Edit/Components/PlaybackControl.cs

@@ -32,8 +32,10 @@ namespace osu.Game.Screens.Edit.Components
         private readonly BindableNumber<double> freqAdjust = new BindableDouble(1);
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
+            Background.Colour = colourProvider.Background4;
+
             Children = new Drawable[]
             {
                 playButton = new IconButton

osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineArea.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -19,6 +20,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 
         private readonly Drawable userContent;
 
+        private Box timelineBackground = null!;
+        private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
+
         public TimelineArea(Drawable? content = null)
         {
             RelativeSizeAxes = Axes.X;
@@ -28,12 +32,20 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
         }
 
         [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider, OsuColour colours)
+        private void load(OverlayColourProvider colourProvider, OsuColour colours, Editor? editor)
         {
             const float padding = 10;
 
             InternalChildren = new Drawable[]
             {
+                new Box
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    Width = 35 + HitObjectComposer.TOOLBOX_CONTRACTED_SIZE_RIGHT,
+                    RelativeSizeAxes = Axes.Y,
+                    Colour = colourProvider.Background4
+                },
                 new GridContainer
                 {
                     RelativeSizeAxes = Axes.X,
@@ -58,7 +70,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                                 AutoSizeAxes = Axes.Y,
                                 Children = new Drawable[]
                                 {
-                                    new Box
+                                    timelineBackground = new Box
                                     {
                                         RelativeSizeAxes = Axes.Both,
                                         Depth = float.MaxValue,
@@ -111,6 +123,16 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                     },
                 }
             };
+
+            if (editor != null)
+                composerFocusMode.BindTo(editor.ComposerFocusMode);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            composerFocusMode.BindValueChanged(_ => timelineBackground.FadeTo(composerFocusMode.Value ? 0.5f : 1, 400, Easing.OutQuint), true);
         }
     }
 }

osu.Game/Screens/Edit/Editor.cs

@@ -214,6 +214,12 @@ namespace osu.Game.Screens.Edit
         private Bindable<bool> editorTimelineShowTimingChanges;
         private Bindable<bool> editorTimelineShowTicks;
 
+        /// <summary>
+        /// This controls the opacity of components like the timelines, sidebars, etc.
+        /// In "composer focus" mode the opacity of the aforementioned components is reduced so that the user can focus on the composer better.
+        /// </summary>
+        public Bindable<bool> ComposerFocusMode { get; } = new Bindable<bool>();
+
         public Editor(EditorLoader loader = null)
         {
             this.loader = loader;
@@ -323,7 +329,6 @@ namespace osu.Game.Screens.Edit
                         Child = screenContainer = new Container<EditorScreen>
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Masking = true
                         }
                     },
                     new Container

osu.Game/Screens/Edit/EditorScreenWithTimeline.cs

@@ -4,7 +4,6 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Compose.Components.Timeline;
@@ -52,11 +51,6 @@ namespace osu.Game.Screens.Edit
                             AutoSizeAxes = Axes.Y,
                             Children = new Drawable[]
                             {
-                                new Box
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    Colour = colourProvider.Background4
-                                },
                                 new GridContainer
                                 {
                                     Name = "Timeline content",