1418952 - [dt-onboarding] Devtools onboarding page UI & UX polish followup

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

ongoing ui/ux polish for about:devtools.

From Bug 1412504

(In reply to Victoria Wang [:victoria] from comment #17)
> This is looking so good on Nightly! I went through all the pages again to do
> one more review. I saw two minor text issues that could be changed:
> 
> The Inspect Element page body says "...close this tab" but the button says
> "Close this page." I think it would be better to say "Tab" (capitalized) on
> the button for all pages.
> 
> Inspect Element page text: I think the apostrophe in "the Developer Tools’
> Inspector" is unnecessary and should be removed.

(In reply to Victoria Wang [:victoria] from comment #18)
> Oops, actually one more style thing - after consulting with my UX colleague
> antlam, I decided the top-padding change was too jarring between the two
> page types.
> 
> Could we make this change to #welcome-page .box?
> 
> padding: 17% 0 100px 0;
> 
> And could we do this for #install-page .box? (ideally substituting 15px with
> actual scrollbar width)
> 
> padding: 17% 15px 50px 0;
> 
> This way, the otter will be perfectly aligned between the two pages :)

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: aboutdevtools_padding.png

Want to make sure about using a %-based padding for the install complete page. For a user with a decent window height that means showing a big blank space on top while having a pretty tall & scrollable content.

I am a bit zoomed out in the screenshot because I only have my laptop monitor available here. 

Not necessarily the worst choice since it's either this or:
- have the section jump when enabling devtools
- have a fixed margin/padding. In which case the page will still look bad on tall screens, but this time when devtools are disabled.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1418952 - update about:devtools strings;

Review commit: https://reviewboard.mozilla.org/r/201244/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/201244/

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: Bug 1418952 - style updates for about:devtools;

Review commit: https://reviewboard.mozilla.org/r/201246/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/201246/

Comment 4

[Victoria Wang [:victoria]]

Maybe ideally we'd have media query breakpoints set up to make things better for giant screens, but in most cases, the 20% padding doesn't look too bad. I think it's better for the install page to look as correct as possible, since it needs to look like a trustworthy system page. The educational info on the welcome page is not as important, so I don't mind that it will require more scrolling than before.

Btw, I have one additional change to request: After consulting with UX/Content, we agreed this one sentence in the menubar version of the install pages sounds awkward:

>Examine, edit and debug HTML, CSS, and JavaScript with tools like Inspector and Debugger.

Let's change it to this:

>Perfect your website's HTML, CSS, and JavaScript with tools like Inspector and Debugger.

Comment 5

[Julian Descottes [:jdescottes]]

Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/201244/diff/1-2/

Comment 6

[Julian Descottes [:jdescottes]]

Comment on attachment 8930050 [details]
Bug 1418952 - style updates for about:devtools;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/201246/diff/1-2/

Comment 7

[Francesco Lodolo [:flod]]

Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;

https://reviewboard.mozilla.org/r/201244/#review207250

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;

https://reviewboard.mozilla.org/r/201244/#review207316

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8930050 [details]
Bug 1418952 - style updates for about:devtools;

https://reviewboard.mozilla.org/r/201246/#review207318

Looks good

::: devtools/shim/aboutdevtools/aboutdevtools.css:43
(Diff revision 2)
> +  /* Compensate for the optional scrollbar. */
> +  margin-right: calc(100% - 100vw);

Neat !

Comment 10

[Julian Descottes [:jdescottes]]

Thanks for the reviews. Landing.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9f23e45dae96
update about:devtools strings;r=flod,nchevobbe
https://hg.mozilla.org/integration/autoland/rev/a7505c96f597
style updates for about:devtools;r=nchevobbe

Comment 12

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/9f23e45dae96
https://hg.mozilla.org/mozilla-central/rev/a7505c96f597