1379558 - Button style in onboarding should follow photon button style

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[[e-mail]]

UX(Verdi) said during ALL Hands.

After discussion, UX decide the onboarding button should follow the photon style (the button seen in about:config)

Comment 1

[[e-mail]]

Attachment: Bug 1379558 - Button style in onboarding should follow photon button style;

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

Comment 2

[[e-mail]]

Attachment: ui demo

Verdi, could you help confirm if the new button style is as you expect, thanks

The video is here
http://recordit.co/aedmcc7ySY

Comment 3

[[e-mail]]

The default background color comes from `--in-content-primary-button-background`;
The hover background color comes from `--in-content-primary-button-background-hover`

http://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common.inc.css#36

Comment 4

[[e-mail]]

Attachment: fixup! Bug 1379558 - Button style in onboarding should follow photon button style;

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

Comment 5

[[e-mail]]

Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

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

Comment 6

[[e-mail]]

Attachment: ui demo

Here's the updated UI demo. On the real device, the cursor will change when hover onto the buttons.

(Though currently button in about:config does not change the cursor)

Comment 7

[[e-mail]]

The video is here http://recordit.co/Qs2aSulwRb

Comment 8

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

https://reviewboard.mozilla.org/r/155624/#review160648

::: browser/extensions/onboarding/content/onboarding.css:268
(Diff revision 2)
>    line-height: 21px;
> -  background: #0d96ff;
> +  background: #0a84ff;
>    border: none;
> -  border-radius: 3px;
> +  border-radius: 0;
>    color: #fff;
>    box-shadow: 0 1px 0 rgba(0,0,0,0.23);

Should we remove the drop shadow too?

Comment 9

[Dave Townsend [:mossop]]

Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

https://reviewboard.mozilla.org/r/155624/#review160852

::: browser/extensions/onboarding/content/onboarding.css:268
(Diff revision 2)
>    line-height: 21px;
> -  background: #0d96ff;
> +  background: #0a84ff;
>    border: none;
> -  border-radius: 3px;
> +  border-radius: 0;
>    color: #fff;
>    box-shadow: 0 1px 0 rgba(0,0,0,0.23);

Yeah looks like this should be removed

Comment 10

[[e-mail]]

Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

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

Comment 11

[[e-mail]]

Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/155624/diff/3-4/

Comment 12

[[e-mail]]

the update PR addressed issue and also inherit the sync tour button style to align with other buttons

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f97a2cb65289
Button style in onboarding should follow photon button style;r=mossop,rexboy

Comment 14

[Verdi [:verdi] Best to slack me]

(In reply to Fred Lin [:gasolin] from comment #2)
> Created attachment 8884746 [details]
> ui demo
> 
> Verdi, could you help confirm if the new button style is as you expect,
> thanks
> 
> The video is here
> http://recordit.co/aedmcc7ySY

Yes this looks right. Remove the shadow and border radius. Update the button color and add the hover color. Thanks!

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/f97a2cb65289

Comment 16

[Saddam Hossain]

The feature is implemented in latest Nightly 56.0a1 on Windows 10, 64-bit  

Build ID :   20170715030206
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0