Support code view highlight in Recorder

[jecfish]

Chrome 110 launches a new "Show code and highlight" feature.

How to test
You can test this feature with the latest Chrome Canary

1. Open a recording in the Recorder, click "Show code".
2. Hover over each step, the code should highlight accordingly.

Action required

1. Your extension needs to update to the latest Puppeteer Replay.
2. Rebuild & publish a new version to Web Store
3. That's all!

If your extension doesn't have Puppeteer Replay as dependency, you can implement the [sourcemaps] (https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68) yourself to make it work.

my gif has pretty low res.

[jecfish]

@nickmccurdy fyi!

[nickserv]

Thanks, this looks like it would be handy! Is there any implementation documentation or code sample for it yet?

[jecfish]

Hi Nick, it will work once you upgrade the @puppeteer/replay dependency in this project and rebuild. There's no extra implementation needed.

To see how we build it, this is the code: https://github.com/puppeteer/replay/blob/main/src/stringify.ts#L68

[nickserv]

Is this a side effect of importing the library or do I need to call stringify?

[OrKoN]

@nickmccurdy source maps get added by the stringify function and you already call it https://github.com/testing-library/testing-library-recorder-extension/blob/main/src/RecorderPlugin.ts#L13 so no changes in the code are needed (only need to update to the latest replay version).

[nickserv]

Ah, I got confused because I forgot about how the extension gets registered, thanks!