Release 7.4.1 (#872)

Unlike most of the other backports, this code couldn't be directly
translated so it had to be re-implemented. Luckily, it is very simple.
This implementation is a bit messy and heavy handed with potential
panics, but I think it's probably fine since file names that aren't
UTF-8 aren't really supported anyway. The original implementation is a
lot cleaner though.

The test snapshots are (almost) all identical between the 7.5
implementation and this one. The sole exception is with the path in the
`snapshot_middleware::project` test, since I didn't feel like adding a
`name` parameter to `snapshot_project` in this implementation.

.dir-locals.el

@@ -1,2 +0,0 @@
-((nil . ((eglot-luau-rojo-project-path . "plugin.project.json")
-         (eglot-luau-rojo-sourcemap-enabled . 't))))

.gitattributes

@@ -1 +0,0 @@
-*.lua linguist-language=Luau

.github/workflows/changelog.yml

@@ -11,12 +11,12 @@ jobs:
     name: Check Actions
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-
+    - uses: actions/checkout@v3
+    
     - name: Changelog check
       uses: Zomzog/changelog-checker@v1.3.0
       with:
-        fileName: CHANGELOG.md
+        fileName: CHANGELOG.md 
         noChangelogLabel: skip changelog
         checkNotification: Simple
       env:

.github/workflows/ci.yml

@@ -16,24 +16,27 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-22.04, windows-latest, macos-latest, windows-11-arm, ubuntu-22.04-arm]
+        os: [ubuntu-latest, windows-latest, macos-latest]
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
       with:
         submodules: true
 
     - name: Install Rust
-      uses: dtolnay/rust-toolchain@stable
-
-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
+      uses: actions-rs/toolchain@v1
       with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        toolchain: stable
+        override: true
+        profile: minimal
+
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
 
     - name: Build
       run: cargo build --locked --verbose
@@ -41,75 +44,56 @@ jobs:
     - name: Test
       run: cargo test --locked --verbose
 
-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
   msrv:
     name: Check MSRV
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
       with:
         submodules: true
 
     - name: Install Rust
-      uses: dtolnay/rust-toolchain@1.88.0
-
-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
+      uses: actions-rs/toolchain@v1
       with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        toolchain: 1.70.0
+        override: true
+        profile: minimal
+
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
 
     - name: Build
       run: cargo build --locked --verbose
 
-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
   lint:
     name: Rustfmt, Clippy, Stylua, & Selene
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
       with:
         submodules: true
 
     - name: Install Rust
-      uses: dtolnay/rust-toolchain@stable
+      uses: actions-rs/toolchain@v1
       with:
+        toolchain: stable
+        override: true
         components: rustfmt, clippy
 
-    - name: Restore Rust Cache
-      uses: actions/cache/restore@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
 
-    - name: Setup Rokit
-      uses: CompeyDev/setup-rokit@v0.1.2
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
       with:
-        version: 'v1.1.0'
+        version: 'v0.2.7'
 
     - name: Stylua
       run: stylua --check plugin/src
@@ -123,11 +107,3 @@ jobs:
     - name: Clippy
       run: cargo clippy
 
-    - name: Save Rust Cache
-      uses: actions/cache/save@v4
-      with:
-        path: |
-          ~/.cargo/registry
-          ~/.cargo/git
-          target
-        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}

.github/workflows/release.yml

@@ -8,39 +8,51 @@ jobs:
   create-release:
     name: Create Release
     runs-on: ubuntu-latest
+    outputs:
+      upload_url: ${{ steps.create_release.outputs.upload_url }}
     steps:
-      - uses: actions/checkout@v4
       - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh release create ${{ github.ref_name }} --draft --verify-tag --title ${{ github.ref_name }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: ${{ github.ref }}
+          draft: true
+          prerelease: false
 
   build-plugin:
     needs: ["create-release"]
     name: Build Roblox Studio Plugin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
         with:
           submodules: true
 
-      - name: Setup Rokit
-        uses: CompeyDev/setup-rokit@v0.1.2
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
         with:
-          version: 'v1.1.0'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          trust-check: false
+          version: 'v0.2.6'
 
       - name: Build Plugin
-        run: rojo build plugin.project.json --output Rojo.rbxm
+        run: rojo build plugin --output Rojo.rbxm
 
       - name: Upload Plugin to Release
+        uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh release upload ${{ github.ref_name }} Rojo.rbxm
+        with:
+          upload_url: ${{ needs.create-release.outputs.upload_url }}
+          asset_path: Rojo.rbxm
+          asset_name: Rojo.rbxm
+          asset_content_type: application/octet-stream
 
       - name: Upload Plugin to Artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: Rojo.rbxm
           path: Rojo.rbxm
@@ -53,25 +65,15 @@ jobs:
         # https://doc.rust-lang.org/rustc/platform-support.html
         include:
           - host: linux
-            os: ubuntu-22.04
+            os: ubuntu-20.04
             target: x86_64-unknown-linux-gnu
             label: linux-x86_64
 
-          - host: linux
-            os: ubuntu-22.04-arm
-            target: aarch64-unknown-linux-gnu
-            label: linux-aarch64
-
           - host: windows
             os: windows-latest
             target: x86_64-pc-windows-msvc
             label: windows-x86_64
 
-          - host: windows
-            os: windows-11-arm
-            target: aarch64-pc-windows-msvc
-            label: windows-aarch64
-
           - host: macos
             os: macos-latest
             target: x86_64-apple-darwin
@@ -87,64 +89,70 @@ jobs:
     env:
       BIN: rojo
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
         with:
           submodules: true
 
-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.target }}
+      - name: Get Version from Tag
+        shell: bash
+        # https://github.community/t/how-to-get-just-the-tag-name/16241/7#M1027
+        run: |
+          echo "PROJECT_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+          echo "Version is: ${{ env.PROJECT_VERSION }}"
 
-      - name: Restore Rust Cache
-        uses: actions/cache/restore@v4
+      - name: Install Rust
+        uses: actions-rs/toolchain@v1
         with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            target
-          key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+          toolchain: stable
+          target: ${{ matrix.target }}
+          override: true
+          profile: minimal
+
+      - name: Setup Aftman
+        uses: ok-nick/setup-aftman@v0.1.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          trust-check: false
+          version: 'v0.2.6'
 
       - name: Build Release
         run: cargo build --release --locked --verbose --target ${{ matrix.target }}
-
-      - name: Save Rust Cache
-        uses: actions/cache/save@v4
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            target
-          key: ${{ matrix.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Generate Artifact Name
-        shell: bash
         env:
-          TAG_NAME: ${{ github.ref_name }}
-        run: |
-          echo "ARTIFACT_NAME=$BIN-${TAG_NAME#v}-${{ matrix.label }}.zip" >> "$GITHUB_ENV"
+          # Build into a known directory so we can find our build artifact more
+          # easily.
+          CARGO_TARGET_DIR: output
 
-      - name: Create Archive and Upload to Release
+          # On platforms that use OpenSSL, ensure it is statically linked to
+          # make binaries more portable.
+          OPENSSL_STATIC: 1
+
+      - name: Create Release Archive
         shell: bash
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           mkdir staging
 
           if [ "${{ matrix.host }}" = "windows" ]; then
-            cp "target/${{ matrix.target }}/release/$BIN.exe" staging/
+            cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
             cd staging
-            7z a ../$ARTIFACT_NAME *
+            7z a ../release.zip *
           else
-            cp "target/${{ matrix.target }}/release/$BIN" staging/
+            cp "output/${{ matrix.target }}/release/$BIN" staging/
             cd staging
-            zip ../$ARTIFACT_NAME *
+            zip ../release.zip *
           fi
 
-          gh release upload ${{ github.ref_name }} ../$ARTIFACT_NAME
+      - name: Upload Archive to Release
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ needs.create-release.outputs.upload_url }}
+          asset_path: release.zip
+          asset_name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
+          asset_content_type: application/octet-stream
 
       - name: Upload Archive to Artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
-          path: ${{ env.ARTIFACT_NAME }}
-          name: ${{ env.ARTIFACT_NAME }}
+          name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
+          path: release.zip

.gitignore

@@ -10,8 +10,8 @@
 /*.rbxl
 /*.rbxlx
 
-# Sourcemap for the Rojo plugin (for better intellisense)
-/sourcemap.json
+# Test places for the Roblox Studio Plugin
+/plugin/*.rbxlx
 
 # Roblox Studio holds 'lock' files on places
 *.rbxl.lock
@@ -19,7 +19,3 @@
 
 # Snapshot files from the 'insta' Rust crate
 **/*.snap.new
-
-# Macos file system junk
-._*
-.DS_STORE

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "JohnnyMorganz.luau-lsp",
-    "JohnnyMorganz.stylua",
-    "Kampfkarren.selene-vscode",
-    "rust-lang.rust-analyzer"
-  ]
-}

.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  "luau-lsp.sourcemap.rojoProjectFile": "plugin.project.json",
-  "luau-lsp.sourcemap.autogenerate": true
-}

CONTRIBUTING.md

