Add visual diffs to syncing (#603)

* Add user confirmation to initial sync

* Use "Accept" instead of "Confirm"

* Draw tree alphabetically for determinism

* Add diff table dropdown

* Add diff table to newly added objects

* Unblock keybind workflow

* Only show reject button when two way is enabled

* Try to patch back to the files when changes are rejected

* Improve text spacing of the prop diff table

* Skip user confirmation of perfect syncs

* Give instances names for debugging UI

* Optimize tree building

* Efficiency: dynamic virtual scrolling & lazy rendering

* Simplify virtual scroller logic and avoid wasteful rerenders

* Remove debug print

* Consistent naming

* Move new patch applied callback into accept

* Pcall archivable

* Keybinds open popup diff window

* Theme rows in diff

* Remove relic of prototype

* Color value visuals and better component name

* changeBatcher is not needed when no sync is active

* Simplify popup roact entrypoint

* Alphabetical prop lists and refactor

* Add a stroke to color blot for contrast

* Make color blots animate transparency with the rest of the page

* StyLua formatting on newly added files

* Remove wasteful table

* Fix diffing custom properties

* Display tables more meaningfully

* Allow children in the button components

* Create a rough tooltip component

* Add tooltips to buttons

* Use provider+trigger schema to avoid tooltip ZIndex issues

* Add triangle point to tooltip

* Tooltip underneath instead of covering

* Cancel hovers when unmounting

* Allow multiple canvases from one provider

* Display above or below depending on available space

* Move patch equality to PatchSet.isEqual

* Use Container

* Remove old submodules

* Reduce false positives in diff

* Add debug log

* Fuzzy equals CFrame in diffs to avoid floating point in

* Fix decodeValue usage

* Support the .changedName patches

* Fix content overlapping border

* Fix tooltip tail alignment

* Fix tooltip text fit

* Whoops, fix it properly

* Move PatchVisualizer to Components

* Provide Connected info with full patch data

* Avoid implicit nil return

* Add patch visualizer to connected page

* Make Current column invisible when visualizing applied patches

* Avoid floating point diffs in a numbers and vectors

plugin/src/App/Components/BorderedContainer.lua

@@ -24,7 +24,8 @@ local function BorderedContainer(props)
 			layoutOrder = props.layoutOrder,
 		}, {
 			Content = e("Frame", {
-				Size = UDim2.new(1, 0, 1, 0),
+				Size = UDim2.new(1, -2, 1, -2),
+				Position = UDim2.new(0, 1, 0, 1),
 				BackgroundTransparency = 1,
 				ZIndex = 2,
 			}, props[Roact.Children]),

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -0,0 +1,181 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local DisplayValue = require(script.Parent.DisplayValue)
+
+local e = Roact.createElement
+
+local ChangeList = Roact.Component:extend("ChangeList")
+
+function ChangeList:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function ChangeList:render()
+	return Theme.with(function(theme)
+		local props = self.props
+		local changes = props.changes
+
+		-- Color alternating rows for readability
+		local rowTransparency = props.transparency:map(function(t)
+			return 0.93 + (0.07 * t)
+		end)
+
+		local columnVisibility = props.columnVisibility
+
+		local rows = {}
+		local pad = {
+			PaddingLeft = UDim.new(0, 5),
+			PaddingRight = UDim.new(0, 5),
+		}
+
+		local headers = e("Frame", {
+			Size = UDim2.new(1, 0, 0, 30),
+			BackgroundTransparency = rowTransparency,
+			BackgroundColor3 = theme.Diff.Row,
+			LayoutOrder = 0,
+		}, {
+			Padding = e("UIPadding", pad),
+			Layout = e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				HorizontalAlignment = Enum.HorizontalAlignment.Left,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+			}),
+			A = e("TextLabel", {
+				Visible = columnVisibility[1],
+				Text = tostring(changes[1][1]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.3, 0, 1, 0),
+				LayoutOrder = 1,
+			}),
+			B = e("TextLabel", {
+				Visible = columnVisibility[2],
+				Text = tostring(changes[1][2]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.35, 0, 1, 0),
+				LayoutOrder = 2,
+			}),
+			C = e("TextLabel", {
+				Visible = columnVisibility[3],
+				Text = tostring(changes[1][3]),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(0.35, 0, 1, 0),
+				LayoutOrder = 3,
+			}),
+		})
+
+		for row, values in changes do
+			if row == 1 then
+				continue -- Skip headers, already handled above
+			end
+
+			rows[row] = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 30),
+				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
+				BackgroundColor3 = theme.Diff.Row,
+				BorderSizePixel = 0,
+				LayoutOrder = row,
+			}, {
+				Padding = e("UIPadding", pad),
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					HorizontalAlignment = Enum.HorizontalAlignment.Left,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+				}),
+				A = e("TextLabel", {
+					Visible = columnVisibility[1],
+					Text = tostring(values[1]),
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(0.3, 0, 1, 0),
+					LayoutOrder = 1,
+				}),
+				B = e(
+					"Frame",
+					{
+						Visible = columnVisibility[2],
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0.35, 0, 1, 0),
+						LayoutOrder = 2,
+					},
+					e(DisplayValue, {
+						value = values[2],
+						transparency = props.transparency,
+					})
+				),
+				C = e(
+					"Frame",
+					{
+						Visible = columnVisibility[3],
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0.35, 0, 1, 0),
+						LayoutOrder = 3,
+					},
+					e(DisplayValue, {
+						value = values[3],
+						transparency = props.transparency,
+					})
+				),
+			})
+		end
+
+		table.insert(
+			rows,
+			e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+
+				[Roact.Change.AbsoluteContentSize] = function(object)
+					self.setContentSize(object.AbsoluteContentSize)
+				end,
+			})
+		)
+
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 1, 0),
+			BackgroundTransparency = 1,
+		}, {
+			Headers = headers,
+			Values = e(ScrollingFrame, {
+				size = UDim2.new(1, 0, 1, -30),
+				position = UDim2.new(0, 0, 0, 30),
+				contentSize = self.contentSize,
+				transparency = props.transparency,
+			}, rows),
+		})
+	end)
+end
+
+return ChangeList

