Merge pull request #6737 from pchote/replay-sidebar

Overhaul the observer sidebar.
2014-10-19 16:17:44 +13:00
parent 6556cfc667 0fc8344eb0
commit 7e48e8c741
21 changed files with 1118 additions and 445 deletions
--- a/OpenRA.Game/Widgets/ButtonWidget.cs
+++ b/OpenRA.Game/Widgets/ButtonWidget.cs
@@ -26,6 +26,7 @@ namespace OpenRA.Widgets
 		public string Background = "button";
 		public bool Depressed = false;
 		public int VisualHeight = ChromeMetrics.Get<int>("ButtonDepth");
+		public int BaseLine = 0;
 		public string Font = ChromeMetrics.Get<string>("ButtonFont");
 		public Color TextColor = ChromeMetrics.Get<Color>("ButtonTextColor");
 		public Color TextColorDisabled = ChromeMetrics.Get<Color>("ButtonTextColorDisabled");
@@ -78,6 +79,7 @@ namespace OpenRA.Widgets

 			Text = other.Text;
 			Font = other.Font;
+			BaseLine = other.BaseLine;
 			TextColor = other.TextColor;
 			TextColorDisabled = other.TextColorDisabled;
 			Contrast = other.Contrast;
@@ -202,7 +204,7 @@ namespace OpenRA.Widgets
 			var contrast = GetContrastColor();
 			var s = font.Measure(text);
 			var stateOffset = (Depressed) ? new int2(VisualHeight, VisualHeight) : new int2(0, 0);
-			var position = new int2(rb.X + (UsableWidth - s.X) / 2, rb.Y + (Bounds.Height - s.Y) / 2);
+			var position = new int2(rb.X + (UsableWidth - s.X) / 2, rb.Y - BaseLine + (Bounds.Height - s.Y) / 2);

 			DrawBackground(rb, disabled, Depressed, Ui.MouseOverWidget == this, highlighted);
 			if (Contrast)
--- a/OpenRA.Game/Widgets/CheckboxWidget.cs
+++ b/OpenRA.Game/Widgets/CheckboxWidget.cs
@@ -19,7 +19,6 @@ namespace OpenRA.Widgets
 		public string CheckType = "checked";
 		public Func<string> GetCheckType;
 		public Func<bool> IsChecked = () => false;
-		public int BaseLine = 1;
 		public int CheckOffset = 2;
 		public bool HasPressedState = ChromeMetrics.Get<bool>("CheckboxPressedState");

@@ -36,7 +35,6 @@ namespace OpenRA.Widgets
 			CheckType = other.CheckType;
 			GetCheckType = other.GetCheckType;
 			IsChecked = other.IsChecked;
-			BaseLine = other.BaseLine;
 			CheckOffset = other.CheckOffset;
 			HasPressedState = other.HasPressedState;
 		}
--- a/OpenRA.Game/Widgets/ScrollPanelWidget.cs
+++ b/OpenRA.Game/Widgets/ScrollPanelWidget.cs
@@ -34,6 +34,7 @@ namespace OpenRA.Widgets
 		public int ItemSpacing = 2;
 		public int ButtonDepth = ChromeMetrics.Get<int>("ButtonDepth");
 		public string Background = "scrollpanel-bg";
+		public string Button = "scrollpanel-button";
 		public int ContentHeight;
 		public ILayout Layout;
 		public int MinimumThumbSize = 10;
@@ -140,12 +141,12 @@ namespace OpenRA.Widgets

 			var thumbHover = Ui.MouseOverWidget == this && thumbRect.Contains(Viewport.LastMousePos);
 			WidgetUtils.DrawPanel(Background, backgroundRect);
-			WidgetUtils.DrawPanel("scrollpanel-bg", scrollbarRect);
-			ButtonWidget.DrawBackground("button", upButtonRect, UpDisabled, UpPressed, upHover, false);
-			ButtonWidget.DrawBackground("button", downButtonRect, DownDisabled, DownPressed, downHover, false);
+			WidgetUtils.DrawPanel(Background, scrollbarRect);
+			ButtonWidget.DrawBackground(Button, upButtonRect, UpDisabled, UpPressed, upHover, false);
+			ButtonWidget.DrawBackground(Button, downButtonRect, DownDisabled, DownPressed, downHover, false);

 			if (thumbHeight > 0)
