Add benchmarking, perf gains, and better settings UI (#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,6 +25,7 @@ function ConfirmingPage:init()
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
+		patchTree = nil,
 		showingStringDiff = false,
 		oldString = "",
 		newString = "",
@@ -30,6 +33,28 @@ function ConfirmingPage:init()
 		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,

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

@@ -84,148 +84,161 @@ function SettingsPage:render()
 	return Theme.with(function(theme)
 		theme = theme.Settings
 
-		return e(ScrollingFrame, {
-			size = UDim2.new(1, 0, 1, 0),
-			contentSize = self.contentSize,
-			transparency = self.props.transparency,
-		}, {
+		return Roact.createFragment({
 			Navbar = e(Navbar, {
 				onBack = self.props.onBack,
 				transparency = self.props.transparency,
 				layoutOrder = layoutIncrement(),
 			}),
-
-			ShowNotifications = e(Setting, {
-				id = "showNotifications",
-				name = "Show Notifications",
-				description = "Popup notifications in viewport",
+			Content = e(ScrollingFrame, {
+				size = UDim2.new(1, 0, 1, -47),
+				position = UDim2.new(0, 0, 0, 47),
+				contentSize = self.contentSize,
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			SyncReminder = e(Setting, {
-				id = "syncReminder",
-				name = "Sync Reminder",
-				description = "Notify to sync when opening a place that has previously been synced",
-				transparency = self.props.transparency,
-				visible = Settings:getBinding("showNotifications"),
-				layoutOrder = layoutIncrement(),
-			}),
-
-			ConfirmationBehavior = e(Setting, {
-				id = "confirmationBehavior",
-				name = "Confirmation Behavior",
-				description = "When to prompt for confirmation before syncing",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-
-				options = confirmationBehaviors,
-			}),
-
-			LargeChangesConfirmationThreshold = e(Setting, {
-				id = "largeChangesConfirmationThreshold",
-				name = "Confirmation Threshold",
-				description = "How many modified instances to be considered a large change",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = Settings:getBinding("confirmationBehavior"):map(function(value)
-					return value == "Large Changes"
-				end),
-				input = e(TextInput, {
-					size = UDim2.new(0, 40, 0, 28),
-					text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
-						return tostring(value)
-					end),
+			}, {
+				ShowNotifications = e(Setting, {
+					id = "showNotifications",
+					name = "Show Notifications",
+					description = "Popup notifications in viewport",
 					transparency = self.props.transparency,
-					enabled = true,
-					onEntered = function(text)
-						local number = tonumber(string.match(text, "%d+"))
-						if number then
-							Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
-						else
-							-- Force text back to last valid value
-							Settings:set(
-								"largeChangesConfirmationThreshold",
-								Settings:get("largeChangesConfirmationThreshold")
-							)
-						end
+					layoutOrder = layoutIncrement(),
+				}),
+
+				SyncReminder = e(Setting, {
+					id = "syncReminder",
+					name = "Sync Reminder",
+					description = "Notify to sync when opening a place that has previously been synced",
+					transparency = self.props.transparency,
+					visible = Settings:getBinding("showNotifications"),
+					layoutOrder = layoutIncrement(),
+				}),
+
+				ConfirmationBehavior = e(Setting, {
+					id = "confirmationBehavior",
+					name = "Confirmation Behavior",
+					description = "When to prompt for confirmation before syncing",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = confirmationBehaviors,
+				}),
+
+				LargeChangesConfirmationThreshold = e(Setting, {
+					id = "largeChangesConfirmationThreshold",
+					name = "Confirmation Threshold",
+					description = "How many modified instances to be considered a large change",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+					visible = Settings:getBinding("confirmationBehavior"):map(function(value)
+						return value == "Large Changes"
+					end),
+					input = e(TextInput, {
+						size = UDim2.new(0, 40, 0, 28),
+						text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
+							return tostring(value)
+						end),
+						transparency = self.props.transparency,
+						enabled = true,
+						onEntered = function(text)
+							local number = tonumber(string.match(text, "%d+"))
+							if number then
+								Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
+							else
+								-- Force text back to last valid value
+								Settings:set(
+									"largeChangesConfirmationThreshold",
+									Settings:get("largeChangesConfirmationThreshold")
+								)
+							end
+						end,
+					}),
+				}),
+
+				PlaySounds = e(Setting, {
+					id = "playSounds",
+					name = "Play Sounds",
+					description = "Toggle sound effects",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				AutoConnectPlaytestServer = e(Setting, {
+					id = "autoConnectPlaytestServer",
+					name = "Auto Connect Playtest Server",
+					description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
+					experimental = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				OpenScriptsExternally = e(Setting, {
+					id = "openScriptsExternally",
+					name = "Open Scripts Externally",
+					description = "Attempt to open scripts in an external editor",
+					locked = self.props.syncActive,
+					experimental = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				TwoWaySync = e(Setting, {
+					id = "twoWaySync",
+					name = "Two-Way Sync",
+					description = "Editing files in Studio will sync them into the filesystem",
+					locked = self.props.syncActive,
+					experimental = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				LogLevel = e(Setting, {
+					id = "logLevel",
+					name = "Log Level",
+					description = "Plugin output verbosity level",
+					developerDebug = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = invertedLevels,
+					showReset = Settings:getBinding("logLevel"):map(function(value)
+						return value ~= "Info"
+					end),
+					onReset = function()
+						Settings:set("logLevel", "Info")
 					end,
 				}),
-			}),
 
-			PlaySounds = e(Setting, {
-				id = "playSounds",
-				name = "Play Sounds",
-				description = "Toggle sound effects",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
+				TypecheckingEnabled = e(Setting, {
+					id = "typecheckingEnabled",
+					name = "Typechecking",
+					description = "Toggle typechecking on the API surface",
+					developerDebug = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
 
-			AutoConnectPlaytestServer = e(Setting, {
-				id = "autoConnectPlaytestServer",
-				name = "Auto Connect Playtest Server",
-				description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
-				experimental = true,
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
+				TimingLogsEnabled = e(Setting, {
+					id = "timingLogsEnabled",
+					name = "Timing Logs",
+					description = "Toggle logging timing of internal actions for benchmarking Rojo performance",
+					developerDebug = true,
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
 
-			OpenScriptsExternally = e(Setting, {
-				id = "openScriptsExternally",
-				name = "Open Scripts Externally",
-				description = "Attempt to open scripts in an external editor",
-				locked = self.props.syncActive,
-				experimental = true,
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
 
-			TwoWaySync = e(Setting, {
-				id = "twoWaySync",
-				name = "Two-Way Sync",
-				description = "Editing files in Studio will sync them into the filesystem",
-				locked = self.props.syncActive,
-				experimental = true,
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
+					[Roact.Change.AbsoluteContentSize] = function(object)
+						self.setContentSize(object.AbsoluteContentSize)
+					end,
+				}),
 
-			LogLevel = e(Setting, {
-				id = "logLevel",
-				name = "Log Level",
-				description = "Plugin output verbosity level",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-
-				options = invertedLevels,
-				showReset = Settings:getBinding("logLevel"):map(function(value)
-					return value ~= "Info"
-				end),
-				onReset = function()
-					Settings:set("logLevel", "Info")
-				end,
-			}),
-
-			TypecheckingEnabled = e(Setting, {
-				id = "typecheckingEnabled",
-				name = "Typechecking",
-				description = "Toggle typechecking on the API surface",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			Layout = e("UIListLayout", {
-				FillDirection = Enum.FillDirection.Vertical,
-				SortOrder = Enum.SortOrder.LayoutOrder,
-
-				[Roact.Change.AbsoluteContentSize] = function(object)
-					self.setContentSize(object.AbsoluteContentSize)
-				end,
-			}),
-
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 20),
-				PaddingRight = UDim.new(0, 20),
+				Padding = e("UIPadding", {
+					PaddingLeft = UDim.new(0, 20),
+					PaddingRight = UDim.new(0, 20),
+				}),
 			}),
 		})
 	end)