Remove nesting of components inside overlined component

I think this makes things a bit more readable. The only weird case is
the transfer of details from the component to the `OverlinedHeader`, but
bindables make it not too bad.

osu.Game.Tests/Visual/Multiplayer/TestSceneOverlinedParticipants.cs

@@ -22,12 +22,11 @@ namespace osu.Game.Tests.Visual.Multiplayer
         {
             AddStep("create component", () =>
             {
-                Child = new OverlinedParticipants(Direction.Horizontal)
+                Child = new ParticipantsDisplay(Direction.Horizontal)
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     Width = 500,
-                    AutoSizeAxes = Axes.Y,
                 };
             });
         }
@@ -37,7 +36,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
         {
             AddStep("create component", () =>
             {
-                Child = new OverlinedParticipants(Direction.Vertical)
+                Child = new ParticipantsDisplay(Direction.Vertical)
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,

osu.Game.Tests/Visual/Multiplayer/TestSceneOverlinedPlaylist.cs

@@ -4,7 +4,7 @@
 using osu.Framework.Graphics;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Rulesets.Osu;
-using osu.Game.Screens.Multi.Components;
+using osu.Game.Screens.Multi;
 using osu.Game.Tests.Beatmaps;
 using osuTK;
 
@@ -26,7 +26,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 });
             }
 
-            Add(new OverlinedPlaylist(false)
+            Add(new DrawableRoomPlaylist(false, false)
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,

osu.Game/Screens/Multi/Components/OverlinedDisplay.cs

@@ -1,131 +0,0 @@
-// 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.Sprites;
-using osuTK;
-
-namespace osu.Game.Screens.Multi.Components
-{
-    public abstract class OverlinedDisplay : MultiplayerComposite
-    {
-        protected readonly Container Content;
-
-        public override Axes RelativeSizeAxes
-        {
-            get => base.RelativeSizeAxes;
-            set
-            {
-                base.RelativeSizeAxes = value;
-                updateDimensions();
-            }
-        }
-
-        public override Axes AutoSizeAxes
-        {
-            get => base.AutoSizeAxes;
-            protected set
-            {
-                base.AutoSizeAxes = value;
-                updateDimensions();
-            }
-        }
-
-        private bool showLine = true;
-
-        public bool ShowLine
-        {
-            get => showLine;
-            set
-            {
-                showLine = value;
-                line.Alpha = value ? 1 : 0;
-            }
-        }
-
-        protected string Details
-        {
-            set => details.Text = value;
-        }
-
-        private readonly Circle line;
-        private readonly OsuSpriteText details;
-        private readonly GridContainer grid;
-
-        protected OverlinedDisplay(string title)
-        {
-            InternalChild = grid = new GridContainer
-            {
-                Content = new[]
-                {
-                    new Drawable[]
-                    {
-                        line = new Circle
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            Height = 2,
-                            Margin = new MarginPadding { Bottom = 2 }
-                        },
-                    },
-                    new Drawable[]
-                    {
-                        new FillFlowContainer
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Direction = FillDirection.Horizontal,
-                            Margin = new MarginPadding { Top = 5 },
-                            Spacing = new Vector2(10, 0),
-                            Children = new Drawable[]
-                            {
-                                new OsuSpriteText
-                                {
-                                    Text = title,
-                                    Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
-                                },
-                                details = new OsuSpriteText
-                                {
-                                    Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
-                                },
-                            }
-                        },
-                    },
-                    new Drawable[]
-                    {
-                        Content = new Container { Padding = new MarginPadding { Top = 5 } }
-                    }
-                }
-            };
-
-            updateDimensions();
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            line.Colour = colours.Yellow;
-            details.Colour = colours.Yellow;
-        }
-
-        private void updateDimensions()
-        {
-            grid.RowDimensions = new[]
-            {
-                new Dimension(GridSizeMode.AutoSize),
-                new Dimension(GridSizeMode.AutoSize),
-                new Dimension(AutoSizeAxes.HasFlag(Axes.Y) ? GridSizeMode.AutoSize : GridSizeMode.Distributed),
-            };
-
-            // Assigning to none is done so that setting auto and relative size modes doesn't cause exceptions to be thrown
-            grid.AutoSizeAxes = Content.AutoSizeAxes = Axes.None;
-            grid.RelativeSizeAxes = Content.RelativeSizeAxes = Axes.None;
-
-            // Auto-size when required, otherwise eagerly relative-size
-            grid.AutoSizeAxes = Content.AutoSizeAxes = AutoSizeAxes;
-            grid.RelativeSizeAxes = Content.RelativeSizeAxes = ~AutoSizeAxes;
-        }
-    }
-}