plugin/src/App/Components/PatchVisualizer/DisplayValue.lua

@@ -0,0 +1,107 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local e = Roact.createElement
+
+local function DisplayValue(props)
+	return Theme.with(function(theme)
+		local t = typeof(props.value)
+		if t == "Color3" then
+			-- Colors get a blot that shows the color
+			return Roact.createFragment({
+				Blot = e("Frame", {
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = props.value,
+					Size = UDim2.new(0, 20, 0, 20),
+					Position = UDim2.new(0, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0, 0.5),
+				}, {
+					Corner = e("UICorner", {
+						CornerRadius = UDim.new(0, 4),
+					}),
+					Stroke = e("UIStroke", {
+						Color = theme.BorderedContainer.BorderColor,
+						Transparency = props.transparency,
+					}),
+				}),
+				Label = e("TextLabel", {
+					Text = string.format("%d,%d,%d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(1, -25, 1, 0),
+					Position = UDim2.new(0, 25, 0, 0),
+				}),
+			})
+
+		elseif t == "table" then
+			-- Showing a memory address for tables is useless, so we want to show the best we can
+			local textRepresentation = nil
+
+			local meta = getmetatable(props.value)
+			if meta and meta.__tostring then
+				-- If the table has a tostring metamethod, use that
+				textRepresentation = tostring(props.value)
+			elseif next(props.value) == nil then
+				-- If it's empty, show empty braces
+				textRepresentation = "{}"
+			else
+				-- If it has children, list them out
+				local out, i = {}, 0
+				for k, v in pairs(props.value) do
+					i += 1
+
+					-- Wrap strings in quotes
+					if type(k) == "string" then
+						k = "\"" .. k .. "\""
+					end
+					if type(v) == "string" then
+						v = "\"" .. v .. "\""
+					end
+
+					out[i] = string.format("[%s] = %s", tostring(k), tostring(v))
+				end
+				textRepresentation = "{ " .. table.concat(out, ", ") .. " }"
+			end
+
+			return e("TextLabel", {
+				Text = textRepresentation,
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(1, 0, 1, 0),
+			})
+		end
+
+		-- TODO: Maybe add visualizations to other datatypes?
+		-- Or special text handling tostring for some?
+		-- Will add as needed, let's see what cases arise.
+
+		return e("TextLabel", {
+			Text = string.gsub(tostring(props.value), "%s", " "),
+			BackgroundTransparency = 1,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 14,
+			TextColor3 = theme.Settings.Setting.DescriptionColor,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTransparency = props.transparency,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			Size = UDim2.new(1, 0, 1, 0),
+		})
+	end)
+end
+
+return DisplayValue

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -0,0 +1,180 @@
+local StudioService = game:GetService("StudioService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local ChangeList = require(script.Parent.ChangeList)
+
+local Expansion = Roact.Component:extend("Expansion")
+
+function Expansion:render()
+	local props = self.props
+
+	if not props.rendered then
+		return nil
+	end
+
+	return e("Frame", {
+		BackgroundTransparency = 1,
+		Size = UDim2.new(1, -props.indent, 1, -30),
+		Position = UDim2.new(0, props.indent, 0, 30),
+	}, {
+		ChangeList = e(ChangeList, {
+			changes = props.changeList,
+			transparency = props.transparency,
+			columnVisibility = props.columnVisibility,
+		}),
+	})
+end
+
+local DomLabel = Roact.Component:extend("DomLabel")
+
+function DomLabel:init()
+	self.maxElementHeight = 0
+	if self.props.changeList then
+		self.maxElementHeight = math.clamp(#self.props.changeList * 30, 30, 30 * 6)
+	end
+
+	local initHeight = self.props.elementHeight:getValue()
+	self.expanded = initHeight > 30
+
+	self.motor = Flipper.SingleMotor.new(initHeight)
+	self.binding = bindingUtil.fromMotor(self.motor)
+
+	self:setState({
+		renderExpansion = self.expanded,
+	})
+	self.motor:onStep(function(value)
+		local renderExpansion = value > 30
+
+		self.props.setElementHeight(value)
+		if self.props.updateEvent then
+			self.props.updateEvent:Fire()
+		end
+
+		self:setState(function(state)
+			if state.renderExpansion == renderExpansion then
+				return nil
+			end
+
+			return {
+				renderExpansion = renderExpansion,
+			}
+		end)
+	end)
+end
+
+function DomLabel:render()
+	local props = self.props
+
+	return Theme.with(function(theme)
+		local iconProps = StudioService:GetClassIcon(props.className)
+		local indent = (props.depth or 0) * 20 + 25
+
+		-- Line guides help indent depth remain readable
+		local lineGuides = {}
+		for i = 1, props.depth or 0 do
+			table.insert(
+				lineGuides,
+				e("Frame", {
+					Name = "Line_" .. i,
+					Size = UDim2.new(0, 2, 1, 2),
+					Position = UDim2.new(0, (20 * i) + 15, 0, -1),
+					BorderSizePixel = 0,
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				})
+			)
+		end
+
+		return e("Frame", {
+			Name = "Change",
+			ClipsDescendants = true,
+			BackgroundColor3 = if props.patchType then theme.Diff[props.patchType] else nil,
+			BorderSizePixel = 0,
+			BackgroundTransparency = props.patchType and props.transparency or 1,
+			Size = self.binding:map(function(expand)
+				return UDim2.new(1, 0, 0, expand)
+			end),
+		}, {
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 10),
+				PaddingRight = UDim.new(0, 10),
+			}),
+			ExpandButton = if props.changeList
+				then e("TextButton", {
+					BackgroundTransparency = 1,
+					Text = "",
+					Size = UDim2.new(1, 0, 1, 0),
+					[Roact.Event.Activated] = function()
+						self.expanded = not self.expanded
+						self.motor:setGoal(Flipper.Spring.new((self.expanded and self.maxElementHeight or 0) + 30, {
+							frequency = 5,
+							dampingRatio = 1,
+						}))
+					end,
+				})
+				else nil,
+			Expansion = if props.changeList
+				then e(Expansion, {
+					rendered = self.state.renderExpansion,
+					indent = indent,
+					transparency = props.transparency,
+					changeList = props.changeList,
+					columnVisibility = props.columnVisibility,
+				})
+				else nil,
+			DiffIcon = if props.patchType
+				then e("ImageLabel", {
+					Image = Assets.Images.Diff[props.patchType],
+					ImageColor3 = theme.AddressEntry.PlaceholderColor,
+					ImageTransparency = props.transparency,
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0, 20, 0, 20),
+					Position = UDim2.new(0, 0, 0, 15),
+					AnchorPoint = Vector2.new(0, 0.5),
+				})
+				else nil,
+			ClassIcon = e("ImageLabel", {
+				Image = iconProps.Image,
+				ImageTransparency = props.transparency,
+				ImageRectOffset = iconProps.ImageRectOffset,
+				ImageRectSize = iconProps.ImageRectSize,
+				BackgroundTransparency = 1,
+				Size = UDim2.new(0, 20, 0, 20),
+				Position = UDim2.new(0, indent, 0, 15),
+				AnchorPoint = Vector2.new(0, 0.5),
+			}),
+			InstanceName = e("TextLabel", {
+				Text = props.name .. (props.hint and string.format(
+					'  <font color="#%s">%s</font>',
+					theme.AddressEntry.PlaceholderColor:ToHex(),
+					props.hint
+				) or ""),
+				RichText = true,
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(1, -indent - 50, 0, 30),
+				Position = UDim2.new(0, indent + 30, 0, 0),
+			}),
+			LineGuides = e("Folder", nil, lineGuides),
+		})
+	end)
+end
+
+return DomLabel

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

