Moves HumanoidProfileEditor and CharacterSetupGui to XAML (#4866)

* Moves HumanoidProfileEditor to XAML

* Moves CharacterSetupGui to XAML

Content.Client/Preferences/UI/CharacterSetupGui.xaml

@@ -0,0 +1,45 @@
+<Control xmlns="https://spacestation14.io"
+         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+         xmlns:gfx="clr-namespace:Robust.Client.Graphics;assembly=Robust.Client"
+         xmlns:magicmirror="clr-namespace:Content.Client.CharacterAppearance"
+         xmlns:parallax="clr-namespace:Content.Client.Parallax"
+         xmlns:prefUi="clr-namespace:Content.Client.Preferences.UI"
+         xmlns:style="clr-namespace:Content.Client.Stylesheets">
+    <parallax:ParallaxControl />
+    <Control Margin="20 20 20 20">
+        <PanelContainer Name="CBackgroundPanel" />
+        <BoxContainer Orientation="Vertical" SeparationOverride="0">
+            <BoxContainer Orientation="Horizontal" MinSize="0 40">
+                <Label Text="{Loc 'character-setup-gui-character-setup-label'}"
+                       Margin="8 0 0 0" VAlign="Center"
+                       StyleClasses="{x:Static style:StyleNano.StyleClassLabelHeadingBigger}" />
+                <Button Name="CRulesButton" HorizontalExpand="True"
+                        Text="{Loc 'character-setup-gui-character-setup-rules-button'}"
+                        StyleClasses="{x:Static style:StyleNano.StyleClassButtonBig}"
+                        HorizontalAlignment="Right" />
+                <Button Name="CSaveButton"
+                        Text="{Loc 'character-setup-gui-character-setup-save-button'}"
+                        StyleClasses="{x:Static style:StyleNano.StyleClassButtonBig}"/>
+                <Button Name="CCloseButton"
+                        Text="{Loc 'character-setup-gui-character-setup-close-button'}"
+                        StyleClasses="{x:Static style:StyleNano.StyleClassButtonBig}"/>
+            </BoxContainer>
+            <PanelContainer>
+                <PanelContainer.PanelOverride>
+                    <gfx:StyleBoxFlat BackgroundColor="{x:Static style:StyleNano.NanoGold}" ContentMarginTopOverride="2" />
+                </PanelContainer.PanelOverride>
+            </PanelContainer>
+            <BoxContainer Orientation="Horizontal" VerticalExpand="True" SeparationOverride="0">
+                <ScrollContainer MinSize="325 0" Margin="5 5 0 0">
+                    <BoxContainer Name="CCharacters" Orientation="Vertical" />
+                </ScrollContainer>
+                <PanelContainer MinSize="2 0">
+                    <PanelContainer.PanelOverride>
+                        <gfx:StyleBoxFlat BackgroundColor="{x:Static style:StyleNano.NanoGold}" ContentMarginTopOverride="2" />
+                    </PanelContainer.PanelOverride>
+                </PanelContainer>
+                <BoxContainer Name="CCharEditor" />
+            </BoxContainer>
+        </BoxContainer>
+    </Control>
+</Control>

Content.Client/Preferences/UI/CharacterSetupGui.xaml.cs

@@ -7,11 +7,13 @@ using Content.Client.Resources;
 using Content.Client.Stylesheets;
 using Content.Shared.Preferences;
 using Content.Shared.Roles;
+using Robust.Client.AutoGenerated;
 using Robust.Client.GameObjects;
 using Robust.Client.Graphics;
 using Robust.Client.ResourceManagement;
 using Robust.Client.UserInterface;
 using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
 using Robust.Shared.GameObjects;
 using Robust.Shared.IoC;
 using Robust.Shared.Localization;
@@ -22,16 +24,19 @@ using static Robust.Client.UserInterface.Controls.BoxContainer;
 
 namespace Content.Client.Preferences.UI
 {
-    public class CharacterSetupGui : Control
+    [GenerateTypedNameReferences]
+    public partial class CharacterSetupGui : Control
     {
-        private readonly BoxContainer _charactersVBox;
-        private readonly Button _createNewCharacterButton;
-        private readonly IEntityManager _entityManager;
-        private readonly HumanoidProfileEditor _humanoidProfileEditor;
         private readonly IClientPreferencesManager _preferencesManager;
-        public readonly Button CloseButton;
+        private readonly IEntityManager _entityManager;
-        public readonly Button SaveButton;
+        private PanelContainer _backgroundPanel => CBackgroundPanel;
-        public readonly Button RulesButton;
+        private BoxContainer _charactersVBox => CCharacters;
+        private Button _createNewCharacterButton;
+        private HumanoidProfileEditor _humanoidProfileEditor;
+        private BoxContainer _humanoidProfileEditorContainer => CCharEditor;
+        public Button CloseButton => CCloseButton;
+        public Button SaveButton => CSaveButton;
+        public Button RulesButton => CRulesButton;
 
         public CharacterSetupGui(
             IEntityManager entityManager,
@@ -39,16 +44,9 @@ namespace Content.Client.Preferences.UI
             IClientPreferencesManager preferencesManager,
             IPrototypeManager prototypeManager)
         {
-            AddChild(new ParallaxControl());
+            RobustXamlLoader.Load(this);
-
             _entityManager = entityManager;
             _preferencesManager = preferencesManager;
-            var margin = new Control
-            {
-                Margin = new Thickness(20),
-            };
-
-            AddChild(margin);
 
             var panelTex = resourceCache.GetTexture("/Textures/Interface/Nano/button.svg.96dpi.png");
             var back = new StyleBoxTexture
@@ -58,89 +56,7 @@ namespace Content.Client.Preferences.UI
             };
             back.SetPatchMargin(StyleBox.Margin.All, 10);
 
-            var panel = new PanelContainer
+            _backgroundPanel.PanelOverride = back;
-            {
-                PanelOverride = back
-            };
-
-            margin.AddChild(panel);
-
-            var vBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical,
-                SeparationOverride = 0
-            };
-
-            margin.AddChild(vBox);
-
-            var topHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                MinSize = (0, 40),
-                Children =
-                {
-                    new Label
-                    {
-                        Margin = new Thickness(8, 0, 0, 0),
-                        Text = Loc.GetString("character-setup-gui-character-setup-label"),
-                        StyleClasses = {StyleNano.StyleClassLabelHeadingBigger},
-                        VAlign = Label.VAlignMode.Center,
-                    },
-                    (RulesButton = new Button
-                    {
-                        HorizontalExpand = true,
-                        HorizontalAlignment = HAlignment.Right,
-                        Text = Loc.GetString("character-setup-gui-character-setup-rules-button"),
-                        StyleClasses = {StyleNano.StyleClassButtonBig},
-
-                    }),
-                    (SaveButton = new Button
-                    {
-                        Text = Loc.GetString("character-setup-gui-character-setup-save-button"),
-                        StyleClasses = {StyleNano.StyleClassButtonBig},
-
-                    }),
-                    (CloseButton = new Button
-                    {
-                        Text = Loc.GetString("character-setup-gui-character-setup-close-button"),
-                        StyleClasses = {StyleNano.StyleClassButtonBig},
-                    })
-                }
-            };
-
-            vBox.AddChild(topHBox);
-
-            vBox.AddChild(new PanelContainer
-            {
-                PanelOverride = new StyleBoxFlat
-                {
-                    BackgroundColor = StyleNano.NanoGold,
-                    ContentMarginTopOverride = 2
-                }
-            });
-
-            var hBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                VerticalExpand = true,
-                SeparationOverride = 0
-            };
-            vBox.AddChild(hBox);
-
-            _charactersVBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-
-            hBox.AddChild(new ScrollContainer
-            {
-                MinSize = (325, 0),
-                Margin = new Thickness(5, 5, 0, 0),
-                Children =
-                {
-                    _charactersVBox
-                }
-            });
 
             _createNewCharacterButton = new Button
             {
@@ -153,14 +69,9 @@ namespace Content.Client.Preferences.UI
                 args.Event.Handle();
             };
 
