Implement WebOverlay component

osu.Game.Tests/Visual/Online/TestSceneFullscreenOverlay.cs

@@ -41,7 +41,7 @@ namespace osu.Game.Tests.Visual.Online
         private class TestFullscreenOverlay : FullscreenOverlay<OverlayHeader>
         {
             public TestFullscreenOverlay()
-                : base(OverlayColourScheme.Pink, null)
+                : base(OverlayColourScheme.Pink)
             {
                 Children = new Drawable[]
                 {
@@ -52,6 +52,8 @@ namespace osu.Game.Tests.Visual.Online
                     },
                 };
             }
+
+            protected override OverlayHeader CreateHeader() => null;
         }
     }
 }

osu.Game/Overlays/BeatmapListingOverlay.cs

@@ -15,98 +15,82 @@ using osu.Framework.Graphics.Textures;
 using osu.Framework.Input.Events;
 using osu.Game.Audio;
 using osu.Game.Beatmaps;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.BeatmapListing;
 using osu.Game.Overlays.BeatmapListing.Panels;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
-    public class BeatmapListingOverlay : FullscreenOverlay<BeatmapListingHeader>
+    public class BeatmapListingOverlay : WebOverlay<BeatmapListingHeader>
     {
         [Resolved]
         private PreviewTrackManager previewTrackManager { get; set; }
 
         private Drawable currentContent;
-        private LoadingLayer loadingLayer;
         private Container panelTarget;
         private FillFlowContainer<BeatmapPanel> foundContent;
         private NotFoundDrawable notFoundContent;
-
+        private BeatmapListingFilterControl filterControl;
-        private OverlayScrollContainer resultScrollContainer;
 
         public BeatmapListingOverlay()
-            : base(OverlayColourScheme.Blue, new BeatmapListingHeader())
+            : base(OverlayColourScheme.Blue)
         {
         }
 
-        private BeatmapListingFilterControl filterControl;
-
         [BackgroundDependencyLoader]
         private void load()
         {
-            Children = new Drawable[]
+            Child = new FillFlowContainer
             {
-                new Box
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = new Drawable[]
                 {
-                    RelativeSizeAxes = Axes.Both,
+                    filterControl = new BeatmapListingFilterControl
-                    Colour = ColourProvider.Background6
+                    {
-                },
+                        TypingStarted = onTypingStarted,
-                resultScrollContainer = new OverlayScrollContainer
+                        SearchStarted = onSearchStarted,
-                {
+                        SearchFinished = onSearchFinished,
-                    RelativeSizeAxes = Axes.Both,
+                    },
-                    ScrollbarVisible = false,
+                    new Container
-                    Child = new ReverseChildIDFillFlowContainer<Drawable>
                     {
                         AutoSizeAxes = Axes.Y,
                         RelativeSizeAxes = Axes.X,
-                        Direction = FillDirection.Vertical,
                         Children = new Drawable[]
                         {
-                            Header,
+                            new Box
-                            filterControl = new BeatmapListingFilterControl
                             {
-                                TypingStarted = onTypingStarted,
+                                RelativeSizeAxes = Axes.Both,
-                                SearchStarted = onSearchStarted,
+                                Colour = ColourProvider.Background4,
-                                SearchFinished = onSearchFinished,
                             },
-                            new Container
+                            panelTarget = new Container
                             {
                                 AutoSizeAxes = Axes.Y,
                                 RelativeSizeAxes = Axes.X,
+                                Padding = new MarginPadding { Horizontal = 20 },
                                 Children = new Drawable[]
                                 {
-                                    new Box
+                                    foundContent = new FillFlowContainer<BeatmapPanel>(),
-                                    {
+                                    notFoundContent = new NotFoundDrawable(),
-                                        RelativeSizeAxes = Axes.Both,
+                                }
-                                        Colour = ColourProvider.Background4,
+                            }
-                                    },
+                        },
-                                    panelTarget = new Container
-                                    {
-                                        AutoSizeAxes = Axes.Y,
-                                        RelativeSizeAxes = Axes.X,
-                                        Padding = new MarginPadding { Horizontal = 20 },
-                                        Children = new Drawable[]
-                                        {
-                                            foundContent = new FillFlowContainer<BeatmapPanel>(),
-                                            notFoundContent = new NotFoundDrawable(),
-                                        }
-                                    }
-                                },
-                            },
-                        }
                     },
-                },
+                }
-                loadingLayer = new LoadingLayer(true)
             };
         }
 