@@ -0,0 +1,402 @@
+local HttpService = game:GetService("HttpService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
+
+local PatchSet = require(Plugin.PatchSet)
+local decodeValue = require(Plugin.Reconciler.decodeValue)
+local getProperty = require(Plugin.Reconciler.getProperty)
+
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
+
+local e = Roact.createElement
+
+local function alphabeticalNext(t, state)
+	-- Equivalent of the next function, but returns the keys in the alphabetic
+	-- order of node names. We use a temporary ordered key table that is stored in the
+	-- table being iterated.
+
+	local key = nil
+	if state == nil then
+		-- First iteration, generate the index
+		local orderedIndex, i = table.create(5), 0
+		for k in t do
+			i += 1
+			orderedIndex[i] = k
+		end
+		table.sort(orderedIndex, function(a, b)
+			local nodeA, nodeB = t[a], t[b]
+			return (nodeA.name or "") < (nodeB.name or "")
+		end)
+
+		t.__orderedIndex = orderedIndex
+		key = orderedIndex[1]
+	else
+		-- Fetch the next value
+		for i, orderedState in t.__orderedIndex do
+			if orderedState == state then
+				key = t.__orderedIndex[i + 1]
+				break
+			end
+		end
+	end
+
+	if key then
+		return key, t[key]
+	end
+
+	-- No more value to return, cleanup
+	t.__orderedIndex = nil
+	return
+end
+
+local function alphabeticalPairs(t)
+	-- Equivalent of the pairs() iterator, but sorted
+	return alphabeticalNext, t, nil
+end
+
+local function Tree()
+	local tree = {
+		idToNode = {},
+		ROOT = {
+			className = "DataModel",
+			name = "ROOT",
+			children = {},
+		},
+	}
+	-- Add ROOT to idToNode or it won't be found by getNode since that searches *within* ROOT
+	tree.idToNode["ROOT"] = tree.ROOT
+
+	function tree:getNode(id, target)
+		if self.idToNode[id] then
+			return self.idToNode[id]
+		end
+
+		for nodeId, node in target or tree.ROOT.children do
+			if nodeId == id then
+				self.idToNode[id] = node
+				return node
+			end
+			local descendant = self:getNode(id, node.children)
+			if descendant then
+				return descendant
+			end
+		end
+
+		return nil
+	end
+
+	function tree:addNode(parent, props)
+		parent = parent or "ROOT"
+
+		local node = self:getNode(props.id)
+		if node then
+			for k, v in props do
+				node[k] = v
+			end
+			return node
+		end
+
+		node = table.clone(props)
+		node.children = {}
+
+		local parentNode = self:getNode(parent)
+		if not parentNode then
+			Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
+			return
+		end
+
+		parentNode.children[node.id] = node
+		self.idToNode[node.id] = node
+
+		return node
+	end
+
+	function tree:buildAncestryNodes(ancestry, patch, instanceMap)
+		-- Build nodes for ancestry by going up the tree
+		local previousId = "ROOT"
+		for _, ancestorId in ancestry do
+			local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
+			if not value then
+				Log.warn("Failed to find ancestor object for " .. ancestorId)
+				continue
+			end
+			self:addNode(previousId, {
+				id = ancestorId,
+				className = value.ClassName,
+				name = value.Name,
+			})
+			previousId = ancestorId
+		end
+	end
+
+	return tree
+end
+
+local DomLabel = require(script.DomLabel)
+
+local PatchVisualizer = Roact.Component:extend("PatchVisualizer")
+
+function PatchVisualizer:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self.updateEvent = Instance.new("BindableEvent")
+end
+
+function PatchVisualizer:willUnmount()
+	self.updateEvent:Destroy()
+end
+
+function PatchVisualizer:shouldUpdate(nextProps)
+	local currentPatch, nextPatch = self.props.patch, nextProps.patch
+
+	return not PatchSet.isEqual(currentPatch, nextPatch)
+end
+
+function PatchVisualizer:buildTree(patch, instanceMap)
+	local tree = Tree()
+
+	for _, change in patch.updated do
+		local instance = instanceMap.fromIds[change.id]
+		if not instance then
+			continue
+		end
+
+		-- Gather ancestors from existing DOM
+		local ancestry = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject]
+		while parentObject do
+			table.insert(ancestry, 1, parentId)
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject]
+		end
+
+		tree:buildAncestryNodes(ancestry, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.changedProperties) or change.changedName then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			local function addProp(prop: string, current: any?, incoming: any?)
+				i += 1
+				hintBuffer[i] = prop
+				changeList[i] = { prop, current, incoming }
+			end
+
+			-- Gather the changes
+
+			if change.changedName then
+				addProp("Name", instance.Name, change.changedName)
+			end
+
+			for prop, incoming in change.changedProperties do
+				local incomingSuccess, incomingValue = decodeValue(incoming, instanceMap)
+				local currentSuccess, currentValue = getProperty(instance, prop)
+
+				addProp(
+					prop,
+					if currentSuccess then currentValue else "[Error]",
+					if incomingSuccess then incomingValue else next(incoming)
+				)
+			end
+
+			-- Finalize detail values
+
+			-- Trim hint to top 3
+			table.sort(hintBuffer)
+			if #hintBuffer > 3 then
+				hintBuffer = {
+					hintBuffer[1],
+					hintBuffer[2],
+					hintBuffer[3],
+					i - 3 .. " more",
+				}
+			end
+			hint = table.concat(hintBuffer, ", ")
+
+			-- Sort changes and add header
+			table.sort(changeList, function(a, b)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
+		end
+
+		-- Add this node to tree
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = change.id,
+			patchType = "Edit",
+			className = instance.ClassName,
+			name = instance.Name,
+			hint = hint,
+			changeList = changeList,
+		})
+	end
+
+	for _, instance in patch.removed do
+		-- Gather ancestors from existing DOM
+		-- (note that they may have no ID if they're being removed as unknown)
+		local ancestry = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		while parentObject do
+			instanceMap:insert(parentId, parentObject)
+			table.insert(ancestry, 1, parentId)
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		end
+
+		tree:buildAncestryNodes(ancestry, patch, instanceMap)
+
+		-- Add this node to tree
+		local nodeId = instanceMap.fromInstances[instance] or HttpService:GenerateGUID(false)
+		instanceMap:insert(nodeId, instance)
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = nodeId,
+			patchType = "Remove",
+			className = instance.ClassName,
+			name = instance.Name,
+		})
+	end
+
+	for _, change in patch.added do
+		-- Gather ancestors from existing DOM or future additions
+		local ancestry = {}
+		local parentId = change.Parent
+		local parentData = patch.added[parentId]
+		local parentObject = instanceMap.fromIds[parentId]
+		while parentId do
+			table.insert(ancestry, 1, parentId)
+			parentId = nil
+
+			if parentData then
+				parentId = parentData.Parent
+				parentData = patch.added[parentId]
+				parentObject = instanceMap.fromIds[parentId]
+			elseif parentObject then
+				parentObject = parentObject.Parent
+				parentId = instanceMap.fromInstances[parentObject]
+				parentData = patch.added[parentId]
+			end
+		end
+
+		tree:buildAncestryNodes(ancestry, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.Properties) then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			for prop, incoming in change.Properties do
+				i += 1
+				hintBuffer[i] = prop
+
+				local success, incomingValue = decodeValue(incoming, instanceMap)
+				if success then
+					table.insert(changeList, { prop, "N/A", incomingValue })
+				else
+					table.insert(changeList, { prop, "N/A", next(incoming) })
+				end
+			end
+
+			-- Finalize detail values
+
+			-- Trim hint to top 3
+			table.sort(hintBuffer)
+			if #hintBuffer > 3 then
+				hintBuffer = {
+					hintBuffer[1],
+					hintBuffer[2],
+					hintBuffer[3],
+					i - 3 .. " more",
+				}
+			end
+			hint = table.concat(hintBuffer, ", ")
+
+			-- Sort changes and add header
+			table.sort(changeList, function(a, b)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
+		end
+
+		-- Add this node to tree
+		tree:addNode(change.Parent, {
+			id = change.Id,
+			patchType = "Add",
+			className = change.ClassName,
+			name = change.Name,
+			hint = hint,
+			changeList = changeList,
+		})
+	end
+
+	return tree
+end
+
+function PatchVisualizer:render()
+	local patch = self.props.patch
+	local instanceMap = self.props.instanceMap
+
+	local tree = self:buildTree(patch, instanceMap)
+
+	-- Recusively draw tree
+	local scrollElements, elementHeights = {}, {}
+	local function drawNode(node, depth)
+		local elementHeight, setElementHeight = Roact.createBinding(30)
+		table.insert(elementHeights, elementHeight)
+		table.insert(
+			scrollElements,
+			e(DomLabel, {
+				columnVisibility = self.props.columnVisibility,
+				updateEvent = self.updateEvent,
+				elementHeight = elementHeight,
+				setElementHeight = setElementHeight,
+				patchType = node.patchType,
+				className = node.className,
+				name = node.name,
+				hint = node.hint,
+				changeList = node.changeList,
+				depth = depth,
+				transparency = self.props.transparency,
+			})
+		)
+
+		for _, childNode in alphabeticalPairs(node.children) do
+			drawNode(childNode, depth + 1)
+		end
+	end
+	for _, node in alphabeticalPairs(tree.ROOT.children) do
+		drawNode(node, 0)
+	end
+
+	return e(BorderedContainer, {
+		transparency = self.props.transparency,
+		size = self.props.size,
+		position = self.props.position,
+		layoutOrder = self.props.layoutOrder,
+	}, {
+		VirtualScroller = e(VirtualScroller, {
+			size = UDim2.new(1, 0, 1, 0),
+			transparency = self.props.transparency,
+			count = #scrollElements,
+			updateEvent = self.updateEvent.Event,
+			render = function(i)
+				return scrollElements[i]
+			end,
+			getHeightBinding = function(i)
+				return elementHeights[i]
+			end,
+		}),
+	})
+end
+
+return PatchVisualizer

plugin/src/App/Components/Studio/StudioPluginGui.lua

@@ -5,6 +5,7 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 
 local Dictionary = require(Plugin.Dictionary)
+local Theme = require(Plugin.App.Theme)
 
 local StudioPluginContext = require(script.Parent.StudioPluginContext)
 
@@ -29,8 +30,10 @@ function StudioPluginGui:init()
 		self.props.initDockState,
 		self.props.active,
 		self.props.overridePreviousState,
-		floatingSize.X, floatingSize.Y,
-		minimumSize.X, minimumSize.Y
+		floatingSize.X,
+		floatingSize.Y,
+		minimumSize.X,
+		minimumSize.Y
 	)
 
 	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