-            hBox.AddChild(new PanelContainer
-            {
-                PanelOverride = new StyleBoxFlat {BackgroundColor = StyleNano.NanoGold},
-                MinSize = (2, 0)
-            });
             _humanoidProfileEditor = new HumanoidProfileEditor(preferencesManager, prototypeManager, entityManager);
             _humanoidProfileEditor.OnProfileChanged += ProfileChanged;
-            hBox.AddChild(_humanoidProfileEditor);
+            _humanoidProfileEditorContainer.AddChild(_humanoidProfileEditor);
 
             UpdateUI();
 

Content.Client/Preferences/UI/HumanoidProfileEditor.xaml

@@ -0,0 +1,131 @@
+<Control xmlns="https://spacestation14.io"
+         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+         xmlns:magicmirror="clr-namespace:Content.Client.CharacterAppearance"
+         xmlns:prefUi="clr-namespace:Content.Client.Preferences.UI">
+    <BoxContainer Orientation="Horizontal">
+        <!-- Left side -->
+        <BoxContainer Orientation="Vertical" Margin="10 10 10 10">
+            <!-- Middle container -->
+            <BoxContainer Orientation="Horizontal" SeparationOverride="10">
+                <!-- Name box-->
+                <BoxContainer Orientation="Vertical">
+                    <prefUi:HighlightedContainer>
+                        <BoxContainer Orientation="Vertical">
+                            <prefUi:HighlightedContainer>
+                                <BoxContainer Orientation="Vertical">
+                                    <BoxContainer Orientation="Horizontal" VerticalExpand="True">
+                                        <Label Text="{Loc 'humanoid-profile-editor-name-label'}" />
+                                        <LineEdit Name="CNameEdit" MinSize="270 0" VerticalAlignment="Center" />
+                                        <Button Name="CNameRandomize" Text="{Loc 'humanoid-profile-editor-name-random-button'}" />
+                                    </BoxContainer>
+                                    <Button Name="CRandomizeEverything" HorizontalAlignment="Center"
+                                            HorizontalExpand="False" MaxWidth="256"
+                                            Text="{Loc 'humanoid-profile-editor-randomize-everything-button'}" />
+                                    <RichTextLabel Name="CWarningLabel" HorizontalExpand="False"
+                                                   VerticalExpand="True" MaxWidth="425"
+                                                   HorizontalAlignment="Left" />
+                                </BoxContainer>
+                            </prefUi:HighlightedContainer>
+                        </BoxContainer>
+                    </prefUi:HighlightedContainer>
+                </BoxContainer>
+                <!-- Import/Export -->
+                <BoxContainer Orientation="Vertical">
+                    <prefUi:HighlightedContainer>
+                        <BoxContainer Orientation="Horizontal">
+                            <Button Text="{Loc 'humanoid-profile-editor-import-button'}" Disabled="True"
+                                    ToolTip="{Loc 'generic-not-yet-implemented'}" />
+                            <Button Text="{Loc 'humanoid-profile-editor-export-button'}" Disabled="True"
+                                    ToolTip="{Loc 'generic-not-yet-implemented'}" />
+                        </BoxContainer>
+                    </prefUi:HighlightedContainer>
+                    <!-- Save -->
+                    <prefUi:HighlightedContainer>
+                        <Button Name="CSaveButton" Text="{Loc 'humanoid-profile-editor-save-button'}" HorizontalAlignment="Center" />
+                    </prefUi:HighlightedContainer>
+                </BoxContainer>
+            </BoxContainer>
+            <!-- tabContainer -->
+            <TabContainer Name="CTabContainer" VerticalExpand="True">
+                <BoxContainer Orientation="Vertical">
+                    <ScrollContainer VerticalExpand="True">
+                        <!-- appearanceList -->
+                        <BoxContainer Orientation="Vertical">
+                            <!-- SexAndAgeRow -->
+                            <BoxContainer Orientation="Horizontal" SeparationOverride="10">
+                                <!-- Sex -->
+                                <prefUi:HighlightedContainer>
+                                    <BoxContainer Orientation="Horizontal">
+                                        <Label Text="{Loc 'humanoid-profile-editor-sex-label'}" />
+                                        <Button Name="CSexMale" Text="{Loc 'humanoid-profile-editor-sex-male-button'}" />
+                                        <Button Name="CSexFemale" Text="{Loc 'humanoid-profile-editor-sex-female-button'}" />
+                                    </BoxContainer>
+                                </prefUi:HighlightedContainer>
+                                <!-- Age -->
+                                <prefUi:HighlightedContainer>
+                                    <BoxContainer Orientation="Horizontal">
+                                        <Label Text="{Loc 'humanoid-profile-editor-age-label'}" />
+                                        <LineEdit Name="CAgeEdit" MinSize="40 0" />
+                                    </BoxContainer>
+                                </prefUi:HighlightedContainer>
+                                <!-- Gender -->
+                                <prefUi:HighlightedContainer>
+                                    <BoxContainer Orientation="Horizontal">
+                                        <Label Text="{Loc 'humanoid-profile-editor-pronouns-label'}" />
+                                        <OptionButton Name="CPronounsButton" />
+                                    </BoxContainer>
+                                </prefUi:HighlightedContainer>
+                            </BoxContainer>
+                            <!-- Hair -->
+                            <prefUi:HighlightedContainer>
+                                <BoxContainer Orientation="Horizontal">
+                                    <magicmirror:HairStylePicker Name="CHairStylePicker" HorizontalAlignment="Center" />
+                                    <magicmirror:HairStylePicker Name="CFacialHairPicker" />
+                                </BoxContainer>
+                            </prefUi:HighlightedContainer>
+                            <!-- Clothing -->
+                            <prefUi:HighlightedContainer>
+                                <BoxContainer Orientation="Horizontal">
+                                    <Label Text="{Loc 'humanoid-profile-editor-clothing-label'}" />
+                                    <OptionButton Name="CClothingButton" />
+                                </BoxContainer>
+                            </prefUi:HighlightedContainer>
+                            <!-- Backpack -->
+                            <prefUi:HighlightedContainer>
+                                <BoxContainer Orientation="Horizontal">
+                                    <Label Text="{Loc 'humanoid-profile-editor-backpack-label'}" />
+                                    <OptionButton Name="CBackpackButton" />
+                                </BoxContainer>
+                            </prefUi:HighlightedContainer>
+                            <!-- Eyes -->
+                            <prefUi:HighlightedContainer>
+                                <BoxContainer Orientation="Vertical">
+                                    <Label Text="{Loc 'humanoid-profile-editor-eyes-label'}" />
+                                    <magicmirror:EyeColorPicker Name="CEyeColorPicker" />
+                                </BoxContainer>
+                            </prefUi:HighlightedContainer>
+                        </BoxContainer>
+                    </ScrollContainer>
+                </BoxContainer>
+                <BoxContainer Orientation="Vertical">
+                    <!-- Jobs -->
+                    <OptionButton Name="CPreferenceUnavailableButton" />
+                    <ScrollContainer VerticalExpand="True">
+                        <BoxContainer Name="CJobList" Orientation="Vertical" />
+                    </ScrollContainer>
+                </BoxContainer>
+                <BoxContainer Orientation="Vertical">
+                    <!-- Antags -->
+                    <ScrollContainer VerticalExpand="True">
+                        <BoxContainer Name="CAntagList" Orientation="Vertical" />
+                    </ScrollContainer>
+                </BoxContainer>
+            </TabContainer>
+        </BoxContainer>
+        <!-- Right side -->
+        <BoxContainer Orientation="Vertical" VerticalExpand="True" HorizontalExpand="True">
+            <Control Name="CSpriteViewFront" VerticalExpand="True" SizeFlagsStretchRatio="1" />
+            <Control Name="CSpriteViewSide" VerticalExpand="True" SizeFlagsStretchRatio="1" />
+        </BoxContainer>
+    </BoxContainer>
+</Control>

