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