feat: persist pane sizes and fix resizing bug

[lmiller1990]

• Closes https://cypress-io.atlassian.net/browse/CT-346

Fixes:

1. Persist pane size

Now when you resize the reporter or spec list, it will persist it to your next session. Test by resizing the reporter pane and spec list, refresh the page, ensure width is persisted.

2. Subtle resizing bug

If you render an un-resizable split pane with a width of 0, the resize handle and listener still exists. An example if when there is no spec selected, the reporter pane has a width of 0 and is un-resizable. Despite this, if you try to resize the spec list with your cursor approaching from the right, it will actually try to resize the un-resizable reporter.

I fixed this bug by not rendering the reporter pane at all if no spec is selected. Here is a video of before/after - note the cursor and how I try to resizing the pane.

Before - cannot resize:

broken.mov

After - can resize:

fixed.mov

User facing changelog

Persist width of panes in CT runner between sessions.

Additional details

N/A

How has the user experience changed?

Save the width of panes in the same style of the E2E runner.

PR Tasks

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

9384 • 0 • 119 • 3 • 1

---

Run details

Project	cypress
Status	Passed
Commit	80ba9e4
Started	Mar 15, 2021 3:41 PM
Ended	Mar 15, 2021 3:52 PM
Duration	11:06 💡
OS	Linux Debian - 10.5
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/retries.ui.spec.js		1
1	runner/cypress retries.ui.spec > opens attempt on each attempt failure for the screenshot, and closes after test passes

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[lmiller1990]

This fixes the second bug described in the PR description. We should not render the Reporter at all if there is no spec selected. It makes resizing buggy.

[dmtrKovalenko]

It will be also nice to make it possible to persist dev tools settings and overall UI plugins settings.

I will make PR to the react devtools to make it possible to override default storage

[lmiller1990]

@dmtrKovalenko I agree on the plugins pane persisting, it was a little more tricky than the other panes so I decided to leave it out for now.

It should not be too difficult to add in.