Stop gathering element's CSS rules at the nearest HTML element

[Andarist]

Traversing elements from outer frames could lead to wildly confusing results for elements within iframes

Before

After

[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	Jul 10, 2024 0:17am

[replay-io]

E2E Tests

Status	Complete ↗︎
Commit	166ba87
Results	✅ 101 Passed async-stack: should detect async stacks outside the focus window authenticated/comments-01: Test add, edit, and delete comment functionality authenticated/comments-02: Test shared comments and replies (Replay 1, Replay 2) authenticated/comments-03: Comment previews authenticated/logpoints-01: Shared logpoints functionality (Replay 1, Replay 2) authenticated/passport-01: Time travel authenticated/passport-02: Infrared inspection authenticated/passport-03: Swiss army knife authenticated/passport-04: Multiplayer console_async: support console evaluations in async frames 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 cypress-05: Test DOM node preview on user action step hover deleted-recording: Show error message for deleted recording elements-search: Element panel should support basic and advanced search modes fe-1875 :: verify that steps go to the right point in time file-search-01: should search files 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-computed-02: Complex 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-elements-05_search: element picker and iframe behavior inspector-rules-01: Basic CSS rules should be viewed inspector-rules-03: Shorthand CSS rules should be viewed jump-to-code-01: Test basic jumping functionality jump-to-code-02: Redux J2C functionality logpoints-01: log-points appear in the correct order and allow time warping logpoints-02: conditional log-points 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 logpoints-12: should auto save when removing conditions logpoints-13: Test log point in a sourcemapped file 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_dock: Should show the correct docking behavior for recordings without video 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_object_preview: Showing console objects in node node_quick_open_modal-01: Test basic searching functionality 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 object_preview-06: HTML elements object_preview-07: inspect objects in the console while paused somewhere else object_preview-08: should render ellipsis for collapsed objects with truncated properties playwright-01: Basic Test Suites panel functionality playwright-02: Test Step timeline behavior playwright-03: Test Step interactions playwright-04: Test Step buttons and menu item playwright-05: Test DOM node previews on user action step hover react_devtools-01: Basic RDT behavior react_devtools-02: RDT integrations (Chromium) react_devtools-03: process and display multiple React versions in page react_devtools-04: Component selection is maintained when seeking to a new point redux_devtools: Test Redux DevTools. repaint-01: repaints the screen screen when stepping over code that modifies the DOM repaint-02: repaints on hover repaint-03: repaints on seek repaint-04: prefers nearest (<=) paint when seeking between paints repaint-05: prefers current time if pause creation failed outside of the focus window repaint-06: repaints the screen screen when stepping over code that modifies the DOM resizable-panels-01: Left side Toolbar and Video should be collapsible restart-session: restart debugging session scopes_rerender: Test that scopes are rerendered session-destroyed: errors caused by session failure should bubble to the root source-line-highlights: Test source line highlighting 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-04: Test stepping in a frame other than the top frame stepping-05: Test stepping in pretty-printed code stepping-06: Test stepping in async frames and async call stacks stepping-07: Test quick stepping using the keyboard

[Andarist]

This is the fix, the rest is just renaming things.

At first, I started playing with comparing this against data received from:

const ownerDocumentRequest = this.replayClient.getDocument(this.pauseId).catch(() => null);

but then I realized I could access this more directly.

[bvaughn]

Nice change!