Content.Client/Preferences/UI/HumanoidProfileEditor.xaml.cs

@@ -9,10 +9,12 @@ using Content.Shared.CharacterAppearance;
 using Content.Shared.GameTicking;
 using Content.Shared.Preferences;
 using Content.Shared.Roles;
+using Robust.Client.AutoGenerated;
 using Robust.Client.GameObjects;
 using Robust.Client.Graphics;
 using Robust.Client.UserInterface;
 using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
 using Robust.Client.Utility;
 using Robust.Shared.Enums;
 using Robust.Shared.GameObjects;
@@ -28,9 +30,11 @@ using static Robust.Client.UserInterface.Controls.BoxContainer;
 
 namespace Content.Client.Preferences.UI
 {
-    public partial class HumanoidProfileEditor : Control
+    public class HighlightedContainer : PanelContainer
     {
-        private static readonly StyleBoxFlat HighlightedStyle = new()
+        public HighlightedContainer()
+        {
+            PanelOverride = new StyleBoxFlat()
             {
                 BackgroundColor = new Color(47, 47, 53),
                 ContentMarginTopOverride = 10,
@@ -38,27 +42,40 @@ namespace Content.Client.Preferences.UI
                 ContentMarginLeftOverride = 10,
                 ContentMarginRightOverride = 10
             };
+        }
+    }
 
-        private readonly LineEdit _ageEdit;
+    [GenerateTypedNameReferences]
-        private readonly LineEdit _nameEdit;
+    public partial class HumanoidProfileEditor : Control
+    {
+        private LineEdit _ageEdit => CAgeEdit;
+        private LineEdit _nameEdit => CNameEdit;
+        private Button _nameRandomButton => CNameRandomize;
+        private Button _randomizeEverythingButton => CRandomizeEverything;
+        private RichTextLabel _warningLabel => CWarningLabel;
         private readonly IClientPreferencesManager _preferencesManager;
-        private readonly Button _saveButton;
+        private Button _saveButton => CSaveButton;
-        private readonly Button _sexFemaleButton;
+        private Button _sexFemaleButton => CSexFemale;
-        private readonly Button _sexMaleButton;
+        private Button _sexMaleButton => CSexMale;
-        private readonly OptionButton _genderButton;
+        private OptionButton _genderButton => CPronounsButton;
-        private readonly OptionButton _clothingButton;
+        private OptionButton _clothingButton => CClothingButton;
-        private readonly OptionButton _backpackButton;
+        private OptionButton _backpackButton => CBackpackButton;
-        private readonly HairStylePicker _hairPicker;
+        private HairStylePicker _hairPicker => CHairStylePicker;
-        private readonly HairStylePicker _facialHairPicker;
+        private HairStylePicker _facialHairPicker => CFacialHairPicker;
-        private readonly EyeColorPicker _eyesPicker;
+        private EyeColorPicker _eyesPicker => CEyeColorPicker;
 
+        private TabContainer _tabContainer => CTabContainer;
+        private BoxContainer _jobList => CJobList;
+        private BoxContainer _antagList => CAntagList;
         private readonly List<JobPrioritySelector> _jobPriorities;
-        private readonly OptionButton _preferenceUnavailableButton;
+        private OptionButton _preferenceUnavailableButton => CPreferenceUnavailableButton;
         private readonly Dictionary<string, BoxContainer> _jobCategories;
 
         private readonly List<AntagPreferenceSelector> _antagPreferences;
 
         private readonly IEntity _previewDummy;
+        private Control _previewSpriteControl => CSpriteViewFront;
+        private Control _previewSpriteSideControl => CSpriteViewSide;
         private readonly SpriteView _previewSprite;
         private readonly SpriteView _previewSpriteSide;
 
@@ -72,147 +89,36 @@ namespace Content.Client.Preferences.UI
         public HumanoidProfileEditor(IClientPreferencesManager preferencesManager, IPrototypeManager prototypeManager,
             IEntityManager entityManager)
         {
+            RobustXamlLoader.Load(this);
             _random = IoCManager.Resolve<IRobustRandom>();
             _prototypeManager = prototypeManager;
 
             _preferencesManager = preferencesManager;
 
-            var hbox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            AddChild(hbox);
-
             #region Left
 
-            var vBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical,
-                Margin = new Thickness(10)
-            };
-            hbox.AddChild(vBox);
-
-            var middleContainer = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                SeparationOverride = 10
-            };
-            vBox.AddChild(middleContainer);
-
-            var leftColumn = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            middleContainer.AddChild(leftColumn);
-
             #region Randomize
 
-            var randomizePanel = HighlightedContainer();
-            var randomizeVbox = new BoxContainer() { Orientation = LayoutOrientation.Vertical };
-            randomizePanel.AddChild(randomizeVbox);
-            leftColumn.AddChild(randomizePanel);
-
             #endregion Randomize
 
             #region Name
 
-            var namePanel = HighlightedContainer();
-            var nameHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                VerticalExpand = true
-            };
-            var nameLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-name-label") };
-            _nameEdit = new LineEdit
-            {
-                MinSize = (270, 0),
-                VerticalAlignment = VAlignment.Center
-            };
             _nameEdit.OnTextChanged += args => { SetName(args.Text); };
