Experimental merge main #10611
Merged
Experimental merge main #10611
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… be found (#10561) ### [Loom overview](https://www.loom.com/share/6d697c9136274fb8892325d39283fdac) Looking at [go/r/bb82f5c3-af5c-4e20-9f1c-5efa4ee6bd29](https://app.replay.io/recording/appreplayio--bb82f5c3-af5c-4e20-9f1c-5efa4ee6bd29), I observed that the `getCypressMarkerFrame` lookup fails to find a "marker frame" because there are only two sources in the call stack– the Replay plugin itself and Cypress. That method expects to find user code in between for some reason, so this breaks the jump-to-source behavior. In this case, the source is: ```js cy.contains('Product added to cart!').should('be.visible'); ``` That gets rendered in the UI as this:  Clicking on the failed _assert_ (or trying to "jump to source") would ideally jump to the `should('be.visible')` but it fails because of the "marker frame" issue I mentioned above. The idea occurred to me that in this case, jumping to the parent command (`contains('Product added to cart!')`) is probably better than nothing. (In this case, they're even on the same line, but that won't always be true.)
Support multi-line print statements to improve readability and text editing experience.
#10576) * Improve heuristics for finding the user frame that dispatched a Redux action The original logic was iterating backwards across the point stack frames looking for an applyMiddleware frame, and going backwards one more frame from there. This is problematic because I'm seeing variance in whether or not applyMiddleware actually shows up in stack frames. For some reason it shows up in Metabase recording stack traces, but not in our own E2E tests (and we're both using RTK). That meant that the existing logic could keep right on walking backwards long past the frame it "should" have found. What I've settled on is using the logic we had that tries to identify "is this function in a Redux middleware" based on source outlines (looking for the triply-nested function signature of a middleware definition), and stopping at the first frame that appears to be not a middleware and not applyMiddleware. This seems to be producing pretty reasonable results. * Update to a recent `breakpoints-01` recording * Force re-running the J2C routine * Add a util for verifying J2C behavior * Add a test for Redux J2C behavior * Ignore wrong lint error * Update RDT-02 test to match current example recording
Print statement panel dynamic sizing bug fixes: - Fixed minor font-size and line-height inconsistencies for print statement panel - Handle edge case with empty last line (aka Shift+Enter)  Also updated the `useSourceListCssVariables` hook to reevaluate CSS variables (width of line numbers and hit counts) when the font size preference changes.
* Extract utils to check for user click/keyboard test steps * Simplify UserActionEventRow J2C checks * Use mouse event times for hover display for click steps * Narrow time that we show a mouse click indicator * Only show mouse clicks within the current focus window * Revert focus window filtering for mouse cursors
* Update RDT fork for 2024-07 * Fix broken string replacement for RDT injection
This is my reasoning: - These button confuse all of us. (Domi, Josh, Mark, and I just chatted about this in Discord.) - Mixpanel data shows that [almost no one uses the buttons](https://mixpanel.com/project/2349904/view/2894968/app/insights#2NaEPayGGLnB). - The rewind/fast-forward buttons (available via hover click and context menu) are easier to use. (After all, Replay is fundamentally different from a traditional browser/debugger. Let's lean into that and simplify our UI!) 
The log point panel was recently update (#10570) to support multi-line print statements. Part of that change included trying to merge some of the icons (e.g. visible, edit toggle, avatar, and badge picker) so there were fewer possible combinations (which complicated multi-line measuring logic) and so they took up less space overall. Multi-line print statements made it more obvious how our icons were taking up crucial space: <img src="https://github.com/replayio/devtools/assets/29597/cd1b2b53-03fd-475e-b899-89e7e4cecf57)" width="50%" /> Fewer icons would mean more available space which is better for the user when editing large text: <img src="https://github.com/replayio/devtools/assets/29597/83ad2ba9-388e-44ae-a64f-96232bfccbaa)" width="50%" /> This PR combines things a bit further– merging the badge picker and disabled icon, as well as the user avatar and edit icon: https://github.com/replayio/devtools/assets/29597/ce36aec4-373c-48e3-a67a-80b6fb307886 This feels like a good trade off in terms of the concerns I mentioned above.
- Add several new "report a problem" links into areas of Devtools that users might encounter problems with - Add option to "_allow Replay support to view this recording_" (to auto-share the recording) - Change discard-pending-message UI to flow better - Rework the Support Form component to be more flexible (e.g. supporting extra context args) and more accessible to `replay-next` components (aka not routing it through Redux) - Removed a lot of unnecessary passing around of props to components that could already retrieve those props from context directly - Removed some unnecessary Redux `connect` functions that made code harder to read through <table> <tr> <td colspan="2"><strong>Source viewer</strong></td> </tr> <tr> <td>Source with source-maps</td> <td><img title="screenshot-source-has-source-map" src="https://github.com/replayio/devtools/assets/29597/442307b2-9a67-4641-ad20-0eb03f18030f" /></td> </tr> <tr> <td>Source with no source-maps</td> <td><img title="screenshot-source-no-source-map" src="https://github.com/replayio/devtools/assets/29597/09dffb3a-5d30-4e32-b51f-67cb667fcc9e" /></td><tr> <td colspan="2"><strong>Quick open modal</strong></td> </tr> <tr> <td>Lots of results</td> <td><img title="screenshot-typeahead-many-items" src="https://github.com/replayio/devtools/assets/29597/281117e1-7c6a-4bfa-9a8c-2f88bdff24d1" /></td> </tr> <tr> <td>Fewer than 5 results</td> <td><img title="screenshot-typeahead-3-items" src="https://github.com/replayio/devtools/assets/29597/2e183741-3a50-4352-bd03-bb13a9c0a75a" /></td> </tr> <tr> <td>No results</td> <td><img title="screenshot-typeahead-empty" src="https://github.com/replayio/devtools/assets/29597/af2cff72-b71c-4ecd-863c-6de203072030" /></td> </tr> <tr> <td colspan="2"><strong>Terminal expressions</strong></td> </tr> <tr> <td>Evaluates successfully</td> <td><img title="screenshot-terminal-result" src="https://github.com/replayio/devtools/assets/29597/a285b386-94a6-46b2-8d2e-4229afab58c6" /></td> </tr> <tr> <td>Throws an exception</td> <td><img title="screenshot-terminal-exception" src="https://github.com/replayio/devtools/assets/29597/ed317fcd-8abf-4557-ac1e-4ea29615c5dd" /></td> </tr> <tr> <td colspan="2"><strong>Video player</strong></td> </tr> <tr> <td>Context menu</td> <td><img src="https://github.com/replayio/devtools/assets/29597/4e5c581c-57bc-4da6-a974-79610293f778" /></td> </tr> <tr> <td colspan="2"><strong>Loading screen</strong></td> </tr> <tr> <td>When recording is still processing</td> <td><img src="https://github.com/replayio/devtools/assets/29597/25006c89-2192-4115-94c9-a6252887e010" /></td> </tr> </table> This PR also changes the discard confirmation screen to be more connected to the content you were editing. | Editing | Discard confirmation (before) | Discard confirmation (after) | | :--- | :--- | :--- | |  | |  |
Follow on to #10601 - Delete breakpoint UI and protocol-related code - Remove unnecessary abstractions (now that there aren't two types of "points" in the app) - Rename Nag/Tour related code that had potentially confusing references to breakpoints - Update any e2e tests that got broken by this change
Use of the space previously occupied by the breakpoint toggle to show fast-forward and rewind buttons on hover. These are super useful but they are currently very hard to discover (since they require hovering while pressing cmd/ctrl).
* Display matched selector priority * Include priority as a separate property of `MatchedSelectorState` * fixed things
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![replay-soc2[bot]](https://avatars.githubusercontent.com/u/60818315?s=60&v=4){kind=small}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Bringing the
experimentalbranch up to date withmain. Biggest source of change is the removal of breakpoints UI. Obviously this would be a squashed merge (single commit). Preferably it would be a rebase but I noticed theexperimentalbranch already had a merge commit so rebasing would probably be more annoying at this point. (We could always flatten things after this was merged though.)