Unify widget state image suffixes (disabled, pressed, hover, focus)

- Add a property for arrows image collection (in drop-downs, scrollbars
and production tabs)
- Add a property for separators image collection (in drop-downs)
- Add hover and disable states to the drop-down separator
- Unify button, textfield and checkbox state suffixes

OpenRA.Mods.Common/Widgets/ButtonWidget.cs

@@ -292,13 +292,10 @@ namespace OpenRA.Mods.Common.Widgets
 			if (string.IsNullOrEmpty(baseName))
 				return;
 
-			var variant = highlighted ? "-highlighted" : "";
+			var variantName = highlighted ? baseName + "-highlighted" : baseName;
-			var state = disabled ? "-disabled" :
+			var imageName = WidgetUtils.GetStatefulImageName(variantName, disabled, pressed, hover);
-						pressed ? "-pressed" :
-						hover ? "-hover" :
-						"";
 
-			WidgetUtils.DrawPanel(baseName + variant + state, rect);
+			WidgetUtils.DrawPanel(imageName, rect);
 		}
 	}
 }

OpenRA.Mods.Common/Widgets/CheckboxWidget.cs

@@ -44,7 +44,6 @@ namespace OpenRA.Mods.Common.Widgets
 		public override void Draw()
 		{
 			var disabled = IsDisabled();
-			var highlighted = IsHighlighted();
 			var font = Game.Renderer.Fonts[Font];
 			var color = GetColor();
 			var colordisabled = GetColorDisabled();
@@ -54,11 +53,8 @@ namespace OpenRA.Mods.Common.Widgets
 			var text = GetText();
 			var textSize = font.Measure(text);
 			var check = new Rectangle(rect.Location, new Size(Bounds.Height, Bounds.Height));
-			var state = disabled ? "checkbox-disabled" :
+			var baseName = IsHighlighted() ? "checkbox-highlighted" : "checkbox";
-						highlighted ? "checkbox-highlighted" :
+			var state = WidgetUtils.GetStatefulImageName(baseName, disabled, Depressed && HasPressedState, Ui.MouseOverWidget == this);
-						Depressed && HasPressedState ? "checkbox-pressed" :
-						Ui.MouseOverWidget == this ? "checkbox-hover" :
-						"checkbox";
 
 			WidgetUtils.DrawPanel(state, check);
 

OpenRA.Mods.Common/Widgets/DropDownButtonWidget.cs

@@ -11,6 +11,7 @@
 
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using OpenRA.Graphics;
 using OpenRA.Primitives;
 using OpenRA.Widgets;
@@ -19,7 +20,9 @@ namespace OpenRA.Mods.Common.Widgets
 {
 	public class DropDownButtonWidget : ButtonWidget
 	{
-		public readonly string SeparatorCollection = "dropdown";
+		public readonly string Decorations = "dropdown-decorations";
+		public readonly string DecorationMarker = "marker";
+		public readonly string Separators = "dropdown-separators";
 		public readonly string SeparatorImage = "separator";
 		public readonly TextAlign PanelAlign = TextAlign.Left;
 
@@ -45,13 +48,20 @@ namespace OpenRA.Mods.Common.Widgets
 			base.Draw();
 			var stateOffset = Depressed ? new int2(VisualHeight, VisualHeight) : new int2(0, 0);
 
-			var image = ChromeProvider.GetImage("scrollbar", IsDisabled() ? "down_pressed" : "down_arrow");
 			var rb = RenderBounds;
+			var isDisabled = IsDisabled();
+			var isHover = Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget);
 
-			WidgetUtils.DrawRGBA(image, stateOffset + new float2(rb.Right - (int)((rb.Height + image.Size.X) / 2), rb.Top + (int)((rb.Height - image.Size.Y) / 2)));
+			var markerImageName = WidgetUtils.GetStatefulImageName(DecorationMarker, isDisabled, Depressed, isHover);
+			var arrowImage = ChromeProvider.GetImage(Decorations, markerImageName) ?? ChromeProvider.GetImage(Decorations, DecorationMarker);
 
-			var separator = ChromeProvider.GetImage(SeparatorCollection, SeparatorImage);
+			WidgetUtils.DrawRGBA(arrowImage, stateOffset + new float2(rb.Right - (int)((rb.Height + arrowImage.Size.X) / 2), rb.Top + (int)((rb.Height - arrowImage.Size.Y) / 2)));
-			WidgetUtils.DrawRGBA(separator, stateOffset + new float2(-3, 0) + new float2(rb.Right - rb.Height + 4, rb.Top + (rb.Height - separator.Size.Y) / 2));
+
+			var separatorImageName = WidgetUtils.GetStatefulImageName(SeparatorImage, isDisabled, Depressed, isHover);
+			var separatorImage = ChromeProvider.GetImage(Separators, separatorImageName) ?? ChromeProvider.GetImage(Separators, SeparatorImage);
+
+			if (separatorImage != null)
+				WidgetUtils.DrawRGBA(separatorImage, stateOffset + new float2(-3, 0) + new float2(rb.Right - rb.Height + 4, rb.Top + (int)((rb.Height - separatorImage.Size.Y) / 2)));
 		}
 
 		public override Widget Clone() { return new DropDownButtonWidget(this); }

OpenRA.Mods.Common/Widgets/HotkeyEntryWidget.cs

@@ -128,10 +128,7 @@ namespace OpenRA.Mods.Common.Widgets
 
 			var disabled = IsDisabled();
 			var valid = IsValid();
-			var state = disabled ? "textfield-disabled" :
+			var state = WidgetUtils.GetStatefulImageName("textfield", disabled, false, Ui.MouseOverWidget == this, HasKeyboardFocus);
-				HasKeyboardFocus ? "textfield-focused" :
-					Ui.MouseOverWidget == this ? "textfield-hover" :
-					"textfield";
 
 			WidgetUtils.DrawPanel(state, RenderBounds);
 

OpenRA.Mods.Common/Widgets/ProductionTabsWidget.cs

@@ -83,6 +83,9 @@ namespace OpenRA.Mods.Common.Widgets
 
 		public string Button = "button";
 		public string Background = "panel-black";
+		public readonly string Decorations = "scrollpanel-decorations";
+		public readonly string DecorationScrollLeft = "left";
+		public readonly string DecorationScrollRight = "right";
 
 		int contentWidth = 0;
 		float listOffset = 0;
@@ -182,9 +185,14 @@ namespace OpenRA.Mods.Common.Widgets
 			ButtonWidget.DrawBackground(Button, leftButtonRect, leftDisabled, leftPressed, leftHover, false);
 			ButtonWidget.DrawBackground(Button, rightButtonRect, rightDisabled, rightPressed, rightHover, false);
 
-			WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", leftPressed || leftDisabled ? "left_pressed" : "left_arrow"),
+			var leftArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollLeft, leftDisabled, leftPressed, leftHover);
+			var leftArrowImage = ChromeProvider.GetImage(Decorations, leftArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollLeft);
+			WidgetUtils.DrawRGBA(leftArrowImage,
 				new float2(leftButtonRect.Left + 2, leftButtonRect.Top + 2));