-            var nameRandomButton = new Button
+            _nameRandomButton.OnPressed += args => RandomizeName();
-            {
+            _randomizeEverythingButton.OnPressed += args => { RandomizeEverything(); };
-                Text = Loc.GetString("humanoid-profile-editor-name-random-button"),
+            _warningLabel.SetMarkup($"[color=red]{Loc.GetString("humanoid-profile-editor-naming-rules-warning")}[/color]");
-            };
-            nameRandomButton.OnPressed += args => RandomizeName();
-            nameHBox.AddChild(nameLabel);
-            nameHBox.AddChild(_nameEdit);
-            nameHBox.AddChild(nameRandomButton);
-            randomizeVbox.AddChild(nameHBox);
-
-            var randomizeEverythingButton = new Button
-            {
-                HorizontalAlignment = HAlignment.Center,
-                HorizontalExpand = false,
-                MaxWidth = 256,
-                Text = Loc.GetString("humanoid-profile-editor-randomize-everything-button"),
-            };
-            randomizeEverythingButton.OnPressed += args => { RandomizeEverything(); };
-            randomizeVbox.AddChild(randomizeEverythingButton);
-
-            var warningLabel = new RichTextLabel()
-            {
-                HorizontalExpand = false,
-                VerticalExpand = true,
-                MaxWidth = 425,
-                HorizontalAlignment = HAlignment.Left,
-            };
-            warningLabel.SetMarkup($"[color=red]{Loc.GetString("humanoid-profile-editor-naming-rules-warning")}[/color]");
-            randomizeVbox.AddChild(warningLabel);
 
             #endregion Name
 