+        protected override BeatmapListingHeader CreateHeader() => new BeatmapListingHeader();
+
+        protected override Color4 GetBackgroundColour() => ColourProvider.Background6;
+
         private void onTypingStarted()
         {
             // temporary until the textbox/header is updated to always stay on screen.
-            resultScrollContainer.ScrollToStart();
+            ScrollFlow.ScrollToStart();
         }
 
         protected override void OnFocus(FocusEvent e)
@@ -125,7 +109,7 @@ namespace osu.Game.Overlays
             previewTrackManager.StopAnyPlaying(this);
 
             if (panelTarget.Any())
-                loadingLayer.Show();
+                Loading.Show();
         }
 
         private Task panelLoadDelegate;
@@ -173,7 +157,7 @@ namespace osu.Game.Overlays
 
         private void addContentToPlaceholder(Drawable content)
         {
-            loadingLayer.Hide();
+            Loading.Hide();
             lastFetchDisplayedTime = Time.Current;
 
             var lastContent = currentContent;
@@ -256,7 +240,7 @@ namespace osu.Game.Overlays
 
             bool shouldShowMore = panelLoadDelegate?.IsCompleted != false
                                   && Time.Current - lastFetchDisplayedTime > time_between_fetches
-                                  && (resultScrollContainer.ScrollableExtent > 0 && resultScrollContainer.IsScrolledToEnd(pagination_scroll_distance));
+                                  && (ScrollFlow.ScrollableExtent > 0 && ScrollFlow.IsScrolledToEnd(pagination_scroll_distance));
 
             if (shouldShowMore)
                 filterControl.FetchNextPage();

osu.Game/Overlays/BeatmapSetOverlay.cs

@@ -6,7 +6,6 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics.Containers;
@@ -16,10 +15,11 @@ using osu.Game.Overlays.BeatmapSet.Scores;
 using osu.Game.Overlays.Comments;
 using osu.Game.Rulesets;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
-    public class BeatmapSetOverlay : FullscreenOverlay<OverlayHeader> // we don't provide a standard header for now.
+    public class BeatmapSetOverlay : WebOverlay<OverlayHeader> // we don't provide a standard header for now.
     {
         public const float X_PADDING = 40;
         public const float Y_PADDING = 25;
@@ -36,55 +36,40 @@ namespace osu.Game.Overlays
         // receive input outside our bounds so we can trigger a close event on ourselves.
         public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => true;
 
-        private readonly Box background;
-
         public BeatmapSetOverlay()
-            : base(OverlayColourScheme.Blue, null)
+            : base(OverlayColourScheme.Blue)
         {
-            OverlayScrollContainer scroll;
             Info info;
             CommentsSection comments;
 
-            Children = new Drawable[]
+            Child = new FillFlowContainer
             {
-                background = new Box
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 20),
+                Children = new Drawable[]
                 {
-                    RelativeSizeAxes = Axes.Both
+                    new BeatmapSetLayoutSection
-                },
-                scroll = new OverlayScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    ScrollbarVisible = false,
-                    Child = new ReverseChildIDFillFlowContainer<BeatmapSetLayoutSection>
                     {
-                        RelativeSizeAxes = Axes.X,
+                        Child = new ReverseChildIDFillFlowContainer<Drawable>
-                        AutoSizeAxes = Axes.Y,
-                        Direction = FillDirection.Vertical,
-                        Spacing = new Vector2(0, 20),
-                        Children = new[]
                         {
-                            new BeatmapSetLayoutSection
+                            AutoSizeAxes = Axes.Y,
+                            RelativeSizeAxes = Axes.X,
+                            Direction = FillDirection.Vertical,
+                            Children = new Drawable[]
                             {
-                                Child = new ReverseChildIDFillFlowContainer<Drawable>
+                                Header = new Header(),
-                                {
+                                info = new Info()
-                                    AutoSizeAxes = Axes.Y,
+                            }
-                                    RelativeSizeAxes = Axes.X,
-                                    Direction = FillDirection.Vertical,
-                                    Children = new Drawable[]
-                                    {
-                                        Header = new Header(),
-                                        info = new Info()
-                                    }
-                                },
-                            },
-                            new ScoresContainer
-                            {
-                                Beatmap = { BindTarget = Header.Picker.Beatmap }
-                            },
-                            comments = new CommentsSection()
                         },
                     },
-                },
+                    new ScoresContainer
+                    {
+                        Beatmap = { BindTarget = Header.Picker.Beatmap }
+                    },
+                    comments = new CommentsSection()
+                }
             };
 
             Header.BeatmapSet.BindTo(beatmapSet);
