Show active viewport dimensions & button to rotate

[lucas-carl]

Issue: #5879

What I did

• Show active pixel dimensions in viewport widget when a viewport is selected
• Added button to flip the viewport
• Show title of active view in button
• Added functionality to reset the viewport by double-clicking the button

[backbone87]

If i click the rotate button, the button keeps being highlighted until i click somewhere else.

Additional feature wishes:

• Display size when no viewport is selected (basically the iframes body size)
• Display the name of the selected view (if any)
• Append P (Portrait) or L (Landscape) to the viewport name

[shilman]

@lucas-carl This is awesome. Could use some visual treatment (cc @domyen) but we can do that before the 5.1 release. Great work! Are you up for tackling any of the improvements suggested by @backbone87?

[lucas-carl]

@shilman @backbone87 I will try to implement these suggestions.
Also, I had the idea that you can double-click on the active viewport's name to reset the viewport.

[codecov]

Codecov Report

Merging #6045 into next will decrease coverage by 0.89%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##             next    #6045     +/-   ##
=========================================
- Coverage   35.78%   34.89%   -0.9%     
=========================================
  Files         648      648             
  Lines        9520     9503     -17     
  Branches     1380     1337     -43     
=========================================
- Hits         3407     3316     -91     
- Misses       5536     5553     +17     
- Partials      577      634     +57

Impacted Files	Coverage Δ
addons/viewport/src/Tool.js	0% <0%> (ø)	⬆️
lib/ui/src/components/layout/draggers.js	9.09% <0%> (-81.82%)	⬇️
lib/ui/src/components/layout/container.js	20.37% <0%> (-62.97%)	⬇️
lib/ui/src/components/layout/persist.js	27.27% <0%> (-27.28%)	⬇️
lib/ui/src/components/layout/desktop.js	75% <0%> (-25%)	⬇️
lib/ui/src/components/layout/layout.stories.js	77.35% <0%> (-5%)	⬇️
lib/ui/src/app.js	35.71% <0%> (-4.29%)	⬇️
lib/router/src/utils.ts	55.17% <0%> (-1.08%)	⬇️
lib/ui/src/core/stories.js	87.23% <0%> (-0.27%)	⬇️
lib/ui/src/keyboard/keyCodes.ts	0% <0%> (ø)	⬆️
... and 48 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 017b18e...9c23aa7. Read the comment docs.

[backbone87]

sadly

Display size when no viewport is selected (basically the iframes body size)

is missing