-			WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", rightPressed || rightDisabled ? "right_pressed" : "right_arrow"),
+
+			var rightArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollRight, rightDisabled, rightPressed, rightHover);
+			var rightArrowImage = ChromeProvider.GetImage(Decorations, rightArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollRight);
+			WidgetUtils.DrawRGBA(rightArrowImage,
 				new float2(rightButtonRect.Left + 2, rightButtonRect.Top + 2));
 
 			// Draw tab buttons

OpenRA.Mods.Common/Widgets/ScrollPanelWidget.cs

@@ -48,6 +48,9 @@ namespace OpenRA.Mods.Common.Widgets
 		public string Background = "scrollpanel-bg";
 		public string ScrollBarBackground = "scrollpanel-bg";
 		public string Button = "scrollpanel-button";
+		public readonly string Decorations = "scrollpanel-decorations";
+		public readonly string DecorationScrollUp = "up";
+		public readonly string DecorationScrollDown = "down";
 		public int ContentHeight;
 		public ILayout Layout;
 		public int MinimumThumbSize = 10;
@@ -201,9 +204,14 @@ namespace OpenRA.Mods.Common.Widgets
 				var upOffset = !upPressed || upDisabled ? 4 : 4 + ButtonDepth;
 				var downOffset = !downPressed || downDisabled ? 4 : 4 + ButtonDepth;
 
-				WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", upPressed || upDisabled ? "up_pressed" : "up_arrow"),
+				var upArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollUp, upDisabled, upPressed, upHover);
+				var upArrowImage = ChromeProvider.GetImage(Decorations, upArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollUp);
+				WidgetUtils.DrawRGBA(upArrowImage,
 					new float2(upButtonRect.Left + upOffset, upButtonRect.Top + upOffset));
