Closed Bug 1418952 Opened 4 years ago Closed 4 years ago

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

Categories

(DevTools :: General, enhancement, P3)

58 Branch
enhancement

Tracking

(firefox59 fixed)

RESOLVED FIXED
Firefox 59
Tracking Status
firefox59 --- fixed

People

(Reporter: jdescottes, Assigned: jdescottes)

References

(Blocks 1 open bug)

Details

Attachments

(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;

https://reviewboard.mozilla.org/r/201244/#review207250
Attachment #8930049 - Flags: review?(francesco.lodolo) → review+
Comment on attachment 8930049 [details]
Bug 1418952 - update about:devtools strings;

https://reviewboard.mozilla.org/r/201244/#review207316
Attachment #8930049 - Flags: review?(nchevobbe) → review+
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 !
Attachment #8930050 - Flags: review?(nchevobbe) → review+
Thanks for the reviews. Landing.
Assignee: nobody → jdescottes
Status: NEW → ASSIGNED
Pushed by jdescottes@mozilla.com:
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
https://hg.mozilla.org/mozilla-central/rev/9f23e45dae96
https://hg.mozilla.org/mozilla-central/rev/a7505c96f597
Status: ASSIGNED → RESOLVED
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.