Debugger panel improvements

lib/debugger/ui.lua

@@ -120,6 +120,9 @@ local function ui(debugger, loop)
 			plasma.heading("SYSTEMS")
 			plasma.space(10)
 
+			local durations = {}
+			local longestDuration = 0
+
 			for _, eventName in debugger._eventOrder do
 				local systems = loop._orderedSystemsByEvent[eventName]
 
@@ -131,27 +134,33 @@ local function ui(debugger, loop)
 					font = Enum.Font.Gotham,
 				})
 				plasma.space(5)
+
 				local items = {}
 
 				for _, system in systems do
 					local samples = loop.profiling[system]
-					local averageFrameTime = ""
-					local icon
-
 					if samples then
 						local duration = rollingAverage.getAverage(samples)
 
-						if duration > 0.004 then -- 4ms
-							icon = "\xe2\x9a\xa0\xef\xb8\x8f"
-						end
+						durations[system] = duration
+						longestDuration = math.max(longestDuration, duration)
+					end
+				end
 
-						if loop._systemErrors[system] then
-							icon = "\xf0\x9f\x92\xa5"
-						end
+				for index, system in systems do
+					local averageFrameTime = ""
+					local icon
+
+					local duration = durations[system] or 0
+					local humanDuration, unit = formatDuration(duration)
+					averageFrameTime = string.format("%.0f%s", humanDuration, unit)
 
-						local humanDuration, unit = formatDuration(duration)
+					if duration > 0.004 then -- 4ms
+						icon = "\xe2\x9a\xa0\xef\xb8\x8f"
+					end
 
-						averageFrameTime = string.format("%.0f%s", humanDuration, unit)
+					if loop._systemErrors[system] then
+						icon = "\xf0\x9f\x92\xa5"
 					end
 
 					table.insert(items, {
@@ -160,6 +169,8 @@ local function ui(debugger, loop)
 						selected = debugger.debugSystem == system,
 						system = system,
 						icon = icon,
+						barWidth = duration / longestDuration,
+						index = index,
 					})
 				end
 

lib/debugger/widgets/link.lua

@@ -50,7 +50,7 @@ return function(Plasma)
 					Text = text,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextColor3 = color,
-					TextSize = 16,
+					TextSize = 14,
 				}),
 
 				Activated = function()
@@ -87,7 +87,7 @@ return function(Plasma)
 		refs.button.Icon.Text = options.icon or ""
 		refs.button.Icon.Visible = not not options.icon
 
