Windowing abstractions

[bvaughn]

Replay DevTools has several tree data structures (e.g. Elements, React DevTools) that can be more efficiently rendered as flat lists (using a library like react-window). Doing this adds some complexity, so this PR is exploring how we might move some of that complexity into some shared components.

It also migrates the recently updated Elements > Rules panel to use the new generic list component. Next would be the Elements panel, and possibly React DevTools after that.

• New GenericList React component and abstract GenericListData class
• Migrate Elements > Rules panel to use new component
• Verify no e2e test regressions
• Performance profile to make sure memoizing works how it's expected to

[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 20, 2023 5:30pm

[replay-io]

E2E Tests

81 replays were recorded for 9e3d3bd.

1 Failed

• jump-to-code-01: Test basic jumping functionality

  expect(received).toBe(expected) // Object.is equality
  Expected: 22
  Received: null

80 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
• cypress-04: Test Step buttons and menu item
• 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
• 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
• restart debugging session
• 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 9e3d3bd.

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]

1 snapshot changes from primary branch