Closed Bug 1418952 Opened 4 years ago Closed 4 years ago

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


(DevTools :: General, enhancement, P3)

58 Branch


(firefox59 fixed)

Firefox 59
Tracking Status
firefox59 --- fixed


(Reporter: jdescottes, Assigned: jdescottes)


(Blocks 1 open bug)



(3 files)

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 :)
Severity: normal → enhancement
Priority: -- → P3
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.
Flags: needinfo?(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.
Flags: needinfo?(victoria)
Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;
Attachment #8930049 - Flags: review?(francesco.lodolo) → review+
Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;
Attachment #8930049 - Flags: review?(nchevobbe) → review+
Comment on attachment 8930050 [details]
Bug 1418952 - style updates for about:devtools;

Looks good

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

Neat !
Attachment #8930050 - Flags: review?(nchevobbe) → review+
Thanks for the reviews. Landing.
Assignee: nobody → jdescottes
Pushed by
update about:devtools strings;r=flod,nchevobbe
style updates for about:devtools;r=nchevobbe
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.