-		refs.mainText.Font = options.font or Enum.Font.SourceSans
+		refs.mainText.Font = options.font or Enum.Font.Gotham
 
 		return {
 			clicked = function()

lib/debugger/widgets/panel.lua

@@ -10,7 +10,7 @@ return function(Plasma)
 				Name = "Panel",
 				BackgroundColor3 = style.bg2,
 				Position = UDim2.new(0, 0, 0, 0),
-				Size = UDim2.new(0, 250, 1, 0),
+				Size = UDim2.new(0, 260, 1, 0),
 
 				create("Frame", {
 					-- Account for GUI inset

lib/debugger/widgets/selectionList.lua

@@ -1,7 +1,7 @@
 return function(Plasma)
 	local create = Plasma.create
 
-	local Item = Plasma.widget(function(text, selected, icon, sideText)
+	local Item = Plasma.widget(function(text, selected, icon, sideText, _, barWidth, index)
 		local clicked, setClicked = Plasma.useState(false)
 		local style = Plasma.useStyle()
 
@@ -22,49 +22,80 @@ return function(Plasma)
 					PaddingTop = UDim.new(0, 0),
 				}),
 
-				create("UIListLayout", {
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					FillDirection = Enum.FillDirection.Horizontal,
-					Padding = UDim.new(0, 10),
-				}),
-
-				create("TextLabel", {
-					Name = "Icon",
+				create("Frame", {
+					[ref] = "container",
 					BackgroundTransparency = 1,
-					Size = UDim2.new(0, 22, 1, 0),
-					Text = icon,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextSize = 16,
-					TextColor3 = style.textColor,
-					Font = Enum.Font.GothamBold,
-				}),
+					Size = UDim2.new(1, 0, 1, 0),
 
-				create("TextLabel", {
-					AutomaticSize = Enum.AutomaticSize.X,
-					BackgroundTransparency = 1,
-					Size = UDim2.new(0, 0, 1, 0),
-					Text = text,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextSize = 16,
-					TextColor3 = style.textColor,
-					Font = Enum.Font.SourceSans,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-
-					create("UISizeConstraint", {
-						MaxSize = Vector2.new(165, math.huge),
+					create("UIListLayout", {
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						FillDirection = Enum.FillDirection.Horizontal,
+						Padding = UDim.new(0, 10),
+					}),
+
+					create("TextLabel", {
+						Name = "index",
+						AutomaticSize = Enum.AutomaticSize.X,
+						Size = UDim2.new(0, 0, 1, 0),
+						BackgroundTransparency = 1,
+						Text = index,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextSize = 11,
+						TextColor3 = style.mutedTextColor,
+						Font = Enum.Font.Gotham,
+						Visible = index ~= nil,
+					}),
+
+					create("TextLabel", {
+						Name = "Icon",
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 22, 1, 0),
+						Text = icon,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextSize = 16,
+						TextColor3 = style.textColor,
+						Font = Enum.Font.GothamBold,
+					}),
+
+					create("TextLabel", {
+						AutomaticSize = Enum.AutomaticSize.X,
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 0, 1, 0),
+						Text = text,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextSize = 13,
+						TextColor3 = style.textColor,
+						Font = Enum.Font.Gotham,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+
+						create("UISizeConstraint", {
+							MaxSize = Vector2.new(165, math.huge),
+						}),
+					}),
+
+					create("TextLabel", {
+						[ref] = "sideText",
+						BackgroundTransparency = 1,
+						AutomaticSize = Enum.AutomaticSize.X,
+						Size = UDim2.new(0, 0, 1, 0),
+						Text = "",
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextSize = 11,
+						TextColor3 = style.mutedTextColor,
+						Font = Enum.Font.Gotham,
 					}),
 				}),
 
-				create("TextLabel", {
-					[ref] = "sideText",
-					BackgroundTransparency = 1,
-					AutomaticSize = Enum.AutomaticSize.X,
-					Size = UDim2.new(0, 0, 1, 0),
-					Text = "",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextSize = 14,
-					TextColor3 = style.mutedTextColor,
-					Font = Enum.Font.SourceSans,
+				create("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+				}),
+
+				create("Frame", {
+					[ref] = "bar",
+					BackgroundColor3 = style.mutedTextColor,
+					BorderSizePixel = 0,
+					LayoutOrder = 1,
+					ZIndex = 2,
 				}),
 
 				Activated = function()
@@ -76,15 +107,17 @@ return function(Plasma)
 		end)
 
 		Plasma.useEffect(function()
-			refs.button.TextLabel.Text = text
-			refs.button.Icon.Text = icon or ""
-			refs.button.Icon.Visible = not not icon
+			refs.button.container.TextLabel.Text = text
+			refs.button.container.Icon.Text = icon or ""
+			refs.button.container.Icon.Visible = icon ~= nil
 		end, text, icon)
 
-		refs.sideText.Visible = not not sideText
-		refs.sideText.Text = sideText or ""
-		refs.sideText.TextColor3 = if selected then style.textColor else style.mutedTextColor
-		refs.button.TextLabel.TextTruncate = sideText and Enum.TextTruncate.AtEnd or Enum.TextTruncate.None
+		refs.button.container.sideText.Visible = sideText ~= nil
+		refs.button.container.sideText.Text = if sideText ~= nil then sideText else ""
+		refs.button.container.sideText.TextColor3 = if selected then style.textColor else style.mutedTextColor
+		refs.button.container.TextLabel.TextTruncate = sideText and Enum.TextTruncate.AtEnd or Enum.TextTruncate.None
+
+		refs.button.bar.Size = UDim2.new(barWidth or 0, 0, 0, 1)
 
 		Plasma.useEffect(function()
 			refs.button.BackgroundColor3 = if selected then style.primaryColor else style.bg2
@@ -125,7 +158,9 @@ return function(Plasma)
 		local selected
 
 		for _, item in items do
-			if Item(item.text, item.selected, item.icon, item.sideText, options.width):clicked() then
+			if
+				Item(item.text, item.selected, item.icon, item.sideText, options.width, item.barWidth, item.index):clicked()
+			then
 				selected = item
 			end
 		end