1246813 - Show dimensions on the sides of viewport while resizing

Status: NEW

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

UX tools like Sketch draw lines at the edges of objects when resizing to show dimensions more directly as you make changes in each dimension:

┌───────────────────────────┐▲     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           │16    
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
│                           ││     
└───────────────────────────┘▼     
◀─────────────29────────────▶      
                                   

We should consider a similar approach while the viewport is being resized.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: resizing-grippers-ux.png

UX notes:

When resizing the viewport, the label at the bottom with the pixel
values should go away and these blue lined grippers should appear instead.

When the user releases the grippers, the light gray label should reappear
at the bottom with updated values.

Comment 2

[Helen V. Holmes (:helenvholmes) (:✨)]

Some additional information:

- Let's go with 10pts on the font for now. That might need to be increased, hard to know without seeing it in context.
- width of the line: 1px, might need to get bumped to two. Same as above.
- the dimension lines should be 10px away from the viewport when they're displayed.