@@ -94,16 +79,13 @@ namespace osu.Game.Overlays
             Header.Picker.Beatmap.ValueChanged += b =>
             {
                 info.Beatmap = b.NewValue;
-
+                ScrollFlow.ScrollToStart();
-                scroll.ScrollToStart();
             };
         }
 
-        [BackgroundDependencyLoader]
+        protected override OverlayHeader CreateHeader() => null;
-        private void load()
+
-        {
+        protected override Color4 GetBackgroundColour() => ColourProvider.Background6;
-            background.Colour = ColourProvider.Background6;
-        }
 
         protected override void PopOutComplete()
         {

osu.Game/Overlays/ChangelogOverlay.cs

@@ -11,22 +11,18 @@ using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics.Containers;
 using osu.Game.Input.Bindings;
 using osu.Game.Online.API.Requests;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays.Changelog;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
-    public class ChangelogOverlay : FullscreenOverlay<ChangelogHeader>
+    public class ChangelogOverlay : WebOverlay<ChangelogHeader>
     {
         public readonly Bindable<APIChangelogBuild> Current = new Bindable<APIChangelogBuild>();
 
-        private Container<ChangelogContent> content;
-
         private SampleChannel sampleBack;
 
         private List<APIChangelogBuild> builds;
@@ -34,45 +30,14 @@ namespace osu.Game.Overlays
         protected List<APIUpdateStream> Streams;
 
         public ChangelogOverlay()
-            : base(OverlayColourScheme.Purple, new ChangelogHeader())
+            : base(OverlayColourScheme.Purple)
         {
         }
 
         [BackgroundDependencyLoader]
         private void load(AudioManager audio)
         {
-            Children = new Drawable[]
+            Header.Build.BindTarget = Current;
-            {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = ColourProvider.Background4,
-                },
-                new OverlayScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    ScrollbarVisible = false,
-                    Child = new ReverseChildIDFillFlowContainer<Drawable>
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y,
-                        Direction = FillDirection.Vertical,
-                        Children = new Drawable[]
-                        {
-                            Header.With(h =>
-                            {
-                                h.ListingSelected = ShowListing;
-                                h.Build.BindTarget = Current;
-                            }),
-                            content = new Container<ChangelogContent>
-                            {
-                                RelativeSizeAxes = Axes.X,
-                                AutoSizeAxes = Axes.Y,
-                            }
-                        },
-                    },
-                },
-            };
 
             sampleBack = audio.Samples.Get(@"UI/generic-select-soft");
 
@@ -85,6 +50,13 @@ namespace osu.Game.Overlays
             });
         }
 
+        protected override ChangelogHeader CreateHeader() => new ChangelogHeader
+        {
+            ListingSelected = ShowListing,
+        };
+
+        protected override Color4 GetBackgroundColour() => ColourProvider.Background4;
+
         public void ShowListing()
         {
             Current.Value = null;
@@ -198,16 +170,16 @@ namespace osu.Game.Overlays
 
         private void loadContent(ChangelogContent newContent)
         {
-            content.FadeTo(0.2f, 300, Easing.OutQuint);
+            Content.FadeTo(0.2f, 300, Easing.OutQuint);
 
             loadContentCancellation?.Cancel();
 
             LoadComponentAsync(newContent, c =>
             {
-                content.FadeIn(300, Easing.OutQuint);
+                Content.FadeIn(300, Easing.OutQuint);
 
                 c.BuildSelected = ShowBuild;
-                content.Child = c;
+                Child = c;
             }, (loadContentCancellation = new CancellationTokenSource()).Token);
         }
     }

osu.Game/Overlays/DashboardOverlay.cs