-            var tabContainer = new TabContainer {VerticalExpand = true};
-            vBox.AddChild(tabContainer);
-
             #region Appearance
 
-            var appearanceList = new BoxContainer
+            _tabContainer.SetTabTitle(0, Loc.GetString("humanoid-profile-editor-appearance-tab"));
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-
-            var appearanceVBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical,
-                Children =
-                {
-                    new ScrollContainer
-                    {
-                        VerticalExpand = true,
-                        Children =
-                        {
-                            appearanceList
-                        }
-                    }
-                }
-            };
-            tabContainer.AddChild(appearanceVBox);
-            tabContainer.SetTabTitle(0, Loc.GetString("humanoid-profile-editor-appearance-tab"));
-
-            var sexAndAgeRow = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                SeparationOverride = 10
-            };
-
-            appearanceList.AddChild(sexAndAgeRow);
 
             #region Sex
 
-            var sexPanel = HighlightedContainer();
-            var sexHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var sexLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-sex-label") };
-
             var sexButtonGroup = new ButtonGroup();
 
-            _sexMaleButton = new Button
+            _sexMaleButton.Group = sexButtonGroup;
-            {
-                Text = Loc.GetString("humanoid-profile-editor-sex-male-button"),
-                Group = sexButtonGroup
-            };
             _sexMaleButton.OnPressed += args =>
             {
                 SetSex(Sex.Male);
@@ -223,11 +129,7 @@ namespace Content.Client.Preferences.UI
                 }
             };
 
