Closed Bug 1392552 Opened 2 years ago Closed 2 years ago

[Onboarding] update notification layout and style based on new spec

Categories

(Firefox :: New Tab Page, defect, P2)

57 Branch
defect

Tracking

()

VERIFIED FIXED
Firefox 57
Tracking Status
firefox57 --- verified

People

(Reporter: gasolin, Assigned: gasolin)

References

Details

(Whiteboard: [photon-onboarding][photon-onboarding-newui])

Attachments

(1 file)

(track new UI spec separately from Bug 1388813)

based on https://docs.google.com/document/d/1XVowXtnAzzzyLcwdFiP6cx3l9_CNBadP9_7v17XJ40s/edit

* add a copy of the item’s overlay navigation icon in the headline
  - if headline is too long, the text should wrap under the icon.
* if description is too long, try to expand it's width to the left (bug's origin scope)
* update the color and style of the button
Whiteboard: [photon-onboarding][triage]
Flags: qe-verify+
Priority: -- → P2
QA Contact: jwilliams
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]
Assignee: nobody → gasolin
Status: NEW → ASSIGNED
Comment on attachment 8901649 [details]
Bug 1392552 - [Onboarding] update notification layout and style based on new spec;

https://reviewboard.mozilla.org/r/173068/#review178520

r=me with issues addressed. Please fix them before landing.

::: browser/extensions/onboarding/content/onboarding.css:510
(Diff revision 1)
>  #onboarding-notification-tour-icon {
>    min-width: 64px;
>    height: 64px;
>    background-size: 64px;
>    background-repeat: no-repeat;
>    background-image: url("chrome://branding/content/icon64.png");

We need to do media query for DPPX=2 devices with icon128.png. Let's either open a bug or just do it here.

::: browser/extensions/onboarding/content/onboarding.css:515
(Diff revision 1)
>    background-image: url("chrome://branding/content/icon64.png");
>  }
>  
>  #onboarding-notification-action-btn {
> -  background: #0a84ff;
> +  background: #fbfbfb;
>    /* With 1px transparent border, could see a border in the high-constrast mode */

The comment need to be either changed or deleted.
Attachment #8901649 - Flags: review?(rexboy) → review+
Comment on attachment 8901649 [details]
Bug 1392552 - [Onboarding] update notification layout and style based on new spec;

https://reviewboard.mozilla.org/r/173068/#review178522

::: browser/extensions/onboarding/content/onboarding.css:502
(Diff revision 1)
> +  background-repeat: no-repeat;
> +  background-size: 14px;
> +  height: 16px;
> +  width: 16px;
> +  float: inline-start;
> +  margin-top: 2px;

maybe add some `margin-inline-end`?
2x media query will update in bug 1392468
issues addressed, `margin-inline-end: 2px` is added
Pushed by flin@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d7ebcdb38db8
[Onboarding] update notification layout and style based on new spec;r=rexboy
https://hg.mozilla.org/mozilla-central/rev/d7ebcdb38db8
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
I have confirmed this fix on today's nightly.
Status: RESOLVED → VERIFIED
Whiteboard: [photon-onboarding] → [photon-onboarding][photon-onboarding-newui]
Blocks: 1396477
I can confirm the intended behavior is respected on beta. I verified using Fx 57.0b7 on Windows 10 x64, Ubuntu 14.04 LTS and macOS X 10.12.6.
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.