-				ButtonWidget.DrawBackground("scrollthumb", thumbRect, false, HasMouseFocus && thumbHover, thumbHover, false);
+				ButtonWidget.DrawBackground(Button, thumbRect, false, HasMouseFocus && thumbHover, thumbHover, false);

 			var upOffset = !UpPressed || UpDisabled ? 4 : 4 + ButtonDepth;
 			var downOffset = !DownPressed || DownDisabled ? 4 : 4 + ButtonDepth;
--- a/OpenRA.Mods.RA/Widgets/Logic/GameTimerLogic.cs
+++ b/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;
+			}
 		}
 	}
 }
--- a/OpenRA.Mods.RA/Widgets/Logic/ReplayControlBarLogic.cs
+++ b/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.OnClick = () => world.Timestep = Game.Timestep * 2;
+				slowButton.IsHighlighted = () => speed == PlaybackSpeed.Slow;
+				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");
-				normalSpeedButton.IsHighlighted = () => world.Timestep == Game.Timestep;
-				normalSpeedButton.OnClick = () => world.Timestep = Game.Timestep;
+				var normalSpeedButton = widget.Get<ButtonWidget>("BUTTON_REGULAR");
+				normalSpeedButton.IsHighlighted = () => speed == PlaybackSpeed.Regular;
+				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");
-				fastforwardButton.IsHighlighted = () => world.Timestep == 1;
-				fastforwardButton.OnClick = () => world.Timestep = 1;
+				var fastButton = widget.Get<ButtonWidget>("BUTTON_FAST");
+				fastButton.IsHighlighted = () => speed == PlaybackSpeed.Fast;
+				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];
+				};
 			}
 		}
 	}
--- a/artsrc/cnc/chrome.svg
+++ b/artsrc/cnc/chrome.svg
@@ -2,6 +2,7 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->

 <svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -13,7 +14,7 @@
   height="512"
   id="svg2"
   version="1.1"
-   inkscape:version="0.48.4 r9939"
+   inkscape:version="0.48.5 r10040"
   sodipodi:docname="chrome.svg"
   inkscape:export-filename="/Users/paul/src/OpenRA/mods/cnc/uibits/chrome.png"
   inkscape:export-xdpi="90"
@@ -21,6 +22,14 @@
   enable-background="new">
  <defs
     id="defs4">
+    <linearGradient
+       id="linearGradient4000"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#ff00ff;stop-opacity:1;"
+         offset="0"
+         id="stop4002" />
+    </linearGradient>
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 256 : 1"
@@ -99,16 +108,16 @@
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="22.453628"
-     inkscape:cy="487.32518"
+     inkscape:zoom="5.6568543"
+     inkscape:cx="484.55509"
+     inkscape:cy="394.40069"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="true"
-     inkscape:window-width="1867"
-     inkscape:window-height="1176"
-     inkscape:window-x="53"
-     inkscape:window-y="24"
+     inkscape:window-width="1626"
+     inkscape:window-height="1005"
+     inkscape:window-x="54"
+     inkscape:window-y="0"
     inkscape:window-maximized="1"
     showguides="true"
     inkscape:guide-bbox="true"
@@ -177,10 +186,6 @@
       orientation="1,0"
       position="496,512"
       id="guide4016" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="512,512"
-       id="guide4018" />
    <sodipodi:guide
       orientation="0,1"
       position="148,432"
@@ -205,7 +210,7 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
@@ -1187,11 +1192,6 @@
         d="m 293.4933,422.60165 6.8192,6.99268 0.0273,-7.03284 6.82877,6.91201 0.005,-7.62083 2.29527,0.005 -0.005,14.25414 -2.23215,0.005 -0.0158,-6.65429 -6.81074,6.06193 -0.0904,-5.97264 -6.83307,5.97605 z"
         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