-            _sexFemaleButton = new Button
+            _sexFemaleButton.Group = sexButtonGroup;
-            {
-                Text = Loc.GetString("humanoid-profile-editor-sex-female-button"),
-                Group = sexButtonGroup
-            };
             _sexFemaleButton.OnPressed += _ =>
             {
                 SetSex(Sex.Female);
@@ -239,47 +141,21 @@ namespace Content.Client.Preferences.UI
                 }
             };
 
-            sexHBox.AddChild(sexLabel);
-            sexHBox.AddChild(_sexMaleButton);
-            sexHBox.AddChild(_sexFemaleButton);
-            sexPanel.AddChild(sexHBox);
-            sexAndAgeRow.AddChild(sexPanel);
-
             #endregion Sex
 
             #region Age
 
-            var agePanel = HighlightedContainer();
-            var ageHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var ageLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-age-label") };
-            _ageEdit = new LineEdit { MinSize = (40, 0) };
             _ageEdit.OnTextChanged += args =>
             {
                 if (!int.TryParse(args.Text, out var newAge))
                     return;
                 SetAge(newAge);
             };
-            ageHBox.AddChild(ageLabel);
-            ageHBox.AddChild(_ageEdit);
-            agePanel.AddChild(ageHBox);
-            sexAndAgeRow.AddChild(agePanel);
 
             #endregion Age
 
             #region Gender
 
-            var genderPanel = HighlightedContainer();
-            var genderHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var genderLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-pronouns-label") };
-
-            _genderButton = new OptionButton();
-
             _genderButton.AddItem(Loc.GetString("humanoid-profile-editor-pronouns-male-text"), (int) Gender.Male);
             _genderButton.AddItem(Loc.GetString("humanoid-profile-editor-pronouns-female-text"), (int) Gender.Female);
             _genderButton.AddItem(Loc.GetString("humanoid-profile-editor-pronouns-epicene-text"), (int) Gender.Epicene);
@@ -291,25 +167,10 @@ namespace Content.Client.Preferences.UI
                 SetGender((Gender) args.Id);
             };
 
-            genderHBox.AddChild(genderLabel);
-            genderHBox.AddChild(_genderButton);
-            genderPanel.AddChild(genderHBox);
-            sexAndAgeRow.AddChild(genderPanel);
-
             #endregion Gender
 
             #region Hair
 
-            var hairPanel = HighlightedContainer();
-            var hairHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-
-            _hairPicker = new HairStylePicker
-            {
-                HorizontalAlignment = HAlignment.Center
-            };
             _hairPicker.Populate();
 
             _hairPicker.OnHairStylePicked += newStyle =>
@@ -330,7 +191,6 @@ namespace Content.Client.Preferences.UI
                 IsDirty = true;
             };
 