-				WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", downPressed || downDisabled ? "down_pressed" : "down_arrow"),
+
+				var downArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollDown, downDisabled, downPressed, downHover);
+				var downArrowImage = ChromeProvider.GetImage(Decorations, downArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollDown);
+				WidgetUtils.DrawRGBA(downArrowImage,
 					new float2(downButtonRect.Left + downOffset, downButtonRect.Top + downOffset));
 			}
 

OpenRA.Mods.Common/Widgets/TextFieldWidget.cs

@@ -566,10 +566,8 @@ namespace OpenRA.Mods.Common.Widgets
 			var cursorPosition = font.Measure(apparentText.Substring(0, CursorPosition));
 
 			var disabled = IsDisabled();
-			var state = disabled ? "textfield-disabled" :
+			var hover = Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget);
-				HasKeyboardFocus ? "textfield-focused" :
+			var state = WidgetUtils.GetStatefulImageName("textfield", disabled, false, hover, HasKeyboardFocus);
-				Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget) ? "textfield-hover" :
-				"textfield";
 
 			WidgetUtils.DrawPanel(state,
 				new Rectangle(pos.X, pos.Y, Bounds.Width, Bounds.Height));

OpenRA.Mods.Common/Widgets/WidgetUtils.cs

@@ -24,6 +24,17 @@ namespace OpenRA.Mods.Common.Widgets
 			return ChromeProvider.GetImage("chrome-" + world.LocalPlayer.Faction.InternalName, name);
 		}
 