-    <path
-       style="fill:#ffffff;fill-opacity:1;stroke:none"
-       d="m 417.0505,632.91722 1.89097,0 0,-1.83277 1.86185,0.0291 0,1.7455 1.80369,-0.0291 0.0291,-0.84366 0.93092,0 0.0291,0.84366 1.74549,0 0.0291,-1.7746 2.7928,0.0291 0,1.7746 1.92005,0.0291 -0.0291,-0.84366 -1.0182,0 0,-2.88008 1.83278,0 0,-0.87276 0.98911,-0.0291 -0.0401,-1.79618 -2.79765,-0.0205 0,0.91541 -1.82052,0.0205 0.0205,-1.86167 -1.86168,0.0107 0,-0.9154 -1.84109,0 0.0107,-0.93598 -2.82851,0 0.0205,0.9257 -1.82052,0.0108 0.0107,0.94627 -0.92569,0 -0.0107,0.90511 -0.9257,0 -0.0107,2.77706 -0.89484,0 0,0.88456 1.79995,0.0107 0.0107,1.86168 -0.89483,-0.0205 z"
-       id="path4064"
-       inkscape:connector-curvature="0" />
    <path
       style="fill:#ffffff;fill-opacity:1;stroke:none"
       d="M 407 48 L 407 54.09375 L 404 54.09375 L 408 60.09375 L 412 54.09375 L 409 54.09375 L 409 48 L 407 48 z "
@@ -1457,6 +1457,93 @@
       x="0"
       y="0"
       transform="translate(0,540.3622)" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 481.5,637.86222 0,13 13,0"
+       id="path4077"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4079"
+       d="m 484,642.3622 0,7"
+       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 490,639.3622 0,10"
+       id="path4081"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 487,646.3622 0,3"
+       id="path4083"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 493,643.3622 0,6"
+       id="path4085"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4087"
+       d="m 481.5,653.86222 0,13 13,0"
+       style="fill:none;stroke:#808080;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#808080;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 484,658.3622 0,7"
+       id="path4089"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4091"
+       d="m 490,655.3622 0,10"
+       style="fill:none;stroke:#808080;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4093"
+       d="m 487,662.3622 0,3"
+       style="fill:none;stroke:#808080;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4095"
+       d="m 493,659.3622 0,6"
+       style="fill:none;stroke:#808080;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4108"
+       d="m 481.5,669.86222 0,13 13,0"
+       style="fill:none;stroke:#ffc000;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#ffc000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 484,674.3622 0,7"
+       id="path4110"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4113"
+       d="m 490,671.3622 0,10"
+       style="fill:none;stroke:#ffc000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4115"
+       d="m 487,678.3622 0,3"
+       style="fill:none;stroke:#ffc000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4117"
+       d="m 493,675.3622 0,6"
+       style="fill:none;stroke:#ffc000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
  </g>
  <g
     inkscape:groupmode="layer"
--- a/artsrc/ra/chrome.psd
+++ b/artsrc/ra/chrome.psd
--- a/mods/cnc/chrome.yaml
+++ b/mods/cnc/chrome.yaml
@@ -98,50 +98,6 @@ button-highlighted-disabled: chrome.png
 	corner-bl: 288,191,1,1
 	corner-br: 319,191,1,1

-scrollthumb: chrome.png
-	background: 2,194,60,60
-	border-r: 62,194,2,60
-	border-l: 0,194,2,60
-	border-b: 2,254,60,2
-	border-t: 2,192,60,2
-	corner-tl: 0,192,2,2
-	corner-tr: 62,192,2,2
-	corner-bl: 0,254,2,2
-	corner-br: 62,254,2,2
-
-scrollthumb-hover: chrome.png
-	background: 2,130,60,60
-	border-r: 62,130,2,60
-	border-l: 0,130,2,60
-	border-b: 2,190,60,2
-	border-t: 2,128,60,2
-	corner-tl: 0,128,2,2
-	corner-tr: 62,128,2,2
-	corner-bl: 0,190,2,2
-	corner-br: 62,190,2,2
-
-scrollthumb-disabled: chrome.png
-	background: 66,130,60,60
-	border-r: 126,130,2,60
-	border-l: 64,130,2,60
-	border-b: 66,190,60,2
-	border-t: 66,128,60,2
-	corner-tl: 64,128,2,2
-	corner-tr: 126,128,2,2
-	corner-bl: 64,190,2,2
-	corner-br: 126,190,2,2
-
-scrollthumb-pressed: chrome.png
-	background: 66,194,60,60
-	border-r: 126,194,2,60
-	border-l: 64,194,2,60
-	border-b: 66,254,60,2
-	border-t: 66,192,60,2
-	corner-tl: 64,192,2,2
-	corner-tr: 126,192,2,2
-	corner-bl: 64,254,2,2
-	corner-br: 126,254,2,2
-
 # A copy of button
 textfield: chrome.png
 	background: 2,194,60,60