@@ -7,29 +7,18 @@ 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.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Overlays.Dashboard;
 using osu.Game.Overlays.Dashboard.Friends;
 
 namespace osu.Game.Overlays
 {
-    public class DashboardOverlay : FullscreenOverlay<DashboardOverlayHeader>
+    public class DashboardOverlay : WebOverlay<DashboardOverlayHeader>
     {
         private CancellationTokenSource cancellationToken;
 
-        private Container content;
-        private LoadingLayer loading;
-        private OverlayScrollContainer scrollFlow;
-
         public DashboardOverlay()
-            : base(OverlayColourScheme.Purple, new DashboardOverlayHeader
+            : base(OverlayColourScheme.Purple)
-            {
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-                Depth = -float.MaxValue
-            })
         {
         }
 
@@ -40,45 +29,16 @@ namespace osu.Game.Overlays
         {
             apiState.BindTo(api.State);
             apiState.BindValueChanged(onlineStateChanged, true);
-
-            Children = new Drawable[]
-            {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = ColourProvider.Background5
-                },
-                scrollFlow = new OverlayScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    ScrollbarVisible = false,
-                    Child = new FillFlowContainer
-                    {
-                        AutoSizeAxes = Axes.Y,
-                        RelativeSizeAxes = Axes.X,
-                        Direction = FillDirection.Vertical,
-                        Children = new Drawable[]
-                        {
-                            Header,
-                            content = new Container
-                            {
-                                RelativeSizeAxes = Axes.X,
-                                AutoSizeAxes = Axes.Y
-                            }
-                        }
-                    }
-                },
-                loading = new LoadingLayer(true),
-            };
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
-
             Header.Current.BindValueChanged(onTabChanged);
         }
 
+        protected override DashboardOverlayHeader CreateHeader() => new DashboardOverlayHeader();
+
         private bool displayUpdateRequired = true;
 
         protected override void PopIn()
@@ -102,21 +62,21 @@ namespace osu.Game.Overlays
 
         private void loadDisplay(Drawable display)
         {
-            scrollFlow.ScrollToStart();
+            ScrollFlow.ScrollToStart();
 
             LoadComponentAsync(display, loaded =>
             {
                 if (API.IsLoggedIn)
-                    loading.Hide();
+                    Loading.Hide();
 
-                content.Child = loaded;
+                Child = loaded;
             }, (cancellationToken = new CancellationTokenSource()).Token);
         }
 
         private void onTabChanged(ValueChangedEvent<DashboardOverlayTabs> tab)
         {
             cancellationToken?.Cancel();
-            loading.Show();
+            Loading.Show();
 
             if (!API.IsLoggedIn)
             {

osu.Game/Overlays/FullscreenOverlay.cs

@@ -6,6 +6,7 @@ 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.Game.Graphics.Containers;
 using osu.Game.Online.API;
 using osuTK.Graphics;
@@ -27,9 +28,13 @@ namespace osu.Game.Overlays
         [Cached]
         protected readonly OverlayColourProvider ColourProvider;
 
-        protected FullscreenOverlay(OverlayColourScheme colourScheme, T header)
+        protected override Container<Drawable> Content => content;
+
+        private readonly Container content;
+
+        protected FullscreenOverlay(OverlayColourScheme colourScheme)
         {
-            Header = header;
+            Header = CreateHeader();
 
             ColourProvider = new OverlayColourProvider(colourScheme);
 
@@ -47,6 +52,19 @@ namespace osu.Game.Overlays
                 Type = EdgeEffectType.Shadow,
                 Radius = 10
             };
+
+            base.Content.AddRange(new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = GetBackgroundColour()
+                },
+                content = new Container
+                {
+                    RelativeSizeAxes = Axes.Both
+                }
+            });
         }
 
         [BackgroundDependencyLoader]
@@ -58,6 +76,10 @@ namespace osu.Game.Overlays
             Waves.FourthWaveColour = ColourProvider.Dark3;
         }
 
