Overhaul the replay sidebar.

OpenRA.Mods.RA/Widgets/Logic/GameTimerLogic.cs

@@ -34,7 +34,7 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 				if (world.Timestep == 1)
 					return "Max Speed";
 
-				return "{0:F1}x Speed".F(Game.Timestep * 1f / world.Timestep);
+				return "{0}% Speed".F(Game.Timestep * 100 / world.Timestep);
 			};
 
 			if (timer != null)
@@ -54,6 +54,16 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 				status.IsVisible = shouldShowStatus;
 				status.GetText = statusText;
 			}
+
+			var percentage = widget.GetOrNull<LabelWidget>("GAME_TIMER_PERCENTAGE");
+			if (percentage != null)
+			{
+				var connection = orderManager.Connection as ReplayConnection;
+				if (connection != null && connection.TickCount != 0)
+					percentage.GetText = () => "({0}%)".F(orderManager.NetFrameNumber * 100 / connection.TickCount);
+				else
+					timer.Bounds.Width += percentage.Bounds.Width;
+			}
 		}
 	}
 }

OpenRA.Mods.RA/Widgets/Logic/ReplayControlBarLogic.cs

@@ -8,41 +8,88 @@
  */
 #endregion
 
+using System.Collections.Generic;
+using OpenRA.Network;
 using OpenRA.Widgets;
 
 namespace OpenRA.Mods.RA.Widgets.Logic
 {
 	public class ReplayControlBarLogic
 	{
+		enum PlaybackSpeed { Regular, Slow, Fast, Maximum }
+
+		readonly Dictionary<PlaybackSpeed, int> timesteps = new Dictionary<PlaybackSpeed, int>()
+		{
+			{ PlaybackSpeed.Regular, Game.Timestep },
+			{ PlaybackSpeed.Slow, Game.Timestep * 2 },
+			{ PlaybackSpeed.Fast, Game.Timestep / 2 },
+			{ PlaybackSpeed.Maximum, 1 },
+		};
 
 		[ObjectCreator.UseCtor]
-		public ReplayControlBarLogic(Widget widget, World world)
+		public ReplayControlBarLogic(Widget widget, World world, OrderManager orderManager)
 		{
 			if (world.IsReplay)
 			{
 				var container = widget.Get("REPLAY_PLAYER");
+				var connection = (ReplayConnection)orderManager.Connection;
+				var replayNetTicks = connection.TickCount;
 
 				var background = widget.Parent.GetOrNull("OBSERVER_CONTROL_BG");
 				if (background != null)
 					background.Bounds.Height += container.Bounds.Height;
 
 				container.Visible = true;
+				var speed = PlaybackSpeed.Regular;
 
 				var pauseButton = widget.Get<ButtonWidget>("BUTTON_PAUSE");
-				pauseButton.IsHighlighted = () => world.Timestep == 0;
+				pauseButton.IsVisible = () => world.Timestep != 0 && orderManager.NetFrameNumber < replayNetTicks;
 				pauseButton.OnClick = () => world.Timestep = 0;
 
+				var playButton = widget.Get<ButtonWidget>("BUTTON_PLAY");
+				playButton.IsVisible = () => world.Timestep == 0 || orderManager.NetFrameNumber >= replayNetTicks;
+				playButton.OnClick = () => world.Timestep = timesteps[speed];
+				playButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+
 				var slowButton = widget.Get<ButtonWidget>("BUTTON_SLOW");
-				slowButton.IsHighlighted = () => world.Timestep > Game.Timestep;
+				slowButton.IsHighlighted = () => speed == PlaybackSpeed.Slow;
-				slowButton.OnClick = () => world.Timestep = Game.Timestep * 2;
+				slowButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				slowButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Slow;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
 
-				var normalSpeedButton = widget.Get<ButtonWidget>("BUTTON_NORMALSPEED");
+				var normalSpeedButton = widget.Get<ButtonWidget>("BUTTON_REGULAR");
-				normalSpeedButton.IsHighlighted = () => world.Timestep == Game.Timestep;
+				normalSpeedButton.IsHighlighted = () => speed == PlaybackSpeed.Regular;
-				normalSpeedButton.OnClick = () => world.Timestep = Game.Timestep;
+				normalSpeedButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				normalSpeedButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Regular;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
 
-				var fastforwardButton = widget.Get<ButtonWidget>("BUTTON_FASTFORWARD");
+				var fastButton = widget.Get<ButtonWidget>("BUTTON_FAST");
-				fastforwardButton.IsHighlighted = () => world.Timestep == 1;
+				fastButton.IsHighlighted = () => speed == PlaybackSpeed.Fast;
-				fastforwardButton.OnClick = () => world.Timestep = 1;
+				fastButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				fastButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Fast;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
+
+				var maximumButton = widget.Get<ButtonWidget>("BUTTON_MAXIMUM");
+				maximumButton.IsHighlighted = () => speed == PlaybackSpeed.Maximum;
+				maximumButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				maximumButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Maximum;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
 			}
 		}
 	}

mods/cnc/chrome/ingame.yaml

@@ -65,7 +65,7 @@ Container@OBSERVER_WIDGETS:
 		MenuButton@OPTIONS_BUTTON:
 			Logic: OrderButtonsChromeLogic
 			Key: escape
-			X: WINDOW_RIGHT-202
+			X: WINDOW_RIGHT-260-WIDTH
 			Y: 5
 			Width: 30
 			Height: 25
@@ -79,10 +79,10 @@ Container@OBSERVER_WIDGETS:
 					ImageCollection: order-icons
 					ImageName: options
 		Background@RADAR:
-			X: WINDOW_RIGHT-173
+			X: WINDOW_RIGHT-WIDTH-5
 			Y: 5
-			Width: 168
+			Width: 256
-			Height: 168
+			Height: 256
 			Background: panel-gray
 			Children:
 				Radar:
@@ -92,15 +92,15 @@ Container@OBSERVER_WIDGETS:
 					Height: PARENT_BOTTOM-2
 		Background@REPLAY_PLAYER:
 			Logic: ReplayControlBarLogic
-			X: WINDOW_RIGHT-173
+			X: WINDOW_RIGHT-WIDTH-5
-			Y: 195
+			Y: 283
-			Width: 168
+			Width: 256
 			Height: 46
 			Background: panel-black
 			Visible: false
 			Children:
 				Button@BUTTON_PAUSE:
-					X: 14
+					X: 16
 					Y: 10
 					Width: 26
 					Height: 26
@@ -113,22 +113,8 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: pause
-				Button@BUTTON_SLOW:
+				Button@BUTTON_PLAY:
-					X: 14 + 38
+					X: 16
-					Y: 10
-					Width: 26
-					Height: 26
-					IgnoreChildMouseOver: true
-					Children:
-						Image@IMAGE_SLOW:
-							X: 5
-							Y: 5
-							Width: 16
-							Height: 16
-							ImageCollection: music
-							ImageName: slowmo
-				Button@BUTTON_NORMALSPEED:
-					X: 14 + 38*2
 					Y: 10
 					Width: 26
 					Height: 26
@@ -141,25 +127,55 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: play
-				Button@BUTTON_FASTFORWARD:
+				Button@BUTTON_SLOW:
-					X: 14 + 38*3
+					X: 57
-					Y: 10
+					Y: 13
-					Width: 26
+					Width: 36
-					Height: 26
+					Height: 20
-					IgnoreChildMouseOver: true
+					BaseLine: 1
-					Children:
+					TooltipText: Slow speed
-						Image@IMAGE_FASTFORWARD:
+					TooltipContainer: TOOLTIP_CONTAINER
-							X: 5
+					VisualHeight: 0
-							Y: 5
+					Text: 50%
-							Width: 16
+					Font: TinyBold
-							Height: 16
+				Button@BUTTON_REGULAR:
-							ImageCollection: music
+					X: 57 + 48
-							ImageName: fastforward
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Regular speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 100%
+					Font: TinyBold
+				Button@BUTTON_FAST:
+					X: 57 + 48*2
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Fast speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 200%
+					Font: TinyBold
+				Button@BUTTON_MAXIMUM:
+					X: 57 + 48*3
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Maximum speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: MAX
+					Font: TinyBold
 		DropDownButton@SHROUD_SELECTOR:
 			Logic: ObserverShroudSelectorLogic
-			X: WINDOW_RIGHT-173
+			X: WINDOW_RIGHT-WIDTH-5
-			Y: 172
+			Y: 260
-			Width: 168
+			Width:256
 			Height: 25
 			Font: Bold
 			Children:

mods/d2k/chrome/ingame-observer.yaml

@@ -63,66 +63,77 @@ Container@OBSERVER_WIDGETS:
 							Height: 25
 				Container@REPLAY_PLAYER:
 					Logic: ReplayControlBarLogic
-					X: PARENT_RIGHT/2 - 80
+					Y: 39
-					Y: 35
 					Width: 160
 					Height: 35
 					Visible: false
 					Children:
 						Button@BUTTON_PAUSE:
 							X: 15
-							Y: 15
+							Y: 10
-							Width: 25
+							Width: 26
-							Height: 25
+							Height: 26
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PAUSE:
-									X: 0
+									Y: 1
-									Y: 0
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: pause
-						Button@BUTTON_SLOW:
+						Button@BUTTON_PLAY:
-							X: 50
+							X: 15
-							Y: 15
+							Y: 10
-							Width: 25
+							Width: 26
-							Height: 25
+							Height: 26
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_SLOW:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: slowmo
-						Button@BUTTON_NORMALSPEED:
-							X: 85
-							Y: 15
-							Width: 25
-							Height: 25
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PLAY:
-									X: 0
-									Y: 0
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: play
-						Button@BUTTON_FASTFORWARD:
+						Button@BUTTON_SLOW:
-							X: 120
+							X: 55
-							Y: 15
+							Y: 13
-							Width: 25
+							Width: 36
-							Height: 25
+							Height: 20
-							IgnoreChildMouseOver: true
+							BaseLine: 1
-							Children:
+							TooltipText: Slow speed
-								Image@IMAGE_FASTFORWARD:
+							TooltipContainer: TOOLTIP_CONTAINER
-									X: 4
+							VisualHeight: 0
-									Y: 0
+							Text: 50%
-									Width: 25
+							Font: TinyBold
-									Height: 25
+						Button@BUTTON_REGULAR:
-									ImageCollection: music
+							X: 55 + 45
-									ImageName: fastforward
+							Y: 13
-
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Regular speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 100%
+							Font: TinyBold
+						Button@BUTTON_FAST:
+							X: 55 + 45*2
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Fast speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 200%
+							Font: TinyBold
+						Button@BUTTON_MAXIMUM:
+							X: 55 + 45*3
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Maximum speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: MAX
+							Font: TinyBold

mods/ra/chrome.yaml

@@ -17,9 +17,9 @@ sidebar-button-allies-highlighted-hover: chrome.png
 sidebar-button-allies-highlighted-pressed: chrome.png
 	background: 84,28,28,28
 sidebar-button-allies-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 sidebar-button-allies-highlighted-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 
 sidebar-soviet: chrome.png
 	background-top: 274,167,238,290
@@ -40,9 +40,9 @@ sidebar-button-soviet-highlighted-hover: chrome.png
 sidebar-button-soviet-highlighted-pressed: chrome.png
 	background: 28,28,28,28
 sidebar-button-soviet-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 sidebar-button-soviet-highlighted-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 
 sidebar-bits: chrome.png
 	production-tooltip-time: 416, 80, 16, 16
@@ -94,6 +94,171 @@ order-icons: chrome.png
 	power-disabled: 480,64,16,16
 	power-active: 480,80,16,16
 
+sidebar-observer: chrome.png
+	background: 512,167,238,287
+	replay-bottom: 512,454,238,40
+	observer-bottom: 512,495,238,8
+
+sidebar-button-observershroud: chrome.png
+
+sidebar-button-observer: chrome.png
+	background: 117,33,18,18
+	border-r: 135,33,5,18
+	border-l: 112,33,5,18
+	border-b: 117,51,18,5
+	border-t: 117,28,18,5
+	corner-tl: 112,28,5,5
+	corner-tr: 135,28,5,5
+	corner-bl: 112,51,5,5
+	corner-br: 135,51,5,5
+sidebar-button-observer-hover: chrome.png
+	background: 117,5,18,18
+	border-r: 135,5,5,18
+	border-l: 112,5,5,18
+	border-b: 117,23,18,5
+	border-t: 117,0,18,5
+	corner-tl: 112,0,5,5
+	corner-tr: 135,0,5,5
+	corner-bl: 112,23,5,5
+	corner-br: 135,23,5,5
+sidebar-button-observer-pressed: chrome.png
+	background: 117,33,18,18
+	border-r: 135,33,5,18
+	border-l: 112,33,5,18
+	border-b: 117,51,18,5
+	border-t: 117,28,18,5
+	corner-tl: 112,28,5,5
+	corner-tr: 135,28,5,5
+	corner-bl: 112,51,5,5
+	corner-br: 135,51,5,5
+sidebar-button-observer-highlighted: chrome.png
+	background: 145,33,18,18
+	border-r: 163,33,5,18
+	border-l: 140,33,5,18
+	border-b: 145,51,18,5
+	border-t: 145,28,18,5
+	corner-tl: 140,28,5,5
+	corner-tr: 163,28,5,5
+	corner-bl: 140,51,5,5
+	corner-br: 163,51,5,5
+sidebar-button-observer-highlighted-hover: chrome.png
+	background: 145,5,18,18
+	border-r: 163,5,5,18
+	border-l: 140,5,5,18
+	border-b: 145,23,18,5
+	border-t: 145,0,18,5
+	corner-tl: 140,0,5,5
+	corner-tr: 163,0,5,5
+	corner-bl: 140,23,5,5
+	corner-br: 163,23,5,5
+sidebar-button-observer-highlighted-pressed: chrome.png
+	background: 33,33,18,18
+	border-r: 51,33,5,18
+	border-l: 28,33,5,18
+	border-b: 33,51,18,5
+	border-t: 33,28,18,5
+	corner-tl: 28,28,5,5
+	corner-tr: 51,28,5,5
+	corner-bl: 28,51,5,5
+	corner-br: 51,51,5,5
+sidebar-button-observer-disabled: chrome.png
+	background: 173,5,18,18
+	border-r: 191,5,5,18
+	border-l: 168,5,5,18
+	border-b: 173,23,18,5
+	border-t: 173,0,18,5
+	corner-tl: 168,0,5,5
+	corner-tr: 191,0,5,5
+	corner-bl: 168,23,5,5
+	corner-br: 191,23,5,5
+sidebar-button-observer-highlighted-disabled: chrome.png
+	background: 173,5,18,18
+	border-r: 191,5,5,18
+	border-l: 168,5,5,18
+	border-b: 173,23,18,5
+	border-t: 173,0,18,5
+	corner-tl: 168,0,5,5
+	corner-tr: 191,0,5,5
+	corner-bl: 168,23,5,5
+	corner-br: 191,23,5,5
+
+observer-scrollpanel-button: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
+observer-scrollpanel-button-hover: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
+observer-scrollpanel-button-pressed: dialog.png
+	background: 897,257,126,126
+	border-r: 1023,257,1,126
+	border-l: 896,257,1,126
+	border-b: 897,383,126,1
+	border-t: 897,256,126,1
+	corner-tl: 896,256,1,1
+	corner-tr: 1023,256,1,1
+	corner-bl: 896,383,1,1
+	corner-br: 1023,383,1,1
+
+observer-scrollpanel-button-disabled: dialog.png
+	background: 769,385,126,126
+	border-r: 895,385,1,126
+	border-l: 768,385,1,126
+	border-b: 769,511,126,1
+	border-t: 769,384,126,1
+	corner-tl: 768,384,1,1
+	corner-tr: 895,384,1,1
+	corner-bl: 768,511,1,1
+	corner-br: 895,511,1,1
+
+observer-scrollheader-selected: dialog.png
+	background: 769,385,126,126
+	border-r: 895,385,1,126
+	border-l: 768,385,1,126
+	border-b: 769,511,126,1
+	border-t: 769,384,126,1
+	corner-tl: 768,384,1,1
+	corner-tr: 895,384,1,1
+	corner-bl: 768,511,1,1
+	corner-br: 895,511,1,1
+
+observer-scrollitem-selected: dialog.png
+	background: 897,257,126,126
+	border-r: 1023,257,1,126
+	border-l: 896,257,1,126
+	border-b: 897,383,126,1
+	border-t: 897,256,126,1
+	corner-tl: 896,256,1,1
+	corner-tr: 1023,256,1,1
+	corner-bl: 896,383,1,1
+	corner-br: 1023,383,1,1
+
+observer-scrollitem-hover: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
 # Used for the main menu frame
 dialog: dialog.png
 	background: 0,0,480,480
@@ -375,54 +540,6 @@ newsbutton-pressed: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1
 
-# A copy of dialog2 (normal button)
-scrollthumb: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
-
-# A copy of button-hover
-scrollthumb-hover: dialog.png
-	background: 513,129,126,126
-	border-r: 639,129,1,126
-	border-l: 512,129,1,126
-	border-b: 513,255,126,1
-	border-t: 513,128,126,1
-	corner-tl: 512,128,1,1
-	corner-tr: 639,128,1,1
-	corner-bl: 512,255,1,1
-	corner-br: 639,255,1,1	
-	
-# A copy of dialog3 (pressed button)
-scrollthumb-pressed: dialog.png
-	background: 641,1,126,126
-	border-r: 767,1,1,126
-	border-l: 640,1,1,126
-	border-b: 641,127,126,1
-	border-t: 641,0,126,1
-	corner-tl: 640,0,1,1
-	corner-tr: 767,0,1,1
-	corner-bl: 640,127,1,1
-	corner-br: 767,127,1,1
-
-# A copy of dialog2 (normal button)
-scrollthumb-disabled: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
-
 # A copy of dialog3 (pressed button)
 textfield: dialog.png
 	background: 641,1,126,126

mods/ra/chrome/dropdowns.yaml

@@ -60,9 +60,11 @@ ScrollPanel@SPAWN_DROPDOWN_TEMPLATE:
 
 ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 	Width: DROPDOWN_WIDTH
+	Background: observer-scrollpanel-button-pressed
+	Button: observer-scrollpanel-button
 	Children:
 		ScrollItem@HEADER:
-			BaseName: scrollheader
+			BaseName: observer-scrollheader
 			Width: PARENT_RIGHT-27
 			Height: 13
 			X: 2
@@ -75,6 +77,7 @@ ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 					Height: 10
 					Align: Center
 		ScrollItem@TEMPLATE:
+			BaseName: observer-scrollitem
 			Width: PARENT_RIGHT-27
 			Height: 25
 			X: 2
@@ -83,7 +86,7 @@ ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 			Children:
 				Image@FLAG:
 					X: 4
-					Y: 4
+					Y: 6
 					Width: 32
 					Height: 16
 				Label@LABEL:

mods/ra/chrome/ingame-observer.yaml

@@ -1,77 +1,95 @@
 Container@OBSERVER_WIDGETS:
-	Logic: OrderButtonsChromeLogic
 	Children:
-		Container@GAME_TIMER_BLOCK:
+		Image@SIDEBAR_BACKGROUND_TOP:
+			X: WINDOW_RIGHT - 250
+			Y: 10
+			Width: 238
+			Height: 287
+			ImageCollection: sidebar-observer
+			ImageName: background
+			ClickThrough: false
+			Children:
+				Background@GAME_TIMER_BLOCK:
 					Logic: GameTimerLogic
-			X: WINDOW_RIGHT/2 - WIDTH
+					X: 26
-			Width: 100
+					Y: 10
-			Height: 55
+					Width: 120
+					Height: 22
+					Background: sidebar-button-observer
 					Children:
 						Label@GAME_TIMER:
-					Width: PARENT_RIGHT
+							Y: 0-1
-					Height: 15
+							Width: PARENT_RIGHT - 30
+							Height: PARENT_BOTTOM
 							Align: Center
-					Font: Title
+							Font: TinyBold
-					Contrast: true
+						Label@GAME_TIMER_PERCENTAGE:
-				Label@GAME_TIMER_STATUS:
+							X: PARENT_RIGHT - 40
-					Y: 35
+							Y: 0-1
-					Width: PARENT_RIGHT
+							Width: 30
-					Height: 15
+							Height: PARENT_BOTTOM
-					Align: Center
+							Align: Right
-					Font: Bold
+							Font: TinyBold
-					Contrast: true
+				Container@TOP_BUTTONS:
-		MenuButton@OPTIONS_BUTTON:
+					Logic: OrderButtonsChromeLogic
-			MenuContainer: INGAME_MENU
+					X: 9
-			HideIngameUI: true
+					Y: 7
-			Pause: false
+					Children:
-			X: 0
-			Y: 0
-			Width: 160
-			Height: 25
-			Text: Options (Esc)
-			Font: Bold
-			Key: escape
 						MenuButton@OBSERVER_STATS_BUTTON:
 							MenuContainer: INGAME_OBSERVERSTATS_BG
 							HideIngameUI: false
 							Pause: false
-			X: 162
+							Key: F1
-			Y: 0
+							X: 160
-			Width: 160
+							Width: 28
-			Height: 25
+							Height: 28
-			Text: Statistics (F1)
+							Background: sidebar-button-observer
-			Font: Bold
+							TooltipText: Statistics
-			Key: f1
+							TooltipContainer: TOOLTIP_CONTAINER
-		Background@RADAR_BG:
+							VisualHeight: 0
-			X: WINDOW_RIGHT-255
+							Children:
-			Y: 5
+								Image@ICON:
-			Width: 250
+									X: 6
-			Height: 250
+									Y: 6
+									ImageCollection: order-icons
+									ImageName: diplomacy
+						MenuButton@OPTIONS_BUTTON:
+							Key: escape
+							X: 192
+							Width: 28
+							Height: 28
+							Background: sidebar-button-observer
+							TooltipText: Options
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Children:
+								Image@ICON:
+									X: 6
+									Y: 6
+									ImageCollection: order-icons
+									ImageName: options
+				Container@RADAR:
 					Children:
 						Radar@INGAME_RADAR:
-					X: 10
-					Y: 10
-					Width: PARENT_RIGHT-19
-					Height: PARENT_BOTTOM-19
 							WorldInteractionController: INTERACTION_CONTROLLER
-		Background@OBSERVER_CONTROL_BG:
+							X: 9
-			X: WINDOW_RIGHT-255
+							Y: 41
-			Y: 260
+							Width: 220
-			Width: 250
+							Height: 220
-			Height: 55
-			Children:
 				DropDownButton@SHROUD_SELECTOR:
 					Logic: ObserverShroudSelectorLogic
-					X: 15
+					X: 6
-					Y: 15
+					Y: 262
-					Width: 220
+					Width: 226
 					Height: 25
 					Font: Bold
+					VisualHeight: 0
+					Background: sidebar-button-observershroud
 					Children:
 						LogicKeyListener@SHROUD_KEYHANDLER:
 						Image@FLAG:
 							X: 4
-							Y: 4
+							Y: 6
 							Width: 32
 							Height: 16
 						Label@LABEL:
@@ -82,68 +100,100 @@ Container@OBSERVER_WIDGETS:
 							X: 5
 							Width: PARENT_RIGHT
 							Height: 25
-				Container@REPLAY_PLAYER:
+		Image@SIDEBAR_BACKGROUND_BOTTOM:
+			X: WINDOW_RIGHT - 250
+			Y: 297
+			Width: 238
+			Height: 8
+			ImageCollection: sidebar-observer
+			ImageName: observer-bottom
+		Image@REPLAY_PLAYER:
 			Logic: ReplayControlBarLogic
-					X: PARENT_RIGHT/2 - 80
+			X: WINDOW_RIGHT - 250
-					Y: 35
+			Y: 297
-					Width: 160
+			Width: 238
-					Height: 35
+			Height: 40
+			Visible: false
+			ImageCollection: sidebar-observer
+			ImageName: replay-bottom
+			ClickThrough: false
 			Visible: false
 			Children:
 				Button@BUTTON_PAUSE:
-							X: 15
+					X: 9
-							Y: 15
+					Y: 5
-							Width: 25
+					Width: 28
-							Height: 25
+					Height: 28
-							IgnoreChildMouseOver: true
+					Background: sidebar-button-observer
+					TooltipText: Pause
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
 					Children:
 						Image@IMAGE_PAUSE:
-									X: 0
+							X: 2
-									Y: 0
+							Y: 2
-									Width: 25
-									Height: 25
 							ImageCollection: music
 							ImageName: pause
-						Button@BUTTON_SLOW:
+				Button@BUTTON_PLAY:
-							X: 50
+					X: 9
-							Y: 15
+					Y: 5
-							Width: 25
+					Width: 28
-							Height: 25
+					Height: 28
-							IgnoreChildMouseOver: true
+					Background: sidebar-button-observer
-							Children:
+					TooltipText: Play
-								Image@IMAGE_SLOW:
+					TooltipContainer: TOOLTIP_CONTAINER
-									X: 4
+					VisualHeight: 0
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: slowmo
-						Button@BUTTON_NORMALSPEED:
-							X: 85
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
 					Children:
 						Image@IMAGE_PLAY:
-									X: 0
+							X: 2
-									Y: 0
+							Y: 1
-									Width: 25
-									Height: 25
 							ImageCollection: music
 							ImageName: play
-						Button@BUTTON_FASTFORWARD:
+				Button@BUTTON_SLOW:
-							X: 120
+					X: 49
-							Y: 15
+					Y: 8
-							Width: 25
+					Width: 42
-							Height: 25
+					Height: 22
-							IgnoreChildMouseOver: true
+					BaseLine: 1
-							Children:
+					Background: sidebar-button-observer
-								Image@IMAGE_FASTFORWARD:
+					TooltipText: Slow speed
-									X: 4
+					TooltipContainer: TOOLTIP_CONTAINER
-									Y: 0
+					VisualHeight: 0
-									Width: 25
+					Text: 50%
-									Height: 25
+					Font: TinyBold
-									ImageCollection: music
+				Button@BUTTON_REGULAR:
-									ImageName: fastforward
+					X: 95
-
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Regular speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 100%
+					Font: TinyBold
+				Button@BUTTON_FAST:
+					X: 141
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Fast speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 200%
+					Font: TinyBold
+				Button@BUTTON_MAXIMUM:
+					X: 187
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Maximum speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: MAX
+					Font: TinyBold

mods/ts/chrome/ingame-observer.yaml

@@ -0,0 +1,130 @@
+Container@OBSERVER_WIDGETS:
+	Children:
+		MenuButton@OBSERVER_STATS_BUTTON:
+			Logic: OrderButtonsChromeLogic
+			MenuContainer: INGAME_OBSERVERSTATS_BG
+			HideIngameUI: False
+			Pause: False
+			X: 162
+			Y: 0
+			Width: 160
+			Height: 25
+			Text: Statistics (F1)
+			Font: Bold
+			Key: f1
+		Background@RADAR_BG:
+			X: WINDOW_RIGHT-255
+			Y: 5
+			Width: 250
+			Height: 250
+			Children:
+				Radar@INGAME_RADAR:
+					X: 10
+					Y: 10
+					Width: PARENT_RIGHT-19
+					Height: PARENT_BOTTOM-19
+					WorldInteractionController: INTERACTION_CONTROLLER
+		Background@OBSERVER_CONTROL_BG:
+			X: WINDOW_RIGHT-255
+			Y: 260
+			Width: 250
+			Height: 55
+			Children:
+				DropDownButton@SHROUD_SELECTOR:
+					Logic: ObserverShroudSelectorLogic
+					X: 15
+					Y: 15
+					Width: 220
+					Height: 25
+					Font: Bold
+					Children:
+						LogicKeyListener@SHROUD_KEYHANDLER:
+						Image@FLAG:
+							X: 4
+							Y: 4
+							Width: 32
+							Height: 16
+						Label@LABEL:
+							X: 40
+							Width: 60
+							Height: 25
+						Label@NOFLAG_LABEL:
+							X: 5
+							Width: PARENT_RIGHT
+							Height: 25
+				Container@REPLAY_PLAYER:
+					Logic: ReplayControlBarLogic
+					Y: 39
+					Width: 160
+					Height: 35
+					Visible: false
+					Children:
+						Button@BUTTON_PAUSE:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
+							IgnoreChildMouseOver: true
+							Children:
+								Image@IMAGE_PAUSE:
+									Y: 1
+									Width: 25
+									Height: 25
+									ImageCollection: music
+									ImageName: pause
+						Button@BUTTON_PLAY:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
+							IgnoreChildMouseOver: true
+							Children:
+								Image@IMAGE_PLAY:
+									Width: 25
+									Height: 25
+									ImageCollection: music
+									ImageName: play
+						Button@BUTTON_SLOW:
+							X: 55
+							Y: 13
+							Width: 36
+							Height: 20
+							BaseLine: 1
+							TooltipText: Slow speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 50%
+							Font: TinyBold
+						Button@BUTTON_REGULAR:
+							X: 55 + 45
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Regular speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 100%
+							Font: TinyBold
+						Button@BUTTON_FAST:
+							X: 55 + 45*2
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Fast speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 200%
+							Font: TinyBold
+						Button@BUTTON_MAXIMUM:
+							X: 55 + 45*3
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Maximum speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: MAX
+							Font: TinyBold

mods/ts/mod.yaml

@@ -110,7 +110,7 @@ ChromeLayout:
 	./mods/ra/chrome/ingame-infobriefing.yaml
 	./mods/ra/chrome/ingame-infoobjectives.yaml
 	./mods/ra/chrome/ingame-infostats.yaml
-	./mods/ra/chrome/ingame-observer.yaml
+	./mods/ts/chrome/ingame-observer.yaml
 	./mods/ra/chrome/ingame-observerstats.yaml
 	./mods/ts/chrome/ingame-player.yaml
 	./mods/ra/chrome/ingame-debug.yaml