@@ -15,29 +15,12 @@ You'll want these tools to work on Rojo:
 
 * Latest stable Rust compiler
 * Latest stable [Rojo](https://github.com/rojo-rbx/rojo)
-* [Rokit](https://github.com/rojo-rbx/rokit)
-* [Luau Language Server](https://github.com/JohnnyMorganz/luau-lsp) (Only needed if working on the Studio plugin.)
-
-When working on the Studio plugin, we recommend using this command to automatically rebuild the plugin when you save a change:
-
-*(Make sure you've enabled the Studio setting to reload plugins on file change!)*
-
-```bash
-bash scripts/watch-build-plugin.sh
-```
-
-You can also run the plugin's unit tests with the following:
-
-*(Make sure you have `run-in-roblox` installed first!)*
-
-```bash
-bash scripts/unit-test-plugin.sh
-```
+* [Foreman](https://github.com/Roblox/foreman)
 
 ## Documentation
 Documentation impacts way more people than the individual lines of code we write.
 
-If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them.
+If you find any problems in documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them.
 
 ## Bug Reports and Feature Requests
 Most of the tools around Rojo try to be clear when an issue is a bug. Even if they aren't, sometimes things don't work quite right.

Cargo.toml

@@ -1,12 +1,8 @@
 [package]
 name = "rojo"
-version = "7.6.1"
-rust-version = "1.88"
-authors = [
-    "Lucien Greathouse <me@lpghatguy.com>",
-    "Micah Reid <git@dekkonot.com>",
-    "Ken Loeffler <kenloef@gmail.com>",
-]
+version = "7.4.1"
+rust-version = "1.70.0"
+authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 description = "Enables professional-grade development tools for Roblox developers"
 license = "MPL-2.0"
 homepage = "https://rojo.space"
@@ -30,9 +26,7 @@ default = []
 # Enable this feature to live-reload assets from the web UI.
 dev_live_assets = []
 
-# Run Rojo with this feature to open a Tracy session.
-# Currently uses protocol v63, last supported in Tracy 0.9.1.
-profile-with-tracy = ["profiling/profile-with-tracy"]
+profile-with-tracy = ["profiling/profile-with-tracy", "tracy-client"]
 
 [workspace]
 members = ["crates/*"]
@@ -46,7 +40,7 @@ name = "build"
 harness = false
 
 [dependencies]
-memofs = { version = "0.3.0", path = "crates/memofs" }
+memofs = { version = "0.2.0", path = "crates/memofs" }
 
 # These dependencies can be uncommented when working on rbx-dom simultaneously
 # rbx_binary = { path = "../rbx-dom/rbx_binary" }
@@ -55,68 +49,67 @@ memofs = { version = "0.3.0", path = "crates/memofs" }
 # rbx_reflection_database = { path = "../rbx-dom/rbx_reflection_database" }
 # rbx_xml = { path = "../rbx-dom/rbx_xml" }
 
-rbx_binary = "2.0.0"
-rbx_dom_weak = "4.0.0"
-rbx_reflection = "6.0.0"
-rbx_reflection_database = "2.0.1"
-rbx_xml = "2.0.0"
+rbx_binary = "0.7.4"
+rbx_dom_weak = "2.7.0"
+rbx_reflection = "4.5.0"
+rbx_reflection_database = "0.2.10"
+rbx_xml = "0.13.3"
 
-anyhow = "1.0.80"
-backtrace = "0.3.69"
+anyhow = "1.0.44"
+backtrace = "0.3.61"
 bincode = "1.3.3"
-crossbeam-channel = "0.5.12"
-csv = "1.3.0"
-env_logger = "0.9.3"
-fs-err = "2.11.0"
-futures = "0.3.30"
-globset = "0.4.14"
+crossbeam-channel = "0.5.1"
+csv = "1.1.6"
+env_logger = "0.9.0"
+fs-err = "2.6.0"
+futures = "0.3.17"
+globset = "0.4.8"
 humantime = "2.1.0"
-hyper = { version = "0.14.28", features = ["server", "tcp", "http1"] }
+hyper = { version = "0.14.13", features = ["server", "tcp", "http1"] }
 jod-thread = "0.1.2"
-log = "0.4.21"
-num_cpus = "1.16.0"
-opener = "0.5.2"
-rayon = "1.9.0"
-reqwest = { version = "0.11.24", default-features = false, features = [
+log = "0.4.14"
+maplit = "1.0.2"
+num_cpus = "1.15.0"
+opener = "0.5.0"
+rayon = "1.7.0"
+reqwest = { version = "0.11.10", features = [
     "blocking",
     "json",
-    "rustls-tls",
+    "native-tls-vendored",
 ] }
 ritz = "0.1.0"
 roblox_install = "1.0.0"
-serde = { version = "1.0.197", features = ["derive", "rc"] }
-serde_json = "1.0.145"
-jsonc-parser = { version = "0.27.0", features = ["serde"] }
-toml = "0.5.11"
-termcolor = "1.4.1"
-thiserror = "1.0.57"
-tokio = { version = "1.36.0", features = ["rt", "rt-multi-thread"] }
-uuid = { version = "1.7.0", features = ["v4", "serde"] }
-clap = { version = "3.2.25", features = ["derive"] }
-profiling = "1.0.15"
-yaml-rust2 = "0.10.3"
-data-encoding = "2.8.0"
+serde = { version = "1.0.130", features = ["derive", "rc"] }
+serde_json = "1.0.68"
+toml = "0.5.9"
+termcolor = "1.1.2"
+thiserror = "1.0.30"
+tokio = { version = "1.12.0", features = ["rt", "rt-multi-thread"] }
+uuid = { version = "1.0.0", features = ["v4", "serde"] }
+clap = { version = "3.1.18", features = ["derive"] }
+profiling = "1.0.6"
+tracy-client = { version = "0.13.2", optional = true }
 
 [target.'cfg(windows)'.dependencies]
 winreg = "0.10.1"
 
 [build-dependencies]
-memofs = { version = "0.3.0", path = "crates/memofs" }
+memofs = { version = "0.2.0", path = "crates/memofs" }
 
-embed-resource = "1.8.0"
-anyhow = "1.0.80"
+embed-resource = "1.6.4"
+anyhow = "1.0.44"
 bincode = "1.3.3"
-fs-err = "2.11.0"
+fs-err = "2.6.0"
 maplit = "1.0.2"
-semver = "1.0.22"
+semver = "1.0.19"
 
 [dev-dependencies]
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }
 
-criterion = "0.3.6"
-insta = { version = "1.36.1", features = ["redactions", "yaml"] }
-paste = "1.0.14"
-pretty_assertions = "1.4.0"
-serde_yaml = "0.8.26"
-tempfile = "3.10.1"
-walkdir = "2.5.0"
+criterion = "0.3.5"
+insta = { version = "1.8.0", features = ["redactions", "yaml"] }
+paste = "1.0.5"
+pretty_assertions = "1.2.1"
+serde_yaml = "0.8.21"
+tempfile = "3.2.0"
+walkdir = "2.3.2"

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <a href="https://rojo.space"><img src="assets/brand_images/logo-512.png" alt="Rojo" height="217" /></a>
+    <a href="https://rojo.space"><img src="assets/logo-512.png" alt="Rojo" height="217" /></a>
 </div>
 
 <div>&nbsp;</div>
@@ -40,7 +40,7 @@ Check out our [contribution guide](CONTRIBUTING.md) for detailed instructions fo
 
 Pull requests are welcome!
 
-Rojo supports Rust 1.88 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
+Rojo supports Rust 1.70.0 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
 
 ## License
-Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.
+Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.

aftman.toml

@@ -0,0 +1,5 @@
+[tools]
+rojo = "rojo-rbx/rojo@7.3.0"
+selene = "Kampfkarren/selene@0.26.1"
+stylua = "JohnnyMorganz/stylua@0.18.2"
+run-in-roblox = "rojo-rbx/run-in-roblox@0.3.0"

assets/default-model-project/gitignore.txt

@@ -1,5 +1,3 @@
 # Roblox Studio lock files
 /*.rbxlx.lock
-/*.rbxl.lock
-
-sourcemap.json
+/*.rbxl.lock

assets/default-model-project/src-init.luau

@@ -2,4 +2,4 @@ return {
 	hello = function()
 		print("Hello world, from {project_name}!")
 	end,
-}
+}

assets/default-place-project/gitignore.txt

@@ -3,6 +3,4 @@
 
 # Roblox Studio lock files
 /*.rbxlx.lock
-/*.rbxl.lock
-
-sourcemap.json
+/*.rbxl.lock

assets/default-plugin-project/gitignore.txt

@@ -1,5 +1,3 @@
 # Plugin model files
 /{project_name}.rbxmx
 /{project_name}.rbxm
-
-sourcemap.json

assets/index.css

@@ -17,10 +17,6 @@ html {
   line-height: 1.4;
 }
 
-body {
-  background-color: #e7e7e7
-}
-
 img {
   max-width:100%;
   max-height:100%;

assets/project-templates/place/src/client/init.client.luau

@@ -1 +0,0 @@
-print("Hello world, from client!")

assets/project-templates/place/src/server/init.server.luau

@@ -1 +0,0 @@
-print("Hello world, from server!")

assets/project-templates/place/src/shared/Hello.luau

@@ -1,3 +0,0 @@
-return function()
-	print("Hello, world!")
-end

assets/project-templates/plugin/src/init.server.luau

@@ -1 +0,0 @@
-print("Hello world, from plugin!")

build.rs

@@ -20,10 +20,6 @@ fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
 
             let file_name = entry.file_name().to_str().unwrap().to_owned();
 
-            if file_name.starts_with(".git") {
-                continue;
-            }
-
             // We can skip any TestEZ test files since they aren't necessary for
             // the plugin to run.
             if file_name.ends_with(".spec.lua") || file_name.ends_with(".spec.luau") {
@@ -45,39 +41,33 @@ fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
 fn main() -> Result<(), anyhow::Error> {
     let out_dir = env::var_os("OUT_DIR").unwrap();
 
-    let root_dir = PathBuf::from(env::var_os("CARGO_MANIFEST_DIR").unwrap());
-    let plugin_dir = root_dir.join("plugin");
-    let templates_dir = root_dir.join("assets").join("project-templates");
+    let root_dir = env::var_os("CARGO_MANIFEST_DIR").unwrap();
+    let plugin_root = PathBuf::from(root_dir).join("plugin");
 
     let our_version = Version::parse(env::var_os("CARGO_PKG_VERSION").unwrap().to_str().unwrap())?;
     let plugin_version =
-        Version::parse(fs::read_to_string(plugin_dir.join("Version.txt"))?.trim())?;
+        Version::parse(fs::read_to_string(plugin_root.join("Version.txt"))?.trim())?;
 
     assert_eq!(
         our_version, plugin_version,
         "plugin version does not match Cargo version"
     );
 
-    let template_snapshot = snapshot_from_fs_path(&templates_dir)?;
-
-    let plugin_snapshot = VfsSnapshot::dir(hashmap! {
-        "default.project.json" => snapshot_from_fs_path(&root_dir.join("plugin.project.json"))?,
-        "plugin" => VfsSnapshot::dir(hashmap! {
-            "fmt" => snapshot_from_fs_path(&plugin_dir.join("fmt"))?,
-            "http" => snapshot_from_fs_path(&plugin_dir.join("http"))?,
-            "log" => snapshot_from_fs_path(&plugin_dir.join("log"))?,
-            "rbx_dom_lua" => snapshot_from_fs_path(&plugin_dir.join("rbx_dom_lua"))?,
-            "src" => snapshot_from_fs_path(&plugin_dir.join("src"))?,
-            "Packages" => snapshot_from_fs_path(&plugin_dir.join("Packages"))?,
-            "Version.txt" => snapshot_from_fs_path(&plugin_dir.join("Version.txt"))?,
-        }),
+    let snapshot = VfsSnapshot::dir(hashmap! {
+        "default.project.json" => snapshot_from_fs_path(&plugin_root.join("default.project.json"))?,
+        "fmt" => snapshot_from_fs_path(&plugin_root.join("fmt"))?,
+        "http" => snapshot_from_fs_path(&plugin_root.join("http"))?,
+        "log" => snapshot_from_fs_path(&plugin_root.join("log"))?,
+        "rbx_dom_lua" => snapshot_from_fs_path(&plugin_root.join("rbx_dom_lua"))?,
+        "src" => snapshot_from_fs_path(&plugin_root.join("src"))?,
+        "Packages" => snapshot_from_fs_path(&plugin_root.join("Packages"))?,
+        "Version.txt" => snapshot_from_fs_path(&plugin_root.join("Version.txt"))?,
     });
 
-    let template_file = File::create(Path::new(&out_dir).join("templates.bincode"))?;
-    let plugin_file = File::create(Path::new(&out_dir).join("plugin.bincode"))?;
+    let out_path = Path::new(&out_dir).join("plugin.bincode");
+    let out_file = File::create(out_path)?;
 
-    bincode::serialize_into(plugin_file, &plugin_snapshot)?;
-    bincode::serialize_into(template_file, &template_snapshot)?;
+    bincode::serialize_into(out_file, &snapshot)?;
 
     println!("cargo:rerun-if-changed=build/windows/rojo-manifest.rc");
     println!("cargo:rerun-if-changed=build/windows/rojo.manifest");

crates/memofs/CHANGELOG.md

@@ -1,8 +1,6 @@
 # memofs Changelog
 
 ## Unreleased Changes
-
-## 0.3.0 (2024-03-15)
 * Changed `StdBackend` file watching component to use minimal recursive watches. [#830]
 * Added `Vfs::read_to_string` and `Vfs::read_to_string_lf_normalized` [#854]
 

crates/memofs/Cargo.toml

@@ -1,12 +1,8 @@
 [package]
 name = "memofs"
 description = "Virtual filesystem with configurable backends."
-version = "0.3.0"
-authors = [
-    "Lucien Greathouse <me@lpghatguy.com>",
-    "Micah Reid <git@dekkonot.com>",
-    "Ken Loeffler <kenloef@gmail.com>",
-]
+version = "0.2.0"
+authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 edition = "2018"
 readme = "README.md"
 license = "MIT"
@@ -15,7 +11,7 @@ homepage = "https://github.com/rojo-rbx/rojo/tree/master/memofs"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-crossbeam-channel = "0.5.12"
-fs-err = "2.11.0"
-notify = "4.0.17"
-serde = { version = "1.0.197", features = ["derive"] }
+crossbeam-channel = "0.5.1"
+fs-err = "2.3.0"
+notify = "4.0.15"
+serde = { version = "1.0", features = ["derive"] }

crates/memofs/src/in_memory_fs.rs

@@ -228,17 +228,23 @@ impl VfsBackend for InMemoryFs {
 }
 
 fn must_be_file<T>(path: &Path) -> io::Result<T> {
-    Err(io::Error::other(format!(
-        "path {} was a directory, but must be a file",
-        path.display()
-    )))
+    Err(io::Error::new(
+        io::ErrorKind::Other,
+        format!(
+            "path {} was a directory, but must be a file",
+            path.display()
+        ),
+    ))
 }
 
 fn must_be_dir<T>(path: &Path) -> io::Result<T> {
-    Err(io::Error::other(format!(
-        "path {} was a file, but must be a directory",
-        path.display()
-    )))
+    Err(io::Error::new(
+        io::ErrorKind::Other,
+        format!(
+            "path {} was a file, but must be a directory",
+            path.display()
+        ),
+    ))
 }
 
 fn not_found<T>(path: &Path) -> io::Result<T> {

crates/memofs/src/lib.rs

@@ -300,7 +300,7 @@ impl Vfs {
         let path = path.as_ref();
         let contents = self.inner.lock().unwrap().read_to_string(path)?;
 
-        Ok(contents.replace("\r\n", "\n").into())
+        Ok(contents.lines().collect::<Vec<&str>>().join("\n").into())
     }
 
     /// Write a file to the VFS and the underlying backend.
@@ -473,23 +473,3 @@ impl VfsLock<'_> {
         self.inner.commit_event(event)
     }
 }
-
-#[cfg(test)]
-mod test {
-    use crate::{InMemoryFs, Vfs, VfsSnapshot};
-
-    /// https://github.com/rojo-rbx/rojo/issues/899
-    #[test]
-    fn read_to_string_lf_normalized_keeps_trailing_newline() {
-        let mut imfs = InMemoryFs::new();
-        imfs.load_snapshot("test", VfsSnapshot::file("bar\r\nfoo\r\n\r\n"))
-            .unwrap();
-
-        let vfs = Vfs::new(imfs);
-
-        assert_eq!(
-            vfs.read_to_string_lf_normalized("test").unwrap().as_str(),
-            "bar\nfoo\n\n"
-        );
-    }
-}

crates/memofs/src/noop_backend.rs

@@ -15,27 +15,45 @@ impl NoopBackend {
 
 impl VfsBackend for NoopBackend {
     fn read(&mut self, _path: &Path) -> io::Result<Vec<u8>> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn write(&mut self, _path: &Path, _data: &[u8]) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn read_dir(&mut self, _path: &Path) -> io::Result<ReadDir> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn remove_file(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn remove_dir_all(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn metadata(&mut self, _path: &Path) -> io::Result<Metadata> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn event_receiver(&self) -> crossbeam_channel::Receiver<VfsEvent> {
@@ -43,11 +61,17 @@ impl VfsBackend for NoopBackend {
     }
 
     fn watch(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 
     fn unwatch(&mut self, _path: &Path) -> io::Result<()> {
-        Err(io::Error::other("NoopBackend doesn't do anything"))
+        Err(io::Error::new(
+            io::ErrorKind::Other,
+            "NoopBackend doesn't do anything",
+        ))
     }
 }
 

crates/memofs/src/std_backend.rs

@@ -109,13 +109,15 @@ impl VfsBackend for StdBackend {
             self.watches.insert(path.to_path_buf());
             self.watcher
                 .watch(path, RecursiveMode::Recursive)
-                .map_err(io::Error::other)
+                .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
         }
     }
 
     fn unwatch(&mut self, path: &Path) -> io::Result<()> {
         self.watches.remove(path);
-        self.watcher.unwatch(path).map_err(io::Error::other)
+        self.watcher
+            .unwatch(path)
+            .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
     }
 }
 

crates/rojo-insta-ext/Cargo.toml

@@ -6,5 +6,5 @@ edition = "2018"
 publish = false
 
 [dependencies]
-serde = "1.0.197"
-serde_yaml = "0.8.26"
+serde = "1.0.99"
+serde_yaml = "0.8.9"

crates/rojo-insta-ext/src/redaction_map.rs

@@ -5,13 +5,19 @@ use serde::Serialize;
 /// Enables redacting any value that serializes as a string.
 ///
 /// Used for transforming Rojo instance IDs into something deterministic.
-#[derive(Default)]
 pub struct RedactionMap {
     ids: HashMap<String, usize>,
     last_id: usize,
 }
 
 impl RedactionMap {
+    pub fn new() -> Self {
+        Self {
+            ids: HashMap::new(),
+            last_id: 0,
+        }
+    }
+
     pub fn get_redacted_value(&self, id: impl ToString) -> Option<String> {
         let id = id.to_string();
 
@@ -22,12 +28,6 @@ impl RedactionMap {
         }
     }
 
-    /// Returns the numeric ID that was assigned to the provided value,
-    /// if one exists.
-    pub fn get_id_for_value(&self, value: impl ToString) -> Option<usize> {
-        self.ids.get(&value.to_string()).cloned()
-    }
-
     pub fn intern(&mut self, id: impl ToString) {
         let last_id = &mut self.last_id;
 

plugin/Version.txt

@@ -1 +1 @@
-7.6.1
+7.4.1

plugin/default.project.json

@@ -3,25 +3,25 @@
   "tree": {
     "$className": "Folder",
     "Plugin": {
-      "$path": "plugin/src"
+      "$path": "src"
     },
     "Packages": {
-      "$path": "plugin/Packages",
+      "$path": "Packages",
       "Log": {
-        "$path": "plugin/log"
+        "$path": "log"
       },
       "Http": {
-        "$path": "plugin/http"
+        "$path": "http"
       },
       "Fmt": {
-        "$path": "plugin/fmt"
+        "$path": "fmt"
       },
       "RbxDom": {
-        "$path": "plugin/rbx_dom_lua"
+        "$path": "rbx_dom_lua"
       }
     },
     "Version": {
-      "$path": "plugin/Version.txt"
+      "$path": "Version.txt"
     }
   }
-}
+}

plugin/fmt/init.lua

@@ -70,7 +70,7 @@ local function debugImpl(buffer, value, extendedForm)
 	elseif valueType == "table" then
 		local valueMeta = getmetatable(value)
 
-		if valueMeta ~= nil and valueMeta.__fmtDebug ~= nil then
+		if valueMeta ~= nil and  valueMeta.__fmtDebug ~= nil then
 			-- This type implement's the metamethod we made up to line up with
 			-- Rust's 'Debug' trait.
 
@@ -242,4 +242,4 @@ return {
 	debugOutputBuffer = debugOutputBuffer,
 	fmt = fmt,
 	debugify = debugify,
-}
+}

plugin/http/Response.lua

@@ -31,4 +31,4 @@ function Response:json()
 	return HttpService:JSONDecode(self.body)
 end
 
-return Response
+return Response

plugin/http/init.spec.lua

@@ -2,4 +2,4 @@ return function()
 	it("should load", function()
 		require(script.Parent)
 	end)
-end
+end

plugin/log/init.lua

@@ -57,4 +57,4 @@ function Log.error(template, ...)
 	error(Fmt.fmt(template, ...))
 end
 
-return Log
+return Log

plugin/log/init.spec.lua

@@ -2,4 +2,4 @@ return function()
 	it("should load", function()
 		require(script.Parent)
 	end)
-end
+end

plugin/rbx_dom_lua/EncodedValue.lua

@@ -188,38 +188,6 @@ types = {
 	},
 
 	Content = {
-		fromPod = function(pod): Content
-			if type(pod) == "string" then
-				if pod == "None" then
-					return Content.none
-				else
-					error(`unexpected Content value '{pod}'`)
-				end
-			else
-				local ty, value = next(pod)
-				if ty == "Uri" then
-					return Content.fromUri(value)
-				elseif ty == "Object" then
-					error("Object deserializing is not currently implemented")
-				else
-					error(`Unknown Content type '{ty}' (could not deserialize)`)
-				end
-			end
-		end,
-		toPod = function(roblox: Content)
-			if roblox.SourceType == Enum.ContentSourceType.None then
-				return "None"
-			elseif roblox.SourceType == Enum.ContentSourceType.Uri then
-				return { Uri = roblox.Uri }
-			elseif roblox.SourceType == Enum.ContentSourceType.Object then
-				error("Object serializing is not currently implemented")
-			else
-				error(`Unknown Content type '{roblox.SourceType} (could not serialize)`)
-			end
-		end,
-	},
-
-	ContentId = {
 		fromPod = identity,
 		toPod = identity,
 	},
@@ -237,19 +205,6 @@ types = {
 		end,
 	},
 
-	EnumItem = {
-		fromPod = function(pod)
-			return Enum[pod.type]:FromValue(pod.value)
-		end,
-
-		toPod = function(roblox)
-			return {
-				type = tostring(roblox.EnumType),
-				value = roblox.Value,
-			}
-		end,
-	},
-
 	Faces = {
 		fromPod = function(pod)
 			local faces = {}
@@ -345,12 +300,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				-- TODO: Add a test for NaN or Infinity values and envelopes
-				-- Right now it isn't possible because it'd fail the roundtrip.
-				-- It's more important that it works right now, though.
-				local value = keypoint.value or 0
-				local envelope = keypoint.envelope or 0
-				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, value, envelope)
+				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, keypoint.value, keypoint.envelope)
 			end
 
 			return NumberSequence.new(keypoints)
@@ -378,26 +328,13 @@ types = {
 			if pod == "Default" then
 				return nil
 			else
-				-- Passing `nil` instead of not passing anything gives
-				-- different results, so we have to branch here.
-				if pod.acousticAbsorption then
-					return (PhysicalProperties.new :: any)(
-						pod.density,
-						pod.friction,
-						pod.elasticity,
-						pod.frictionWeight,
-						pod.elasticityWeight,
-						pod.acousticAbsorption
-					)
-				else
-					return PhysicalProperties.new(
-						pod.density,
-						pod.friction,
-						pod.elasticity,
-						pod.frictionWeight,
-						pod.elasticityWeight
-					)
-				end
+				return PhysicalProperties.new(
+					pod.density,
+					pod.friction,
+					pod.elasticity,
+					pod.frictionWeight,
+					pod.elasticityWeight
+				)
 			end
 		end,
 
@@ -411,7 +348,6 @@ types = {
 					elasticity = roblox.Elasticity,
 					frictionWeight = roblox.FrictionWeight,
 					elasticityWeight = roblox.ElasticityWeight,
-					acousticAbsorption = roblox.AcousticAbsorption,
 				}
 			end
 		end,

plugin/rbx_dom_lua/Error.lua

@@ -5,7 +5,6 @@ Error.Kind = {
 	UnknownProperty = "UnknownProperty",
 	PropertyNotReadable = "PropertyNotReadable",
 	PropertyNotWritable = "PropertyNotWritable",
-	CannotParseBinaryString = "CannotParseBinaryString",
 	Roblox = "Roblox",
 }
 

plugin/rbx_dom_lua/allValues.json

@@ -15,12 +15,6 @@
             0.0
           ]
         },
-        "TestEnumItem": {
-          "EnumItem": {
-            "type": "Material",
-            "value": 256
-          }
-        },
         "TestNumber": {
           "Float64": 1337.0
         },
@@ -176,23 +170,9 @@
     },
     "ty": "ColorSequence"
   },
-  "ContentId": {
+  "Content": {
     "value": {
-      "ContentId": "rbxassetid://12345"
-    },
-    "ty": "ContentId"
-  },
-  "Content_None": {
-    "value": {
-      "Content": "None"
-    },
-    "ty": "Content"
-  },
-  "Content_Uri": {
-    "value": {
-      "Content": {
-        "Uri": "rbxasset://abc/123.rojo"
-      }
+      "Content": "rbxassetid://12345"
     },
     "ty": "Content"
   },
@@ -202,15 +182,6 @@
     },
     "ty": "Enum"
   },
-  "EnumItem": {
-    "value": {
-      "EnumItem": {
-        "type": "Material",
-        "value": 256
-      }
-    },
-    "ty": "EnumItem"
-  },
   "Faces": {
     "value": {
       "Faces": [
@@ -441,8 +412,7 @@
         "friction": 1.0,
         "elasticity": 0.0,
         "frictionWeight": 50.0,
-        "elasticityWeight": 25.0,
-        "acousticAbsorption": 0.15625
+        "elasticityWeight": 25.0
       }
     },
     "ty": "PhysicalProperties"

plugin/rbx_dom_lua/customProperties.lua

@@ -1,8 +1,6 @@
 local CollectionService = game:GetService("CollectionService")
 local ScriptEditorService = game:GetService("ScriptEditorService")
 
-local Error = require(script.Parent.Error)
-
 --- A list of `Enum.Material` values that are used for Terrain.MaterialColors
 local TERRAIN_MATERIAL_COLORS = {
 	Enum.Material.Grass,
@@ -28,21 +26,6 @@ local TERRAIN_MATERIAL_COLORS = {
 	Enum.Material.Pavement,
 }
 
-local function isAttributeNameValid(attributeName)
-	-- For SetAttribute to succeed, the attribute name must be less than or
-	-- equal to 100 characters...
-	return #attributeName <= 100
-		-- ...and must only contain alphanumeric characters, periods, hyphens,
-		-- underscores, or forward slashes.
-		and attributeName:match("[^%w%.%-_/]") == nil
-end
-
-local function isAttributeNameReserved(attributeName)
-	-- For SetAttribute to succeed, attribute names must not use the RBX
-	-- prefix, which is reserved by Roblox.
-	return attributeName:sub(1, 3) == "RBX"
-end
-
 -- Defines how to read and write properties that aren't directly scriptable.
 --
 -- The reflection database refers to these as having scriptability = "Custom"
@@ -53,41 +36,30 @@ return {
 				return true, instance:GetAttributes()
 			end,
 			write = function(instance, _, value)
-				if typeof(value) ~= "table" then
-					return false, Error.new(Error.Kind.CannotParseBinaryString)
-				end
-
 				local existing = instance:GetAttributes()
 				local didAllWritesSucceed = true
 
 				for attributeName, attributeValue in pairs(value) do
-					if isAttributeNameReserved(attributeName) then
-						-- If the attribute name is reserved, then we don't
-						-- really care about reporting any failures about
-						-- it.
-						continue
-					end
+					local isNameValid =
+						-- For our SetAttribute to succeed, the attribute name must be
+						-- less than or equal to 100 characters...
+						#attributeName <= 100
+						-- ...must only contain alphanumeric characters, periods, hyphens,
+						-- underscores, or forward slashes...
+						and attributeName:match("[^%w%.%-_/]") == nil
+						-- ... and must not use the RBX prefix, which is reserved by Roblox.
+						and attributeName:sub(1, 3) ~= "RBX"
 
-					if not isAttributeNameValid(attributeName) then
+					if isNameValid then
+						instance:SetAttribute(attributeName, attributeValue)
+					else
 						didAllWritesSucceed = false
-						continue
 					end
-
-					instance:SetAttribute(attributeName, attributeValue)
 				end
 
-				for existingAttributeName in pairs(existing) do
-					if isAttributeNameReserved(existingAttributeName) then
-						continue
-					end
-
-					if not isAttributeNameValid(existingAttributeName) then
-						didAllWritesSucceed = false
-						continue
-					end
-
-					if value[existingAttributeName] == nil then
-						instance:SetAttribute(existingAttributeName, nil)
+				for key in pairs(existing) do
+					if value[key] == nil then
+						instance:SetAttribute(key, nil)
 					end
 				end
 
@@ -141,14 +113,13 @@ return {
 		},
 		WorldPivotData = {
 			read = function(instance)
-				return true, instance.WorldPivot
+				return true, instance:GetPivot()
 			end,
 			write = function(instance, _, value)
 				if value == nil then
 					return true, nil
 				else
-					instance.WorldPivot = value
-					return true
+					return true, instance:PivotTo(value)
 				end
 			end,
 		},
@@ -166,14 +137,9 @@ return {
 				return true, colors
 			end,
 			write = function(instance: Terrain, _, value: { [Enum.Material]: Color3 })
-				if typeof(value) ~= "table" then
-					return false, Error.new(Error.Kind.CannotParseBinaryString)
-				end
-
 				for material, color in value do
 					instance:SetMaterialColor(material, color)
 				end
-
 				return true
 			end,
 		},

plugin/run-tests.server.lua

@@ -1,6 +1,6 @@
 local ReplicatedStorage = game:GetService("ReplicatedStorage")
 
-local TestEZ = require(ReplicatedStorage.Packages:WaitForChild("TestEZ", 10))
+local TestEZ = require(ReplicatedStorage.Packages.TestEZ)
 
 local Rojo = ReplicatedStorage.Rojo
 

plugin/src/ApiContext.lua

@@ -10,8 +10,6 @@ local Version = require(script.Parent.Version)
 local validateApiInfo = Types.ifEnabled(Types.ApiInfoResponse)
 local validateApiRead = Types.ifEnabled(Types.ApiReadResponse)
 local validateApiSubscribe = Types.ifEnabled(Types.ApiSubscribeResponse)
-local validateApiSerialize = Types.ifEnabled(Types.ApiSerializeResponse)
-local validateApiRefPatch = Types.ifEnabled(Types.ApiRefPatchResponse)
 
 local function rejectFailedRequests(response)
 	if response.code >= 400 then
@@ -47,7 +45,14 @@ end
 
 local function rejectWrongPlaceId(infoResponseBody)
 	if infoResponseBody.expectedPlaceIds ~= nil then
-		local foundId = table.find(infoResponseBody.expectedPlaceIds, game.PlaceId)
+		local foundId = false
+
+		for _, id in ipairs(infoResponseBody.expectedPlaceIds) do
+			if id == game.PlaceId then
+				foundId = true
+				break
+			end
+		end
 
 		if not foundId then
 			local idList = {}
@@ -57,30 +62,10 @@ local function rejectWrongPlaceId(infoResponseBody)
 
 			local message = (
 				"Found a Rojo server, but its project is set to only be used with a specific list of places."
-				.. "\nYour place ID is %u, but needs to be one of these:"
+				.. "\nYour place ID is %s, but needs to be one of these:"
 				.. "\n%s"
 				.. "\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
-			):format(game.PlaceId, table.concat(idList, "\n"))
-
-			return Promise.reject(message)
-		end
-	end
-
-	if infoResponseBody.unexpectedPlaceIds ~= nil then
-		local foundId = table.find(infoResponseBody.unexpectedPlaceIds, game.PlaceId)
-
-		if foundId then
-			local idList = {}
-			for _, id in ipairs(infoResponseBody.unexpectedPlaceIds) do
-				table.insert(idList, "- " .. tostring(id))
-			end
-
-			local message = (
-				"Found a Rojo server, but its project is set to not be used with a specific list of places."
-				.. "\nYour place ID is %u, but needs to not be one of these:"
-				.. "\n%s"
-				.. "\n\nTo change this list, edit 'blockedPlaceIds' in your .project.json file."
-			):format(game.PlaceId, table.concat(idList, "\n"))
+			):format(tostring(game.PlaceId), table.concat(idList, "\n"))
 
 			return Promise.reject(message)
 		end
@@ -254,32 +239,4 @@ function ApiContext:open(id)
 	end)
 end
 
-function ApiContext:serialize(ids: { string })
-	local url = ("%s/api/serialize/%s"):format(self.__baseUrl, table.concat(ids, ","))
-
-	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
-		if body.sessionId ~= self.__sessionId then
-			return Promise.reject("Server changed ID")
-		end
-
-		assert(validateApiSerialize(body))
-
-		return body
-	end)
-end
-
-function ApiContext:refPatch(ids: { string })
-	local url = ("%s/api/ref-patch/%s"):format(self.__baseUrl, table.concat(ids, ","))
-
-	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
-		if body.sessionId ~= self.__sessionId then
-			return Promise.reject("Server changed ID")
-		end
-
-		assert(validateApiRefPatch(body))
-
-		return body
-	end)
-end
-
 return ApiContext

plugin/src/App/Components/Checkbox.lua

@@ -32,7 +32,7 @@ end
 
 function Checkbox:render()
 	return Theme.with(function(theme)
-		local checkboxTheme = theme.Checkbox
+		theme = theme.Checkbox
 
 		local activeTransparency = Roact.joinBindings({
 			self.binding:map(function(value)
@@ -57,21 +57,20 @@ function Checkbox:render()
 			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = (if self.props.locked
-					then (self.props.lockedTooltip or "(Cannot be changed right now)") .. "\n"
-					else "") .. (if self.props.active then "Enabled" else "Disabled"),
+				text = (if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
 			}),
 
 			Active = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = checkboxTheme.Active.BackgroundColor,
+				color = theme.Active.BackgroundColor,
 				transparency = activeTransparency,
 				size = UDim2.new(1, 0, 1, 0),
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
-					ImageColor3 = checkboxTheme.Active.IconColor,
+					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
 					Size = UDim2.new(0, 16, 0, 16),
@@ -84,7 +83,7 @@ function Checkbox:render()
 
 			Inactive = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = checkboxTheme.Inactive.BorderColor,
+				color = theme.Inactive.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
@@ -92,7 +91,7 @@ function Checkbox:render()
 					Image = if self.props.locked
 						then Assets.Images.Checkbox.Locked
 						else Assets.Images.Checkbox.Inactive,
-					ImageColor3 = checkboxTheme.Inactive.IconColor,
+					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 
 					Size = UDim2.new(0, 16, 0, 16),

plugin/src/App/Components/ClassIcon.lua

@@ -1,126 +0,0 @@
-local StudioService = game:GetService("StudioService")
-local AssetService = game:GetService("AssetService")
-
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-local Packages = Rojo.Packages
-
-local Roact = require(Packages.Roact)
-
-local e = Roact.createElement
-
-local EditableImage = require(Plugin.App.Components.EditableImage)
-
-local imageCache = {}
-local function getImageSizeAndPixels(image)
-	if not imageCache[image] then
-		local editableImage = AssetService:CreateEditableImageAsync(image)
-		imageCache[image] = {
-			Size = editableImage.Size,
-			Pixels = editableImage:ReadPixels(Vector2.zero, editableImage.Size),
-		}
-	end
-
-	return imageCache[image].Size, table.clone(imageCache[image].Pixels)
-end
-
-local function getRecoloredClassIcon(className, color)
-	local iconProps = StudioService:GetClassIcon(className)
-
-	if iconProps and color then
-		local success, editableImageSize, editableImagePixels = pcall(function()
-			local size, pixels = getImageSizeAndPixels(iconProps.Image)
-
-			local minVal, maxVal = math.huge, -math.huge
-			for i = 1, #pixels, 4 do
-				if pixels[i + 3] == 0 then
-					continue
-				end
-				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
-
-				minVal = math.min(minVal, pixelVal)
-				maxVal = math.max(maxVal, pixelVal)
-			end
-
-			local hue, sat, val = color:ToHSV()
-			for i = 1, #pixels, 4 do
-				if pixels[i + 3] == 0 then
-					continue
-				end
-
-				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
-				local newVal = val
-				if minVal < maxVal then
-					-- Remap minVal - maxVal to val*0.9 - val
-					newVal = val * (0.9 + 0.1 * (pixelVal - minVal) / (maxVal - minVal))
-				end
-
-				local newPixelColor = Color3.fromHSV(hue, sat, newVal)
-				pixels[i], pixels[i + 1], pixels[i + 2] = newPixelColor.R, newPixelColor.G, newPixelColor.B
-			end
-			return size, pixels
-		end)
-		if success then
-			iconProps.EditableImagePixels = editableImagePixels
-			iconProps.EditableImageSize = editableImageSize
-		end
-	end
-
-	return iconProps
-end
-
-local ClassIcon = Roact.PureComponent:extend("ClassIcon")
-
-function ClassIcon:init()
-	self.state = {
-		iconProps = nil,
-	}
-end
-
-function ClassIcon:updateIcon()
-	local props = self.props
-	local iconProps = getRecoloredClassIcon(props.className, props.color)
-	self:setState({
-		iconProps = iconProps,
-	})
-end
-
-function ClassIcon:didMount()
-	self:updateIcon()
-end
-
-function ClassIcon:didUpdate(lastProps)
-	if lastProps.className ~= self.props.className or lastProps.color ~= self.props.color then
-		self:updateIcon()
-	end
-end
-
-function ClassIcon:render()
-	local iconProps = self.state.iconProps
-	if not iconProps then
-		return nil
-	end
-
-	return e(
-		"ImageLabel",
-		{
-			Size = self.props.size,
-			Position = self.props.position,
-			LayoutOrder = self.props.layoutOrder,
-			AnchorPoint = self.props.anchorPoint,
-			ImageTransparency = self.props.transparency,
-			Image = iconProps.Image,
-			ImageRectOffset = iconProps.ImageRectOffset,
-			ImageRectSize = iconProps.ImageRectSize,
-			BackgroundTransparency = 1,
-		},
-		if iconProps.EditableImagePixels
-			then e(EditableImage, {
-				size = iconProps.EditableImageSize,
-				pixels = iconProps.EditableImagePixels,
-			})
-			else nil
-	)
-end
-
-return ClassIcon

plugin/src/App/Components/CodeLabel.lua

@@ -1,5 +1,4 @@
 local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
@@ -8,8 +7,6 @@ Highlighter.matchStudioSettings()
 
 local e = Roact.createElement
 
-local Theme = require(Plugin.App.Theme)
-
 local CodeLabel = Roact.PureComponent:extend("CodeLabel")
 
 function CodeLabel:init()
@@ -43,24 +40,22 @@ function CodeLabel:updateHighlights()
 end
 
 function CodeLabel:render()
-	return Theme.with(function(theme)
-		return e("TextLabel", {
-			Size = self.props.size,
-			Position = self.props.position,
-			Text = self.props.text,
-			BackgroundTransparency = 1,
-			FontFace = theme.Font.Code,
-			TextSize = theme.TextSize.Code,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextYAlignment = Enum.TextYAlignment.Top,
-			TextColor3 = Color3.fromRGB(255, 255, 255),
-			[Roact.Ref] = self.labelRef,
-		}, {
-			SyntaxHighlights = e("Folder", {
-				[Roact.Ref] = self.highlightsRef,
-			}),
-		})
-	end)
+	return e("TextLabel", {
+		Size = self.props.size,
+		Position = self.props.position,
+		Text = self.props.text,
+		BackgroundTransparency = 1,
+		Font = Enum.Font.RobotoMono,
+		TextSize = 16,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		TextColor3 = Color3.fromRGB(255, 255, 255),
+		[Roact.Ref] = self.labelRef,
+	}, {
+		SyntaxHighlights = e("Folder", {
+			[Roact.Ref] = self.highlightsRef,
+		}),
+	})
 end
 
 return CodeLabel

plugin/src/App/Components/Dropdown.lua

@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -8,11 +10,9 @@ local Flipper = require(Packages.Flipper)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local ScrollingFrame = require(script.Parent.ScrollingFrame)
-local Tooltip = require(script.Parent.Tooltip)
 
 local e = Roact.createElement
 
@@ -44,29 +44,29 @@ end
 
 function Dropdown:render()
 	return Theme.with(function(theme)
-		local dropdownTheme = theme.Dropdown
+		theme = theme.Dropdown
 
 		local optionButtons = {}
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textBounds = getTextBoundsAsync(text, theme.Font.Main, theme.TextSize.Body, math.huge)
-			if textBounds.X > width then
-				width = textBounds.X
+			local textSize = TextService:GetTextSize(text, 15, Enum.Font.GothamMedium, Vector2.new(math.huge, 20))
+			if textSize.X > width then
+				width = textSize.X
 			end
 
 			optionButtons[text] = e("TextButton", {
 				Text = text,
 				LayoutOrder = i,
 				Size = UDim2.new(1, 0, 0, 24),
-				BackgroundColor3 = dropdownTheme.BackgroundColor,
+				BackgroundColor3 = theme.BackgroundColor,
 				TextTransparency = self.props.transparency,
 				BackgroundTransparency = self.props.transparency,
 				BorderSizePixel = 0,
-				TextColor3 = dropdownTheme.TextColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
-				TextSize = theme.TextSize.Body,
-				FontFace = theme.Font.Main,
+				TextSize = 15,
+				Font = Enum.Font.GothamMedium,
 
 				[Roact.Event.Activated] = function()
 					if self.props.locked then
@@ -103,13 +103,15 @@ function Dropdown:render()
 		}, {
 			Border = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = dropdownTheme.BorderColor,
+				color = theme.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
-					ImageColor3 = dropdownTheme.IconColor,
+					ImageColor3 = self.openBinding:map(function(a)
+						return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a)
+					end),
 					ImageTransparency = self.props.transparency,
 
 					Size = UDim2.new(0, 18, 0, 18),
@@ -120,21 +122,15 @@ function Dropdown:render()
 					end),
 
 					BackgroundTransparency = 1,
-				}, {
-					StateTip = if self.props.locked
-						then e(Tooltip.Trigger, {
-							text = self.props.lockedTooltip or "(Cannot be changed right now)",
-						})
-						else nil,
 				}),
 				Active = e("TextLabel", {
 					Size = UDim2.new(1, -30, 1, 0),
 					Position = UDim2.new(0, 6, 0, 0),
 					BackgroundTransparency = 1,
 					Text = self.props.active,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = dropdownTheme.TextColor,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 15,
+					TextColor3 = theme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 				}),
@@ -142,7 +138,7 @@ function Dropdown:render()
 			Options = if self.state.open
 				then e(SlicedImage, {
 					slice = Assets.Slices.RoundedBackground,
-					color = dropdownTheme.BackgroundColor,
+					color = theme.BackgroundColor,
 					position = UDim2.new(1, 0, 1, 3),
 					size = self.openBinding:map(function(a)
 						return UDim2.new(1, 0, a * math.min(3, #self.props.options), 0)
@@ -151,7 +147,7 @@ function Dropdown:render()
 				}, {
 					Border = e(SlicedImage, {
 						slice = Assets.Slices.RoundedBorder,
-						color = dropdownTheme.BorderColor,
+						color = theme.BorderColor,
 						transparency = self.props.transparency,
 						size = UDim2.new(1, 0, 1, 0),
 					}),

plugin/src/App/Components/EditableImage.lua

@@ -1,41 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-local Packages = Rojo.Packages
-
-local Roact = require(Packages.Roact)
-
-local e = Roact.createElement
-
-local EditableImage = Roact.PureComponent:extend("EditableImage")
-
-function EditableImage:init()
-	self.ref = Roact.createRef()
-end
-
-function EditableImage:writePixels()
-	local image = self.ref.current
-	if not image then
-		return
-	end
-	if not self.props.pixels then
-		return
-	end
-
-	image:WritePixels(Vector2.zero, self.props.size, self.props.pixels)
-end
-
-function EditableImage:render()
-	return e("EditableImage", {
-		Size = self.props.size,
-		[Roact.Ref] = self.ref,
-	})
-end
-
-function EditableImage:didMount()
-	self:writePixels()
-end
-
-function EditableImage:didUpdate()
-	self:writePixels()
-end
-
-return EditableImage

plugin/src/App/Components/Header.lua

@@ -9,70 +9,8 @@ local Assets = require(Plugin.Assets)
 local Config = require(Plugin.Config)
 local Version = require(Plugin.Version)
 
-local Tooltip = require(Plugin.App.Components.Tooltip)
-local SlicedImage = require(script.Parent.SlicedImage)
-
 local e = Roact.createElement
 
-local function VersionIndicator(props)
-	local updateMessage = Version.getUpdateMessage()
-
-	return Theme.with(function(theme)
-		return e("Frame", {
-			LayoutOrder = props.layoutOrder,
-			Size = UDim2.new(0, 0, 0, 25),
-			BackgroundTransparency = 1,
-			AutomaticSize = Enum.AutomaticSize.X,
-		}, {
-			Border = if updateMessage
-				then e(SlicedImage, {
-					slice = Assets.Slices.RoundedBorder,
-					color = theme.Button.Bordered.Enabled.BorderColor,
-					transparency = props.transparency,
-					size = UDim2.fromScale(1, 1),
-					zIndex = 0,
-				}, {
-					Indicator = e("ImageLabel", {
-						Size = UDim2.new(0, 10, 0, 10),
-						ScaleType = Enum.ScaleType.Fit,
-						Image = Assets.Images.Circles[16],
-						ImageColor3 = theme.Header.LogoColor,
-						ImageTransparency = props.transparency,
-						BackgroundTransparency = 1,
-						Position = UDim2.new(1, 0, 0, 0),
-						AnchorPoint = Vector2.new(0.5, 0.5),
-					}),
-				})
-				else nil,
-
-			Tip = if updateMessage
-				then e(Tooltip.Trigger, {
-					text = updateMessage,
-					delay = 0.1,
-				})
-				else nil,
-
-			VersionText = e("TextLabel", {
-				Text = Version.display(Config.version),
-				FontFace = theme.Font.Thin,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.Header.VersionColor,
-				TextXAlignment = Enum.TextXAlignment.Left,
-				TextTransparency = props.transparency,
-				BackgroundTransparency = 1,
-
-				Size = UDim2.new(0, 0, 1, 0),
-				AutomaticSize = Enum.AutomaticSize.X,
-			}, {
-				Padding = e("UIPadding", {
-					PaddingLeft = UDim.new(0, 6),
-					PaddingRight = UDim.new(0, 6),
-				}),
-			}),
-		})
-	end)
-end
-
 local function Header(props)
 	return Theme.with(function(theme)
 		return e("Frame", {
@@ -91,9 +29,18 @@ local function Header(props)
 				BackgroundTransparency = 1,
 			}),
 
-			VersionIndicator = e(VersionIndicator, {
-				transparency = props.transparency,
-				layoutOrder = 2,
+			Version = e("TextLabel", {
+				Text = Version.display(Config.version),
+				Font = Enum.Font.Gotham,
+				TextSize = 14,
+				TextColor3 = theme.Header.VersionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 0, 14),
+
+				LayoutOrder = 2,
+				BackgroundTransparency = 1,
 			}),
 
 			Layout = e("UIListLayout", {

plugin/src/App/Components/Notifications/FullscreenNotification.lua

@@ -1,151 +0,0 @@
-local StudioService = game:GetService("StudioService")
-
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-local Packages = Rojo.Packages
-
-local Roact = require(Packages.Roact)
-local Log = require(Packages.Log)
-
-local Theme = require(Plugin.App.Theme)
-local Assets = require(Plugin.Assets)
-
-local TextButton = require(Plugin.App.Components.TextButton)
-
-local e = Roact.createElement
-
-local FullscreenNotification = Roact.Component:extend("FullscreeFullscreenNotificationnNotification")
-
-function FullscreenNotification:init()
-	self.transparency, self.setTransparency = Roact.createBinding(0)
-	self.lifetime = self.props.timeout
-end
-
-function FullscreenNotification:dismiss()
-	if self.props.onClose then
-		self.props.onClose()
-	end
-end
-
-function FullscreenNotification:didMount()
-	self.props.soundPlayer:play(Assets.Sounds.Notification)
-
-	self.timeout = task.spawn(function()
-		local clock = os.clock()
-		local seen = false
-		while task.wait(1 / 10) do
-			local now = os.clock()
-			local dt = now - clock
-			clock = now
-
-			if not seen then
-				seen = StudioService.ActiveScript == nil
-			end
-
-			if not seen then
-				-- Don't run down timer before being viewed
-				continue
-			end
-
-			self.lifetime -= dt
-			if self.lifetime <= 0 then
-				self:dismiss()
-				break
-			end
-		end
-
-		self.timeout = nil
-	end)
-end
-
-function FullscreenNotification:willUnmount()
-	if self.timeout and coroutine.status(self.timeout) ~= "dead" then
-		task.cancel(self.timeout)
-	end
-end
-
-function FullscreenNotification:render()
-	return Theme.with(function(theme)
-		local actionButtons = {}
-		if self.props.actions then
-			for key, action in self.props.actions do
-				actionButtons[key] = e(TextButton, {
-					text = action.text,
-					style = action.style,
-					onClick = function()
-						self:dismiss()
-						if action.onClick then
-							local success, err = pcall(action.onClick, self)
-							if not success then
-								Log.warn("Error in notification action: " .. tostring(err))
-							end
-						end
-					end,
-					layoutOrder = -action.layoutOrder,
-					transparency = self.transparency,
-				})
-			end
-		end
-
-		return e("Frame", {
-			BackgroundColor3 = theme.BackgroundColor,
-			Size = UDim2.fromScale(1, 1),
-			ZIndex = self.props.layoutOrder,
-		}, {
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 17),
-				PaddingRight = UDim.new(0, 15),
-				PaddingTop = UDim.new(0, 10),
-				PaddingBottom = UDim.new(0, 10),
-			}),
-			Layout = e("UIListLayout", {
-				SortOrder = Enum.SortOrder.LayoutOrder,
-				FillDirection = Enum.FillDirection.Vertical,
-				HorizontalAlignment = Enum.HorizontalAlignment.Center,
-				VerticalAlignment = Enum.VerticalAlignment.Center,
-				Padding = UDim.new(0, 10),
-			}),
-			Logo = e("ImageLabel", {
-				ImageTransparency = self.transparency,
-				Image = Assets.Images.Logo,
-				ImageColor3 = theme.Header.LogoColor,
-				BackgroundTransparency = 1,
-				Size = UDim2.fromOffset(60, 27),
-				LayoutOrder = 1,
-			}),
-			Info = e("TextLabel", {
-				Text = self.props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.Notification.InfoColor,
-				TextTransparency = self.transparency,
-				TextXAlignment = Enum.TextXAlignment.Center,
-				TextYAlignment = Enum.TextYAlignment.Center,
-				TextWrapped = true,
-				BackgroundTransparency = 1,
-
-				AutomaticSize = Enum.AutomaticSize.Y,
-				Size = UDim2.fromScale(0.4, 0),
-				LayoutOrder = 2,
-			}),
-			Actions = if self.props.actions
-				then e("Frame", {
-					Size = UDim2.new(1, -40, 0, 37),
-					BackgroundTransparency = 1,
-					LayoutOrder = 3,
-				}, {
-					Layout = e("UIListLayout", {
-						FillDirection = Enum.FillDirection.Horizontal,
-						HorizontalAlignment = Enum.HorizontalAlignment.Center,
-						VerticalAlignment = Enum.VerticalAlignment.Center,
-						SortOrder = Enum.SortOrder.LayoutOrder,
-						Padding = UDim.new(0, 5),
-					}),
-					Buttons = Roact.createFragment(actionButtons),
-				})
-				else nil,
-		})
-	end)
-end
-
-return FullscreenNotification

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

@@ -1,66 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-
-local Packages = Rojo.Packages
-local Roact = require(Packages.Roact)
-
-local e = Roact.createElement
-
-local Notification = require(script.Notification)
-local FullscreenNotification = require(script.FullscreenNotification)
-
-local Notifications = Roact.Component:extend("Notifications")
-
-function Notifications:render()
-	local popupNotifs = {}
-	local fullscreenNotifs = {}
-
-	for id, notif in self.props.notifications do
-		local targetTable = if notif.isFullscreen then fullscreenNotifs else popupNotifs
-		local targetComponent = if notif.isFullscreen then FullscreenNotification else Notification
-		targetTable["NotifID_" .. id] = e(targetComponent, {
-			soundPlayer = self.props.soundPlayer,
-			text = notif.text,
-			timeout = notif.timeout,
-			actions = notif.actions,
-			layoutOrder = id,
-			onClose = function()
-				if notif.onClose then
-					notif.onClose()
-				end
-				self.props.onClose(id)
-			end,
-		})
-	end
-
-	return e("Frame", {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = 1,
-	}, {
-		Fullscreen = e("Frame", {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-		}, {
-			notifs = Roact.createFragment(fullscreenNotifs),
-		}),
-		Popups = e("Frame", {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundTransparency = 1,
-		}, {
-			Layout = e("UIListLayout", {
-				SortOrder = Enum.SortOrder.LayoutOrder,
-				HorizontalAlignment = Enum.HorizontalAlignment.Right,
-				VerticalAlignment = Enum.VerticalAlignment.Bottom,
-				Padding = UDim.new(0, 5),
-			}),
-			Padding = e("UIPadding", {
-				PaddingTop = UDim.new(0, 5),
-				PaddingBottom = UDim.new(0, 5),
-				PaddingLeft = UDim.new(0, 5),
-				PaddingRight = UDim.new(0, 5),
-			}),
-			notifs = Roact.createFragment(popupNotifs),
-		}),
-	})
-end
-
-return Notifications

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

@@ -14,123 +14,6 @@ local EMPTY_TABLE = {}
 
 local e = Roact.createElement
 
-local function ViewDiffButton(props)
-	return Theme.with(function(theme)
-		return e("TextButton", {
-			Text = "",
-			Size = UDim2.new(0.7, 0, 1, -4),
-			LayoutOrder = 2,
-			BackgroundTransparency = 1,
-			[Roact.Event.Activated] = props.onClick,
-		}, {
-			e(BorderedContainer, {
-				size = UDim2.new(1, 0, 1, 0),
-				transparency = props.transparency:map(function(t)
-					return 0.5 + (0.5 * t)
-				end),
-			}, {
-				Layout = e("UIListLayout", {
-					FillDirection = Enum.FillDirection.Horizontal,
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					HorizontalAlignment = Enum.HorizontalAlignment.Center,
-					VerticalAlignment = Enum.VerticalAlignment.Center,
-					Padding = UDim.new(0, 5),
-				}),
-				Label = e("TextLabel", {
-					Text = "View Diff",
-					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextTransparency = props.transparency,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-					Size = UDim2.new(0, 65, 1, 0),
-					LayoutOrder = 1,
-				}),
-				Icon = e("ImageLabel", {
-					Image = Assets.Images.Icons.Expand,
-					ImageColor3 = theme.Settings.Setting.DescriptionColor,
-					ImageTransparency = props.transparency,
-
-					Size = UDim2.new(0, 16, 0, 16),
-					Position = UDim2.new(0.5, 0, 0.5, 0),
-					AnchorPoint = Vector2.new(0.5, 0.5),
-
-					BackgroundTransparency = 1,
-					LayoutOrder = 2,
-				}),
-			}),
-		})
-	end)
-end
-
-local function RowContent(props)
-	local values = props.values
-	local metadata = props.metadata
-
-	if props.showStringDiff and values[1] == "Source" then
-		-- Special case for .Source updates
-		return e(ViewDiffButton, {
-			transparency = props.transparency,
-			onClick = function()
-				if not props.showStringDiff then
-					return
-				end
-				props.showStringDiff(tostring(values[2]), tostring(values[3]))
-			end,
-		})
-	end
-
-	if props.showTableDiff and (type(values[2]) == "table" or type(values[3]) == "table") then
-		-- Special case for table properties (like Attributes/Tags)
-		return e(ViewDiffButton, {
-			transparency = props.transparency,
-			onClick = function()
-				if not props.showTableDiff then
-					return
-				end
-				props.showTableDiff(values[2], values[3])
-			end,
-		})
-	end
-
-	return Theme.with(function(theme)
-		return Roact.createFragment({
-			ColumnB = e(
-				"Frame",
-				{
-					BackgroundTransparency = 1,
-					Size = UDim2.new(0.35, 0, 1, 0),
-					LayoutOrder = 2,
-				},
-				e(DisplayValue, {
-					value = values[2],
-					transparency = props.transparency,
-					textColor = if metadata.isWarning
-						then theme.Diff.Warning
-						else theme.Settings.Setting.DescriptionColor,
-				})
-			),
-			ColumnC = e(
-				"Frame",
-				{
-					BackgroundTransparency = 1,
-					Size = UDim2.new(0.35, 0, 1, 0),
-					LayoutOrder = 3,
-				},
-				e(DisplayValue, {
-					value = values[3],
-					transparency = props.transparency,
-					textColor = if metadata.isWarning
-						then theme.Diff.Warning
-						else theme.Settings.Setting.DescriptionColor,
-				})
-			),
-		})
-	end)
-end
-
 local ChangeList = Roact.Component:extend("ChangeList")
 
 function ChangeList:init()
@@ -153,9 +36,8 @@ function ChangeList:render()
 			PaddingRight = UDim.new(0, 5),
 		}
 
-		local headerRow = changes[1]
 		local headers = e("Frame", {
-			Size = UDim2.new(1, 0, 0, 24),
+			Size = UDim2.new(1, 0, 0, 30),
 			BackgroundTransparency = rowTransparency,
 			BackgroundColor3 = theme.Diff.Row,
 			LayoutOrder = 0,
@@ -167,36 +49,36 @@ function ChangeList:render()
 				HorizontalAlignment = Enum.HorizontalAlignment.Left,
 				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
-			ColumnA = e("TextLabel", {
-				Text = tostring(headerRow[1]),
+			A = e("TextLabel", {
+				Text = tostring(changes[1][1]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.TextColor,
+				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,
 			}),
-			ColumnB = e("TextLabel", {
-				Text = tostring(headerRow[2]),
+			B = e("TextLabel", {
+				Text = tostring(changes[1][2]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.TextColor,
+				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,
 			}),
-			ColumnC = e("TextLabel", {
-				Text = tostring(headerRow[3]),
+			C = e("TextLabel", {
+				Text = tostring(changes[1][3]),
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Bold,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.TextColor,
+				Font = Enum.Font.GothamBold,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
@@ -213,8 +95,91 @@ function ChangeList:render()
 			local metadata = values[4] or EMPTY_TABLE
 			local isWarning = metadata.isWarning
 
+			-- Special case for .Source updates
+			-- because we want to display a syntax highlighted diff for better UX
+			if self.props.showSourceDiff and tostring(values[1]) == "Source" then
+				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", {
+						Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
+						BackgroundTransparency = 1,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = if isWarning then theme.Diff.Warning else 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,
+					}),
+					Button = e("TextButton", {
+						Text = "",
+						Size = UDim2.new(0.7, 0, 1, -4),
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+						[Roact.Event.Activated] = function()
+							if props.showSourceDiff then
+								props.showSourceDiff(tostring(values[2]), tostring(values[3]))
+							end
+						end,
+					}, {
+						e(BorderedContainer, {
+							size = UDim2.new(1, 0, 1, 0),
+							transparency = self.props.transparency:map(function(t)
+								return 0.5 + (0.5 * t)
+							end),
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								HorizontalAlignment = Enum.HorizontalAlignment.Center,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								Padding = UDim.new(0, 5),
+							}),
+							Label = e("TextLabel", {
+								Text = "View Diff",
+								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, 65, 1, 0),
+								LayoutOrder = 1,
+							}),
+							Icon = e("ImageLabel", {
+								Image = Assets.Images.Icons.Expand,
+								ImageColor3 = theme.Settings.Setting.DescriptionColor,
+								ImageTransparency = self.props.transparency,
+
+								Size = UDim2.new(0, 16, 0, 16),
+								Position = UDim2.new(0.5, 0, 0.5, 0),
+								AnchorPoint = Vector2.new(0.5, 0.5),
+
+								BackgroundTransparency = 1,
+								LayoutOrder = 2,
+							}),
+						}),
+					}),
+				})
+				continue
+			end
+
 			rows[row] = e("Frame", {
-				Size = UDim2.new(1, 0, 0, 24),
+				Size = UDim2.new(1, 0, 0, 30),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
 				BackgroundColor3 = theme.Diff.Row,
 				BorderSizePixel = 0,
@@ -227,25 +192,44 @@ function ChangeList:render()
 					HorizontalAlignment = Enum.HorizontalAlignment.Left,
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 				}),
-				ColumnA = e("TextLabel", {
+				A = e("TextLabel", {
 					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = if isWarning then theme.Diff.Warning else 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,
 				}),
-				Content = e(RowContent, {
-					values = values,
-					metadata = metadata,
-					transparency = props.transparency,
-					showStringDiff = props.showStringDiff,
-					showTableDiff = props.showTableDiff,
-				}),
+				B = e(
+					"Frame",
+					{
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0.35, 0, 1, 0),
+						LayoutOrder = 2,
+					},
+					e(DisplayValue, {
+						value = values[2],
+						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+					})
+				),
+				C = e(
+					"Frame",
+					{
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0.35, 0, 1, 0),
+						LayoutOrder = 3,
+					},
+					e(DisplayValue, {
+						value = values[3],
+						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+					})
+				),
 			})
 		end
 
@@ -269,8 +253,8 @@ function ChangeList:render()
 		}, {
 			Headers = headers,
 			Values = e(ScrollingFrame, {
-				size = UDim2.new(1, 0, 1, -24),
-				position = UDim2.new(0, 0, 0, 24),
+				size = UDim2.new(1, 0, 1, -30),
+				position = UDim2.new(0, 0, 0, 30),
 				contentSize = self.contentSize,
 				transparency = props.transparency,
 			}, rows),

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

@@ -30,10 +30,10 @@ local function DisplayValue(props)
 					}),
 				}),
 				Label = e("TextLabel", {
-					Text = string.format("%d, %d, %d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
+					Text = string.format("%d,%d,%d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
 					BackgroundTransparency = 1,
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Body,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
 					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
@@ -90,8 +90,8 @@ local function DisplayValue(props)
 			return e("TextLabel", {
 				Text = textRepresentation,
 				BackgroundTransparency = 1,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Body,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
 				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -104,16 +104,11 @@ local function DisplayValue(props)
 		-- Or special text handling tostring for some?
 		-- Will add as needed, let's see what cases arise.
 
-		local textRepresentation = string.gsub(tostring(props.value), "%s", " ")
-		if t == "string" then
-			textRepresentation = '"' .. textRepresentation .. '"'
-		end
-
 		return e("TextLabel", {
-			Text = textRepresentation,
+			Text = string.gsub(tostring(props.value), "%s", " "),
 			BackgroundTransparency = 1,
-			FontFace = theme.Font.Main,
-			TextSize = theme.TextSize.Body,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 14,
 			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,

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

@@ -1,4 +1,5 @@
 local SelectionService = game:GetService("Selection")
+local StudioService = game:GetService("StudioService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
@@ -14,8 +15,7 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 local e = Roact.createElement
 
 local ChangeList = require(script.Parent.ChangeList)
-local Tooltip = require(Plugin.App.Components.Tooltip)
-local ClassIcon = require(Plugin.App.Components.ClassIcon)
+local Tooltip = require(script.Parent.Parent.Tooltip)
 
 local Expansion = Roact.Component:extend("Expansion")
 
@@ -28,14 +28,13 @@ function Expansion:render()
 
 	return e("Frame", {
 		BackgroundTransparency = 1,
-		Size = UDim2.new(1, -props.indent, 1, -24),
-		Position = UDim2.new(0, props.indent, 0, 24),
+		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,
-			showStringDiff = props.showStringDiff,
-			showTableDiff = props.showTableDiff,
+			showSourceDiff = props.showSourceDiff,
 		}),
 	})
 end
@@ -44,7 +43,7 @@ local DomLabel = Roact.Component:extend("DomLabel")
 
 function DomLabel:init()
 	local initHeight = self.props.elementHeight:getValue()
-	self.expanded = initHeight > 24
+	self.expanded = initHeight > 30
 
 	self.motor = Flipper.SingleMotor.new(initHeight)
 	self.binding = bindingUtil.fromMotor(self.motor)
@@ -53,7 +52,7 @@ function DomLabel:init()
 		renderExpansion = self.expanded,
 	})
 	self.motor:onStep(function(value)
-		local renderExpansion = value > 24
+		local renderExpansion = value > 30
 
 		self.props.setElementHeight(value)
 		if self.props.updateEvent then
@@ -81,7 +80,7 @@ function DomLabel:didUpdate(prevProps)
 	then
 		-- Close the expansion when the domlabel is changed to a different thing
 		self.expanded = false
-		self.motor:setGoal(Flipper.Spring.new(24, {
+		self.motor:setGoal(Flipper.Spring.new(30, {
 			frequency = 5,
 			dampingRatio = 1,
 		}))
@@ -90,49 +89,17 @@ end
 
 function DomLabel:render()
 	local props = self.props
-	local depth = props.depth or 1
 
 	return Theme.with(function(theme)
-		local color = if props.isWarning
-			then theme.Diff.Warning
-			elseif props.patchType then theme.Diff.Background[props.patchType]
-			else theme.TextColor
-
-		local indent = (depth - 1) * 12 + 15
+		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 = 2, depth do
-			if props.depthsComplete[i] then
-				continue
-			end
-			if props.isFinalChild and i == depth then
-				-- This line stops halfway down to merge with our connector for the right angle
-				lineGuides["Line_" .. i] = e("Frame", {
-					Size = UDim2.new(0, 2, 0, 15),
-					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
-					BorderSizePixel = 0,
-					BackgroundTransparency = props.transparency,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-				})
-			else
-				-- All other lines go all the way
-				-- with the exception of the final element, which stops halfway down
-				lineGuides["Line_" .. i] = e("Frame", {
-					Size = UDim2.new(0, 2, 1, if props.isFinalElement then -9 else 2),
-					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
-					BorderSizePixel = 0,
-					BackgroundTransparency = props.transparency,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-				})
-			end
-		end
-
-		if depth ~= 1 then
-			lineGuides["Connector"] = e("Frame", {
-				Size = UDim2.new(0, 8, 0, 2),
-				Position = UDim2.new(0, 2 + (12 * props.depth), 0, 12),
-				AnchorPoint = Vector2.xAxis,
+		for i = 1, props.depth or 0 do
+			lineGuides["Line_" .. i] = e("Frame", {
+				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,
@@ -141,8 +108,9 @@ function DomLabel:render()
 
 		return e("Frame", {
 			ClipsDescendants = true,
-			BackgroundTransparency = if props.elementIndex % 2 == 0 then 0.985 else 1,
-			BackgroundColor3 = theme.Diff.Row,
+			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),
@@ -172,8 +140,8 @@ function DomLabel:render()
 
 						if props.changeList then
 							self.expanded = not self.expanded
-							local goalHeight = 24
-								+ (if self.expanded then math.clamp(#props.changeList * 24, 24, 24 * 6) else 0)
+							local goalHeight = 30
+								+ (if self.expanded then math.clamp(#props.changeList * 30, 30, 30 * 6) else 0)
 							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
 								frequency = 5,
 								dampingRatio = 1,
@@ -198,81 +166,46 @@ function DomLabel:render()
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
-					showStringDiff = props.showStringDiff,
-					showTableDiff = props.showTableDiff,
+					showSourceDiff = props.showSourceDiff,
 				})
 				else nil,
 			DiffIcon = if props.patchType
 				then e("ImageLabel", {
 					Image = Assets.Images.Diff[props.patchType],
-					ImageColor3 = color,
+					ImageColor3 = theme.AddressEntry.PlaceholderColor,
 					ImageTransparency = props.transparency,
 					BackgroundTransparency = 1,
-					Size = UDim2.new(0, 14, 0, 14),
-					Position = UDim2.new(0, 0, 0, 12),
+					Size = UDim2.new(0, 20, 0, 20),
+					Position = UDim2.new(0, 0, 0, 15),
 					AnchorPoint = Vector2.new(0, 0.5),
 				})
 				else nil,
-			ClassIcon = e(ClassIcon, {
-				className = props.className,
-				color = color,
-				transparency = props.transparency,
-				size = UDim2.new(0, 16, 0, 16),
-				position = UDim2.new(0, indent + 2, 0, 12),
-				anchorPoint = Vector2.new(0, 0.5),
+			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 = (if props.isWarning then "⚠ " else "") .. props.name,
+				Text = (if props.isWarning then "⚠ " else "") .. props.name .. (props.hint and string.format(
+					'  <font color="#%s">%s</font>',
+					theme.AddressEntry.PlaceholderColor:ToHex(),
+					props.hint
+				) or ""),
 				RichText = true,
 				BackgroundTransparency = 1,
-				FontFace = if props.patchType then theme.Font.Bold else theme.Font.Main,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = color,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
-				Size = UDim2.new(1, -indent - 50, 0, 24),
-				Position = UDim2.new(0, indent + 22, 0, 0),
-			}),
-			ChangeInfo = e("Frame", {
-				BackgroundTransparency = 1,
-				Size = UDim2.new(1, -indent - 80, 0, 24),
-				Position = UDim2.new(1, -2, 0, 0),
-				AnchorPoint = Vector2.new(1, 0),
-			}, {
-				Layout = e("UIListLayout", {
-					FillDirection = Enum.FillDirection.Horizontal,
-					HorizontalAlignment = Enum.HorizontalAlignment.Right,
-					VerticalAlignment = Enum.VerticalAlignment.Center,
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					Padding = UDim.new(0, 4),
-				}),
-				Edits = if props.changeInfo and props.changeInfo.edits
-					then e("TextLabel", {
-						Text = props.changeInfo.edits .. if props.changeInfo.failed then "," else "",
-						BackgroundTransparency = 1,
-						FontFace = theme.Font.Thin,
-						TextSize = theme.TextSize.Body,
-						TextColor3 = theme.SubTextColor,
-						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
-						AutomaticSize = Enum.AutomaticSize.X,
-						LayoutOrder = 2,
-					})
-					else nil,
-				Failed = if props.changeInfo and props.changeInfo.failed
-					then e("TextLabel", {
-						Text = props.changeInfo.failed,
-						BackgroundTransparency = 1,
-						FontFace = theme.Font.Thin,
-						TextSize = theme.TextSize.Body,
-						TextColor3 = theme.Diff.Warning,
-						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
-						AutomaticSize = Enum.AutomaticSize.X,
-						LayoutOrder = 6,
-					})
-					else nil,
+				Size = UDim2.new(1, -indent - 50, 0, 30),
+				Position = UDim2.new(0, indent + 30, 0, 0),
 			}),
 			LineGuides = e("Folder", nil, lineGuides),
 		})

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

@@ -8,8 +8,8 @@ local PatchTree = require(Plugin.PatchTree)
 local PatchSet = require(Plugin.PatchSet)
 
 local Theme = require(Plugin.App.Theme)
-local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
 
 local e = Roact.createElement
 
@@ -55,60 +55,33 @@ function PatchVisualizer:render()
 	end
 
 	-- Recusively draw tree
-	local scrollElements, elementHeights, elementIndex = {}, {}, 0
+	local scrollElements, elementHeights = {}, {}
 
 	if patchTree then
-		local elementTotal = patchTree:getCount()
-		local depthsComplete = {}
 		local function drawNode(node, depth)
-			elementIndex += 1
-
-			local parentNode = patchTree:getNode(node.parentId)
-			local isFinalChild = true
-			if parentNode then
-				for _id, sibling in parentNode.children do
-					if type(sibling) == "table" and sibling.name and sibling.name > node.name then
-						isFinalChild = false
-						break
-					end
-				end
-			end
-
-			local elementHeight, setElementHeight = Roact.createBinding(24)
-			elementHeights[elementIndex] = elementHeight
-			scrollElements[elementIndex] = e(DomLabel, {
-				transparency = self.props.transparency,
-				showStringDiff = self.props.showStringDiff,
-				showTableDiff = self.props.showTableDiff,
-				updateEvent = self.updateEvent,
-				elementHeight = elementHeight,
-				setElementHeight = setElementHeight,
-				elementIndex = elementIndex,
-				isFinalElement = elementIndex == elementTotal,
-				depth = depth,
-				depthsComplete = table.clone(depthsComplete),
-				hasChildren = (node.children ~= nil and next(node.children) ~= nil),
-				isFinalChild = isFinalChild,
-				patchType = node.patchType,
-				className = node.className,
-				isWarning = node.isWarning,
-				instance = node.instance,
-				name = node.name,
-				changeInfo = node.changeInfo,
-				changeList = node.changeList,
-			})
-
-			if isFinalChild then
-				depthsComplete[depth] = true
-			end
+			local elementHeight, setElementHeight = Roact.createBinding(30)
+			table.insert(elementHeights, elementHeight)
+			table.insert(
+				scrollElements,
+				e(DomLabel, {
+					updateEvent = self.updateEvent,
+					elementHeight = elementHeight,
+					setElementHeight = setElementHeight,
+					patchType = node.patchType,
+					className = node.className,
+					isWarning = node.isWarning,
+					instance = node.instance,
+					name = node.name,
+					hint = node.hint,
+					changeList = node.changeList,
+					depth = depth,
+					transparency = self.props.transparency,
+					showSourceDiff = self.props.showSourceDiff,
+				})
+			)
 		end
 
 		patchTree:forEach(function(node, depth)
-			depthsComplete[depth] = false
-			for i = depth + 1, #depthsComplete do
-				depthsComplete[i] = nil
-			end
-
 			drawNode(node, depth)
 		end)
 	end
@@ -118,23 +91,21 @@ function PatchVisualizer:render()
 			transparency = self.props.transparency,
 			size = self.props.size,
 			position = self.props.position,
-			anchorPoint = self.props.anchorPoint,
 			layoutOrder = self.props.layoutOrder,
 		}, {
 			CleanMerge = e("TextLabel", {
 				Visible = #scrollElements == 0,
 				Text = "No changes to sync, project is up to date.",
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Medium,
-				TextColor3 = theme.TextColor,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 15,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
 				TextWrapped = true,
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}),
 
 			VirtualScroller = e(VirtualScroller, {
-				size = UDim2.new(1, 0, 1, -2),
-				position = UDim2.new(0, 0, 0, 2),
+				size = UDim2.new(1, 0, 1, 0),
 				transparency = self.props.transparency,
 				count = #scrollElements,
 				updateEvent = self.updateEvent.Event,

plugin/src/App/Components/ScrollingFrame.lua

@@ -10,12 +10,6 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 
 local e = Roact.createElement
 
-local scrollDirToAutoSize = {
-	[Enum.ScrollingDirection.X] = Enum.AutomaticSize.X,
-	[Enum.ScrollingDirection.Y] = Enum.AutomaticSize.Y,
-	[Enum.ScrollingDirection.XY] = Enum.AutomaticSize.XY,
-}
-
 local function ScrollingFrame(props)
 	return Theme.with(function(theme)
 		return e("ScrollingFrame", {
@@ -34,21 +28,16 @@ local function ScrollingFrame(props)
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
-			CanvasSize = if props.contentSize
-				then props.contentSize:map(function(value)
-					return UDim2.new(
-						0,
-						if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
-							then value.X
-							else 0,
-						0,
-						value.Y
-					)
-				end)
-				else UDim2.new(),
-			AutomaticCanvasSize = if props.contentSize == nil
-				then scrollDirToAutoSize[props.scrollingDirection or Enum.ScrollingDirection.XY]
-				else nil,
+			CanvasSize = props.contentSize:map(function(value)
+				return UDim2.new(
+					0,
+					if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
+						then value.X
+						else 0,
+					0,
+					value.Y
+				)
+			end),
 
 			BorderSizePixel = 0,
 			BackgroundTransparency = 1,

plugin/src/App/Components/SlicedImage.lua

@@ -20,7 +20,6 @@ local function SlicedImage(props)
 		Size = props.size,
 		Position = props.position,
 		AnchorPoint = props.anchorPoint,
-		AutomaticSize = props.automaticSize,
 
 		ZIndex = props.zIndex,
 		LayoutOrder = props.layoutOrder,

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

@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -7,9 +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 getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local CodeLabel = require(Plugin.App.Components.CodeLabel)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
@@ -31,6 +31,7 @@ function StringDiffVisualizer:init()
 		end)
 	end)
 
+	self:calculateContentSize()
 	self:updateScriptBackground()
 
 	self:setState({
@@ -51,7 +52,8 @@ function StringDiffVisualizer:updateScriptBackground()
 end
 
 function StringDiffVisualizer:didUpdate(previousProps)
-	if previousProps.oldString ~= self.props.oldString or previousProps.newString ~= self.props.newString then
+	if previousProps.oldText ~= self.props.oldText or previousProps.newText ~= self.props.newText then
+		self:calculateContentSize()
 		local add, remove = self:calculateDiffLines()
 		self:setState({
 			add = add,
@@ -60,30 +62,29 @@ function StringDiffVisualizer:didUpdate(previousProps)
 	end
 end
 
-function StringDiffVisualizer:calculateContentSize(theme)
-	local oldString, newString = self.props.oldString, self.props.newString
+function StringDiffVisualizer:calculateContentSize()
+	local oldText, newText = self.props.oldText, self.props.newText
 
-	local oldStringBounds = getTextBoundsAsync(oldString, theme.Font.Code, theme.TextSize.Code, math.huge)
-	local newStringBounds = getTextBoundsAsync(newString, theme.Font.Code, theme.TextSize.Code, math.huge)
+	local oldTextBounds = TextService:GetTextSize(oldText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local newTextBounds = TextService:GetTextSize(newText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
 
 	self.setContentSize(
-		Vector2.new(math.max(oldStringBounds.X, newStringBounds.X), math.max(oldStringBounds.Y, newStringBounds.Y))
+		Vector2.new(math.max(oldTextBounds.X, newTextBounds.X), math.max(oldTextBounds.Y, newTextBounds.Y))
 	)
 end
 
 function StringDiffVisualizer:calculateDiffLines()
-	Timer.start("StringDiffVisualizer:calculateDiffLines")
-	local oldString, newString = self.props.oldString, self.props.newString
+	local oldText, newText = self.props.oldText, self.props.newText
 
 	-- Diff the two texts
 	local startClock = os.clock()
-	local diffs = StringDiff.findDiffs(oldString, newString)
+	local diffs = StringDiff.findDiffs(oldText, newText)
 	local stopClock = os.clock()
 
 	Log.trace(
 		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
-		#oldString,
-		#newString,
+		#oldText,
+		#newText,
 		math.round((stopClock - startClock) * 1000 * 1000),
 		#diffs
 	)
@@ -132,16 +133,13 @@ function StringDiffVisualizer:calculateDiffLines()
 		end
 	end
 
-	Timer.stop()
 	return add, remove
 end
 
 function StringDiffVisualizer:render()
-	local oldString, newString = self.props.oldString, self.props.newString
+	local oldText, newText = self.props.oldText, self.props.newText
 
 	return Theme.with(function(theme)
-		self:calculateContentSize(theme)
-
 		return e(BorderedContainer, {
 			size = self.props.size,
 			position = self.props.position,
@@ -177,8 +175,8 @@ function StringDiffVisualizer:render()
 				Source = e(CodeLabel, {
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
-					text = oldString,
-					lineBackground = theme.Diff.Background.Remove,
+					text = oldText,
+					lineBackground = theme.Diff.Remove,
 					markedLines = self.state.remove,
 				}),
 			}),
@@ -192,8 +190,8 @@ function StringDiffVisualizer:render()
 				Source = e(CodeLabel, {
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
-					text = newString,
-					lineBackground = theme.Diff.Background.Add,
+					text = newText,
+					lineBackground = theme.Diff.Add,
 					markedLines = self.state.add,
 				}),
 			}),

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

@@ -1,195 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-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)
-
-local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
-local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
-
-local e = Roact.createElement
-
-local Array = Roact.Component:extend("Array")
-
-function Array:init()
-	self:setState({
-		diff = self:calculateDiff(),
-	})
-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
-		dont exist in the opposite array.
-	]]
-	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
-
-	local i, j = 1, 1
-	local diff = {}
-
-	while i <= #oldTable and j <= #newTable do
-		if oldTable[i] == newTable[j] then
-			table.insert(diff, { oldTable[i], newTable[j] }) -- Unchanged
-			i += 1
-			j += 1
-		elseif not table.find(newTable, oldTable[i], j) then
-			table.insert(diff, { oldTable[i], nil }) -- Removal
-			i += 1
-		elseif not table.find(oldTable, newTable[j], i) then
-			table.insert(diff, { nil, newTable[j] }) -- Addition
-			j += 1
-		else
-			if table.find(newTable, oldTable[i], j) then
-				table.insert(diff, { nil, newTable[j] }) -- Addition
-				j += 1
-			else
-				table.insert(diff, { oldTable[i], nil }) -- Removal
-				i += 1
-			end
-		end
-	end
-
-	-- Handle remaining elements
-	while i <= #oldTable do
-		table.insert(diff, { oldTable[i], nil }) -- Remaining Removals
-		i += 1
-	end
-	while j <= #newTable do
-		table.insert(diff, { nil, newTable[j] }) -- Remaining Additions
-		j += 1
-	end
-
-	Timer.stop()
-	return diff
-end
-
-function Array:didUpdate(previousProps)
-	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
-		self:setState({
-			diff = self:calculateDiff(),
-		})
-	end
-end
-
-function Array:render()
-	return Theme.with(function(theme)
-		local diff = self.state.diff
-		local lines = table.create(#diff)
-
-		for i, element in diff do
-			local oldValue = element[1]
-			local newValue = element[2]
-
-			local patchType = if oldValue == nil then "Add" elseif newValue == nil then "Remove" else "Remain"
-
-			table.insert(
-				lines,
-				e("Frame", {
-					Size = UDim2.new(1, 0, 0, 25),
-					BackgroundTransparency = if patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = theme.Diff.Background[patchType],
-					BorderSizePixel = 0,
-					LayoutOrder = i,
-				}, {
-					DiffIcon = if patchType ~= "Remain"
-						then e("ImageLabel", {
-							Image = Assets.Images.Diff[patchType],
-							ImageColor3 = theme.AddressEntry.PlaceholderColor,
-							ImageTransparency = self.props.transparency,
-							BackgroundTransparency = 1,
-							Size = UDim2.new(0, 15, 0, 15),
-							Position = UDim2.new(0, 7, 0.5, 0),
-							AnchorPoint = Vector2.new(0, 0.5),
-						})
-						else nil,
-					Old = e("Frame", {
-						Size = UDim2.new(0.5, -30, 1, 0),
-						Position = UDim2.new(0, 30, 0, 0),
-						BackgroundTransparency = 1,
-					}, {
-						Display = if oldValue ~= nil
-							then e(DisplayValue, {
-								value = oldValue,
-								transparency = self.props.transparency,
-								textColor = theme.Settings.Setting.DescriptionColor,
-							})
-							else nil,
-					}),
-					New = e("Frame", {
-						Size = UDim2.new(0.5, -10, 1, 0),
-						Position = UDim2.new(0.5, 5, 0, 0),
-						BackgroundTransparency = 1,
-					}, {
-						Display = if newValue ~= nil
-							then e(DisplayValue, {
-								value = newValue,
-								transparency = self.props.transparency,
-								textColor = theme.Settings.Setting.DescriptionColor,
-							})
-							else nil,
-					}),
-				})
-			)
-		end
-
-		return Roact.createFragment({
-			Headers = e("Frame", {
-				Size = UDim2.new(1, 0, 0, 25),
-				BackgroundTransparency = self.props.transparency:map(function(t)
-					return 0.95 + (0.05 * t)
-				end),
-				BackgroundColor3 = theme.Diff.Row,
-			}, {
-				ColumnA = e("TextLabel", {
-					Size = UDim2.new(0.5, -30, 1, 0),
-					Position = UDim2.new(0, 30, 0, 0),
-					BackgroundTransparency = 1,
-					Text = "Old",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-				}),
-				ColumnB = e("TextLabel", {
-					Size = UDim2.new(0.5, -10, 1, 0),
-					Position = UDim2.new(0.5, 5, 0, 0),
-					BackgroundTransparency = 1,
-					Text = "New",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-				}),
-				Separator = e("Frame", {
-					Size = UDim2.new(1, 0, 0, 1),
-					Position = UDim2.new(0, 0, 1, 0),
-					BackgroundTransparency = 0,
-					BorderSizePixel = 0,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-				}),
-			}),
-			KeyValues = e(ScrollingFrame, {
-				position = UDim2.new(0, 1, 0, 25),
-				size = UDim2.new(1, -2, 1, -27),
-				scrollingDirection = Enum.ScrollingDirection.Y,
-				transparency = self.props.transparency,
-			}, {
-				Layout = e("UIListLayout", {
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					VerticalAlignment = Enum.VerticalAlignment.Top,
-				}),
-				Lines = Roact.createFragment(lines),
-			}),
-		})
-	end)
-end
-
-return Array

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

@@ -1,209 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-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)
-
-local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
-local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
-
-local e = Roact.createElement
-
-local Dictionary = Roact.Component:extend("Dictionary")
-
-function Dictionary:init()
-	self:setState({
-		diff = self:calculateDiff(),
-	})
-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
-	local diff = {}
-
-	for key, oldValue in oldTable do
-		local newValue = newTable[key]
-		if newValue == nil then
-			table.insert(diff, {
-				key = key,
-				patchType = "Remove",
-			})
-		elseif newValue ~= oldValue then
-			-- Note: should this do some sort of deep comparison for various types?
-			table.insert(diff, {
-				key = key,
-				patchType = "Edit",
-			})
-		else
-			table.insert(diff, {
-				key = key,
-				patchType = "Remain",
-			})
-		end
-	end
-	for key in newTable do
-		if oldTable[key] == nil then
-			table.insert(diff, {
-				key = key,
-				patchType = "Add",
-			})
-		end
-	end
-
-	table.sort(diff, function(a, b)
-		return a.key < b.key
-	end)
-
-	Timer.stop()
-	return diff
-end
-
-function Dictionary:didUpdate(previousProps)
-	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
-		self:setState({
-			diff = self:calculateDiff(),
-		})
-	end
-end
-
-function Dictionary:render()
-	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
-	local diff = self.state.diff
-
-	return Theme.with(function(theme)
-		local lines = table.create(#diff)
-		for order, line in diff do
-			local key = line.key
-			local oldValue = oldTable[key]
-			local newValue = newTable[key]
-
-			table.insert(
-				lines,
-				e("Frame", {
-					Size = UDim2.new(1, 0, 0, 25),
-					LayoutOrder = order,
-					BorderSizePixel = 0,
-					BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = theme.Diff.Background[line.patchType],
-				}, {
-					DiffIcon = if line.patchType ~= "Remain"
-						then e("ImageLabel", {
-							Image = Assets.Images.Diff[line.patchType],
-							ImageColor3 = theme.AddressEntry.PlaceholderColor,
-							ImageTransparency = self.props.transparency,
-							BackgroundTransparency = 1,
-							Size = UDim2.new(0, 15, 0, 15),
-							Position = UDim2.new(0, 7, 0.5, 0),
-							AnchorPoint = Vector2.new(0, 0.5),
-						})
-						else nil,
-					KeyName = e("TextLabel", {
-						Size = UDim2.new(0.3, -15, 1, 0),
-						Position = UDim2.new(0, 30, 0, 0),
-						BackgroundTransparency = 1,
-						Text = key,
-						TextXAlignment = Enum.TextXAlignment.Left,
-						FontFace = theme.Font.Main,
-						TextSize = theme.TextSize.Body,
-						TextColor3 = theme.Diff.Text[line.patchType],
-						TextTruncate = Enum.TextTruncate.AtEnd,
-					}),
-					OldValue = e("Frame", {
-						Size = UDim2.new(0.35, -7, 1, 0),
-						Position = UDim2.new(0.3, 15, 0, 0),
-						BackgroundTransparency = 1,
-					}, {
-						e(DisplayValue, {
-							value = oldValue,
-							transparency = self.props.transparency,
-							textColor = theme.Diff.Text[line.patchType],
-						}),
-					}),
-					NewValue = e("Frame", {
-						Size = UDim2.new(0.35, -8, 1, 0),
-						Position = UDim2.new(0.65, 8, 0, 0),
-						BackgroundTransparency = 1,
-					}, {
-						e(DisplayValue, {
-							value = newValue,
-							transparency = self.props.transparency,
-							textColor = theme.Diff.Text[line.patchType],
-						}),
-					}),
-				})
-			)
-		end
-
-		return Roact.createFragment({
-			Headers = e("Frame", {
-				Size = UDim2.new(1, 0, 0, 25),
-				BackgroundTransparency = self.props.transparency:map(function(t)
-					return 0.95 + (0.05 * t)
-				end),
-				BackgroundColor3 = theme.Diff.Row,
-			}, {
-				ColumnA = e("TextLabel", {
-					Size = UDim2.new(0.3, -15, 1, 0),
-					Position = UDim2.new(0, 30, 0, 0),
-					BackgroundTransparency = 1,
-					Text = "Key",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-				}),
-				ColumnB = e("TextLabel", {
-					Size = UDim2.new(0.35, -7, 1, 0),
-					Position = UDim2.new(0.3, 15, 0, 0),
-					BackgroundTransparency = 1,
-					Text = "Old",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-				}),
-				ColumnC = e("TextLabel", {
-					Size = UDim2.new(0.35, -8, 1, 0),
-					Position = UDim2.new(0.65, 8, 0, 0),
-					BackgroundTransparency = 1,
-					Text = "New",
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-				}),
-				Separator = e("Frame", {
-					Size = UDim2.new(1, 0, 0, 1),
-					Position = UDim2.new(0, 0, 1, 0),
-					BackgroundTransparency = 0,
-					BorderSizePixel = 0,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-				}),
-			}),
-			KeyValues = e(ScrollingFrame, {
-				position = UDim2.new(0, 1, 0, 25),
-				size = UDim2.new(1, -2, 1, -27),
-				scrollingDirection = Enum.ScrollingDirection.Y,
-				transparency = self.props.transparency,
-			}, {
-				Layout = e("UIListLayout", {
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					VerticalAlignment = Enum.VerticalAlignment.Top,
-				}),
-				Lines = Roact.createFragment(lines),
-			}),
-		})
-	end)
-end
-
-return Dictionary

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

@@ -1,48 +0,0 @@
-local Rojo = script:FindFirstAncestor("Rojo")
-local Plugin = Rojo.Plugin
-local Packages = Rojo.Packages
-
-local Roact = require(Packages.Roact)
-
-local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
-local Array = require(script:FindFirstChild("Array"))
-local Dictionary = require(script:FindFirstChild("Dictionary"))
-
-local e = Roact.createElement
-
-local TableDiffVisualizer = Roact.Component:extend("TableDiffVisualizer")
-
-function TableDiffVisualizer:render()
-	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
-
-	-- Ensure we're diffing tables, not mixing types
-	if type(oldTable) ~= "table" then
-		oldTable = {}
-	end
-	if type(newTable) ~= "table" then
-		newTable = {}
-	end
-
-	local isArray = next(newTable) == 1 or next(oldTable) == 1
-
-	return e(BorderedContainer, {
-		size = self.props.size,
-		position = self.props.position,
-		anchorPoint = self.props.anchorPoint,
-		transparency = self.props.transparency,
-	}, {
-		Content = if isArray
-			then e(Array, {
-				oldTable = oldTable,
-				newTable = newTable,
-				transparency = self.props.transparency,
-			})
-			else e(Dictionary, {
-				oldTable = oldTable,
-				newTable = newTable,
-				transparency = self.props.transparency,
-			}),
-	})
-end
-
-return TableDiffVisualizer

plugin/src/App/Components/Tag.lua

@@ -1,59 +0,0 @@
-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 Assets = require(Plugin.Assets)
-
-local SlicedImage = require(Plugin.App.Components.SlicedImage)
-
-local e = Roact.createElement
-
-return function(props)
-	return Theme.with(function(theme)
-		return e(SlicedImage, {
-			slice = Assets.Slices.RoundedBackground,
-			color = props.color,
-			transparency = props.transparency:map(function(transparency)
-				return 0.9 + (0.1 * transparency)
-			end),
-			layoutOrder = props.layoutOrder,
-			position = props.position,
-			anchorPoint = props.anchorPoint,
-			size = UDim2.new(0, 0, 0, theme.TextSize.Medium),
-			automaticSize = Enum.AutomaticSize.X,
-		}, {
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 4),
-				PaddingRight = UDim.new(0, 4),
-				PaddingTop = UDim.new(0, 2),
-				PaddingBottom = UDim.new(0, 2),
-			}),
-			Icon = if props.icon
-				then e("ImageLabel", {
-					Size = UDim2.new(0, 12, 0, 12),
-					Position = UDim2.new(0, 0, 0.5, 0),
-					AnchorPoint = Vector2.new(0, 0.5),
-					Image = props.icon,
-					BackgroundTransparency = 1,
-					ImageColor3 = props.color,
-					ImageTransparency = props.transparency,
-				})
-				else nil,
-			Text = e("TextLabel", {
-				Text = props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Small,
-				TextColor3 = props.color,
-				TextXAlignment = Enum.TextXAlignment.Center,
-				TextTransparency = props.transparency,
-				Size = UDim2.new(0, 0, 1, 0),
-				Position = UDim2.new(0, if props.icon then 15 else 0, 0, 0),
-				AutomaticSize = Enum.AutomaticSize.X,
-				BackgroundTransparency = 1,
-			}),
-		})
-	end)
-end

plugin/src/App/Components/TextButton.lua

@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -8,7 +10,6 @@ local Flipper = require(Packages.Flipper)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local TouchRipple = require(script.Parent.TouchRipple)
@@ -40,17 +41,18 @@ end
 
 function TextButton:render()
 	return Theme.with(function(theme)
-		local textBounds = getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Large, math.huge)
+		local textSize =
+			TextService:GetTextSize(self.props.text, 18, Enum.Font.GothamMedium, Vector2.new(math.huge, math.huge))
 
 		local style = self.props.style
 
-		local buttonTheme = theme.Button[style]
+		theme = theme.Button[style]
 
 		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
 		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
 
 		return e("ImageButton", {
-			Size = UDim2.new(0, (theme.TextSize.Body * 2) + textBounds.X, 0, 34),
+			Size = UDim2.new(0, 15 + textSize.X + 15, 0, 34),
 			Position = self.props.position,
 			AnchorPoint = self.props.anchorPoint,
 
@@ -72,22 +74,18 @@ function TextButton:render()
 			end,
 		}, {
 			TouchRipple = e(TouchRipple, {
-				color = buttonTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = self.props.transparency:map(function(value)
-					return bindingUtil.blendAlpha({ buttonTheme.ActionFillTransparency, value })
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, value })
 				end),
 				zIndex = 2,
 			}),
 
 			Text = e("TextLabel", {
 				Text = self.props.text,
-				FontFace = theme.Font.Main,
-				TextSize = theme.TextSize.Large,
-				TextColor3 = bindingUtil.mapLerp(
-					bindingEnabled,
-					buttonTheme.Enabled.TextColor,
-					buttonTheme.Disabled.TextColor
-				),
+				Font = Enum.Font.GothamMedium,
+				TextSize = 18,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.TextColor, theme.Disabled.TextColor),
 				TextTransparency = self.props.transparency,
 
 				Size = UDim2.new(1, 0, 1, 0),
@@ -97,11 +95,7 @@ function TextButton:render()
 
 			Border = style == "Bordered" and e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = bindingUtil.mapLerp(
-					bindingEnabled,
-					buttonTheme.Enabled.BorderColor,
-					buttonTheme.Disabled.BorderColor
-				),
+				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
 				transparency = self.props.transparency,
 
 				size = UDim2.new(1, 0, 1, 0),
@@ -111,18 +105,14 @@ function TextButton:render()
 
 			HoverOverlay = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = buttonTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = Roact.joinBindings({
 					hover = bindingHover:map(function(value)
 						return 1 - value
 					end),
 					transparency = self.props.transparency,
 				}):map(function(values)
-					return bindingUtil.blendAlpha({
-						buttonTheme.ActionFillTransparency,
-						values.hover,
-						values.transparency,
-					})
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
 				end),
 
 				size = UDim2.new(1, 0, 1, 0),
@@ -134,8 +124,8 @@ function TextButton:render()
 				slice = Assets.Slices.RoundedBackground,
 				color = bindingUtil.mapLerp(
 					bindingEnabled,
-					buttonTheme.Enabled.BackgroundColor,
-					buttonTheme.Disabled.BackgroundColor
+					theme.Enabled.BackgroundColor,
+					theme.Disabled.BackgroundColor
 				),
 				transparency = self.props.transparency,
 

plugin/src/App/Components/TextInput.lua

@@ -38,18 +38,14 @@ end
 
 function TextInput:render()
 	return Theme.with(function(theme)
-		local textInputTheme = theme.TextInput
+		theme = theme.TextInput
 
 		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
 		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
 
 		return e(SlicedImage, {
 			slice = Assets.Slices.RoundedBorder,
-			color = bindingUtil.mapLerp(
-				bindingEnabled,
-				textInputTheme.Enabled.BorderColor,
-				textInputTheme.Disabled.BorderColor
-			),
+			color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
 			transparency = self.props.transparency,
 
 			size = self.props.size or UDim2.new(1, 0, 1, 0),
@@ -59,18 +55,14 @@ function TextInput:render()
 		}, {
 			HoverOverlay = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = textInputTheme.ActionFillColor,
+				color = theme.ActionFillColor,
 				transparency = Roact.joinBindings({
 					hover = bindingHover:map(function(value)
 						return 1 - value
 					end),
 					transparency = self.props.transparency,
 				}):map(function(values)
-					return bindingUtil.blendAlpha({
-						textInputTheme.ActionFillTransparency,
-						values.hover,
-						values.transparency,
-					})
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
 				end),
 				size = UDim2.new(1, 0, 1, 0),
 				zIndex = -1,
@@ -80,18 +72,14 @@ function TextInput:render()
 				Size = UDim2.fromScale(1, 1),
 				Text = self.props.text,
 				PlaceholderText = self.props.placeholder,
-				FontFace = theme.Font.Main,
-				TextColor3 = bindingUtil.mapLerp(
-					bindingEnabled,
-					textInputTheme.Disabled.TextColor,
-					textInputTheme.Enabled.TextColor
-				),
+				Font = Enum.Font.GothamMedium,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
 				PlaceholderColor3 = bindingUtil.mapLerp(
 					bindingEnabled,
-					textInputTheme.Disabled.PlaceholderColor,
-					textInputTheme.Enabled.PlaceholderColor
+					theme.Disabled.PlaceholderColor,
+					theme.Enabled.PlaceholderColor
 				),
-				TextSize = theme.TextSize.Large,
+				TextSize = 18,
 				TextEditable = self.props.enabled,
 				ClearTextOnFocus = self.props.clearTextOnFocus,
 

plugin/src/App/Components/Tooltip.lua

@@ -1,3 +1,4 @@
+local TextService = game:GetService("TextService")
 local HttpService = game:GetService("HttpService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
@@ -7,8 +8,6 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 local Theme = require(Plugin.App.Theme)
 
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
-
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 
 local e = Roact.createElement
@@ -22,48 +21,50 @@ local Y_OVERLAP = 10 -- Let the triangle tail piece overlap the target a bit to
 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 + (Vector2.one * 2)
+
+	local trigger = props.Trigger:getValue()
+
+	local spaceBelow = props.parentSize.Y
+		- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
+	local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
+
+	-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
+	local displayAbove = spaceBelow < textSize.Y and spaceAbove > spaceBelow
+
+	local X = math.clamp(props.Position.X - X_OFFSET, 0, props.parentSize.X - textSize.X)
+	local Y = 0
+
+	if displayAbove then
+		Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - textSize.Y + Y_OVERLAP, 0)
+	else
+		Y = math.min(
+			trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
+			props.parentSize.Y - textSize.Y
+		)
+	end
+
 	return Theme.with(function(theme)
-		local textXSpace = math.min(props.parentSize.X, 250) - TEXT_PADDING.X
-		local textBounds = getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace)
-		local contentSize = textBounds + TEXT_PADDING + (Vector2.one * 2)
-
-		local trigger = props.Trigger:getValue()
-
-		local spaceBelow = props.parentSize.Y
-			- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
-		local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
-
-		-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
-		local displayAbove = spaceBelow < contentSize.Y and spaceAbove > spaceBelow
-
-		local X = math.clamp(props.Position.X - X_OFFSET, 0, math.max(props.parentSize.X - contentSize.X, 1))
-		local Y = 0
-
-		if displayAbove then
-			Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - contentSize.Y + Y_OVERLAP, 0)
-		else
-			Y = math.min(
-				trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
-				props.parentSize.Y - contentSize.Y
-			)
-		end
-
 		return e(BorderedContainer, {
 			position = UDim2.fromOffset(X, Y),
-			size = UDim2.fromOffset(contentSize.X, contentSize.Y),
+			size = UDim2.fromOffset(textSize.X, textSize.Y),
 			transparency = props.transparency,
 		}, {
 			Label = e("TextLabel", {
 				BackgroundTransparency = 1,
 				Position = UDim2.fromScale(0.5, 0.5),
+				Size = UDim2.new(1, -TEXT_PADDING.X, 1, -TEXT_PADDING.Y),
 				AnchorPoint = Vector2.new(0.5, 0.5),
-				Size = UDim2.fromOffset(textBounds.X, textBounds.Y),
 				Text = props.Text,
-				TextSize = theme.TextSize.Medium,
-				FontFace = theme.Font.Main,
+				TextSize = 16,
+				Font = Enum.Font.GothamMedium,
 				TextWrapped = true,
 				TextXAlignment = Enum.TextXAlignment.Left,
-				TextYAlignment = Enum.TextYAlignment.Center,
 				TextColor3 = theme.Button.Bordered.Enabled.TextColor,
 				TextTransparency = props.transparency,
 			}),
@@ -71,8 +72,8 @@ local function Popup(props)
 			Tail = e("ImageLabel", {
 				ZIndex = 100,
 				Position = if displayAbove
-					then UDim2.new(0, math.clamp(props.Position.X - X, 6, contentSize.X - 6), 1, -1)
-					else UDim2.new(0, math.clamp(props.Position.X - X, 6, contentSize.X - 6), 0, -TAIL_SIZE + 1),
+					then UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 1, -1)
+					else UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 0, -TAIL_SIZE + 1),
 				Size = UDim2.fromOffset(TAIL_SIZE, TAIL_SIZE),
 				AnchorPoint = Vector2.new(0.5, 0),
 				Rotation = if displayAbove then 180 else 0,
@@ -162,6 +163,7 @@ local Trigger = Roact.Component:extend("TooltipTrigger")
 function Trigger:init()
 	self.id = HttpService:GenerateGUID(false)
 	self.ref = Roact.createRef()
+	self.mousePos = Vector2.zero
 	self.showingPopup = false
 
 	self.destroy = function()
@@ -193,22 +195,18 @@ end
 function Trigger:isHovering()
 	local rbx = self.ref.current
 	if rbx then
-		return rbx.GuiState == Enum.GuiState.Hover
+		local pos = rbx.AbsolutePosition
+		local size = rbx.AbsoluteSize
+		local mousePos = self.mousePos
+
+		return mousePos.X >= pos.X
+			and mousePos.X <= pos.X + size.X
+			and mousePos.Y >= pos.Y
+			and mousePos.Y <= pos.Y + size.Y
 	end
 	return false
 end
 
-function Trigger:getMousePos()
-	local rbx = self.ref.current
-	if rbx then
-		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
-		if widget then
-			return widget:GetRelativeMousePosition()
-		end
-	end
-	return Vector2.zero
-end
-
 function Trigger:managePopup()
 	if self:isHovering() then
 		if self.showingPopup or self.showDelayThread then
@@ -216,10 +214,10 @@ function Trigger:managePopup()
 			return
 		end
 
-		self.showDelayThread = task.delay(self.props.delay or DELAY, function()
+		self.showDelayThread = task.delay(DELAY, function()
 			self.props.context.addTip(self.id, {
 				Text = self.props.text,
-				Position = self:getMousePos(),
+				Position = self.mousePos,
 				Trigger = self.ref,
 			})
 			self.showDelayThread = nil
@@ -236,7 +234,13 @@ function Trigger:managePopup()
 end
 
 function Trigger:render()
-	local function recalculate()
+	local function recalculate(rbx)
+		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
+		if not widget then
+			return
+		end
+		self.mousePos = widget:GetRelativeMousePosition()
+
 		self:managePopup()
 	end
 
@@ -246,9 +250,11 @@ function Trigger:render()
 		ZIndex = self.props.zIndex or 100,
 		[Roact.Ref] = self.ref,
 
-		[Roact.Change.GuiState] = recalculate,
 		[Roact.Change.AbsolutePosition] = recalculate,
 		[Roact.Change.AbsoluteSize] = recalculate,
+		[Roact.Event.MouseMoved] = recalculate,
+		[Roact.Event.MouseLeave] = recalculate,
+		[Roact.Event.MouseEnter] = recalculate,
 	})
 end
 

plugin/src/App/Components/VirtualScroller.lua

@@ -131,8 +131,8 @@ function VirtualScroller:render()
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
 			BackgroundTransparency = props.backgroundTransparency or 1,
-			BackgroundColor3 = props.backgroundColor3 or theme.BorderedContainer.BackgroundColor,
-			BorderColor3 = props.borderColor3 or theme.BorderedContainer.BorderColor,
+			BackgroundColor3 = props.backgroundColor3,
+			BorderColor3 = props.borderColor3,
 			CanvasSize = self.totalCanvas:map(function(s)
 				return UDim2.fromOffset(0, s)
 			end),

plugin/src/App/Notifications.lua

@@ -1,3 +1,4 @@
+local TextService = game:GetService("TextService")
 local StudioService = game:GetService("StudioService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
@@ -8,14 +9,16 @@ local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
 local Log = require(Packages.Log)
 
+local bindingUtil = require(script.Parent.bindingUtil)
+
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
-local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local TextButton = require(Plugin.App.Components.TextButton)
 
+local baseClock = DateTime.now().UnixTimestampMillis
+
 local e = Roact.createElement
 
 local Notification = Roact.Component:extend("Notification")
@@ -75,9 +78,7 @@ function Notification:didMount()
 end
 
 function Notification:willUnmount()
-	if self.timeout and coroutine.status(self.timeout) ~= "dead" then
-		task.cancel(self.timeout)
-	end
+	task.cancel(self.timeout)
 end
 
 function Notification:render()
@@ -85,49 +86,51 @@ function Notification:render()
 		return 1 - value
 	end)
 
-	return Theme.with(function(theme)
-		local actionButtons = {}
-		local buttonsX = 0
-		if self.props.actions then
-			local count = 0
-			for key, action in self.props.actions do
-				actionButtons[key] = e(TextButton, {
-					text = action.text,
-					style = action.style,
-					onClick = function()
-						self:dismiss()
-						if action.onClick then
-							local success, err = pcall(action.onClick, self)
-							if not success then
-								Log.warn("Error in notification action: " .. tostring(err))
-							end
-						end
-					end,
-					layoutOrder = -action.layoutOrder,
-					transparency = transparency,
-				})
+	local textBounds = TextService:GetTextSize(self.props.text, 15, Enum.Font.GothamMedium, Vector2.new(350, 700))
 
-				buttonsX += getTextBoundsAsync(action.text, theme.Font.Main, theme.TextSize.Large, math.huge).X + (theme.TextSize.Body * 2)
+	local actionButtons = {}
+	local buttonsX = 0
+	if self.props.actions then
+		local count = 0
+		for key, action in self.props.actions do
+			actionButtons[key] = e(TextButton, {
+				text = action.text,
+				style = action.style,
+				onClick = function()
+					local success, err = pcall(action.onClick, self)
+					if not success then
+						Log.warn("Error in notification action: " .. tostring(err))
+					end
+				end,
+				layoutOrder = -action.layoutOrder,
+				transparency = transparency,
+			})
 
-				count += 1
-			end
+			buttonsX += TextService:GetTextSize(
+				action.text,
+				18,
+				Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30
 
-			buttonsX += (count - 1) * 5
+			count += 1
 		end
 
-		local paddingY, logoSize = 20, 32
-		local actionsY = if self.props.actions then 37 else 0
-		local textXSpace = math.max(250, buttonsX) + 35
-		local textBounds = getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Body, textXSpace)
-		local contentX = math.max(textBounds.X, buttonsX)
+		buttonsX += (count - 1) * 5
+	end
 
-		local size = self.binding:map(function(value)
-			return UDim2.fromOffset(
-				(35 + 40 + contentX) * value,
-				5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
-			)
-		end)
+	local paddingY, logoSize = 20, 32
+	local actionsY = if self.props.actions then 35 else 0
+	local contentX = math.max(textBounds.X, buttonsX)
 
+	local size = self.binding:map(function(value)
+		return UDim2.fromOffset(
+			(35 + 40 + contentX) * value,
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
+		)
+	end)
+
+	return Theme.with(function(theme)
 		return e("TextButton", {
 			BackgroundTransparency = 1,
 			Size = size,
@@ -141,31 +144,31 @@ function Notification:render()
 		}, {
 			e(BorderedContainer, {
 				transparency = transparency,
-				size = UDim2.fromScale(1, 1),
+				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Contents = e("Frame", {
-					Size = UDim2.fromScale(1, 1),
+					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
+					Position = UDim2.new(0, 0, 0, paddingY / 2),
 					BackgroundTransparency = 1,
 				}, {
 					Logo = e("ImageLabel", {
 						ImageTransparency = transparency,
 						Image = Assets.Images.PluginButton,
 						BackgroundTransparency = 1,
-						Size = UDim2.fromOffset(logoSize, logoSize),
+						Size = UDim2.new(0, logoSize, 0, logoSize),
 						Position = UDim2.new(0, 0, 0, 0),
 						AnchorPoint = Vector2.new(0, 0),
 					}),
 					Info = e("TextLabel", {
 						Text = self.props.text,
-						FontFace = theme.Font.Main,
-						TextSize = theme.TextSize.Body,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
 						TextXAlignment = Enum.TextXAlignment.Left,
-						TextYAlignment = Enum.TextYAlignment.Center,
 						TextWrapped = true,
 
-						Size = UDim2.new(0, textBounds.X, 1, -actionsY),
+						Size = UDim2.new(0, textBounds.X, 0, textBounds.Y),
 						Position = UDim2.fromOffset(35, 0),
 
 						LayoutOrder = 1,
@@ -173,8 +176,8 @@ function Notification:render()
 					}),
 					Actions = if self.props.actions
 						then e("Frame", {
-							Size = UDim2.new(1, -40, 0, actionsY),
-							Position = UDim2.fromScale(1, 1),
+							Size = UDim2.new(1, -40, 0, 35),
+							Position = UDim2.new(1, 0, 1, 0),
 							AnchorPoint = Vector2.new(1, 1),
 							BackgroundTransparency = 1,
 						}, {
@@ -193,12 +196,32 @@ function Notification:render()
 				Padding = e("UIPadding", {
 					PaddingLeft = UDim.new(0, 17),
 					PaddingRight = UDim.new(0, 15),
-					PaddingTop = UDim.new(0, paddingY / 2),
-					PaddingBottom = UDim.new(0, paddingY / 2),
 				}),
 			}),
 		})
 	end)
 end
 
-return Notification
+local Notifications = Roact.Component:extend("Notifications")
+
+function Notifications:render()
+	local notifs = {}
+
+	for id, notif in self.props.notifications do
+		notifs["NotifID_" .. id] = e(Notification, {
+			soundPlayer = self.props.soundPlayer,
+			text = notif.text,
+			timestamp = notif.timestamp,
+			timeout = notif.timeout,
+			actions = notif.actions,
+			layoutOrder = (notif.timestamp - baseClock),
+			onClose = function()
+				self.props.onClose(id)
+			end,
+		})
+	end
+
+	return Roact.createFragment(notifs)
+end
+
+return Notifications

plugin/src/App/StatusPages/Confirming.lua

@@ -7,11 +7,11 @@ local Roact = require(Packages.Roact)
 local Settings = require(Plugin.Settings)
 local Theme = require(Plugin.App.Theme)
 local TextButton = require(Plugin.App.Components.TextButton)
+local Header = require(Plugin.App.Components.Header)
 local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
 local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
-local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
 
 local e = Roact.createElement
 
@@ -22,52 +22,50 @@ function ConfirmingPage:init()
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
-		showingStringDiff = false,
-		oldString = "",
-		newString = "",
-		showingTableDiff = false,
-		oldTable = {},
-		newTable = {},
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
 	})
 end
 
 function ConfirmingPage:render()
 	return Theme.with(function(theme)
 		local pageContent = Roact.createFragment({
+			Header = e(Header, {
+				transparency = self.props.transparency,
+				layoutOrder = 1,
+			}),
+
 			Title = e("TextLabel", {
 				Text = string.format(
 					"Sync changes for project '%s':",
 					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
 				),
-				FontFace = theme.Font.Thin,
+				LayoutOrder = 2,
+				Font = Enum.Font.Gotham,
 				LineHeight = 1.2,
-				TextSize = theme.TextSize.Body,
-				TextColor3 = theme.TextColor,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = self.props.transparency,
-				Size = UDim2.new(1, 0, 0, theme.TextSize.Large + 2),
+				Size = UDim2.new(1, 0, 0, 20),
 				BackgroundTransparency = 1,
 			}),
 
 			PatchVisualizer = e(PatchVisualizer, {
-				size = UDim2.new(1, 0, 1, -100),
+				size = UDim2.new(1, 0, 1, -150),
 				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				patchTree = self.props.patchTree,
+				changeListHeaders = { "Property", "Current", "Incoming" },
+				patch = self.props.confirmData.patch,
+				instanceMap = self.props.confirmData.instanceMap,
 
-				showStringDiff = function(oldString: string, newString: string)
+				showSourceDiff = function(oldSource: string, newSource: string)
 					self:setState({
-						showingStringDiff = true,
-						oldString = oldString,
-						newString = newString,
-					})
-				end,
-				showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
-					self:setState({
-						showingTableDiff = true,
-						oldTable = oldTable,
-						newTable = newTable,
+						showingSourceDiff = true,
+						oldSource = oldSource,
+						newSource = newSource,
 					})
 				end,
 			}),
@@ -123,11 +121,6 @@ function ConfirmingPage:render()
 				}),
 			}),
 
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 8),
-				PaddingRight = UDim.new(0, 8),
-			}),
-
 			Layout = e("UIListLayout", {
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
 				VerticalAlignment = Enum.VerticalAlignment.Center,
@@ -136,10 +129,15 @@ function ConfirmingPage:render()
 				Padding = UDim.new(0, 10),
 			}),
 
-			StringDiff = e(StudioPluginGui, {
-				id = "Rojo_ConfirmingStringDiff",
-				title = "String diff",
-				active = self.state.showingStringDiff,
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
 				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
@@ -151,7 +149,7 @@ function ConfirmingPage:render()
 
 				onClose = function()
 					self:setState({
-						showingStringDiff = false,
+						showingSourceDiff = false,
 					})
 				end,
 			}, {
@@ -167,46 +165,8 @@ function ConfirmingPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,
 
-							oldString = self.state.oldString,
-							newString = self.state.newString,
-						}),
-					}),
-				}),
-			}),
-
-			TableDiff = e(StudioPluginGui, {
-				id = "Rojo_ConfirmingTableDiff",
-				title = "Table diff",
-				active = self.state.showingTableDiff,
-				isEphemeral = true,
-
-				initDockState = Enum.InitialDockState.Float,
-				overridePreviousState = true,
-				floatingSize = Vector2.new(500, 350),
-				minimumSize = Vector2.new(400, 250),
-
-				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
-
-				onClose = function()
-					self:setState({
-						showingTableDiff = false,
-					})
-				end,
-			}, {
-				TooltipsProvider = e(Tooltip.Provider, nil, {
-					Tooltips = e(Tooltip.Container, nil),
-					Content = e("Frame", {
-						Size = UDim2.fromScale(1, 1),
-						BackgroundTransparency = 1,
-					}, {
-						e(TableDiffVisualizer, {
-							size = UDim2.new(1, -10, 1, -10),
-							position = UDim2.new(0, 5, 0, 5),
-							anchorPoint = Vector2.new(0, 0),
-							transparency = self.props.transparency,
-
-							oldTable = self.state.oldTable,
-							newTable = self.state.newTable,
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
 						}),
 					}),
 				}),

plugin/src/App/StatusPages/Connected.lua

@@ -3,8 +3,9 @@ local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
 
-local timeUtil = require(Plugin.timeUtil)
+local bindingUtil = require(Plugin.App.bindingUtil)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local PatchSet = require(Plugin.PatchSet)
@@ -17,188 +18,86 @@ local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
 local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
-local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
 
 local e = Roact.createElement
 
-local ChangesViewer = Roact.Component:extend("ChangesViewer")
+local AGE_UNITS = {
+	{ 31556909, "year" },
+	{ 2629743, "month" },
+	{ 604800, "week" },
+	{ 86400, "day" },
+	{ 3600, "hour" },
+	{
+		60,
+		"minute",
+	},
+}
+function timeSinceText(elapsed: number): string
+	if elapsed < 3 then
+		return "just now"
+	end
 
-function ChangesViewer:init()
+	local ageText = string.format("%d seconds ago", elapsed)
+
+	for _, UnitData in ipairs(AGE_UNITS) do
+		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
+		if elapsed > UnitSeconds then
+			local c = math.floor(elapsed / UnitSeconds)
+			ageText = string.format("%d %s%s ago", c, UnitName, c > 1 and "s" or "")
+			break
+		end
+	end
+
+	return ageText
+end
+
+local ChangesDrawer = Roact.Component:extend("ChangesDrawer")
+
+function ChangesDrawer:init()
 	-- Hold onto the serve session during the lifecycle of this component
 	-- so that it can still render during the fade out after disconnecting
 	self.serveSession = self.props.serveSession
 end
 
-function ChangesViewer:render()
-	if self.props.rendered == false or self.serveSession == nil or self.props.patchData == nil then
+function ChangesDrawer:render()
+	if self.props.rendered == false or self.serveSession == nil then
 		return nil
 	end
 
-	local unapplied = PatchSet.countChanges(self.props.patchData.unapplied)
-	local applied = PatchSet.countChanges(self.props.patchData.patch) - unapplied
-
 	return Theme.with(function(theme)
-		return Roact.createFragment({
-			Navbar = e("Frame", {
-				Size = UDim2.new(1, 0, 0, 40),
-				BackgroundTransparency = 1,
+		return e(BorderedContainer, {
+			transparency = self.props.transparency,
+			size = self.props.height:map(function(y)
+				return UDim2.new(1, 0, y, -220 * y)
+			end),
+			position = UDim2.new(0, 0, 1, 0),
+			anchorPoint = Vector2.new(0, 1),
+			layoutOrder = self.props.layoutOrder,
+		}, {
+			Close = e(IconButton, {
+				icon = Assets.Images.Icons.Close,
+				iconSize = 24,
+				color = theme.ConnectionDetails.DisconnectColor,
+				transparency = self.props.transparency,
+
+				position = UDim2.new(1, 0, 0, 0),
+				anchorPoint = Vector2.new(1, 0),
+
+				onClick = self.props.onClose,
 			}, {
-				Close = e(IconButton, {
-					icon = Assets.Images.Icons.Close,
-					iconSize = 24,
-					color = theme.Settings.Navbar.BackButtonColor,
-					transparency = self.props.transparency,
-
-					position = UDim2.new(0, 0, 0.5, 0),
-					anchorPoint = Vector2.new(0, 0.5),
-
-					onClick = self.props.onBack,
-				}, {
-					Tip = e(Tooltip.Trigger, {
-						text = "Close",
-					}),
-				}),
-
-				Title = e("TextLabel", {
-					Text = "Sync",
-					FontFace = theme.Font.Main,
-					TextSize = theme.TextSize.Large,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextColor3 = theme.TextColor,
-					TextTransparency = self.props.transparency,
-					Size = UDim2.new(1, -40, 0, theme.TextSize.Large + 2),
-					Position = UDim2.new(0, 40, 0, 0),
-					BackgroundTransparency = 1,
-				}),
-
-				Subtitle = e("TextLabel", {
-					Text = DateTime.fromUnixTimestamp(self.props.patchData.timestamp):FormatLocalTime("LTS", "en-us"),
-					TextXAlignment = Enum.TextXAlignment.Left,
-					FontFace = theme.Font.Thin,
-					TextSize = theme.TextSize.Medium,
-					TextColor3 = theme.SubTextColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-					TextTransparency = self.props.transparency,
-					Size = UDim2.new(1, -40, 0, theme.TextSize.Medium),
-					Position = UDim2.new(0, 40, 0, theme.TextSize.Large + 2),
-					BackgroundTransparency = 1,
-				}),
-
-				Info = e("Frame", {
-					BackgroundTransparency = 1,
-					Size = UDim2.new(0, 10, 0, 24),
-					AutomaticSize = Enum.AutomaticSize.X,
-					Position = UDim2.new(1, -5, 0.5, 0),
-					AnchorPoint = Vector2.new(1, 0.5),
-				}, {
-					Tooltip = e(Tooltip.Trigger, {
-						text = `{applied} changes applied`
-							.. (if unapplied > 0 then `, {unapplied} changes failed` else ""),
-					}),
-					Content = e("Frame", {
-						BackgroundTransparency = 1,
-						Size = UDim2.new(0, 0, 1, 0),
-						AutomaticSize = Enum.AutomaticSize.X,
-					}, {
-						Layout = e("UIListLayout", {
-							FillDirection = Enum.FillDirection.Horizontal,
-							HorizontalAlignment = Enum.HorizontalAlignment.Right,
-							VerticalAlignment = Enum.VerticalAlignment.Center,
-							SortOrder = Enum.SortOrder.LayoutOrder,
-							Padding = UDim.new(0, 4),
-						}),
-
-						StatusIcon = e("ImageLabel", {
-							BackgroundTransparency = 1,
-							Image = if unapplied > 0
-								then Assets.Images.Icons.SyncWarning
-								else Assets.Images.Icons.SyncSuccess,
-							ImageColor3 = if unapplied > 0 then theme.Diff.Warning else theme.TextColor,
-							Size = UDim2.new(0, 24, 0, 24),
-							LayoutOrder = 10,
-						}),
-						StatusSpacer = e("Frame", {
-							BackgroundTransparency = 1,
-							Size = UDim2.new(0, 6, 0, 4),
-							LayoutOrder = 9,
-						}),
-						AppliedIcon = e("ImageLabel", {
-							BackgroundTransparency = 1,
-							Image = Assets.Images.Icons.Checkmark,
-							ImageColor3 = theme.TextColor,
-							Size = UDim2.new(0, 16, 0, 16),
-							LayoutOrder = 1,
-						}),
-						AppliedText = e("TextLabel", {
-							Text = applied,
-							FontFace = theme.Font.Thin,
-							TextSize = theme.TextSize.Body,
-							TextColor3 = theme.TextColor,
-							TextTransparency = self.props.transparency,
-							Size = UDim2.new(0, 0, 1, 0),
-							AutomaticSize = Enum.AutomaticSize.X,
-							BackgroundTransparency = 1,
-							LayoutOrder = 2,
-						}),
-						Warnings = if unapplied > 0
-							then Roact.createFragment({
-								WarningsSpacer = e("Frame", {
-									BackgroundTransparency = 1,
-									Size = UDim2.new(0, 4, 0, 4),
-									LayoutOrder = 3,
-								}),
-								UnappliedIcon = e("ImageLabel", {
-									BackgroundTransparency = 1,
-									Image = Assets.Images.Icons.Exclamation,
-									ImageColor3 = theme.Diff.Warning,
-									Size = UDim2.new(0, 4, 0, 16),
-									LayoutOrder = 4,
-								}),
-								UnappliedText = e("TextLabel", {
-									Text = unapplied,
-									FontFace = theme.Font.Thin,
-									TextSize = theme.TextSize.Body,
-									TextColor3 = theme.Diff.Warning,
-									TextTransparency = self.props.transparency,
-									Size = UDim2.new(0, 0, 1, 0),
-									AutomaticSize = Enum.AutomaticSize.X,
-									BackgroundTransparency = 1,
-									LayoutOrder = 5,
-								}),
-							})
-							else nil,
-					}),
-				}),
-
-				Divider = e("Frame", {
-					BackgroundColor3 = theme.Settings.DividerColor,
-					BackgroundTransparency = self.props.transparency,
-					Size = UDim2.new(1, 0, 0, 1),
-					Position = UDim2.new(0, 0, 1, 0),
-					BorderSizePixel = 0,
-				}, {
-					Gradient = e("UIGradient", {
-						Transparency = NumberSequence.new({
-							NumberSequenceKeypoint.new(0, 1),
-							NumberSequenceKeypoint.new(0.1, 0),
-							NumberSequenceKeypoint.new(0.9, 0),
-							NumberSequenceKeypoint.new(1, 1),
-						}),
-					}),
+				Tip = e(Tooltip.Trigger, {
+					text = "Close the patch visualizer",
 				}),
 			}),
 
-			Patch = e(PatchVisualizer, {
-				size = UDim2.new(1, -10, 1, -65),
-				position = UDim2.new(0, 5, 1, -5),
-				anchorPoint = Vector2.new(0, 1),
+			PatchVisualizer = e(PatchVisualizer, {
+				size = UDim2.new(1, 0, 1, 0),
 				transparency = self.props.transparency,
-				layoutOrder = self.props.layoutOrder,
+				layoutOrder = 3,
 
 				patchTree = self.props.patchTree,
 
-				showStringDiff = self.props.showStringDiff,
-				showTableDiff = self.props.showTableDiff,
+				showSourceDiff = self.props.showSourceDiff,
 			}),
 		})
 	end)
@@ -217,13 +116,13 @@ local function ConnectionDetails(props)
 			}, {
 				ProjectName = e("TextLabel", {
 					Text = props.projectName,
-					FontFace = theme.Font.Bold,
-					TextSize = theme.TextSize.Large,
+					Font = Enum.Font.GothamBold,
+					TextSize = 20,
 					TextColor3 = theme.ConnectionDetails.ProjectNameColor,
 					TextTransparency = props.transparency,
 					TextXAlignment = Enum.TextXAlignment.Left,
 
-					Size = UDim2.new(1, 0, 0, theme.TextSize.Large),
+					Size = UDim2.new(1, 0, 0, 20),
 
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -231,13 +130,13 @@ local function ConnectionDetails(props)
 
 				Address = e("TextLabel", {
 					Text = props.address,
-					FontFace = theme.Font.Code,
-					TextSize = theme.TextSize.Medium,
+					Font = Enum.Font.Code,
+					TextSize = 15,
 					TextColor3 = theme.ConnectionDetails.AddressColor,
 					TextTransparency = props.transparency,
 					TextXAlignment = Enum.TextXAlignment.Left,
 
-					Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
+					Size = UDim2.new(1, 0, 0, 15),
 
 					LayoutOrder = 2,
 					BackgroundTransparency = 1,
@@ -266,7 +165,20 @@ function ConnectedPage:getChangeInfoText()
 	if patchData == nil then
 		return ""
 	end
-	return timeUtil.elapsedToText(DateTime.now().UnixTimestamp - patchData.timestamp)
+
+	local elapsed = os.time() - patchData.timestamp
+	local unapplied = PatchSet.countChanges(patchData.unapplied)
+
+	return "<i>Synced "
+		.. timeSinceText(elapsed)
+		.. (if unapplied > 0
+			then string.format(
+				', <font color="#FF8E3C">but %d change%s failed to apply</font>',
+				unapplied,
+				unapplied == 1 and "" or "s"
+			)
+			else "")
+		.. "</i>"
 end
 
 function ConnectedPage:startChangeInfoTextUpdater()
@@ -276,13 +188,17 @@ function ConnectedPage:startChangeInfoTextUpdater()
 	-- Start a new updater
 	self.changeInfoTextUpdater = task.defer(function()
 		while true do
-			self.setChangeInfoText(self:getChangeInfoText())
+			if self.state.hoveringChangeInfo then
+				self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
+			else
+				self.setChangeInfoText(self:getChangeInfoText())
+			end
 
-			local elapsed = DateTime.now().UnixTimestamp - self.props.patchData.timestamp
+			local elapsed = os.time() - self.props.patchData.timestamp
 			local updateInterval = 1
 
 			-- Update timestamp text as frequently as currently needed
-			for _, UnitData in ipairs(timeUtil.AGE_UNITS) do
+			for _, UnitData in ipairs(AGE_UNITS) do
 				local UnitSeconds = UnitData[1]
 				if elapsed > UnitSeconds then
 					updateInterval = UnitSeconds
@@ -303,12 +219,29 @@ function ConnectedPage:stopChangeInfoTextUpdater()
 end
 
 function ConnectedPage:init()
+	self.changeDrawerMotor = Flipper.SingleMotor.new(0)
+	self.changeDrawerHeight = bindingUtil.fromMotor(self.changeDrawerMotor)
+
+	self.changeDrawerMotor:onStep(function(value)
+		local renderChanges = value > 0.05
+
+		self:setState(function(state)
+			if state.renderChanges == renderChanges then
+				return nil
+			end
+
+			return {
+				renderChanges = renderChanges,
+			}
+		end)
+	end)
+
 	self:setState({
 		renderChanges = false,
 		hoveringChangeInfo = false,
-		showingStringDiff = false,
-		oldString = "",
-		newString = "",
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
 	})
 
 	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
@@ -325,16 +258,12 @@ function ConnectedPage:didUpdate(previousProps)
 		-- New patch recieved
 		self:startChangeInfoTextUpdater()
 		self:setState({
-			showingStringDiff = false,
+			showingSourceDiff = false,
 		})
 	end
 end
 
 function ConnectedPage:render()
-	local syncWarning = self.props.patchData
-		and self.props.patchData.unapplied
-		and PatchSet.countChanges(self.props.patchData.unapplied) > 0
-
 	return Theme.with(function(theme)
 		return Roact.createFragment({
 			Padding = e("UIPadding", {
@@ -349,88 +278,9 @@ function ConnectedPage:render()
 				Padding = UDim.new(0, 10),
 			}),
 
-			Heading = e("Frame", {
-				BackgroundTransparency = 1,
-				Size = UDim2.new(1, 0, 0, 32),
-			}, {
-				Header = e(Header, {
-					transparency = self.props.transparency,
-				}),
-
-				ChangeInfo = e("TextButton", {
-					Text = "",
-					Size = UDim2.new(0, 0, 1, 0),
-					AutomaticSize = Enum.AutomaticSize.X,
-					BackgroundColor3 = theme.BorderedContainer.BorderedColor,
-					BackgroundTransparency = if self.state.hoveringChangeInfo then 0.7 else 1,
-					BorderSizePixel = 0,
-					Position = UDim2.new(1, -5, 0.5, 0),
-					AnchorPoint = Vector2.new(1, 0.5),
-					[Roact.Event.MouseEnter] = function()
-						self:setState({
-							hoveringChangeInfo = true,
-						})
-					end,
-					[Roact.Event.MouseLeave] = function()
-						self:setState({
-							hoveringChangeInfo = false,
-						})
-					end,
-					[Roact.Event.Activated] = function()
-						self:setState(function(prevState)
-							prevState = prevState or {}
-							return {
-								renderChanges = not prevState.renderChanges,
-							}
-						end)
-					end,
-				}, {
-					Corner = e("UICorner", {
-						CornerRadius = UDim.new(0, 5),
-					}),
-					Tooltip = e(Tooltip.Trigger, {
-						text = if self.state.renderChanges then "Hide changes" else "View changes",
-					}),
-					Content = e("Frame", {
-						BackgroundTransparency = 1,
-						Size = UDim2.new(0, 0, 1, 0),
-						AutomaticSize = Enum.AutomaticSize.X,
-					}, {
-						Layout = e("UIListLayout", {
-							FillDirection = Enum.FillDirection.Horizontal,
-							HorizontalAlignment = Enum.HorizontalAlignment.Center,
-							VerticalAlignment = Enum.VerticalAlignment.Center,
-							SortOrder = Enum.SortOrder.LayoutOrder,
-							Padding = UDim.new(0, 5),
-						}),
-						Padding = e("UIPadding", {
-							PaddingLeft = UDim.new(0, 5),
-							PaddingRight = UDim.new(0, 5),
-						}),
-						Text = e("TextLabel", {
-							BackgroundTransparency = 1,
-							Text = self.changeInfoText,
-							FontFace = theme.Font.Thin,
-							TextSize = theme.TextSize.Body,
-							TextColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
-							TextTransparency = self.props.transparency,
-							TextXAlignment = Enum.TextXAlignment.Right,
-							Size = UDim2.new(0, 0, 1, 0),
-							AutomaticSize = Enum.AutomaticSize.X,
-							LayoutOrder = 1,
-						}),
-						Icon = e("ImageLabel", {
-							BackgroundTransparency = 1,
-							Image = if syncWarning
-								then Assets.Images.Icons.SyncWarning
-								else Assets.Images.Icons.SyncSuccess,
-							ImageColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
-							ImageTransparency = self.props.transparency,
-							Size = UDim2.new(0, 24, 0, 24),
-							LayoutOrder = 2,
-						}),
-					}),
-				}),
+			Header = e(Header, {
+				transparency = self.props.transparency,
+				layoutOrder = 1,
 			}),
 
 			ConnectionDetails = e(ConnectionDetails, {
@@ -480,65 +330,83 @@ function ConnectedPage:render()
 				}),
 			}),
 
-			ChangesViewer = e(StudioPluginGui, {
-				id = "Rojo_ChangesViewer",
-				title = "View changes",
-				active = self.state.renderChanges,
-				isEphemeral = true,
+			ChangeInfo = e("TextButton", {
+				Text = self.changeInfoText,
+				Font = Enum.Font.Gotham,
+				TextSize = 14,
+				TextWrapped = true,
+				RichText = true,
+				TextColor3 = theme.Header.VersionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextYAlignment = Enum.TextYAlignment.Top,
+				TextTransparency = self.props.transparency,
 
-				initDockState = Enum.InitialDockState.Float,
-				overridePreviousState = true,
-				floatingSize = Vector2.new(400, 500),
-				minimumSize = Vector2.new(300, 300),
+				Size = UDim2.new(1, 0, 0, 28),
 
-				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+				LayoutOrder = 4,
+				BackgroundTransparency = 1,
 
-				onClose = function()
+				[Roact.Event.MouseEnter] = function()
 					self:setState({
-						renderChanges = false,
+						hoveringChangeInfo = true,
 					})
+					self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
+				end,
+
+				[Roact.Event.MouseLeave] = function()
+					self:setState({
+						hoveringChangeInfo = false,
+					})
+					self.setChangeInfoText(self:getChangeInfoText())
+				end,
+
+				[Roact.Event.Activated] = function()
+					if self.state.renderChanges then
+						self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
+							frequency = 4,
+							dampingRatio = 1,
+						}))
+					else
+						self.changeDrawerMotor:setGoal(Flipper.Spring.new(1, {
+							frequency = 3,
+							dampingRatio = 1,
+						}))
+					end
 				end,
 			}, {
-				TooltipsProvider = e(Tooltip.Provider, nil, {
-					Tooltips = e(Tooltip.Container, nil),
-					Content = e("Frame", {
-						Size = UDim2.fromScale(1, 1),
-						BackgroundTransparency = 1,
-					}, {
-						Changes = e(ChangesViewer, {
-							transparency = self.props.transparency,
-							rendered = self.state.renderChanges,
-							patchData = self.props.patchData,
-							patchTree = self.props.patchTree,
-							serveSession = self.props.serveSession,
-							showStringDiff = function(oldString: string, newString: string)
-								self:setState({
-									showingStringDiff = true,
-									oldString = oldString,
-									newString = newString,
-								})
-							end,
-							showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
-								self:setState({
-									showingTableDiff = true,
-									oldTable = oldTable,
-									newTable = newTable,
-								})
-							end,
-							onBack = function()
-								self:setState({
-									renderChanges = false,
-								})
-							end,
-						}),
-					}),
+				Tooltip = e(Tooltip.Trigger, {
+					text = if self.state.renderChanges then "Hide the changes" else "View the changes",
 				}),
 			}),
 
-			StringDiff = e(StudioPluginGui, {
-				id = "Rojo_ConnectedStringDiff",
-				title = "String diff",
-				active = self.state.showingStringDiff,
+			ChangesDrawer = e(ChangesDrawer, {
+				rendered = self.state.renderChanges,
+				transparency = self.props.transparency,
+				patchTree = self.props.patchTree,
+				serveSession = self.props.serveSession,
+				height = self.changeDrawerHeight,
+				layoutOrder = 5,
+
+				showSourceDiff = function(oldSource: string, newSource: string)
+					self:setState({
+						showingSourceDiff = true,
+						oldSource = oldSource,
+						newSource = newSource,
+					})
+				end,
+
+				onClose = function()
+					self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
+						frequency = 4,
+						dampingRatio = 1,
+					}))
+				end,
+			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
 				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
@@ -550,7 +418,7 @@ function ConnectedPage:render()
 
 				onClose = function()
 					self:setState({
-						showingStringDiff = false,
+						showingSourceDiff = false,
 					})
 				end,
 			}, {
@@ -566,46 +434,8 @@ function ConnectedPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,
 
-							oldString = self.state.oldString,
-							newString = self.state.newString,
-						}),
-					}),
-				}),
-			}),
-
-			TableDiff = e(StudioPluginGui, {
-				id = "Rojo_ConnectedTableDiff",
-				title = "Table diff",
-				active = self.state.showingTableDiff,
-				isEphemeral = true,
-
-				initDockState = Enum.InitialDockState.Float,
-				overridePreviousState = false,
-				floatingSize = Vector2.new(500, 350),
-				minimumSize = Vector2.new(400, 250),
-
-				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
-
-				onClose = function()
-					self:setState({
-						showingTableDiff = false,
-					})
-				end,
-			}, {
-				TooltipsProvider = e(Tooltip.Provider, nil, {
-					Tooltips = e(Tooltip.Container, nil),
-					Content = e("Frame", {
-						Size = UDim2.fromScale(1, 1),
-						BackgroundTransparency = 1,
-					}, {
-						e(TableDiffVisualizer, {
-							size = UDim2.new(1, -10, 1, -10),
-							position = UDim2.new(0, 5, 0, 5),
-							anchorPoint = Vector2.new(0, 0),
-							transparency = self.props.transparency,
-
-							oldTable = self.state.oldTable,
-							newTable = self.state.newTable,
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
 						}),
 					}),
 				}),

plugin/src/App/StatusPages/Connecting.lua

@@ -4,8 +4,6 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
-local Theme = require(Plugin.App.Theme)
-
 local Spinner = require(Plugin.App.Components.Spinner)
 
 local e = Roact.createElement
@@ -13,35 +11,11 @@ local e = Roact.createElement
 local ConnectingPage = Roact.Component:extend("ConnectingPage")
 
 function ConnectingPage:render()
-	return Theme.with(function(theme)
-		return e("Frame", {
-			Size = UDim2.new(1, 0, 1, 0),
-			BackgroundTransparency = 1,
-		}, {
-			Spinner = e(Spinner, {
-				position = UDim2.new(0.5, 0, 0.5, 0),
-				anchorPoint = Vector2.new(0.5, 0.5),
-				transparency = self.props.transparency,
-			}),
-			Text = if type(self.props.text) == "string" and #self.props.text > 0
-				then e("TextLabel", {
-					Text = self.props.text,
-					Position = UDim2.new(0.5, 0, 0.5, 30),
-					Size = UDim2.new(1, -40, 0.5, -40),
-					AnchorPoint = Vector2.new(0.5, 0),
-					TextXAlignment = Enum.TextXAlignment.Center,
-					TextYAlignment = Enum.TextYAlignment.Top,
-					RichText = true,
-					FontFace = theme.Font.Thin,
-					TextSize = theme.TextSize.Medium,
-					TextColor3 = theme.SubTextColor,
-					TextTruncate = Enum.TextTruncate.AtEnd,
-					TextTransparency = self.props.transparency,
-					BackgroundTransparency = 1,
-				})
-				else nil,
-		})
-	end)
+	return e(Spinner, {
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+		transparency = self.props.transparency,
+	})
 end
 
 return ConnectingPage

plugin/src/App/StatusPages/Error.lua

@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -5,10 +7,8 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 
 local Theme = require(Plugin.App.Theme)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local TextButton = require(Plugin.App.Components.TextButton)
-local Header = require(Plugin.App.Components.Header)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local Tooltip = require(Plugin.App.Components.Tooltip)
@@ -24,44 +24,43 @@ function Error:init()
 end
 
 function Error:render()
-	return Theme.with(function(theme)
-		return e(BorderedContainer, {
-			size = Roact.joinBindings({
-				containerSize = self.props.containerSize,
-				contentSize = self.contentSize,
-			}):map(function(values)
-				local maximumSize = values.containerSize
-				maximumSize -= Vector2.new(14, 14) * 2 -- Page padding
-				maximumSize -= Vector2.new(0, 34 + 10) -- Buttons and spacing
+	return e(BorderedContainer, {
+		size = Roact.joinBindings({
+			containerSize = self.props.containerSize,
+			contentSize = self.contentSize,
+		}):map(function(values)
+			local maximumSize = values.containerSize
+			maximumSize -= Vector2.new(14, 14) * 2 -- Page padding
+			maximumSize -= Vector2.new(0, 34 + 10) -- Buttons and spacing
 
-				local outerSize = values.contentSize + ERROR_PADDING * 2
+			local outerSize = values.contentSize + ERROR_PADDING * 2
 
-				return UDim2.new(1, 0, 0, math.min(outerSize.Y, maximumSize.Y))
+			return UDim2.new(1, 0, 0, math.min(outerSize.Y, maximumSize.Y))
+		end),
+		transparency = self.props.transparency,
+	}, {
+		ScrollingFrame = e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
+			contentSize = self.contentSize:map(function(value)
+				return value + ERROR_PADDING * 2
 			end),
 			transparency = self.props.transparency,
-			layoutOrder = self.props.layoutOrder,
+
+			[Roact.Change.AbsoluteSize] = function(object)
+				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
+
+				local textBounds = TextService:GetTextSize(
+					self.props.errorMessage,
+					16,
+					Enum.Font.Code,
+					Vector2.new(containerSize.X, math.huge)
+				)
+
+				self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
+			end,
 		}, {
-			ScrollingFrame = e(ScrollingFrame, {
-				size = UDim2.new(1, 0, 1, 0),
-				contentSize = self.contentSize:map(function(value)
-					return value + ERROR_PADDING * 2
-				end),
-				transparency = self.props.transparency,
-
-				[Roact.Change.AbsoluteSize] = function(object)
-					local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
-
-					local textBounds = getTextBoundsAsync(
-						self.props.errorMessage,
-						theme.Font.Code,
-						theme.TextSize.Code,
-						containerSize.X
-					)
-
-					self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
-				end,
-			}, {
-				ErrorMessage = e("TextBox", {
+			ErrorMessage = Theme.with(function(theme)
+				return e("TextBox", {
 					[Roact.Event.InputBegan] = function(rbx, input)
 						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then
 							return
@@ -72,8 +71,8 @@ function Error:render()
 
 					Text = self.props.errorMessage,
 					TextEditable = false,
-					FontFace = theme.Font.Code,
-					TextSize = theme.TextSize.Code,
+					Font = Enum.Font.Code,
+					TextSize = 16,
 					TextColor3 = theme.ErrorColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextYAlignment = Enum.TextYAlignment.Top,
@@ -82,17 +81,17 @@ function Error:render()
 					ClearTextOnFocus = false,
 					BackgroundTransparency = 1,
 					Size = UDim2.new(1, 0, 1, 0),
-				}),
+				})
+			end),
 
-				Padding = e("UIPadding", {
-					PaddingLeft = UDim.new(0, ERROR_PADDING.X),
-					PaddingRight = UDim.new(0, ERROR_PADDING.X),
-					PaddingTop = UDim.new(0, ERROR_PADDING.Y),
-					PaddingBottom = UDim.new(0, ERROR_PADDING.Y),
-				}),
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, ERROR_PADDING.X),
+				PaddingRight = UDim.new(0, ERROR_PADDING.X),
+				PaddingTop = UDim.new(0, ERROR_PADDING.Y),
+				PaddingBottom = UDim.new(0, ERROR_PADDING.Y),
 			}),
-		})
-	end)
+		}),
+	})
 end
 
 local ErrorPage = Roact.Component:extend("ErrorPage")
@@ -110,21 +109,16 @@ function ErrorPage:render()
 			self.setContainerSize(object.AbsoluteSize)
 		end,
 	}, {
-		Header = e(Header, {
-			transparency = self.props.transparency,
-			layoutOrder = 1,
-		}),
-
 		Error = e(Error, {
 			errorMessage = self.state.errorMessage,
 			containerSize = self.containerSize,
 			transparency = self.props.transparency,
-			layoutOrder = 2,
+			layoutOrder = 1,
 		}),
 
 		Buttons = e("Frame", {
 			Size = UDim2.new(1, 0, 0, 35),
-			LayoutOrder = 3,
+			LayoutOrder = 2,
 			BackgroundTransparency = 1,
 		}, {
 			Close = e(TextButton, {

plugin/src/App/StatusPages/NotConnected.lua

@@ -27,8 +27,8 @@ local function AddressEntry(props)
 		}, {
 			Host = e("TextBox", {
 				Text = props.host or "",
-				FontFace = theme.Font.Code,
-				TextSize = theme.TextSize.Large,
+				Font = Enum.Font.Code,
+				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -51,8 +51,8 @@ local function AddressEntry(props)
 
 			Port = e("TextBox", {
 				Text = props.port or "",
-				FontFace = theme.Font.Code,
-				TextSize = theme.TextSize.Large,
+				Font = Enum.Font.Code,
+				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
 				TextTransparency = props.transparency,
 				PlaceholderText = Config.defaultPort,

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

@@ -1,3 +1,5 @@
+local TextService = game:GetService("TextService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -7,55 +9,24 @@ local Roact = require(Packages.Roact)
 local Settings = require(Plugin.Settings)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
-local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local Checkbox = require(Plugin.App.Components.Checkbox)
 local Dropdown = require(Plugin.App.Components.Dropdown)
 local IconButton = require(Plugin.App.Components.IconButton)
-local Tag = require(Plugin.App.Components.Tag)
 
 local e = Roact.createElement
 
 local DIVIDER_FADE_SIZE = 0.1
-local TAG_TYPES = {
-	unstable = {
-		text = "UNSTABLE",
-		icon = Assets.Images.Icons.Warning,
-		color = { "Settings", "Setting", "UnstableColor" },
-	},
-	debug = {
-		text = "DEBUG",
-		icon = Assets.Images.Icons.Debug,
-		color = { "Settings", "Setting", "DebugColor" },
-	},
-}
 
-local function getTextBoundsWithLineHeight(
-	text: string,
-	font: Font,
-	textSize: number,
-	width: number,
-	lineHeight: number
-)
-	local textBounds = getTextBoundsAsync(text, font, textSize, width)
+local function getTextBounds(text, textSize, font, lineHeight, bounds)
+	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
 
-	local lineCount = math.ceil(textBounds.Y / textSize)
+	local lineCount = textBounds.Y / textSize
 	local lineHeightAbsolute = textSize * lineHeight
 
 	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
 end
 
-local function getThemeColorFromPath(theme, path)
-	local color = theme
-	for _, key in path do
-		if color[key] == nil then
-			return theme.BrandColor
-		end
-		color = color[key]
-	end
-	return color
-end
-
 local Setting = Roact.Component:extend("Setting")
 
 function Setting:init()
@@ -80,11 +51,11 @@ end
 
 function Setting:render()
 	return Theme.with(function(theme)
-		local settingsTheme = theme.Settings
+		theme = theme.Settings
 
 		return e("Frame", {
 			Size = self.contentSize:map(function(value)
-				return UDim2.new(1, 0, 0, value.Y + 20)
+				return UDim2.new(1, 0, 0, 20 + value.Y + 20)
 			end),
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
@@ -114,7 +85,6 @@ function Setting:render()
 					then self.props.input
 					elseif self.props.options ~= nil then e(Dropdown, {
 						locked = self.props.locked,
-						lockedTooltip = self.props.lockedTooltip,
 						options = self.props.options,
 						active = self.state.setting,
 						transparency = self.props.transparency,
@@ -124,7 +94,6 @@ function Setting:render()
 					})
 					else e(Checkbox, {
 						locked = self.props.locked,
-						lockedTooltip = self.props.lockedTooltip,
 						active = self.state.setting,
 						transparency = self.props.transparency,
 						onClick = function()
@@ -137,7 +106,7 @@ function Setting:render()
 					then e(IconButton, {
 						icon = Assets.Images.Icons.Reset,
 						iconSize = 24,
-						color = settingsTheme.BackButtonColor,
+						color = theme.BackButtonColor,
 						transparency = self.props.transparency,
 						visible = self.props.showReset,
 						layoutOrder = -1,
@@ -151,49 +120,29 @@ function Setting:render()
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}, {
-				Heading = e("Frame", {
-					Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
+				Name = e("TextLabel", {
+					Text = (if self.props.experimental then '<font color="#FF8E3C">⚠ </font>' else "")
+						.. self.props.name,
+					Font = Enum.Font.GothamBold,
+					TextSize = 17,
+					TextColor3 = theme.Setting.NameColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+					RichText = true,
+
+					Size = UDim2.new(1, 0, 0, 17),
+
+					LayoutOrder = 1,
 					BackgroundTransparency = 1,
-				}, {
-					Layout = e("UIListLayout", {
-						VerticalAlignment = Enum.VerticalAlignment.Center,
-						FillDirection = Enum.FillDirection.Horizontal,
-						SortOrder = Enum.SortOrder.LayoutOrder,
-						Padding = UDim.new(0, 5),
-					}),
-					Tag = if self.props.tag and TAG_TYPES[self.props.tag]
-						then e(Tag, {
-							layoutOrder = 1,
-							transparency = self.props.transparency,
-							text = TAG_TYPES[self.props.tag].text,
-							icon = TAG_TYPES[self.props.tag].icon,
-							color = getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color),
-						})
-						else nil,
-					Name = e("TextLabel", {
-						Text = self.props.name,
-						FontFace = theme.Font.Bold,
-						TextSize = theme.TextSize.Medium,
-						TextColor3 = if self.props.tag and TAG_TYPES[self.props.tag]
-							then getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color)
-							else settingsTheme.Setting.NameColor,
-						TextXAlignment = Enum.TextXAlignment.Left,
-						TextTransparency = self.props.transparency,
-						RichText = true,
-
-						Size = UDim2.new(1, 0, 0, theme.TextSize.Medium),
-
-						LayoutOrder = 2,
-						BackgroundTransparency = 1,
-					}),
 				}),
 
 				Description = e("TextLabel", {
-					Text = self.props.description,
-					FontFace = theme.Font.Main,
+					Text = (if self.props.experimental then '<font color="#FF8E3C">[Experimental] </font>' else "")
+						.. self.props.description,
+					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
-					TextSize = theme.TextSize.Body,
-					TextColor3 = settingsTheme.Setting.DescriptionColor,
+					TextSize = 14,
+					TextColor3 = theme.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
@@ -203,18 +152,20 @@ function Setting:render()
 						containerSize = self.containerSize,
 						inputSize = self.inputSize,
 					}):map(function(values)
+						local desc = (if self.props.experimental then "[Experimental] " else "")
+							.. self.props.description
 						local offset = values.inputSize.X + 5
-						local textBounds = getTextBoundsWithLineHeight(
-							self.props.description,
-							theme.Font.Main,
-							theme.TextSize.Body,
-							values.containerSize.X - offset,
-							1.2
+						local textBounds = getTextBounds(
+							desc,
+							14,
+							Enum.Font.Gotham,
+							1.2,
+							Vector2.new(values.containerSize.X - offset, math.huge)
 						)
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),
 
-					LayoutOrder = 3,
+					LayoutOrder = 2,
 					BackgroundTransparency = 1,
 				}),
 
@@ -222,16 +173,21 @@ function Setting:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 					FillDirection = Enum.FillDirection.Vertical,
 					SortOrder = Enum.SortOrder.LayoutOrder,
-					Padding = UDim.new(0, 5),
+					Padding = UDim.new(0, 6),
 
 					[Roact.Change.AbsoluteContentSize] = function(object)
 						self.setContentSize(object.AbsoluteContentSize)
 					end,
 				}),
+
+				Padding = e("UIPadding", {
+					PaddingTop = UDim.new(0, 20),
+					PaddingBottom = UDim.new(0, 20),
+				}),
 			}),
 
 			Divider = e("Frame", {
-				BackgroundColor3 = settingsTheme.DividerColor,
+				BackgroundColor3 = theme.DividerColor,
 				BackgroundTransparency = self.props.transparency,
 				Size = UDim2.new(1, 0, 0, 1),
 				BorderSizePixel = 0,

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

@@ -26,12 +26,11 @@ local function invertTbl(tbl)
 end
 
 local invertedLevels = invertTbl(Log.Level)
-local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId", "Never" }
-local syncReminderModes = { "None", "Notify", "Fullscreen" }
+local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId" }
 
 local function Navbar(props)
 	return Theme.with(function(theme)
-		local navbarTheme = theme.Settings.Navbar
+		theme = theme.Settings.Navbar
 
 		return e("Frame", {
 			Size = UDim2.new(1, 0, 0, 46),
@@ -41,7 +40,7 @@ local function Navbar(props)
 			Back = e(IconButton, {
 				icon = Assets.Images.Icons.Back,
 				iconSize = 24,
-				color = navbarTheme.BackButtonColor,
+				color = theme.BackButtonColor,
 				transparency = props.transparency,
 
 				position = UDim2.new(0, 0, 0.5, 0),
@@ -56,9 +55,9 @@ local function Navbar(props)
 
 			Text = e("TextLabel", {
 				Text = "Settings",
-				FontFace = theme.Font.Thin,
-				TextSize = theme.TextSize.Large,
-				TextColor3 = navbarTheme.TextColor,
+				Font = Enum.Font.Gotham,
+				TextSize = 18,
+				TextColor3 = theme.TextColor,
 				TextTransparency = props.transparency,
 
 				Size = UDim2.new(1, 0, 1, 0),
@@ -76,30 +75,18 @@ function SettingsPage:init()
 end
 
 function SettingsPage:render()
-	local layoutOrder = 0
-	local function layoutIncrement()
-		layoutOrder += 1
-		return layoutOrder
-	end
+	return Theme.with(function(theme)
+		theme = theme.Settings
 
-	return Roact.createFragment({
-		Navbar = e(Navbar, {
-			onBack = self.props.onBack,
-			transparency = self.props.transparency,
-			layoutOrder = layoutIncrement(),
-		}),
-		Content = e(ScrollingFrame, {
-			size = UDim2.new(1, 0, 1, -47),
-			position = UDim2.new(0, 0, 0, 47),
+		return e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
 			contentSize = self.contentSize,
 			transparency = self.props.transparency,
 		}, {
-			AutoReconnect = e(Setting, {
-				id = "autoReconnect",
-				name = "Auto Reconnect",
-				description = "Reconnect to server on place open if the served project matches the last sync to the place",
+			Navbar = e(Navbar, {
+				onBack = self.props.onBack,
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 0,
 			}),
 
 			ShowNotifications = e(Setting, {
@@ -107,29 +94,16 @@ function SettingsPage:render()
 				name = "Show Notifications",
 				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 1,
 			}),
 
-			SyncReminderMode = e(Setting, {
-				id = "syncReminderMode",
+			SyncReminder = e(Setting, {
+				id = "syncReminder",
 				name = "Sync Reminder",
-				description = "What type of reminders you receive for syncing your project",
+				description = "Notify to sync when opening a place that has previously been synced",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
 				visible = Settings:getBinding("showNotifications"),
-
-				options = syncReminderModes,
-			}),
-
-			SyncReminderPolling = e(Setting, {
-				id = "syncReminderPolling",
-				name = "Sync Reminder Polling",
-				description = "Look for available sync servers periodically",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = Settings:getBindings("syncReminderMode", "showNotifications"):map(function(values)
-					return values.syncReminderMode ~= "None" and values.showNotifications
-				end),
+				layoutOrder = 2,
 			}),
 
 			ConfirmationBehavior = e(Setting, {
@@ -137,7 +111,7 @@ function SettingsPage:render()
 				name = "Confirmation Behavior",
 				description = "When to prompt for confirmation before syncing",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 3,
 
 				options = confirmationBehaviors,
 			}),
@@ -147,7 +121,7 @@ function SettingsPage:render()
 				name = "Confirmation Threshold",
 				description = "How many modified instances to be considered a large change",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 4,
 				visible = Settings:getBinding("confirmationBehavior"):map(function(value)
 					return value == "Large Changes"
 				end),
@@ -178,52 +152,17 @@ function SettingsPage:render()
 				name = "Play Sounds",
 				description = "Toggle sound effects",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			EnableSyncFallback = e(Setting, {
-				id = "enableSyncFallback",
-				name = "Enable Sync Fallback",
-				description = "Whether Instances that fail to sync are remade as a fallback. If this is enabled, Instances may be destroyed and remade when syncing.",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			CheckForUpdates = e(Setting, {
-				id = "checkForUpdates",
-				name = "Check For Updates",
-				description = "Notify about newer compatible Rojo releases",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-			}),
-
-			CheckForPreleases = e(Setting, {
-				id = "checkForPrereleases",
-				name = "Include Prerelease Updates",
-				description = "Include prereleases when checking for updates",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
-				visible = if string.find(debug.traceback(), "\n[^\n]-user_.-$") == nil
-					then false -- Must be a local install to allow prerelease checks
-					else Settings:getBinding("checkForUpdates"),
-			}),
-
-			AutoConnectPlaytestServer = e(Setting, {
-				id = "autoConnectPlaytestServer",
-				name = "Auto Connect Playtest Server",
-				description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
-				tag = "unstable",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 5,
 			}),
 
 			OpenScriptsExternally = e(Setting, {
 				id = "openScriptsExternally",
 				name = "Open Scripts Externally",
 				description = "Attempt to open scripts in an external editor",
-				tag = "unstable",
+				locked = self.props.syncActive,
+				experimental = true,
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 6,
 			}),
 
 			TwoWaySync = e(Setting, {
@@ -231,19 +170,17 @@ function SettingsPage:render()
 				name = "Two-Way Sync",
 				description = "Editing files in Studio will sync them into the filesystem",
 				locked = self.props.syncActive,
-				lockedTooltip = "(Cannot change while currently syncing. Disconnect first.)",
-				tag = "unstable",
+				experimental = true,
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 7,
 			}),
 
 			LogLevel = e(Setting, {
 				id = "logLevel",
 				name = "Log Level",
 				description = "Plugin output verbosity level",
-				tag = "debug",
 				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 100,
 
 				options = invertedLevels,
 				showReset = Settings:getBinding("logLevel"):map(function(value)
@@ -258,18 +195,8 @@ function SettingsPage:render()
 				id = "typecheckingEnabled",
 				name = "Typechecking",
 				description = "Toggle typechecking on the API surface",
-				tag = "debug",
 				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",
-				tag = "debug",
-				transparency = self.props.transparency,
-				layoutOrder = layoutIncrement(),
+				layoutOrder = 101,
 			}),
 
 			Layout = e("UIListLayout", {
@@ -285,8 +212,8 @@ function SettingsPage:render()
 				PaddingLeft = UDim.new(0, 20),
 				PaddingRight = UDim.new(0, 20),
 			}),
-		}),
-	})
+		})
+	end)
 end
 
 return SettingsPage

plugin/src/App/Theme.lua

@@ -1,6 +1,7 @@
 --[[
-	Theming system provided through Roact's context.
-	Uses Studio colors when possible.
+	Theming system taking advantage of Roact's new context API.
+	Doesn't use colors provided by Studio and instead just branches on theme
+	name. This isn't exactly best practice.
 ]]
 
 -- Studio does not exist outside Roblox Studio, so we'll lazily initialize it
@@ -14,8 +15,6 @@ local function getStudio()
 	return _Studio
 end
 
-local ContentProvider = game:GetService("ContentProvider")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Packages = Rojo.Packages
 
@@ -25,7 +24,227 @@ local strict = require(script.Parent.Parent.strict)
 
 local BRAND_COLOR = Color3.fromHex("E13835")
 
-local Context = Roact.createContext({})
+local lightTheme = strict("LightTheme", {
+	BackgroundColor = Color3.fromHex("FFFFFF"),
+	Button = {
+		Solid = {
+			ActionFillColor = Color3.fromHex("FFFFFF"),
+			ActionFillTransparency = 0.8,
+			Enabled = {
+				TextColor = Color3.fromHex("FFFFFF"),
+				BackgroundColor = BRAND_COLOR,
+			},
+			Disabled = {
+				TextColor = Color3.fromHex("FFFFFF"),
+				BackgroundColor = BRAND_COLOR,
+			},
+		},
+		Bordered = {
+			ActionFillColor = Color3.fromHex("000000"),
+			ActionFillTransparency = 0.9,
+			Enabled = {
+				TextColor = Color3.fromHex("393939"),
+				BorderColor = Color3.fromHex("ACACAC"),
+			},
+			Disabled = {
+				TextColor = Color3.fromHex("393939"),
+				BorderColor = Color3.fromHex("ACACAC"),
+			},
+		},
+	},
+	Checkbox = {
+		Active = {
+			IconColor = Color3.fromHex("FFFFFF"),
+			BackgroundColor = BRAND_COLOR,
+		},
+		Inactive = {
+			IconColor = Color3.fromHex("EEEEEE"),
+			BorderColor = Color3.fromHex("AFAFAF"),
+		},
+	},
+	Dropdown = {
+		TextColor = Color3.fromHex("000000"),
+		BorderColor = Color3.fromHex("AFAFAF"),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
+		Open = {
+			IconColor = BRAND_COLOR,
+		},
+		Closed = {
+			IconColor = Color3.fromHex("EEEEEE"),
+		},
+	},
+	TextInput = {
+		Enabled = {
+			TextColor = Color3.fromHex("000000"),
+			PlaceholderColor = Color3.fromHex("8C8C8C"),
+			BorderColor = Color3.fromHex("ACACAC"),
+		},
+		Disabled = {
+			TextColor = Color3.fromHex("393939"),
+			PlaceholderColor = Color3.fromHex("8C8C8C"),
+			BorderColor = Color3.fromHex("AFAFAF"),
+		},
+		ActionFillColor = Color3.fromHex("000000"),
+		ActionFillTransparency = 0.9,
+	},
+	AddressEntry = {
+		TextColor = Color3.fromHex("000000"),
+		PlaceholderColor = Color3.fromHex("8C8C8C"),
+	},
+	BorderedContainer = {
+		BorderColor = Color3.fromHex("CBCBCB"),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
+	},
+	Spinner = {
+		ForegroundColor = BRAND_COLOR,
+		BackgroundColor = Color3.fromHex("EEEEEE"),
+	},
+	Diff = {
+		Add = Color3.fromHex("baffbd"),
+		Remove = Color3.fromHex("ffbdba"),
+		Edit = Color3.fromHex("bacdff"),
+		Row = Color3.fromHex("000000"),
+		Warning = Color3.fromHex("FF8E3C"),
+	},
+	ConnectionDetails = {
+		ProjectNameColor = Color3.fromHex("000000"),
+		AddressColor = Color3.fromHex("000000"),
+		DisconnectColor = BRAND_COLOR,
+	},
+	Settings = {
+		DividerColor = Color3.fromHex("CBCBCB"),
+		Navbar = {
+			BackButtonColor = Color3.fromHex("000000"),
+			TextColor = Color3.fromHex("000000"),
+		},
+		Setting = {
+			NameColor = Color3.fromHex("000000"),
+			DescriptionColor = Color3.fromHex("5F5F5F"),
+		},
+	},
+	Header = {
+		LogoColor = BRAND_COLOR,
+		VersionColor = Color3.fromHex("727272"),
+	},
+	Notification = {
+		InfoColor = Color3.fromHex("000000"),
+		CloseColor = BRAND_COLOR,
+	},
+	ErrorColor = Color3.fromHex("000000"),
+	ScrollBarColor = Color3.fromHex("000000"),
+})
+
+local darkTheme = strict("DarkTheme", {
+	BackgroundColor = Color3.fromHex("2E2E2E"),
+	Button = {
+		Solid = {
+			ActionFillColor = Color3.fromHex("FFFFFF"),
+			ActionFillTransparency = 0.8,
+			Enabled = {
+				TextColor = Color3.fromHex("FFFFFF"),
+				BackgroundColor = BRAND_COLOR,
+			},
+			Disabled = {
+				TextColor = Color3.fromHex("FFFFFF"),
+				BackgroundColor = BRAND_COLOR,
+			},
+		},
+		Bordered = {
+			ActionFillColor = Color3.fromHex("FFFFFF"),
+			ActionFillTransparency = 0.9,
+			Enabled = {
+				TextColor = Color3.fromHex("DBDBDB"),
+				BorderColor = Color3.fromHex("535353"),
+			},
+			Disabled = {
+				TextColor = Color3.fromHex("DBDBDB"),
+				BorderColor = Color3.fromHex("535353"),
+			},
+		},
+	},
+	Checkbox = {
+		Active = {
+			IconColor = Color3.fromHex("FFFFFF"),
+			BackgroundColor = BRAND_COLOR,
+		},
+		Inactive = {
+			IconColor = Color3.fromHex("484848"),
+			BorderColor = Color3.fromHex("5A5A5A"),
+		},
+	},
+	Dropdown = {
+		TextColor = Color3.fromHex("FFFFFF"),
+		BorderColor = Color3.fromHex("5A5A5A"),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
+		Open = {
+			IconColor = BRAND_COLOR,
+		},
+		Closed = {
+			IconColor = Color3.fromHex("484848"),
+		},
+	},
+	TextInput = {
+		Enabled = {
+			TextColor = Color3.fromHex("FFFFFF"),
+			PlaceholderColor = Color3.fromHex("8B8B8B"),
+			BorderColor = Color3.fromHex("535353"),
+		},
+		Disabled = {
+			TextColor = Color3.fromHex("484848"),
+			PlaceholderColor = Color3.fromHex("8B8B8B"),
+			BorderColor = Color3.fromHex("5A5A5A"),
+		},
+		ActionFillColor = Color3.fromHex("FFFFFF"),
+		ActionFillTransparency = 0.9,
+	},
+	AddressEntry = {
+		TextColor = Color3.fromHex("FFFFFF"),
+		PlaceholderColor = Color3.fromHex("8B8B8B"),
+	},
+	BorderedContainer = {
+		BorderColor = Color3.fromHex("535353"),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
+	},
+	Spinner = {
+		ForegroundColor = BRAND_COLOR,
+		BackgroundColor = Color3.fromHex("2B2B2B"),
+	},
+	Diff = {
+		Add = Color3.fromHex("273732"),
+		Remove = Color3.fromHex("3F2D32"),
+		Edit = Color3.fromHex("193345"),
+		Row = Color3.fromHex("FFFFFF"),
+		Warning = Color3.fromHex("FF8E3C"),
+	},
+	ConnectionDetails = {
+		ProjectNameColor = Color3.fromHex("FFFFFF"),
+		AddressColor = Color3.fromHex("FFFFFF"),
+		DisconnectColor = Color3.fromHex("FFFFFF"),
+	},
+	Settings = {
+		DividerColor = Color3.fromHex("535353"),
+		Navbar = {
+			BackButtonColor = Color3.fromHex("FFFFFF"),
+			TextColor = Color3.fromHex("FFFFFF"),
+		},
+		Setting = {
+			NameColor = Color3.fromHex("FFFFFF"),
+			DescriptionColor = Color3.fromHex("D3D3D3"),
+		},
+	},
+	Header = {
+		LogoColor = BRAND_COLOR,
+		VersionColor = Color3.fromHex("D3D3D3"),
+	},
+	Notification = {
+		InfoColor = Color3.fromHex("FFFFFF"),
+		CloseColor = Color3.fromHex("FFFFFF"),
+	},
+	ErrorColor = Color3.fromHex("FFFFFF"),
+	ScrollBarColor = Color3.fromHex("FFFFFF"),
+})
+
+local Context = Roact.createContext(lightTheme)
 
 local StudioProvider = Roact.Component:extend("StudioProvider")
 
@@ -33,209 +252,25 @@ local StudioProvider = Roact.Component:extend("StudioProvider")
 function StudioProvider:updateTheme()
 	local studioTheme = getStudio().Theme
 
-	local isDark = studioTheme.Name == "Dark"
+	if studioTheme.Name == "Light" then
+		self:setState({
+			theme = lightTheme,
+		})
+	elseif studioTheme.Name == "Dark" then
+		self:setState({
+			theme = darkTheme,
+		})
+	else
+		Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name)
 
-	local theme = strict(studioTheme.Name .. "Theme", {
-		Font = {
-			Main = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Medium, Enum.FontStyle.Normal),
-			Bold = Font.new("rbxasset://fonts/families/Montserrat.json", Enum.FontWeight.Bold, Enum.FontStyle.Normal),
-			Thin = Font.new(
-				"rbxasset://fonts/families/Montserrat.json",
-				Enum.FontWeight.Regular,
-				Enum.FontStyle.Normal
-			),
-			Code = Font.new(
-				"rbxasset://fonts/families/Inconsolata.json",
-				Enum.FontWeight.Regular,
-				Enum.FontStyle.Normal
-			),
-		},
-		TextSize = {
-			Body = 15,
-			Small = 13,
-			Medium = 16,
-			Large = 18,
-			Code = 16,
-		},
-		BrandColor = BRAND_COLOR,
-		BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
-		TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-		SubTextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
-		Button = {
-			Solid = {
-				-- Solid uses brand theming, not Studio theming.
-				ActionFillColor = Color3.fromHex("FFFFFF"),
-				ActionFillTransparency = 0.8,
-				Enabled = {
-					TextColor = Color3.fromHex("FFFFFF"),
-					BackgroundColor = BRAND_COLOR,
-				},
-				Disabled = {
-					TextColor = Color3.fromHex("FFFFFF"),
-					BackgroundColor = BRAND_COLOR,
-				},
-			},
-			Bordered = {
-				ActionFillColor = studioTheme:GetColor(
-					Enum.StudioStyleGuideColor.ButtonText,
-					Enum.StudioStyleGuideModifier.Selected
-				),
-				ActionFillTransparency = 0.9,
-				Enabled = {
-					TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText),
-					BorderColor = studioTheme:GetColor(
-						Enum.StudioStyleGuideColor.CheckedFieldBorder,
-						Enum.StudioStyleGuideModifier.Disabled
-					),
-				},
-				Disabled = {
-					TextColor = studioTheme:GetColor(
-						Enum.StudioStyleGuideColor.ButtonText,
-						Enum.StudioStyleGuideModifier.Disabled
-					),
-					BorderColor = studioTheme:GetColor(
-						Enum.StudioStyleGuideColor.CheckedFieldBorder,
-						Enum.StudioStyleGuideModifier.Disabled
-					),
-				},
-			},
-		},
-		Checkbox = {
-			Active = {
-				-- Active checkboxes use brand theming, not Studio theming.
-				IconColor = Color3.fromHex("FFFFFF"),
-				BackgroundColor = BRAND_COLOR,
-			},
-			Inactive = {
-				IconColor = studioTheme:GetColor(
-					Enum.StudioStyleGuideColor.CheckedFieldIndicator,
-					Enum.StudioStyleGuideModifier.Disabled
-				),
-				BorderColor = studioTheme:GetColor(
-					Enum.StudioStyleGuideColor.CheckedFieldBorder,
-					Enum.StudioStyleGuideModifier.Disabled
-				),
-			},
-		},
-		Dropdown = {
-			TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText),
-			BorderColor = studioTheme:GetColor(
-				Enum.StudioStyleGuideColor.CheckedFieldBorder,
-				Enum.StudioStyleGuideModifier.Disabled
-			),
-			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
-			IconColor = studioTheme:GetColor(
-				Enum.StudioStyleGuideColor.CheckedFieldIndicator,
-				Enum.StudioStyleGuideModifier.Disabled
-			),
-		},
-		TextInput = {
-			Enabled = {
-				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-				PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
-				BorderColor = studioTheme:GetColor(
-					Enum.StudioStyleGuideColor.CheckedFieldBorder,
-					Enum.StudioStyleGuideModifier.Disabled
-				),
-			},
-			Disabled = {
-				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-				PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
-				BorderColor = studioTheme:GetColor(
-					Enum.StudioStyleGuideColor.CheckedFieldBorder,
-					Enum.StudioStyleGuideModifier.Disabled
-				),
-			},
-			ActionFillColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			ActionFillTransparency = 0.9,
-		},
-		AddressEntry = {
-			TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
-		},
-		BorderedContainer = {
-			BorderColor = studioTheme:GetColor(
-				Enum.StudioStyleGuideColor.CheckedFieldBorder,
-				Enum.StudioStyleGuideModifier.Disabled
-			),
-			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
-		},
-		Spinner = {
-			ForegroundColor = BRAND_COLOR,
-			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
-		},
-		Diff = {
-			-- Very bright different colors in case some places were not updated to use
-			-- the new background diff colors.
-			Add = Color3.fromRGB(255, 0, 255),
-			Remove = Color3.fromRGB(255, 0, 255),
-			Edit = Color3.fromRGB(255, 0, 255),
-
-			Row = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			Warning = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
-
-			Background = {
-				-- Studio doesn't have good colors since their diffs use backgrounds, not text
-				Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
-				Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
-				Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
-				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			},
-
-			Text = {
-				Add = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Remove = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Edit = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
-				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-			},
-		},
-		ConnectionDetails = {
-			ProjectNameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			AddressColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			DisconnectColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-		},
-		Settings = {
-			DividerColor = studioTheme:GetColor(
-				Enum.StudioStyleGuideColor.CheckedFieldBorder,
-				Enum.StudioStyleGuideModifier.Disabled
-			),
-			Navbar = {
-				BackButtonColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			},
-			Setting = {
-				NameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-				DescriptionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-				UnstableColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
-				DebugColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InfoText),
-			},
-		},
-		Header = {
-			LogoColor = BRAND_COLOR,
-			VersionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
-		},
-		Notification = {
-			InfoColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-			CloseColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-		},
-		ErrorColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-		ScrollBarColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
-	})
-
-	self:setState({
-		theme = theme,
-	})
+		self:setState({
+			theme = lightTheme,
+		})
+	end
 end
 
 function StudioProvider:init()
 	self:updateTheme()
-
-	-- Preload the Fonts so that getTextBoundsAsync won't yield
-	local fontAssetIds = {}
-	for _, font in self.state.theme.Font do
-		table.insert(fontAssetIds, font.Family)
-	end
-	pcall(ContentProvider.PreloadAsync, ContentProvider, fontAssetIds)
 end
 
 function StudioProvider:render()