osu.Game/Screens/Multi/Components/OverlinedHeader.cs

@@ -0,0 +1,89 @@
+// 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.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osuTK;
+
+namespace osu.Game.Screens.Multi.Components
+{
+    /// <summary>
+    /// A header used in the multiplayer interface which shows text / details beneath a line.
+    /// </summary>
+    public class OverlinedHeader : MultiplayerComposite
+    {
+        private bool showLine = true;
+
+        public bool ShowLine
+        {
+            get => showLine;
+            set
+            {
+                showLine = value;
+                line.Alpha = value ? 1 : 0;
+            }
+        }
+
+        public Bindable<string> Details = new Bindable<string>();
+
+        private readonly Circle line;
+        private readonly OsuSpriteText details;
+
+        public OverlinedHeader(string title)
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Margin = new MarginPadding { Bottom = 5 };
+
+            InternalChild = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = new Drawable[]
+                {
+                    line = new Circle
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        Height = 2,
+                        Margin = new MarginPadding { Bottom = 2 }
+                    },
+                    new FillFlowContainer
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Margin = new MarginPadding { Top = 5 },
+                        Spacing = new Vector2(10, 0),
+                        Children = new Drawable[]
+                        {
+                            new OsuSpriteText
+                            {
+                                Text = title,
+                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
+                            },
+                            details = new OsuSpriteText
+                            {
+                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
+                            },
+                        }
+                    },
+                }
+            };
+
+            Details.BindValueChanged(val => details.Text = val.NewValue);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            line.Colour = colours.Yellow;
+            details.Colour = colours.Yellow;
+        }
+    }
+}

osu.Game/Screens/Multi/Components/OverlinedPlaylist.cs

@@ -1,33 +0,0 @@
-// 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.Bindables;
-using osu.Framework.Graphics;
-using osu.Game.Online.Multiplayer;
-
-namespace osu.Game.Screens.Multi.Components
-{
-    public class OverlinedPlaylist : OverlinedDisplay
-    {
-        public readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>();
-
-        private readonly DrawableRoomPlaylist playlist;
-
-        public OverlinedPlaylist(bool allowSelection)
-            : base("Playlist")
-        {
-            Content.Add(playlist = new DrawableRoomPlaylist(false, allowSelection)
-            {
-                RelativeSizeAxes = Axes.Both,
-                SelectedItem = { BindTarget = SelectedItem }
-            });
-        }
-
-        [BackgroundDependencyLoader]
-        private void load()
-        {
-            playlist.Items.BindTo(Playlist);
-        }
-    }
-}

osu.Game/Screens/Multi/Components/ParticipantsDisplay.cs