@@ -57,7 +60,16 @@ end
 function StudioPluginGui:render()
 	return e(Roact.Portal, {
 		target = self.pluginGui,
-	}, self.props[Roact.Children])
+	}, {
+		Background = Theme.with(function(theme)
+			return e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundColor3 = theme.BackgroundColor,
+				ZIndex = 0,
+				BorderSizePixel = 0,
+			}, self.props[Roact.Children])
+		end),
+	})
 end
 
 function StudioPluginGui:didUpdate(lastProps)
@@ -75,9 +87,12 @@ end
 local function StudioPluginGuiWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioPluginGui, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioPluginGui,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Tooltip.lua

@@ -23,7 +23,7 @@ local TooltipContext = Roact.createContext({})
 local function Popup(props)
 	local textSize = TextService:GetTextSize(
 		props.Text, 16, Enum.Font.GothamMedium, Vector2.new(math.min(props.parentSize.X, 160), math.huge)
-	) + TEXT_PADDING
+	) + TEXT_PADDING + (Vector2.one * 2)
 
 	local trigger = props.Trigger:getValue()
 
@@ -68,12 +68,12 @@ local function Popup(props)
 					if displayAbove then
 						UDim2.new(
 							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							1, -3
+							1, -1
 						)
 					else
 						UDim2.new(
 							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							0, -TAIL_SIZE+3
+							0, -TAIL_SIZE+1
 						),
 				Size = UDim2.fromOffset(TAIL_SIZE, TAIL_SIZE),
 				AnchorPoint = Vector2.new(0.5, 0),