+        protected abstract T CreateHeader();
+
+        protected virtual Color4 GetBackgroundColour() => ColourProvider.Background5;
+
         public override void Show()
         {
             if (State.Value == Visibility.Visible)

osu.Game/Overlays/NewsOverlay.cs

@@ -2,67 +2,22 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System.Threading;
-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.UserInterface;
 using osu.Game.Overlays.News;
 using osu.Game.Overlays.News.Displays;
 
 namespace osu.Game.Overlays
 {
-    public class NewsOverlay : FullscreenOverlay<NewsHeader>
+    public class NewsOverlay : WebOverlay<NewsHeader>
     {
         private readonly Bindable<string> article = new Bindable<string>(null);
 
-        private Container content;
-        private LoadingLayer loading;
-        private OverlayScrollContainer scrollFlow;
-
         public NewsOverlay()
-            : base(OverlayColourScheme.Purple, new NewsHeader())
+            : base(OverlayColourScheme.Purple)
         {
         }
 
-        [BackgroundDependencyLoader]
-        private void load()
-        {
-            Children = new Drawable[]
-            {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = ColourProvider.Background5,
-                },
-                scrollFlow = new OverlayScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    ScrollbarVisible = false,
-                    Child = new FillFlowContainer
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y,
-                        Direction = FillDirection.Vertical,
-                        Children = new Drawable[]
-                        {
-                            Header.With(h =>
-                            {
-                                h.ShowFrontPage = ShowFrontPage;
-                            }),
-                            content = new Container
-                            {
-                                RelativeSizeAxes = Axes.X,
-                                AutoSizeAxes = Axes.Y,
-                            }
-                        },
-                    },
-                },
-                loading = new LoadingLayer(true),
-            };
-        }
-
         protected override void LoadComplete()
         {
             base.LoadComplete();
@@ -71,6 +26,11 @@ namespace osu.Game.Overlays
             article.BindValueChanged(onArticleChanged);
         }
 
+        protected override NewsHeader CreateHeader() => new NewsHeader
+        {
+            ShowFrontPage = ShowFrontPage
+        };
+
         private bool displayUpdateRequired = true;
 
         protected override void PopIn()