@@ -227,6 +183,50 @@ scrollpanel-bg: chrome.png
 	corner-bl: 64,126,2,2
 	corner-br: 126,126,2,2

+scrollpanel-button: chrome.png
+	background: 2,194,60,60
+	border-r: 62,194,2,60
+	border-l: 0,194,2,60
+	border-b: 2,254,60,2
+	border-t: 2,192,60,2
+	corner-tl: 0,192,2,2
+	corner-tr: 62,192,2,2
+	corner-bl: 0,254,2,2
+	corner-br: 62,254,2,2
+
+scrollpanel-button-hover: chrome.png
+	background: 2,130,60,60
+	border-r: 62,130,2,60
+	border-l: 0,130,2,60
+	border-b: 2,190,60,2
+	border-t: 2,128,60,2
+	corner-tl: 0,128,2,2
+	corner-tr: 62,128,2,2
+	corner-bl: 0,190,2,2
+	corner-br: 62,190,2,2
+
+scrollpanel-button-disabled: chrome.png
+	background: 66,130,60,60
+	border-r: 126,130,2,60
+	border-l: 64,130,2,60
+	border-b: 66,190,60,2
+	border-t: 66,128,60,2
+	corner-tl: 64,128,2,2
+	corner-tr: 126,128,2,2
+	corner-bl: 64,190,2,2
+	corner-br: 126,190,2,2
+
+scrollpanel-button-pressed: chrome.png
+	background: 66,194,60,60
+	border-r: 126,194,2,60
+	border-l: 64,194,2,60
+	border-b: 66,254,60,2
+	border-t: 66,192,60,2
+	corner-tl: 64,192,2,2
+	corner-tr: 126,192,2,2
+	corner-bl: 64,254,2,2
+	corner-br: 126,254,2,2
+
 # A copy of button-hover
 scrollitem-hover: chrome.png
 	background: 2,130,60,60
@@ -465,4 +465,7 @@ order-icons: chrome.png
 	repair-active: 384,80,16,16
 	beacon: 400,48,16,16
 	beacon-disabled: 400,64,16,16
-	beacon-active: 400,80,16,16
+	beacon-active: 400,80,16,16
+	stats: 480,96,16,16
+	stats-disabled: 480,112,16,16
+	stats-active: 480,128,16,16
--- a/mods/cnc/chrome/ingame.yaml
+++ b/mods/cnc/chrome/ingame.yaml
@@ -61,15 +61,14 @@ Container@INGAME_ROOT:
 		TooltipContainer@TOOLTIP_CONTAINER:

 Container@OBSERVER_WIDGETS:
+	Logic: OrderButtonsChromeLogic
 	Children:
 		MenuButton@OPTIONS_BUTTON:
-			Logic: OrderButtonsChromeLogic
 			Key: escape
-			X: WINDOW_RIGHT-202
+			X: WINDOW_RIGHT-260-WIDTH
 			Y: 5
 			Width: 30
 			Height: 25
-			Font: Bold
 			TooltipText: Menu
 			TooltipContainer: TOOLTIP_CONTAINER
 			Children:
@@ -78,11 +77,28 @@ Container@OBSERVER_WIDGETS:
 					Y: 5
 					ImageCollection: order-icons
 					ImageName: options
+		MenuButton@OBSERVER_STATS_BUTTON:
+			Key: F1
+			X: WINDOW_RIGHT-260-WIDTH
+			Y: 35
+			Width: 30
+			Height: 25
+			TooltipText: Statistics
+			TooltipContainer: TOOLTIP_CONTAINER
+			MenuContainer: INGAME_OBSERVERSTATS_BG
+			HideIngameUI: false
+			Pause: false
+			Children:
+				Image@ICON:
+					X: 7
+					Y: 5
+					ImageCollection: order-icons
+					ImageName: stats
 		Background@RADAR:
-			X: WINDOW_RIGHT-173
+			X: WINDOW_RIGHT-WIDTH-5
 			Y: 5
-			Width: 168
-			Height: 168
+			Width: 256
+			Height: 256
 			Background: panel-gray
 			Children:
 				Radar:
@@ -92,15 +108,15 @@ Container@OBSERVER_WIDGETS:
 					Height: PARENT_BOTTOM-2
 		Background@REPLAY_PLAYER:
 			Logic: ReplayControlBarLogic
-			X: WINDOW_RIGHT-173
-			Y: 195
-			Width: 168
+			X: WINDOW_RIGHT-WIDTH-5
+			Y: 283
+			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 +129,8 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: pause
-				Button@BUTTON_SLOW:
-					X: 14 + 38
-					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
+				Button@BUTTON_PLAY:
+					X: 16
 					Y: 10
 					Width: 26
 					Height: 26
@@ -141,25 +143,55 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: play
-				Button@BUTTON_FASTFORWARD:
-					X: 14 + 38*3
-					Y: 10
-					Width: 26
-					Height: 26
-					IgnoreChildMouseOver: true
-					Children:
-						Image@IMAGE_FASTFORWARD:
-							X: 5
-							Y: 5
-							Width: 16
-							Height: 16
-							ImageCollection: music
-							ImageName: fastforward
+				Button@BUTTON_SLOW:
+					X: 57
+					Y: 13
+					Width: 36
+					Height: 20
+					BaseLine: 1
+					TooltipText: Slow speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 50%
+					Font: TinyBold
+				Button@BUTTON_REGULAR:
+					X: 57 + 48
+					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
-			Y: 172
-			Width: 168
+			X: WINDOW_RIGHT-WIDTH-5
+			Y: 260
+			Width:256
 			Height: 25
 			Font: Bold
 			Children:
--- a/mods/cnc/uibits/chrome.png
+++ b/mods/cnc/uibits/chrome.png
--- a/mods/d2k/chrome.yaml
+++ b/mods/d2k/chrome.yaml
@@ -384,55 +384,7 @@ button-highlighted-disabled: dialog.png
 	corner-tr: 639,0,1,1
 	corner-bl: 768,127,1,1
 	corner-br: 639,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
@@ -493,6 +445,54 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1

+# A copy of dialog2 (normal button)
+scrollpanel-button: 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
+scrollpanel-button-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)
+scrollpanel-button-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)
+scrollpanel-button-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
+
 slider: dialog.png
 	tick: 512,1,2,4

--- a/mods/d2k/chrome/ingame-observer.yaml
+++ b/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: 35
+					Y: 39
 					Width: 160
 					Height: 35
 					Visible: false
 					Children:
 						Button@BUTTON_PAUSE:
 							X: 15
-							Y: 15
-							Width: 25
-							Height: 25
+							Y: 10
+							Width: 26
+							Height: 26
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PAUSE:
-									X: 0
-									Y: 0
+									Y: 1
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: pause
-						Button@BUTTON_SLOW:
-							X: 50
-							Y: 15
-							Width: 25
-							Height: 25
-							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
+						Button@BUTTON_PLAY:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PLAY:
-									X: 0
-									Y: 0
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: play
-						Button@BUTTON_FASTFORWARD:
-							X: 120
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_FASTFORWARD:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: fastforward
-
+						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
--- a/mods/ra/chrome.yaml
+++ b/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
@@ -93,6 +93,174 @@ order-icons: chrome.png
 	power: 480,48,16,16
 	power-disabled: 480,64,16,16
 	power-active: 480,80,16,16
+	stats: 368,48,16,16
+	stats-disabled: 368,64,16,16
+	stats-active: 368,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
@@ -375,54 +543,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
@@ -483,6 +603,55 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1

+
+# A copy of dialog2 (normal button)
+scrollpanel-button: 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
+scrollpanel-button-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)
+scrollpanel-button-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)
+scrollpanel-button-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
+
 slider: dialog.png
 	tick: 512,1,2,4

--- a/mods/ra/chrome/dropdowns.yaml
+++ b/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:
--- a/mods/ra/chrome/ingame-observer.yaml
+++ b/mods/ra/chrome/ingame-observer.yaml
@@ -1,77 +1,95 @@
 Container@OBSERVER_WIDGETS:
-	Logic: OrderButtonsChromeLogic
 	Children:
-		Container@GAME_TIMER_BLOCK:
-			Logic: GameTimerLogic
-			X: WINDOW_RIGHT/2 - WIDTH
-			Width: 100
-			Height: 55
+		Image@SIDEBAR_BACKGROUND_TOP:
+			X: WINDOW_RIGHT - 250
+			Y: 10
+			Width: 238
+			Height: 287
+			ImageCollection: sidebar-observer
+			ImageName: background
+			ClickThrough: false
 			Children:
-				Label@GAME_TIMER:
-					Width: PARENT_RIGHT
-					Height: 15
-					Align: Center
-					Font: Title
-					Contrast: true
-				Label@GAME_TIMER_STATUS:
-					Y: 35
-					Width: PARENT_RIGHT
-					Height: 15
-					Align: Center
-					Font: Bold
-					Contrast: true
-		MenuButton@OPTIONS_BUTTON:
-			MenuContainer: INGAME_MENU
-			HideIngameUI: true
-			Pause: false
-			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
-			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
+				Background@GAME_TIMER_BLOCK:
+					Logic: GameTimerLogic
+					X: 26
 					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:
+					Width: 120
+					Height: 22
+					Background: sidebar-button-observer
+					Children:
+						Label@GAME_TIMER:
+							Y: 0-1
+							Width: PARENT_RIGHT - 30
+							Height: PARENT_BOTTOM
+							Align: Center
+							Font: TinyBold
+						Label@GAME_TIMER_PERCENTAGE:
+							X: PARENT_RIGHT - 40
+							Y: 0-1
+							Width: 30
+							Height: PARENT_BOTTOM
+							Align: Right
+							Font: TinyBold
+				Container@TOP_BUTTONS:
+					Logic: OrderButtonsChromeLogic
+					X: 9
+					Y: 7
+					Children:
+						MenuButton@OBSERVER_STATS_BUTTON:
+							MenuContainer: INGAME_OBSERVERSTATS_BG
+							HideIngameUI: false
+							Pause: false
+							Key: F1
+							X: 160
+							Width: 28
+							Height: 28
+							Background: sidebar-button-observer
+							TooltipText: Statistics
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Children:
+								Image@ICON:
+									X: 6
+									Y: 6
+									ImageCollection: order-icons
+									ImageName: stats
+						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:
+							WorldInteractionController: INTERACTION_CONTROLLER
+							X: 9
+							Y: 41
+							Width: 220
+							Height: 220
 				DropDownButton@SHROUD_SELECTOR:
 					Logic: ObserverShroudSelectorLogic
-					X: 15
-					Y: 15
-					Width: 220
+					X: 6
+					Y: 262
+					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:
-					Logic: ReplayControlBarLogic
-					X: PARENT_RIGHT/2 - 80
-					Y: 35
-					Width: 160
-					Height: 35
-					Visible: false
+		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: WINDOW_RIGHT - 250
+			Y: 297
+			Width: 238
+			Height: 40
+			Visible: false
+			ImageCollection: sidebar-observer
+			ImageName: replay-bottom
+			ClickThrough: false
+			Visible: false
+			Children:
+				Button@BUTTON_PAUSE:
+					X: 9
+					Y: 5
+					Width: 28
+					Height: 28
+					Background: sidebar-button-observer
+					TooltipText: Pause
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
 					Children:
-						Button@BUTTON_PAUSE:
-							X: 15
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_PAUSE:
-									X: 0
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: pause
-						Button@BUTTON_SLOW:
-							X: 50
-							Y: 15
-							Width: 25
-							Height: 25
-							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:
-							X: 120
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_FASTFORWARD:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: fastforward
-
+						Image@IMAGE_PAUSE:
+							X: 2
+							Y: 2
+							ImageCollection: music
+							ImageName: pause
+				Button@BUTTON_PLAY:
+					X: 9
+					Y: 5
+					Width: 28
+					Height: 28
+					Background: sidebar-button-observer
+					TooltipText: Play
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Children:
+						Image@IMAGE_PLAY:
+							X: 2
+							Y: 1
+							ImageCollection: music
+							ImageName: play
+				Button@BUTTON_SLOW:
+					X: 49
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Slow speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 50%
+					Font: TinyBold
+				Button@BUTTON_REGULAR:
+					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
--- a/mods/ra/uibits/chrome.png
+++ b/mods/ra/uibits/chrome.png
--- a/mods/ra/uibits/dialog.png
+++ b/mods/ra/uibits/dialog.png
--- a/mods/ts/chrome.yaml
+++ b/mods/ts/chrome.yaml
@@ -397,54 +397,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
@@ -505,6 +457,54 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1

