1488972 - RDM new design - a bit of spacing polish

Status: RESOLVED FIXED

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

Description

[Victoria Wang [:victoria]]

Attachment: image.png

Image attached of the bits of spacing polish we need.

Comment 1

[Anshika]

@Victoria is this a good first bug to work on? I'll be glad to give it a try.
Thanks Anshika

Comment 2

[Victoria Wang [:victoria]]

Yes, that would be great! Let us know here or in DevTools slack (https://devtools-html-slack.herokuapp.com/) if you have any questions.

Comment 3

[Victoria Wang [:victoria]]

One other tiny polish thing would be to remove the dotted focus ring from the custom user agent field, since it already has the blue focus ring :)

Anshika, just wanted to check, are you still interested in working on this bug?

Comment 4

[Anshika]

I am actually quite caught up. Anyone can feel free to work on this.

Comment 5

[Victoria Wang [:victoria]]

As discussed, we are going to group the device selector back with the other controls in centered RDM.

(The original idea to split them was for visual balance and to give the toolbar a heading, but this came with poorer usability of having the selector too far away from the other controls.)

Another little thing: There's a few px too much vertical space between the viewport and the toolbar - it should match the left spacing in left-aligned mode.

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Part 1: Adjust horizontal spacing for the dropdown menu buttons. [1.0]

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

The 'Responsive' drop down label (rendered on the left side) shrinks to almost nothing when making the browser window thinner. This makes the text unreadable (see the attached screenshot). Can you avoid that?

Honza

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Jan Honza Odvarko [:Honza] (need-info? me) from comment #7)
> Created attachment 9026359 [details]
> image.png
> 
> The 'Responsive' drop down label (rendered on the left side) shrinks to
> almost nothing when making the browser window thinner. This makes the text
> unreadable (see the attached screenshot). Can you avoid that?
> 
> Honza

I am gonna block this bug on Bug 1493745, which should fix this issue.

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 1488972.patch [1.0]

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

I landed a fix from Bug 1493745 that should make the shrinking problem go away. This patch should be reviewable now.

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 9026529 [details] [diff] [review]
1488972.patch [1.0]

Review of attachment 9026529 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good (also Network monitor is not broken)

Only one small comment, the original screenshot (from comment #0) indicates that there should be a bit more horizontal space before "viewport-dimension". The patch doesn't seem to solve this.

But, I won't block on this.

R+ assuming Try is green

Thanks for making the UI better!

Honza

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8a54a4fa7f4c
Adjust horizontal spacing for the dropdown menu buttons. r=Honza

Comment 13

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/8a54a4fa7f4c