@@ -107,7 +67,7 @@ namespace osu.Game.Overlays
         private void onArticleChanged(ValueChangedEvent<string> e)
         {
             cancellationToken?.Cancel();
-            loading.Show();
+            Loading.Show();
 
             if (e.NewValue == null)
             {
@@ -122,11 +82,11 @@ namespace osu.Game.Overlays
 
         protected void LoadDisplay(Drawable display)
         {
-            scrollFlow.ScrollToStart();
+            ScrollFlow.ScrollToStart();
             LoadComponentAsync(display, loaded =>
             {
-                content.Child = loaded;
+                Child = loaded;
-                loading.Hide();
+                Loading.Hide();
             }, (cancellationToken = new CancellationTokenSource()).Token);
         }
 

osu.Game/Overlays/RankingsOverlay.cs

@@ -4,96 +4,41 @@
 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.Overlays.Rankings;
 using osu.Game.Users;
 using osu.Game.Rulesets;
 using osu.Game.Online.API;
 using System.Threading;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API.Requests;
 using osu.Game.Overlays.Rankings.Tables;
 
 namespace osu.Game.Overlays
 {
-    public class RankingsOverlay : FullscreenOverlay<RankingsOverlayHeader>
+    public class RankingsOverlay : WebOverlay<RankingsOverlayHeader>
     {
         protected Bindable<Country> Country => Header.Country;
 
         protected Bindable<RankingsScope> Scope => Header.Current;
 
-        private readonly OverlayScrollContainer scrollFlow;
-        private readonly Container contentContainer;
-        private readonly LoadingLayer loading;
-        private readonly Box background;
-
         private APIRequest lastRequest;
         private CancellationTokenSource cancellationToken;
 
         [Resolved]
         private IAPIProvider api { get; set; }
 
-        public RankingsOverlay()
+        [Resolved]
-            : base(OverlayColourScheme.Green, new RankingsOverlayHeader
+        private Bindable<RulesetInfo> ruleset { get; set; }
-            {
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-                Depth = -float.MaxValue
-            })
-        {
-            loading = new LoadingLayer(true);
 
-            Children = new Drawable[]
+        public RankingsOverlay()
-            {
+            : base(OverlayColourScheme.Green)
-                background = new Box
+        {
-                {
-                    RelativeSizeAxes = Axes.Both
-                },
-                scrollFlow = new OverlayScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    ScrollbarVisible = false,
-                    Child = new FillFlowContainer
-                    {
-                        AutoSizeAxes = Axes.Y,
-                        RelativeSizeAxes = Axes.X,
-                        Direction = FillDirection.Vertical,
-                        Children = new Drawable[]
-                        {
-                            Header,
-                            new Container
-                            {
-                                RelativeSizeAxes = Axes.X,
-                                AutoSizeAxes = Axes.Y,
-                                Children = new Drawable[]
-                                {
-                                    contentContainer = new Container
-                                    {
-                                        Anchor = Anchor.TopCentre,
-                                        Origin = Anchor.TopCentre,
-                                        AutoSizeAxes = Axes.Y,
-                                        RelativeSizeAxes = Axes.X,
-                                        Margin = new MarginPadding { Bottom = 10 }
-                                    },
-                                }
-                            }
-                        }
-                    }
-                },
-                loading
-            };
         }
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            background.Colour = ColourProvider.Background5;
         }
 
-        [Resolved]
-        private Bindable<RulesetInfo> ruleset { get; set; }
-
         protected override void LoadComplete()
         {
             base.LoadComplete();
@@ -129,6 +74,8 @@ namespace osu.Game.Overlays
             Scheduler.AddOnce(loadNewContent);
         }
 
+        protected override RankingsOverlayHeader CreateHeader() => new RankingsOverlayHeader();
+
         public void ShowCountry(Country requested)
         {
             if (requested == null)
@@ -147,7 +94,7 @@ namespace osu.Game.Overlays
 
         private void loadNewContent()
         {
-            loading.Show();
+            Loading.Show();
 
             cancellationToken?.Cancel();
             lastRequest?.Cancel();
@@ -218,19 +165,19 @@ namespace osu.Game.Overlays
 
         private void loadContent(Drawable content)
         {
-            scrollFlow.ScrollToStart();
+            ScrollFlow.ScrollToStart();
 
             if (content == null)
             {
-                contentContainer.Clear();
+                Clear();
-                loading.Hide();
+                Loading.Hide();
                 return;
             }
 
             LoadComponentAsync(content, loaded =>
             {
-                loading.Hide();
+                Loading.Hide();
-                contentContainer.Child = loaded;
+                Child = loaded;
             }, (cancellationToken = new CancellationTokenSource()).Token);
         }
 

osu.Game/Overlays/UserProfileOverlay.cs

@@ -15,6 +15,7 @@ using osu.Game.Overlays.Profile;
 using osu.Game.Overlays.Profile.Sections;
 using osu.Game.Users;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
@@ -29,10 +30,14 @@ namespace osu.Game.Overlays
         public const float CONTENT_X_MARGIN = 70;
 
         public UserProfileOverlay()
-            : base(OverlayColourScheme.Pink, new ProfileHeader())
+            : base(OverlayColourScheme.Pink)
         {
         }
 
+        protected override ProfileHeader CreateHeader() => new ProfileHeader();
+
+        protected override Color4 GetBackgroundColour() => ColourProvider.Background6;
+
         public void ShowUser(int userId) => ShowUser(new User { Id = userId });
 
         public void ShowUser(User user, bool fetchOnline = true)
@@ -72,12 +77,6 @@ namespace osu.Game.Overlays
                 Origin = Anchor.TopCentre,
             };
 
-            Add(new Box
-            {
-                RelativeSizeAxes = Axes.Both,
-                Colour = ColourProvider.Background6
-            });
-
             Add(sectionsContainer = new ProfileSectionsContainer
             {
                 ExpandableHeader = Header,

osu.Game/Overlays/WebOverlay.cs

@@ -0,0 +1,50 @@
+// 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.Framework.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Overlays
+{
+    public abstract class WebOverlay<T> : FullscreenOverlay<T>
+        where T : OverlayHeader
+    {
+        protected override Container<Drawable> Content => content;
+
+        protected readonly OverlayScrollContainer ScrollFlow;
+        protected readonly LoadingLayer Loading;
+        private readonly Container content;
+
+        protected WebOverlay(OverlayColourScheme colourScheme)
+            : base(colourScheme)
+        {
+            FillFlowContainer flow = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Y,
+                RelativeSizeAxes = Axes.X,
+                Direction = FillDirection.Vertical
+            };
+
+            if (Header != null)
+                flow.Add(Header.With(h => h.Depth = -float.MaxValue));
+
+            flow.Add(content = new Container
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y
+            });
+
+            base.Content.AddRange(new Drawable[]
+            {
+                ScrollFlow = new OverlayScrollContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    ScrollbarVisible = false,
+                    Child = flow
+                },
+                Loading = new LoadingLayer(true)
+            });
+        }
+    }
+}