Migrate to a fully-updated fork of react-devtools-inline with our own customizations

[markerikson]

This PR:

• Initially tries updating react-devtools-inline from 4.24.7 to 4.28.0

Last time I tried this locally, all of the colors disappeared from the component tree, but this time it seemed to work.

If the PR build works okay, then I'm going to take a stab at creating a fork of this and applying the same changes we have in the Yarn patch right now (which will also accomplish FE-1890).

Looks good on all accounts!

• The initial test update to react-devtools-inline@4.28.0 worked okay
• I forked react-devtools-inline and republished as @replayio/react-devtools-inline (changes here: Modify react-devtools-inline for Replay integration react#7 )
• I updated us to use that fork, and replaced all references
• Nuked the ancient pre-RDT-protocol-v2 handling we had
• Deleted the now-dead Yarn patch file

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 14, 2023 9:46pm

[replay-io]

E2E Tests

80 replays were recorded for bdefb85.

1 Failed

• cypress-04: Test Step buttons and menu item

  locator.getAttribute: Timeout 15000ms exceeded.
  =========================== logs ===========================
  waiting for locator('#toolbox-content-debugger').locator('[data-test-name="Source-Link.js"]')
  ============================================================

79 Passed

• authenticated/test-suites/library-test-runs
• authenticated/test-suites/library-tests-list
• breakpoints-01: Test basic breakpoint functionality
• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint
• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one
• breakpoints-04: catch, finally, generators, and async/await
• breakpoints-05: Test interaction of breakpoints with debugger statements
• breakpoints-06: Test log point in a sourcemapped file
• breakpoints-07: rewind and seek using command bar and console messages
• breakpoints-08: should be temporarily disabled
• console_async: support console evaluations in async frames
• console_dock_node: Should show the correct docking behavior for recordings without video
• console_dock: Should show the correct docking behavior for recordings with video
• console_errors: Test that errors and warnings from various sources are shown in the console
• console_eval: support console evaluations
• console_warp-01: should support warping to console messages
• console_warp-02: support pausing, warping, stepping and evaluating console messages
• console-expressions-01: should cache input eager eval and terminal expressions per instance
• cypress-01: Basic Test Suites panel functionality
• cypress-02: Test Step timeline behavior
• cypress-03: Test Step interactions
• focus_mode-01: should filter messages as regions based on the active focus mode
• highlighter: element highlighter works everywhere
• inspector-computed-01: Basic computed styles can be viewed
• inspector-elements-01: Basic DOM tree node display
• inspector-elements-02_node-picker: element picker and iframe behavior
• inspector-elements-03: Nested node picker and selection behavior
• inspector-elements-04: Keyboard shortcuts should select the right DOM nodes
• inspector-rules-01: Basic CSS rules should be viewed
• inspector-rules-02: Sourcemapped rules should be viewed
• inspector-rules-03: Shorthand CSS rules should be viewed
• jump-to-code-01: Test basic jumping functionality
• logpoints-01: log-points appear in the correct order and allow time warping
• logpoints-02: conditional log-points
• logpoints-03_chromium: should display event properties in the console
• logpoints-03: should display event properties in the console
• logpoints-04: should display exceptions in the console
• logpoints-05: should auto-complete based on log point location
• logpoints-06: should be temporarily disabled
• logpoints-07: should use the correct scope in auto-complete
• logpoints-08: should support jumping directly to a hit point via the capsule input
• logpoints-09: should support pending edits
• logpoints-10: too-many-points-to-find UX
• logpoints-11: too-many-points-to-run-analysis UX
• network-01: should filter requests by type and text
• network-02: should show details for the selected request
• network-03: should sync and display the current time in relation to the network requests
• node_console-01: Basic node console behavior
• node_console-02: uncaught exceptions should show up
• node_control_flow: catch, finally, generators, and async/await
• node_logpoint-01: Basic node logpoints
• node_logpoint-02: Node exception logpoints
• node_object_preview: Showing console objects in node
• node_spawn: Basic subprocess spawning
• node_stepping-01: Test stepping in async frames and async call stacks
• node_worker-01: make sure node workers don't cause crashes
• object_preview-01: expressions in the console after time warping
• object_preview-02: should allow objects in scope to be inspected
• object_preview-03: Test previews when switching between frames and stepping
• object_preview-04: Test scope mapping and switching between generated/original sources
• object_preview-05: Should support logging objects as values
• quick_open_modal-01: Test basic searching functionality
• react_devtools 01: Basic RDT behavior (Chromium)
• react_devtools 01: Basic RDT behavior (FF)
• react_devtools 02: RDT integrations (Chromium)
• redux_devtools: Test Redux DevTools.
• fe-1875 :: verify that steps go to the right point in time
• repaint: repaints the screen screen when stepping over code that modifies the DOM
• resizable-panels-01: Left side Toolbar should be collapsible
• scopes_rerender: Test that scopes are rerendered
• sourcemap_stacktrace: Test that stacktraces are sourcemapped
• stacking: Element highlighter selects the correct element when they overlap
• stepping-01: Test basic step-over/back functionality
• stepping-02: Test fixes for some simple stepping bugs
• stepping-03: Stepping past the beginning or end of a frame should act like a step-out
• stepping-04: Test stepping in a frame other than the top frame
• stepping-05_chromium: Test stepping in pretty-printed code
• stepping-05: Test stepping in pretty-printed code
• stepping-06: Test stepping in async frames and async call stacks

View test run on Replay ↗︎

Snapshot Tests

100 replays were recorded for bdefb85.

0 Failed

100 Passed

• should add true/false keywords to the list of suggestions
• should add this keyword to the list of suggestions
• should be able to toggle side filter menu open and closed
• should be filterable on complex content
• should be filterable
• should be searchable on complex content
• should be searchable
• should display list of messages
• should display toggleable stack for errors
• should display toggleable stack for exceptions
• should display toggleable stack for traces
• should display toggleable stack for warnings
• should escape object expressions in terminal expressions
• should evaluate and render invalid terminal expressions
• should evaluate terminal expressions at an execution point
• should evaluate terminal expressions without an execution point
• should expand and inspect arrays
• should expand and inspect objects
• should hide node_modules (and unpkg) if toggled
• should log events in the console
• should re-focus the search input when CMD+F is used again
• should re-focus the terminal input when search input is hidden
• should refine string tokens to avoid unnecessarily escaping quotation marks
• should remember filter toggle preferences between reloads
• should show a button to clear terminal expressions
• should show error object stacks by default
• should show the context menu on top of other messages and the current time indicator
• should suggest type-ahead options from prototype objects as well
• should support seeking to a message execution point
• should support setting focus range via the context menu
• should support terminal expressions with line breaks
• should render nested, recursive values (as ellipses) without crashing
• should copy arrays
• should copy dates
• should copy deep arrays
• should copy deep objects and their nested properties
• should copy errors
• should copy functions
• should copy html elements and text
• should copy maps
• should copy objects
• should copy primitive client values
• should copy regular expressions
• should copy sets
• should properly bucket properties for an overflowing array
• should render and inspect a Promise
• should render and inspect a Proxy
• should render and inspect arrays
• should render and inspect functions
• should render and inspect HTML elements
• should render and inspect maps
• should render and inspect objects
• should render and inspect regular expressions
• should render and inspect sets
• should render dates
• should render errors
• should render getters and setters correctly
• should render simple values
• should render sections correctly
• should show/hide object and array previews when toggled
• scroll position should be restored when switching between sources
• should allow log point badge colors to be toggled
• should auto-suggestion text based on the current expression
• should disable syntax highlight for long lines
• should expand and contract line height when log points are added and removed
• should gracefully handle invalid remote analysis
• should handle too many points to find
• should handle too many points to run analysis
• should hide results when search is closed, and remember previous search string if re-opened
• should include log points in search results
• should include log points when filtering data
• should not allow saving log points with invalid conditional
• should not allow saving log points with invalid content
• should not erase break point when logging is toggled
• should not erase log point content when breaking is toggled
• should overflow long log point text (without wrapping)
• should remember search results count per source
• should render search results properly for lines with multiple breakable column positions
• should run local analysis for log points
• should run remote analysis for log points
• should scroll to line and column
• should show different background color and edit icon when log point disabled
• should show preview popup for instance properties
• should support break points
• should support conditional log points
• should support continue to next and previous functionality
• should support custom badge styles for log points
• should support fuzzy file search
• should support jumping to a line in the active source file
• should support new lines in log points
• should support text search in the active source file
• should update the current time when the next/previous log point buttons are clicked
• should render headers for complex data correctly
• should render primitive data correctly
• display an overflow message
• should expand and collapse sources
• should find matches in multiple sources
• should include or exclude external modules as requested
• should open a source and scroll to the correct line
• should reset collapsed state if search changes

View test run on Replay ↗︎

[replay-delta]

4 snapshot changes from primary branch

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
@replayio/overboard	0.4.1	None	+1	3.76 MB	souporserious
@replayio/cypress	0.5.6	environment	+2	1.74 MB	ryanjduffy
msw	1.3.0	network, filesystem, environment	+0	2 MB	kettanaito
jest-in-case	1.0.2	None	+0	5.73 kB	thejameskyle
fluent-ffmpeg	2.1.2	filesystem, shell, environment	+0	789 kB	rhodgkins
react-dom	0.0.0-experimental-49f741046-20230305	None	+0	9.19 MB	react-bot
next-compose-plugins	2.2.1	None	+0	25.2 kB	cyrilwanner
react-canvas-confetti	1.4.0	None	+0	26.2 kB	ulitcos
react-lazyload	3.2.0	None	+0	36.4 kB	ameerthehacker
eslint	8.9.0	None	+0	2.68 MB	eslintbot

[markerikson]

Holy smoke Socket how did you just now detect those packages that have been there for months?

[bvaughn]

We could add an entry to the no-restricted-imports rule for "react-devtools-inline" but I guess it's probably not necessary