-            _facialHairPicker = new HairStylePicker();
             _facialHairPicker.Populate();
 
             _facialHairPicker.OnHairStylePicked += newStyle =>
@@ -351,25 +211,10 @@ namespace Content.Client.Preferences.UI
                 IsDirty = true;
             };
 
-            hairHBox.AddChild(_hairPicker);
-            hairHBox.AddChild(_facialHairPicker);
-
-            hairPanel.AddChild(hairHBox);
-            appearanceList.AddChild(hairPanel);
-
             #endregion Hair
 
             #region Clothing
 
-            var clothingPanel = HighlightedContainer();
-            var clothingHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var clothingLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-clothing-label") };
-
-            _clothingButton = new OptionButton();
-
             _clothingButton.AddItem(Loc.GetString("humanoid-profile-editor-preference-jumpsuit"), (int) ClothingPreference.Jumpsuit);
             _clothingButton.AddItem(Loc.GetString("humanoid-profile-editor-preference-jumpskirt"), (int) ClothingPreference.Jumpskirt);
 
@@ -379,24 +224,10 @@ namespace Content.Client.Preferences.UI
                 SetClothing((ClothingPreference) args.Id);
             };
 
-            clothingHBox.AddChild(clothingLabel);
-            clothingHBox.AddChild(_clothingButton);
-            clothingPanel.AddChild(clothingHBox);
-            appearanceList.AddChild(clothingPanel);
-
             #endregion Clothing
 
             #region Backpack
 
-            var backpackPanel = HighlightedContainer();
-            var backpackHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var backpackLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-backpack-label") };
-
-            _backpackButton = new OptionButton();
-
             _backpackButton.AddItem(Loc.GetString("humanoid-profile-editor-preference-backpack"), (int) BackpackPreference.Backpack);
             _backpackButton.AddItem(Loc.GetString("humanoid-profile-editor-preference-satchel"), (int) BackpackPreference.Satchel);
             _backpackButton.AddItem(Loc.GetString("humanoid-profile-editor-preference-duffelbag"), (int) BackpackPreference.Duffelbag);
@@ -407,24 +238,10 @@ namespace Content.Client.Preferences.UI
                 SetBackpack((BackpackPreference) args.Id);
             };
 
-            backpackHBox.AddChild(backpackLabel);
-            backpackHBox.AddChild(_backpackButton);
-            backpackPanel.AddChild(backpackHBox);
-            appearanceList.AddChild(backpackPanel);
-
             #endregion Backpack
 
             #region Eyes
 
-            var eyesPanel = HighlightedContainer();
-            var eyesVBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            var eyesLabel = new Label { Text = Loc.GetString("humanoid-profile-editor-eyes-label") };
-
-            _eyesPicker = new EyeColorPicker();
-
             _eyesPicker.OnEyeColorPicked += newColor =>
             {
                 if (Profile is null)
@@ -434,42 +251,13 @@ namespace Content.Client.Preferences.UI
                 IsDirty = true;
             };
 
-            eyesVBox.AddChild(eyesLabel);
-            eyesVBox.AddChild(_eyesPicker);
-            eyesPanel.AddChild(eyesVBox);
-            appearanceList.AddChild(eyesPanel);
-
             #endregion Eyes
 
             #endregion Appearance
 
             #region Jobs
 
-            var jobList = new BoxContainer
+            _tabContainer.SetTabTitle(1, Loc.GetString("humanoid-profile-editor-jobs-tab"));
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-
-                var jobVBox = new BoxContainer
-                {
-                    Orientation = LayoutOrientation.Vertical,
-                    Children =
-                    {
-                        (_preferenceUnavailableButton = new OptionButton()),
-                        new ScrollContainer
-                        {
-                            VerticalExpand = true,
-                            Children =
-                            {
-                                jobList
-                            }
-                        }
-                    }
-                };
-
-            tabContainer.AddChild(jobVBox);
-
-            tabContainer.SetTabTitle(1, Loc.GetString("humanoid-profile-editor-jobs-tab"));
 
             _preferenceUnavailableButton.AddItem(
                 Loc.GetString("humanoid-profile-editor-preference-unavailable-stay-in-lobby-button"),
@@ -532,7 +320,7 @@ namespace Content.Client.Preferences.UI
                         });
 
                         _jobCategories[department] = category;
-                        jobList.AddChild(category);
+                        _jobList.AddChild(category);
                     }
 
                     var selector = new JobPrioritySelector(job);
