Add benchmarking, perf gains, and better settings UI (rojo-rbx#850)

plugin/src/App/Components/StringDiffVisualizer/init.lua

@@ -9,6 +9,7 @@ local Log = require(Packages.Log)
 local Highlighter = require(Packages.Highlighter)
 local StringDiff = require(script:FindFirstChild("StringDiff"))
 
+local Timer = require(Plugin.Timer)
 local Theme = require(Plugin.App.Theme)
 
 local CodeLabel = require(Plugin.App.Components.CodeLabel)
@@ -74,6 +75,7 @@ function StringDiffVisualizer:calculateContentSize()
 end
 
 function StringDiffVisualizer:calculateDiffLines()
+	Timer.start("StringDiffVisualizer:calculateDiffLines")
 	local oldString, newString = self.props.oldString, self.props.newString
 
 	-- Diff the two texts
@@ -133,6 +135,7 @@ function StringDiffVisualizer:calculateDiffLines()
 		end
 	end
 
+	Timer.stop()
 	return add, remove
 end
 

plugin/src/App/Components/TableDiffVisualizer/Array.lua

@@ -4,6 +4,7 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Timer = require(Plugin.Timer)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 
@@ -21,6 +22,7 @@ function Array:init()
 end
 
 function Array:calculateDiff()
+	Timer.start("Array:calculateDiff")
 	--[[
 		Find the indexes that are added or removed from the array,
 		and display them side by side with gaps for the indexes that
@@ -63,6 +65,7 @@ function Array:calculateDiff()
 		j += 1
 	end
 
+	Timer.stop()
 	return diff
 end
 

plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua

@@ -4,6 +4,7 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Timer = require(Plugin.Timer)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 
@@ -21,6 +22,7 @@ function Dictionary:init()
 end
 
 function Dictionary:calculateDiff()
+	Timer.start("Dictionary:calculateDiff")
 	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
 
 	-- Diff the two tables and find the added keys, removed keys, and changed keys
@@ -59,6 +61,7 @@ function Dictionary:calculateDiff()
 		return a.key < b.key
 	end)
 
+	Timer.stop()
 	return diff
 end
 

plugin/src/App/StatusPages/Confirming.lua

@@ -4,6 +4,8 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Timer = require(Plugin.Timer)
+local PatchTree = require(Plugin.PatchTree)
 local Settings = require(Plugin.Settings)
 local Theme = require(Plugin.App.Theme)
 local TextButton = require(Plugin.App.Components.TextButton)
@@ -23,13 +25,36 @@ function ConfirmingPage:init()
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
+		patchTree = nil,
 		showingStringDiff = false,
 		oldString = "",
 		newString = "",
 		showingTableDiff = false,
 		oldTable = {},
 		newTable = {},
 	})
+
+	if self.props.confirmData and self.props.confirmData.patch and self.props.confirmData.instanceMap then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:didUpdate(prevProps)
+	if prevProps.confirmData ~= self.props.confirmData then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:buildPatchTree()
+	Timer.start("ConfirmingPage:buildPatchTree")
+	self:setState({
+		patchTree = PatchTree.build(
+			self.props.confirmData.patch,
+			self.props.confirmData.instanceMap,
+			{ "Property", "Current", "Incoming" }
+		),
+	})
+	Timer.stop()
 end
 
 function ConfirmingPage:render()
@@ -61,9 +86,7 @@ function ConfirmingPage:render()
 				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				changeListHeaders = { "Property", "Current", "Incoming" },
-				patch = self.props.confirmData.patch,
-				instanceMap = self.props.confirmData.instanceMap,
+				patchTree = self.state.patchTree,
 
 				showStringDiff = function(oldString: string, newString: string)
 					self:setState({

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -121,8 +121,14 @@ function Setting:render()
 				BackgroundTransparency = 1,
 			}, {
 				Name = e("TextLabel", {
-					Text = (if self.props.experimental then '<font color="#FF8E3C">⚠ </font>' else "")
-						.. self.props.name,
+					Text = (
+						if self.props.experimental
+							then '<font color="#FF8E3C">⚠ </font>'
+							elseif
+								self.props.developerDebug
+							then '<font family="rbxasset://fonts/families/Guru.json" color="#35B5FF">⚑ </font>' -- Guru is the only font with the flag emoji
+							else ""
+					) .. self.props.name,
 					Font = Enum.Font.GothamBold,
 					TextSize = 17,
 					TextColor3 = theme.Setting.NameColor,
@@ -137,8 +143,10 @@ function Setting:render()
 				}),
 
 				Description = e("TextLabel", {
-					Text = (if self.props.experimental then '<font color="#FF8E3C">[Experimental] </font>' else "")
-						.. self.props.description,
+					Text = (if self.props.experimental
+						then '<font color="#FF8E3C">[Experimental] </font>'
+						elseif self.props.developerDebug then '<font color="#35B5FF">[Dev Debug] </font>'
+						else "") .. self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,