+		public static string GetStatefulImageName(string baseName, bool disabled = false, bool pressed = false, bool hover = false, bool focused = false)
+		{
+			var suffix = disabled ? "-disabled" :
+				focused ? "-focused" :
+				pressed ? "-pressed" :
+				hover ? "-hover" :
+				"";
+
+			return baseName + suffix;
+		}
+
 		public static void DrawRGBA(Sprite s, float2 pos)
 		{
 			Game.Renderer.RgbaSpriteRenderer.DrawSprite(s, pos);

mods/cnc/chrome.yaml

@@ -201,6 +201,15 @@ checkbox-pressed:
 checkbox-highlighted:
 	Inherits: button-highlighted-pressed
 
+checkbox-highlighted-hover:
+	Inherits: button-highlighted-hover
+
+checkbox-highlighted-disabled:
+	Inherits: button-highlighted-disabled
+
+checkbox-highlighted-pressed:
+	Inherits: button-highlighted-pressed
+
 #
 # Panels
 # ===
@@ -337,18 +346,6 @@ checkbox-bits:
 		crossed: 972, 0, 16, 16
 		crossed-disabled: 989, 0, 16, 16
 
-scrollbar:
-	Inherits: ^Chrome
-	Regions:
-		down_arrow: 836, 17, 16, 16
-		down_pressed: 853, 17, 16, 16
-		up_arrow: 870, 17, 16, 16
-		up_pressed: 887, 17, 16, 16
-		right_arrow: 904, 17, 16, 16
-		right_pressed: 921, 17, 16, 16
-		left_arrow: 938, 17, 16, 16
-		left_pressed: 955, 17, 16, 16
-
 flags:
 	Inherits: ^Chrome
 	Regions:
@@ -364,10 +361,36 @@ strategic:
 		enemy_owned: 837, 223, 22, 22
 		player_owned: 883, 223, 22, 22
 
-dropdown:
+scrollpanel-decorations:
 	Inherits: ^Chrome
 	Regions:
-		separator: 65, 1, 1, 19
+		down: 836, 17, 16, 16
+		down-pressed: 836, 17, 16, 16
+		down-disabled: 853, 17, 16, 16
+		up: 870, 17, 16, 16
+		up-pressed: 870, 17, 16, 16
+		up-disabled: 887, 17, 16, 16
+		right: 904, 17, 16, 16
+		right-pressed: 904, 17, 16, 16
+		right-disabled: 921, 17, 16, 16
+		left: 938, 17, 16, 16
+		left-pressed: 938, 17, 16, 16
+		left-disabled: 955, 17, 16, 16
+
+dropdown-decorations:
+	Inherits: ^Chrome
+	Regions:
+		marker: 836, 17, 16, 16
+		marker-pressed: 836, 17, 16, 16
+		marker-disabled: 853, 17, 16, 16
+
+dropdown-separators:
+	Inherits: ^Chrome
+	Regions:
+		separator: 129, 2, 1, 19
+		separator-hover: 161, 2, 1, 19
+		separator-pressed: 129, 34, 1, 19
+		separator-disabled: 161, 34, 1, 19
 
 #
 # Common chrome

mods/d2k/chrome.yaml

@@ -283,14 +283,6 @@ music:
 		prev: 68, 0, 16, 16
 		fastforward: 85, 0, 16, 16
 
-scrollbar:
-	Inherits: ^Glyphs
-	Regions:
-		down_arrow: 119, 0, 16, 16
-		down_pressed: 119, 0, 16, 16
-		up_arrow: 102, 0, 16, 16
-		up_pressed: 102, 0, 16, 16
-
 progressbar-bg:
 	Inherits: button-pressed
 
@@ -400,6 +392,12 @@ checkbox-disabled:
 checkbox-highlighted:
 	Inherits: button-highlighted-pressed
 
+checkbox-highlighted-hover:
+	Inherits: checkbox-highlighted
+
+checkbox-highlighted-disabled:
+	Inherits: checkbox-disabled
+
 scrollitem-selected:
 	Inherits: button-pressed
 
@@ -412,10 +410,24 @@ scrollheader-selected:
 scrollitem-nohover:
 	Inherits: ^Dialog
 
-dropdown:
+scrollpanel-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		down: 119, 0, 16, 16
+		up: 102, 0, 16, 16
+
+dropdown-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		marker: 119, 0, 16, 16
+
+dropdown-separators:
 	Inherits: ^Dialog
 	Regions:
-		separator: 513, 1, 1, 19
+		separator: 513, 2, 1, 19
+		separator-hover: 513, 130, 1, 19
+		separator-pressed: 641, 2, 1, 19
+		separator-disabled: 513, 258, 1, 19
 
 logos:
 	Inherits: ^LoadScreen

mods/d2k/chrome/ingame-player.yaml

@@ -616,8 +616,8 @@ Container@PLAYER_WIDGETS:
 								Image@ICON:
 									X: 5
 									Y: 5
-									ImageCollection: scrollbar
+									ImageCollection: scrollpanel-decorations
-									ImageName: up_arrow
+									ImageName: up
 						Button@SCROLL_DOWN_BUTTON:
 							Y: 248
 							Width: 25
@@ -630,5 +630,5 @@ Container@PLAYER_WIDGETS:
 								Image@ICON:
 									X: 5
 									Y: 5
-									ImageCollection: scrollbar
+									ImageCollection: scrollpanel-decorations
-									ImageName: down_arrow
+									ImageName: down

mods/modcontent/chrome.yaml

@@ -102,10 +102,10 @@ scrollpanel-button-disabled:
 scrollpanel-button-pressed:
 	Inherits: panel-thinborder-light
 
-scrollbar:
+scrollpanel-decorations:
 	Inherits: ^Chrome
 	Regions:
-		down_arrow: 453, 512, 16, 16
+		down: 453, 512, 16, 16
-		down_pressed: 453, 512, 16, 16
+		down-pressed: 453, 512, 16, 16
-		up_arrow: 470, 512, 16, 16
+		up: 470, 512, 16, 16
-		up_pressed: 470, 512, 16, 16
+		up-pressed: 470, 512, 16, 16

mods/ra/chrome.yaml

@@ -394,18 +394,6 @@ music:
 		prev: 68, 0, 16, 16
 		fastforward: 85, 0, 16, 16
 
-scrollbar:
-	Inherits: ^Glyphs
-	Regions:
-		down_arrow: 68, 17, 16, 16
-		down_pressed: 85, 17, 16, 16
-		up_arrow: 102, 17, 16, 16
-		up_pressed: 119, 17, 16, 16
-		right_arrow: 136, 17, 16, 16
-		right_pressed: 153, 17, 16, 16
-		left_arrow: 170, 17, 16, 16
-		left_pressed: 187, 17, 16, 16
-
 progressbar-bg:
 	Inherits: button-pressed
 
@@ -533,6 +521,12 @@ checkbox-highlighted:
 	Inherits: ^Dialog
 	PanelRegion: 897, 1, 2, 2, 122, 122, 2, 2
 
+checkbox-highlighted-hover:
+	Inherits: checkbox-highlighted
+
+checkbox-highlighted-disabled:
+	Inherits: checkbox-disabled
+
 scrollitem-selected:
 	Inherits: button-pressed
 
@@ -559,8 +553,34 @@ mainmenu-border:
 	PanelRegion: 650, 389, 39, 39, 38, 38, 39, 39
 	PanelSides: Edges
 
-dropdown:
+scrollpanel-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		down: 68, 17, 16, 16
+		down-pressed: 68, 17, 16, 16
+		down-disabled: 85, 17, 16, 16
+		up: 102, 17, 16, 16
+		up-pressed: 102, 17, 16, 16
+		up-disabled: 119, 17, 16, 16
+		right: 136, 17, 16, 16
+		right-pressed: 136, 17, 16, 16
+		right-disabled: 153, 17, 16, 16
+		left: 170, 17, 16, 16
+		left-pressed: 170, 17, 16, 16
+		left-disabled: 187, 17, 16, 16
+
+dropdown-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		marker: 68, 17, 16, 16
+		marker-pressed: 68, 17, 16, 16
+		marker-disabled: 85, 17, 16, 16
+
+dropdown-separators:
 	Inherits: ^Dialog
 	Regions:
 		separator: 513, 2, 1, 19
-		observer-separator: 769, 257, 1, 19
+		separator-hover: 513, 130, 1, 19
+		separator-pressed: 766, 2, 1, 19
+		separator-disabled: 513, 258, 1, 19
+		observer-separator: 769, 258, 1, 19

mods/ra/chrome/ingame-player.yaml

@@ -572,8 +572,8 @@ Container@PLAYER_WIDGETS:
 								Image@ICON:
 									X: 6
 									Y: 3
-									ImageCollection: scrollbar
+									ImageCollection: scrollpanel-decorations
-									ImageName: up_arrow
+									ImageName: up
 						Button@SCROLL_DOWN_BUTTON:
 							Logic: AddFactionSuffixLogic
 							Y: 211
@@ -587,8 +587,8 @@ Container@PLAYER_WIDGETS:
 								Image@ICON:
 									X: 6
 									Y: 3
-									ImageCollection: scrollbar
+									ImageCollection: scrollpanel-decorations
-									ImageName: down_arrow
+									ImageName: down
 		Image@SIDEBAR_MONEYBIN:
 			Logic: AddFactionSuffixLogic
 			X: WINDOW_RIGHT - 250

mods/ts/chrome.yaml

@@ -500,18 +500,6 @@ music:
 		prev: 68, 0, 16, 16
 		fastforward: 85, 0, 16, 16
 
-scrollbar:
-	Inherits: ^Glyphs
-	Regions:
-		down_arrow: 68, 17, 16, 16
-		down_pressed: 85, 17, 16, 16
-		up_arrow: 102, 17, 16, 16
-		up_pressed: 119, 17, 16, 16
-		right_arrow: 136, 17, 16, 16
-		right_pressed: 153, 17, 16, 16
-		left_arrow: 170, 17, 16, 16
-		left_pressed: 187, 17, 16, 16
-
 # ----------------------------------------------------------------------
 # Other UI stuff
 # ----------------------------------------------------------------------
@@ -666,6 +654,12 @@ checkbox-highlighted:
 	Inherits: ^Dialog
 	PanelRegion: 897, 1, 2, 2, 122, 122, 2, 2
 
+checkbox-highlighted-hover:
+	Inherits: checkbox-highlighted
+
+checkbox-highlighted-disabled:
+	Inherits: checkbox-disabled
+
 scrollitem-selected:
 	Inherits: button-pressed
 
@@ -681,10 +675,36 @@ scrollheader-selected:
 mainmenu-border:
 	Inherits: ^Dialog
 
-dropdown:
+scrollpanel-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		down: 68, 17, 16, 16
+		down-pressed: 68, 17, 16, 16
+		down-disabled: 85, 17, 16, 16
+		up: 102, 17, 16, 16
+		up-pressed: 102, 17, 16, 16
+		up-disabled: 119, 17, 16, 16
+		right: 136, 17, 16, 16
+		right-pressed: 136, 17, 16, 16
+		right-disabled: 153, 17, 16, 16
+		left: 170, 17, 16, 16
+		left-pressed: 170, 17, 16, 16
+		left-disabled: 187, 17, 16, 16
+
+dropdown-decorations:
+	Inherits: ^Glyphs
+	Regions:
+		marker: 68, 17, 16, 16
+		marker-pressed: 68, 17, 16, 16
+		marker-disabled: 85, 17, 16, 16
+
+dropdown-separators:
 	Inherits: ^Dialog
 	Regions:
-		separator: 513, 1, 1, 19
+		separator: 513, 2, 1, 19
+		separator-hover: 513, 130, 1, 19
+		separator-pressed: 766, 2, 1, 19
+		separator-disabled: 513, 258, 1, 19
 
 logos:
 	Inherits: ^LoadScreen