@@ -570,30 +358,7 @@ namespace Content.Client.Preferences.UI
 
             #region Antags
 
-            var antagList = new BoxContainer
+            _tabContainer.SetTabTitle(2, Loc.GetString("humanoid-profile-editor-antags-tab"));
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-
-                var antagVBox = new BoxContainer
-                {
-                    Orientation = LayoutOrientation.Vertical,
-                    Children =
-                    {
-                        new ScrollContainer
-                        {
-                            VerticalExpand = true,
-                            Children =
-                            {
-                                antagList
-                            }
-                        }
-                    }
-                };
-
-            tabContainer.AddChild(antagVBox);
-
-            tabContainer.SetTabTitle(2, Loc.GetString("humanoid-profile-editor-antags-tab"));
 
             _antagPreferences = new List<AntagPreferenceSelector>();
 
@@ -605,7 +370,7 @@ namespace Content.Client.Preferences.UI
                 }
 
                 var selector = new AntagPreferenceSelector(antag);
-                    antagList.AddChild(selector);
+                _antagList.AddChild(selector);
                 _antagPreferences.Add(selector);
 
                 selector.PreferenceChanged += preference =>
@@ -617,51 +382,9 @@ namespace Content.Client.Preferences.UI
 
             #endregion Antags
 
-            var rightColumn = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            middleContainer.AddChild(rightColumn);
-
-            #region Import/Export
-
-            var importExportPanelContainer = HighlightedContainer();
-            var importExportHBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal
-            };
-            var importButton = new Button
-            {
-                Text = Loc.GetString("humanoid-profile-editor-import-button"),
-                Disabled = true,
-                ToolTip = Loc.GetString("generic-not-yet-implemented")
-            };
-            var exportButton = new Button
-            {
-                Text = Loc.GetString("humanoid-profile-editor-export-button"),
-                Disabled = true,
-                ToolTip = Loc.GetString("generic-not-yet-implemented")
-            };
-            importExportHBox.AddChild(importButton);
-            importExportHBox.AddChild(exportButton);
-            importExportPanelContainer.AddChild(importExportHBox);
-            rightColumn.AddChild(importExportPanelContainer);
-
-            #endregion Import/Export
-
             #region Save
 
-            {
-                var panel = HighlightedContainer();
-                _saveButton = new Button
-                {
-                    Text = Loc.GetString("humanoid-profile-editor-save-button"),
-                    HorizontalAlignment = HAlignment.Center
-                };
             _saveButton.OnPressed += args => { Save(); };
-                panel.AddChild(_saveButton);
-                rightColumn.AddChild(panel);
-            }
 
             #endregion Save
 
@@ -669,26 +392,12 @@ namespace Content.Client.Preferences.UI
 
             #region Right
 
-            vBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical,
-                VerticalExpand = true,
-                HorizontalExpand = true,
-            };
-            hbox.AddChild(vBox);
-
             #region Preview
 
             _previewDummy = entityManager.SpawnEntity("MobHumanDummy", MapCoordinates.Nullspace);
             var sprite = _previewDummy.GetComponent<SpriteComponent>();
 
             // Front
-            var box = new Control()
-            {
-                VerticalExpand = true,
-                SizeFlagsStretchRatio = 1f,
-            };
-            vBox.AddChild(box);
             _previewSprite = new SpriteView
             {
                 Sprite = sprite,
@@ -697,15 +406,9 @@ namespace Content.Client.Preferences.UI
                 VerticalAlignment = VAlignment.Center,
                 SizeFlagsStretchRatio = 1
             };
-            box.AddChild(_previewSprite);
+            _previewSpriteControl.AddChild(_previewSprite);
 
             // Side
-            box = new Control()
-            {
-                VerticalExpand = true,
-                SizeFlagsStretchRatio = 1f,
-            };
-            vBox.AddChild(box);
             _previewSpriteSide = new SpriteView
             {
                 Sprite = sprite,
@@ -714,7 +417,7 @@ namespace Content.Client.Preferences.UI
                 VerticalAlignment = VAlignment.Center,
                 SizeFlagsStretchRatio = 1
             };
-            box.AddChild(_previewSpriteSide);
+            _previewSpriteSideControl.AddChild(_previewSpriteSide);
 
             #endregion Right
 
@@ -805,13 +508,6 @@ namespace Content.Client.Preferences.UI
             }
         }
 
-        private static Control HighlightedContainer()
-        {
-            return new PanelContainer
-            {
-                PanelOverride = HighlightedStyle
-            };
-        }
 
         private void UpdateNameEdit()
         {