Better preview tool collapsing

[Gazook89]

Description

This PR revisits the Preview Toolbar at an aesthetic level. I've never been satisfied with the opening/closing mechanism, or the "glasses" icon.

Now:

• glasses are replaced by left/right caret depending on open state. Seems more clear to me what the button will do than "glasses".
• HeaderNav toggle is decoupled from toolbar toggle. I think that if someone wants to "hide the toolbar", HB should expect that they really want to remove as much UI as possible. If I could think of a satisfactory way to remove the caret while making it possible to bring the toolbar back, too, I would. Note, the Header Nav itself doesn't hide when the toolbar is collapsed.
• better transitions now, using the new interpolate-size css property to be able to transition between auto and some fixed size (100%).

Related Issues or Discussions

Largely stems from the UI Overhaul work, but otherwise this hasn't been discussed, agreed on, etc.

QA Instructions, Screenshots, Recordings

Click the Show/Hide caret toggle, check tooltips, squash viewport/preview pane, try header nav in both opened/closed toolbar state, check that state is preserved between open/close wherever it needs to be.

Note that in non-chromium browsers there are a couple features that aren't supported (height: stretch for one) but that doesn't really have any negative consequences. Everything is totally fine in those browsers.

PR:

Current:

Reviewer Checklist

*Reviewers, refer to this list when testing features, or suggest new items *

• Verify new features are functional
  • Looks okay?
• Verify old features have not broken
  • Toolbar opens and closes
  • state is preserved between opening/closing
• Test for edge cases / try to break things
  • Works in different browsers
  • works on mobile?
• Identify opportunities for simplification and refactoring
• Check for code legibility and appropriate comments

Next steps

I'd like to re-think the flex layout of the toolbar so that it more gracefully collapses as the viewport shrinks. I'm not a big fan of the vertical space it takes, especially beyond two rows. But that's going to take some work, so leaving that for now.

I will also take a swing at reworking the tooltips component to work with the Anchor Positioning/Popover API's (and Oddbird polyfill) to get better algorithmic positioning, which is something that the Preview toolbar and other menubars would really benefit from. As an independent PR.

[5e-Cleric]

Pretty sure we want to keep the header nav button visible either way, and to the left where the nav is going to be, so maybe we should remove it from inside the bar.

Btw if you wouldn't mind, add a small little pointer-events: none when the bar is collapsed, because i think we missed that when we made it.

[Gazook89]

add a small little pointer-events: none when the bar is collapsed,

You are right about the live site. However, with this PR, the navbar doesn't just hide but it is fully removed. So that won't be an issue.

Pretty sure we want to keep the header nav button visible either way, and to the left where the nav is going to be, so maybe we should remove it from inside the bar.

Can you explain why it should be visible either way?

[5e-Cleric]

add a small little pointer-events: none when the bar is collapsed,

You are right about the live site. However, with this PR, the navbar doesn't just hide but it is fully removed. So that won't be an issue.

Great

Pretty sure we want to keep the header nav button visible either way, and to the left where the nav is going to be, so maybe we should remove it from inside the bar.

Can you explain why it should be visible either way?

If only cause its the current behavior. I don't recall if we discussed this, @G-Ambatte might have the answer.