plugin/src/App/Components/VirtualScroller.lua

@@ -0,0 +1,156 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local VirtualScroller = Roact.Component:extend("VirtualScroller")
+
+function VirtualScroller:init()
+	self.scrollFrameRef = Roact.createRef()
+	self:setState({
+		WindowSize = Vector2.new(),
+		CanvasPosition = Vector2.new(),
+	})
+
+	self.totalCanvas, self.setTotalCanvas = Roact.createBinding(0)
+	self.padding, self.setPadding = Roact.createBinding(0)
+
+	self:refresh()
+	if self.props.updateEvent then
+		self.connection = self.props.updateEvent:Connect(function()
+			self:refresh()
+		end)
+	end
+end
+
+function VirtualScroller:didMount()
+	local rbx = self.scrollFrameRef:getValue()
+
+	local windowSizeSignal = rbx:GetPropertyChangedSignal("AbsoluteWindowSize")
+	self.windowSizeChanged = windowSizeSignal:Connect(function()
+		self:setState({ WindowSize = rbx.AbsoluteWindowSize })
+		self:refresh()
+	end)
+
+	local canvasPositionSignal = rbx:GetPropertyChangedSignal("CanvasPosition")
+	self.canvasPositionChanged = canvasPositionSignal:Connect(function()
+		if math.abs(rbx.CanvasPosition.Y - self.state.CanvasPosition.Y) > 5 then
+			self:setState({ CanvasPosition = rbx.CanvasPosition })
+			self:refresh()
+		end
+	end)
+
+	self:refresh()
+end
+
+function VirtualScroller:willUnmount()
+	self.windowSizeChanged:Disconnect()
+	self.canvasPositionChanged:Disconnect()
+	if self.connection then
+		self.connection:Disconnect()
+		self.connection = nil
+	end
+end
+
+function VirtualScroller:refresh()
+	local props = self.props
+	local state = self.state
+
+	local count = props.count
+	local windowSize, canvasPosition = state.WindowSize.Y, state.CanvasPosition.Y
+	local bottom = canvasPosition + windowSize
+
+	local minIndex, maxIndex = 1, count
+	local padding, canvasSize = 0, 0
+
+	local pos = 0
+	for i = 1, count do
+		local height = props.getHeightBinding(i):getValue()
+		canvasSize += height
+
+		if pos > bottom then
+			-- Below window
+			if maxIndex > i then
+				maxIndex = i
+			end
+		end
+
+		pos += height
+
+		if pos < canvasPosition then
+			-- Above window
+			minIndex = i
+			padding = pos - height
+		end
+	end
+
+	self.setPadding(padding)
+	self.setTotalCanvas(canvasSize)
+	self:setState({
+		Start = minIndex,
+		End = maxIndex,
+	})
+end
+
+function VirtualScroller:render()
+	local props, state = self.props, self.state
+
+	local items = {}
+	for i = state.Start, state.End do
+		items["Item" .. i] = e("Frame", {
+			LayoutOrder = i,
+			Size = props.getHeightBinding(i):map(function(height)
+				return UDim2.new(1, 0, 0, height)
+			end),
+			BackgroundTransparency = 1,
+		}, props.render(i))
+	end
+
+	return Theme.with(function(theme)
+		return e("ScrollingFrame", {
+			Size = props.size,
+			Position = props.position,
+			AnchorPoint = props.anchorPoint,
+			BackgroundTransparency = props.backgroundTransparency or 1,
+			BackgroundColor3 = props.backgroundColor3,
+			BorderColor3 = props.borderColor3,
+			CanvasSize = self.totalCanvas:map(function(s)
+				return UDim2.fromOffset(0, s)
+			end),
+			ScrollBarThickness = 9,
+			ScrollBarImageColor3 = theme.ScrollBarColor,
+			ScrollBarImageTransparency = props.transparency:map(function(value)
+				return bindingUtil.blendAlpha({ 0.65, value })
+			end),
+			TopImage = Assets.Images.ScrollBar.Top,
+			MidImage = Assets.Images.ScrollBar.Middle,
+			BottomImage = Assets.Images.ScrollBar.Bottom,
+
+			ElasticBehavior = Enum.ElasticBehavior.Always,
+			ScrollingDirection = Enum.ScrollingDirection.Y,
+			VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
+			[Roact.Ref] = self.scrollFrameRef,
+		}, {
+			Layout = e("UIListLayout", {
+				Padding = UDim.new(0, 0),
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				FillDirection = Enum.FillDirection.Vertical,
+			}),
+			Padding = e("UIPadding", {
+				PaddingTop = self.padding:map(function(p)
+					return UDim.new(0, p)
+				end),
+			}),
+			Content = Roact.createFragment(items),
+		})
+	end)
+end
+
+return VirtualScroller