@@ -2,26 +2,22 @@
 // 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.Game.Graphics.Containers;
 
 namespace osu.Game.Screens.Multi.Components
 {
-    public class OverlinedParticipants : OverlinedDisplay
+    public class ParticipantsDisplay : MultiplayerComposite
     {
-        public new Axes AutoSizeAxes
+        public Bindable<string> Details = new Bindable<string>();
-        {
-            get => base.AutoSizeAxes;
-            set => base.AutoSizeAxes = value;
-        }
 
-        public OverlinedParticipants(Direction direction)
+        public ParticipantsDisplay(Direction direction)
-            : base("Recent participants")
         {
             OsuScrollContainer scroll;
             ParticipantsList list;
 
-            Content.Add(scroll = new OsuScrollContainer(direction)
+            AddInternal(scroll = new OsuScrollContainer(direction)
             {
                 Child = list = new ParticipantsList()
             });
@@ -29,13 +25,21 @@ namespace osu.Game.Screens.Multi.Components
             switch (direction)
             {
                 case Direction.Horizontal:
+                    AutoSizeAxes = Axes.Y;
+                    RelativeSizeAxes = Axes.X;
+
                     scroll.RelativeSizeAxes = Axes.X;
                     scroll.Height = ParticipantsList.TILE_SIZE + OsuScrollContainer.SCROLL_BAR_HEIGHT + OsuScrollContainer.SCROLL_BAR_PADDING * 2;
-                    list.AutoSizeAxes = Axes.Both;
+
+                    list.RelativeSizeAxes = Axes.Y;
+                    list.AutoSizeAxes = Axes.X;
                     break;
 
                 case Direction.Vertical:
+                    RelativeSizeAxes = Axes.Both;
+
                     scroll.RelativeSizeAxes = Axes.Both;
+
                     list.RelativeSizeAxes = Axes.X;
                     list.AutoSizeAxes = Axes.Y;
                     break;
@@ -46,11 +50,10 @@ namespace osu.Game.Screens.Multi.Components
         private void load()
         {
             ParticipantCount.BindValueChanged(_ => setParticipantCount());
-            MaxParticipants.BindValueChanged(_ => setParticipantCount());
+            MaxParticipants.BindValueChanged(_ => setParticipantCount(), true);
-
-            setParticipantCount();
         }
 
-        private void setParticipantCount() => Details = MaxParticipants.Value != null ? $"{ParticipantCount.Value}/{MaxParticipants.Value}" : ParticipantCount.Value.ToString();
+        private void setParticipantCount() =>
+            Details.Value = MaxParticipants.Value != null ? $"{ParticipantCount.Value}/{MaxParticipants.Value}" : ParticipantCount.Value.ToString();
     }
 }

osu.Game/Screens/Multi/DrawableRoomPlaylist.cs

@@ -60,8 +60,6 @@ namespace osu.Game.Screens.Multi
             RequestDeletion = requestDeletion
         };
 
-        private void requestSelection(PlaylistItem item) => SelectedItem.Value = item;
-
         private void requestDeletion(PlaylistItem item)
         {
             if (SelectedItem.Value == item)

osu.Game/Screens/Multi/Lounge/Components/RoomInspector.cs

@@ -24,6 +24,8 @@ namespace osu.Game.Screens.Multi.Lounge.Components
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
+            OverlinedHeader participantsHeader;
+
             InternalChildren = new Drawable[]
             {
                 new Box
@@ -55,22 +57,31 @@ namespace osu.Game.Screens.Multi.Lounge.Components
                                             RelativeSizeAxes = Axes.X,
                                             Margin = new MarginPadding { Vertical = 60 },
                                         },
-                                        new OverlinedParticipants(Direction.Horizontal)
+                                        participantsHeader = new OverlinedHeader("Recent Participants"),
+                                        new ParticipantsDisplay(Direction.Vertical)
                                         {
                                             RelativeSizeAxes = Axes.X,
-                                            AutoSizeAxes = Axes.Y
+                                            Height = ParticipantsList.TILE_SIZE * 3,
-                                        },
+                                            Details = { BindTarget = participantsHeader.Details }
+                                        }
                                     }
                                 }
                             },
+                            new Drawable[] { new OverlinedHeader("Playlist"), },
                             new Drawable[]
                             {
-                                new OverlinedPlaylist(false) { RelativeSizeAxes = Axes.Both },
+                                new DrawableRoomPlaylist(false, false)
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Items = { BindTarget = Playlist }
+                                },
                             },
                         },
                         RowDimensions = new[]
                         {
                             new Dimension(GridSizeMode.AutoSize),
+                            new Dimension(GridSizeMode.AutoSize),
+                            new Dimension(),
                         }
                     }
                 }

osu.Game/Screens/Multi/Match/Components/OverlinedChatDisplay.cs

@@ -1,20 +0,0 @@
-// 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.Graphics;
-using osu.Game.Screens.Multi.Components;
-
-namespace osu.Game.Screens.Multi.Match.Components
-{
-    public class OverlinedChatDisplay : OverlinedDisplay
-    {
-        public OverlinedChatDisplay()
-            : base("Chat")
-        {
-            Content.Add(new MatchChatDisplay
-            {
-                RelativeSizeAxes = Axes.Both
-            });
-        }
-    }
-}

osu.Game/Screens/Multi/Match/Components/OverlinedLeaderboard.cs

@@ -1,24 +0,0 @@
-// 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.Graphics;
-using osu.Game.Screens.Multi.Components;
-
-namespace osu.Game.Screens.Multi.Match.Components
-{
-    public class OverlinedLeaderboard : OverlinedDisplay
-    {
-        private readonly MatchLeaderboard leaderboard;
-
-        public OverlinedLeaderboard()
-            : base("Leaderboard")
-        {
-            Content.Add(leaderboard = new MatchLeaderboard
-            {
-                RelativeSizeAxes = Axes.Both
-            });
-        }
-
-        public void RefreshScores() => leaderboard.RefreshScores();
-    }
-}

osu.Game/Screens/Multi/Match/MatchSubScreen.cs