+# A copy of dialog2 (normal button)
+scrollpanel-button: 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
+scrollpanel-button-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)
+scrollpanel-button-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)
+scrollpanel-button-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
+
 slider: dialog.png
 	tick: 512,1,1,4

--- a/mods/ts/chrome/dropdowns.yaml
+++ b/mods/ts/chrome/dropdowns.yaml
@@ -0,0 +1,130 @@
+ScrollPanel@LABEL_DROPDOWN_TEMPLATE:
+	Width: DROPDOWN_WIDTH
+	Children:
+		ScrollItem@HEADER:
+			BaseName: scrollheader
+			Width: PARENT_RIGHT-27
+			Height: 13
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Label@LABEL:
+					Font: TinyBold
+					Width: PARENT_RIGHT
+					Height: 10
+					Align: Center
+		ScrollItem@TEMPLATE:
+			Width: PARENT_RIGHT-27
+			Height: 25
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Label@LABEL:
+					X: 10
+					Width: PARENT_RIGHT-20
+					Height: 25
+
+ScrollPanel@TEAM_DROPDOWN_TEMPLATE:
+	Width: DROPDOWN_WIDTH
+	Children:
+		ScrollItem@TEMPLATE:
+			Width: PARENT_RIGHT-27
+			Height: 25
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Label@LABEL:
+					X: 0
+					Width: PARENT_RIGHT
+					Height: 25
+					Align: Center
+
+ScrollPanel@SPAWN_DROPDOWN_TEMPLATE:
+	Width: DROPDOWN_WIDTH
+	Children:
+		ScrollItem@TEMPLATE:
+			Width: PARENT_RIGHT-27
+			Height: 25
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Label@LABEL:
+					X: 0
+					Width: PARENT_RIGHT
+					Height: 25
+					Align: Center
+
+ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
+	Width: DROPDOWN_WIDTH
+	Children:
+		ScrollItem@HEADER:
+			BaseName: scrollheader
+			Width: PARENT_RIGHT-27
+			Height: 13
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Label@LABEL:
+					Font: TinyBold
+					Width: PARENT_RIGHT
+					Height: 10
+					Align: Center
+		ScrollItem@TEMPLATE:
+			Width: PARENT_RIGHT-27
+			Height: 25
+			X: 2
+			Y: 0
+			Visible: false
+			Children:
+				Image@FLAG:
+					X: 4
+					Y: 6
+					Width: 32
+					Height: 16
+				Label@LABEL:
+					X: 40
+					Width: 60
+					Height: 25
+				Label@NOFLAG_LABEL:
+					X: 5
+					Width: PARENT_RIGHT
+					Height: 25
+
+ScrollPanel@NEWS_PANEL:
+	Width: 370
+	Height: 265
+	ItemSpacing: 5
+	Children:
+		Container@NEWS_ITEM_TEMPLATE:
+			X: 10
+			Y: 5
+			Width: PARENT_RIGHT - 40
+			Height: 45
+			Children:
+				Label@TITLE:
+					Width: PARENT_RIGHT
+					Height: 25
+					Align: Center
+					Font: Bold
+				Label@AUTHOR_DATETIME:
+					Y: 25
+					Width: PARENT_RIGHT
+					Height: 15
+					Align: Center
+					Text: by {0} at {1}
+					Font: TinyBold
+				Label@CONTENT:
+					Y: 45
+					Width: PARENT_RIGHT
+		Label@NEWS_STATUS:
+			X: 80
+			Y: 0
+			Width: PARENT_RIGHT - 80 - 80 - 24
+			Height: PARENT_BOTTOM
+			Align: Center
+			VAlign: Middle
--- a/mods/ts/chrome/ingame-observer.yaml
+++ b/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
--- a/mods/ts/mod.yaml
+++ b/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
@@ -129,7 +129,7 @@ ChromeLayout:
 	./mods/ra/chrome/connection.yaml
 	./mods/ra/chrome/directconnect.yaml
 	./mods/ra/chrome/replaybrowser.yaml
-	./mods/ra/chrome/dropdowns.yaml
+	./mods/ts/chrome/dropdowns.yaml
 	./mods/ra/chrome/musicplayer.yaml
 	./mods/ra/chrome/tooltips.yaml
 	./mods/ra/chrome/assetbrowser.yaml