1512636 - [remote-dbg-next] UX: Runtime page header

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect, P1)

Description

[Julian Descottes [:jdescottes]]

The goal of this bug is to finalize the UI mockups for the header part of the Runtime page.

Current mockups at https://mozilla.invisionapp.com/share/73P8EZEJSEH#/screens/332399989

The Runtime page header should include:
- runtime information
- device information 
- disconnect button

Some exceptions to keep in mind:
- device information will not be available on This Firefox or on runtimes coming from Network locations
- disconnect button will not be available on This Firefox

Comment 2

[mcroud]

Attachment: Runtime page header_2x.png

By attempting to finalise the runtime header section some minor adjustments have been made:

- As per recent About page updates we are now sporting Photon buttons (wohoo).
- Various measurements have been tweaked to fit the Photon 4px grid.
- The correct header font variant has been used (replacing SF Compact with SF Pro Display).

Although this mockup contains other elements we are only concluding the Header region here. I have provided measurements on the mockup, let me know if any more are required!

Comment 3

[mcroud]

Attachment: This Firefox header_2x.png

The "This Firefox" alternative. measurements should be taken from the previous mockup but this image shows that the "This Firefox" title should be vertically centered to the logo when no device information is present.

Comment 5

[mcroud]

Attachment: Runtime Variation 4 Measurements.png

Please find attached an image displaying the final header design and dimensions.

The mockup does represent a full runtime page but please ignore the sidebar and bodyy content for now until I have given those areas the same treatment :)

The mockup is also available on Invision without the overlay annotations if you would like to use Invision's Inspect mode:
https://mozilla.invisionapp.com/share/Y5Q14EWKDSF#/341497076_Runtime_Variation_4

Comment 6

[Julian Descottes [:jdescottes]]

Thanks for the mockups Matt!