@@ -53,9 +53,10 @@ namespace osu.Game.Screens.Multi.Match
         protected readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>();
 
         private MatchSettingsOverlay settingsOverlay;
-        private OverlinedLeaderboard leaderboard;
+        private MatchLeaderboard leaderboard;
 
         private IBindable<WeakReference<BeatmapSetInfo>> managerUpdated;
+        private OverlinedHeader participantsHeader;
 
         public MatchSubScreen(Room room)
         {
@@ -85,11 +86,22 @@ namespace osu.Game.Screens.Multi.Match
                                 Child = new GridContainer
                                 {
                                     RelativeSizeAxes = Axes.Both,
+                                    RowDimensions = new[]
+                                    {
+                                        new Dimension(GridSizeMode.AutoSize),
+                                        new Dimension(GridSizeMode.AutoSize),
+                                        new Dimension(GridSizeMode.AutoSize),
+                                        new Dimension(),
+                                    },
                                     Content = new[]
                                     {
+                                        new Drawable[] { new Components.Header() },
                                         new Drawable[]
                                         {
-                                            new Components.Header()
+                                            participantsHeader = new OverlinedHeader("Participants")
+                                            {
+                                                ShowLine = false
+                                            }
                                         },
                                         new Drawable[]
                                         {
@@ -97,12 +109,10 @@ namespace osu.Game.Screens.Multi.Match
                                             {
                                                 RelativeSizeAxes = Axes.X,
                                                 AutoSizeAxes = Axes.Y,
-                                                Margin = new MarginPadding { Top = 10 },
+                                                Margin = new MarginPadding { Top = 5 },
-                                                Child = new OverlinedParticipants(Direction.Horizontal)
+                                                Child = new ParticipantsDisplay(Direction.Horizontal)
                                                 {
-                                                    RelativeSizeAxes = Axes.X,
+                                                    Details = { BindTarget = participantsHeader.Details }
-                                                    AutoSizeAxes = Axes.Y,
-                                                    ShowLine = false
                                                 }
                                             }
                                         },
@@ -126,9 +136,10 @@ namespace osu.Game.Screens.Multi.Match
                                                                 {
                                                                     new Drawable[]
                                                                     {
-                                                                        new OverlinedPlaylist(true) // Temporarily always allow selection
+                                                                        new DrawableRoomPlaylist(false, true) // Temporarily always allow selection
                                                                         {
                                                                             RelativeSizeAxes = Axes.Both,
+                                                                            Items = { BindTarget = playlist },
                                                                             SelectedItem = { BindTarget = SelectedItem }
                                                                         }
                                                                     },
@@ -157,18 +168,16 @@ namespace osu.Game.Screens.Multi.Match
                                                             RelativeSizeAxes = Axes.Both,
                                                             Content = new[]
                                                             {
-                                                                new Drawable[]
+                                                                new Drawable[] { new OverlinedHeader("Leaderboard"), },
-                                                                {
+                                                                new Drawable[] { leaderboard = new MatchLeaderboard { RelativeSizeAxes = Axes.Both }, },
-                                                                    leaderboard = new OverlinedLeaderboard { RelativeSizeAxes = Axes.Both },
+                                                                new Drawable[] { new OverlinedHeader("Chat"), },
-                                                                },
+                                                                new Drawable[] { new MatchChatDisplay { RelativeSizeAxes = Axes.Both } }
-                                                                new Drawable[]
-                                                                {
-                                                                    new OverlinedChatDisplay { RelativeSizeAxes = Axes.Both }
-                                                                }
                                                             },
                                                             RowDimensions = new[]
                                                             {
+                                                                new Dimension(GridSizeMode.AutoSize),
                                                                 new Dimension(),
+                                                                new Dimension(GridSizeMode.AutoSize),
                                                                 new Dimension(GridSizeMode.Relative, size: 0.4f, minSize: 240),
                                                             }
                                                         },
@@ -185,12 +194,6 @@ namespace osu.Game.Screens.Multi.Match
                                             }
                                         }
                                     },
-                                    RowDimensions = new[]
-                                    {
-                                        new Dimension(GridSizeMode.AutoSize),
-                                        new Dimension(GridSizeMode.AutoSize),
-                                        new Dimension(),
-                                    }
                                 }
                             }
                         },
@@ -219,6 +222,7 @@ namespace osu.Game.Screens.Multi.Match
         }
 
         [Resolved]
+
         private IAPIProvider api { get; set; }
 
         protected override void LoadComplete()