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/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