feat(trace-viewer) add copy to clipboard on the Source > Stacktrace tab

[ryanrosello-og]

trafficstars

Simplify copying of the source file names to the clipboard.

It made sense to only copy the filename part instead of the full path since the full path maybe different when the tests are executed in CI.

https://github.com/microsoft/playwright/assets/50574915/c54e8e47-cec5-4c46-b790-e5c357753832

[github-actions[bot]]

Test results for "tests 1"

28374 passed, 648 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[dgozman]

@ryanrosello-og Thank you for the PR! The code looks good, but I have two comments about the UI:

• Clicking on the "Copy filename" button should not also reveal the location, like a regular click on the line would do.
• Filename and line number jumping to the left upon hover is not user friendly. I wonder whether we can make the "Copy filename" button just be on top of the text below, perhaps with some nice gradient fadeaway? Take a look at Chrome DevTools for inspiration, for example hover in the "Settings -> Locations" list.

[ryanrosello-og]

@dgozman this is the best I could do based on my hot css skillz:

https://github.com/microsoft/playwright/assets/50574915/e311a88d-3601-4387-908e-7f6885cdfce3

[github-actions[bot]]

Test results for "tests 1"

3 flaky

:warning: [playwright-test] › ui-mode-test-progress.spec.ts:22:5 › should update trace live
:warning: [playwright-test] › ui-mode-test-screencast.spec.ts:21:5 › should show screenshots
:warning: [playwright-test] › ui-mode-test-screencast.spec.ts:21:5 › should show screenshots

28376 passed, 649 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[dgozman]

@ryanrosello-og Thank you for the changes. We discussed this UI with the team, and think that it would be better to have a copy button next to the fully visible filename above the source content. On the below screenshot, to the right of "2.spec.ts" seems like a good place. WDYT?

[ryanrosello-og]

Sounds good, I can take a look

[pavelfeldman]

sg, let us know when it is ready via commenting, and it'll pop up in our internal review dashboard. do not reply to this message unless you want us to take a look at the pr!

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › reporter-html.spec.ts:390:5 › created › should use different path if attachments base url option is provided

9 flaky

:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [firefox-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [firefox-page] › page/page-goto.spec.ts:81:3 › should work with Cross-Origin-Opener-Policy
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-page] › page/page-event-request.spec.ts:110:3 › should report navigation requests and responses handled by service worker
:warning: [playwright-test] › ui-mode-test-screencast.spec.ts:21:5 › should show screenshots
:warning: [webkit-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture

28403 passed, 655 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[ryanrosello-og]

As requested, this is what it looks like now:

Trace Viewer:

https://github.com/microsoft/playwright/assets/50574915/c86c6e0c-9222-4f52-b49c-ee83195b7927

UI Mode:

https://github.com/microsoft/playwright/assets/50574915/04baebb8-f895-4f21-b2e2-640244f5c5f7

[github-actions[bot]]

Test results for "tests 1"

7 flaky

:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [firefox-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [webkit-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [webkit-page] › page/workers.spec.ts:243:3 › should support offline

28406 passed, 655 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

7 flaky

:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [firefox-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [chromium-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture
:warning: [playwright-test] › ui-mode-test-screencast.spec.ts:21:5 › should show screenshots
:warning: [webkit-library] › library/browsercontext-fetch-happy-eyeballs.spec.ts:49:3 › get should work on request fixture

28409 passed, 655 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[ryanrosello-og]

This ready for another round of reviews 🙂