1527370 - Design Tweaks

Status: VERIFIED FIXED

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

Description

[Wolasi :wolasi]

Please make the following cosmetic changes…

Update Component Header Styling

.icon {
 fill: var(--newtab-text-secondary-color);
}

.ds-header {
  color: #737373;
  font-size: 13px;
  line-height: 20px;
  margin: 8px 0;
}

Update Message Styles

• Delete or hide <hr>
• Change pocket icon color to #737373
• Make the following CSS changes

.ds-message .title span {
  line-height: 20px;
  font-size: 13px;
  color: #737373;
}

.ds-message .subtitle {
  font-size: 13px;
}

Update Source and Content Text Color
Token for new color is teal-80

.ds-hero .wrapper .meta .source {
  color: #005a71;
}

.ds-list-item .ds-list-item-info, .ds-list-item .ds-list-item-context {
  color: #005a71;
}

.ds-card .meta .context, .ds-card .meta .source {
  color: #005a71;
}

Change Hero Excerpt Line-height

.ds-hero .excerpt {
  line-height: 20px;
}

Line Clamping Updates

• Clamp card titles at 3 lines
• Clamp card excerpts at 3 lines
• Clamp list titles at 3 lines

Comment 1

[Jessilyn Davis]

Need to check line clamping to see if CSS overrides will work -> could bundle line clamping into QA bugs that get fixed.

Comment 2

[Gavin Suntop [:gvn] (they/them)]

Note: Pocket icon in Message icon is an image element with a source URL defined in the layout JSON, so we'll need to upload a new correctly colored image and update the layout to make that #737373 color tweak.

Comment 3

[Gavin Suntop [:gvn] (they/them)]

Attachment: tweaks2-review.jpg

Comment 4

[Gavin Suntop [:gvn] (they/them)]

@Wolasi – Please see https://bugzilla.mozilla.org/attachment.cgi?id=9043778 for design review. Thanks!

Comment 5

[Ed Lee :Mardak]

(In reply to Gavin Suntop :gvn from comment #2)

Note: Pocket icon in Message icon is an image element with a source URL defined in the layout JSON, so we'll need to upload a new correctly colored image and update the layout to make that #737373 color tweak.

If the server set the image to resource://activity-stream/data/content/assets/glyph-pocket-16.svg we could set the fill color via css.

Comment 6

[Wolasi :wolasi]

Attachment: Source alignment

Comment 7

[Wolasi :wolasi]

@gvn can we get the source in the primary story to be bottom aligned with the source in the last row of secondary stories? See attachment for reference.

Comment 8

[Wolasi :wolasi]

Attachment: pocket-icon.png

Comment 9

[Wolasi :wolasi]

@gvn Pocket icon attached to ticket

Comment 11

[Gavin Suntop [:gvn] (they/them)]

@mathijs can you replace the Message image URL with resource://activity-stream/data/content/assets/glyph-pocket-16.svg?

Comment 12

[Ed Lee :Mardak]

From bug 1527819 where tall letters of primary hero excerpts are getting cut off:

looks like

.ds-hero .wrapper .meta p {
font-size: 14px

is more specific than

.ds-hero .excerpt {
font-size: 15px;

that was expected for the max-height em usage here

Comment 13

[Gavin Suntop [:gvn] (they/them)]

Attachment: tweaks2-review2.jpg

@Wolasi – Here's a revised version per your feedback. Note that the grey boxes have images, it's just an artifact of how Firefox is generating screenshots.

Comment 14

[Wolasi :wolasi]

Component headers look good, but the layout of the message component isn't to spec https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Modules?node-id=9%3A16

Comment 15

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4793

Comment 16

[Gavin Suntop [:gvn] (they/them)]

(Design approved by Wolasi via Vidyo.)

Comment 17

[Kate Hudson :k88hudson]

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

Comment 18

[Jessilyn Davis]

Gavin, Can you add some QA steps for this?

Wolasi can you QA?

Comment 19

[Gavin Suntop [:gvn] (they/them)]

Wolasi has already QA'd this and it's gone through code review. I don't believe it needs further QA.

Comment 20

[Wolasi :wolasi]

I have verified in Nightly 67.0a1 on Mac OS 10.14.3 the requested changes for the following…

• header styling
• message layout and styling
• source and context text color
• hero excerpt line-height
• line clamping updates for card and list titles, and card excerpts

Comment 21

[Kate Hudson :k88hudson]

Attachment: Bug 1527370 – Design Tweaks 2 for Discovery Stream

Comment 22

[Gavin Suntop [:gvn] (they/them)]

Comment on attachment 9044313 [details]
Bug 1527370 – Design Tweaks 2 for Discovery Stream

Beta/Release Uplift Approval Request

Feature/Bug causing the regression

Bug 1527370

User impact if declined

Sub-optimal and less consistent visual layout.

Is this code covered by automated tests?

No

Has the fix been verified in Nightly?

Yes

Needs manual test from QE?

No

If yes, steps to reproduce

List of other uplifts needed

None

Risk to taking this patch

Low

Why is the change risky/not risky? (and alternatives if risky)

Almost all CSS tweaks and a small HTML tweak.

String changes made/needed

Comment 23

[Liz Henry (:lizzard)]

Comment on attachment 9044313 [details]
Bug 1527370 – Design Tweaks 2 for Discovery Stream

Verified in Nightly, part of planned uplifts for pocket+new tab experiment in 66.

Comment 24

[Liz Henry (:lizzard)]

Note, landing order: bug 1527370, bug 1527701, bug 1518258, bug 1527397, bug 1527626.

Comment 25

[Liz Henry (:lizzard)]

Actual, real, correct landing order this time: bug 1519879, bug 1525494, bug 1526861, bug 1524669, bug 1527195, bug 1525391, bug 1527347, bug 1525366, bug 1527626, bug 1527397, bug 1518258, bug 1527701, bug 1527370.

Comment 26

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/releases/mozilla-beta/rev/72498207a069

Comment 27

[Camelia Badau [:cbadau], Desktop Test Engineering]

(In reply to Wolasi from comment #20)

I have verified in Nightly 67.0a1 on Mac OS 10.14.3 the requested changes
for the following…

• header styling
• message layout and styling
• source and context text color
• hero excerpt line-height
• line clamping updates for card and list titles, and card excerpts

Can you please verify this issue on Firefox 66 Beta 9 (https://archive.mozilla.org/pub/firefox/candidates/66.0b9-candidates/build1/)?

Comment 28

[Wolasi :wolasi]

I have verified in Beta 66.0b9 on Mac OS 10.14.3 the requested changes for the following…

• header styling
• message layout and styling
• source and context text color
• hero excerpt line-height
• line clamping updates for card and list titles, and card excerpts

Comment 29

[Camelia Badau [:cbadau], Desktop Test Engineering]

(In reply to Wolasi from comment #28)

I have verified in Beta 66.0b9 on Mac OS 10.14.3 the requested changes for
the following…

• header styling
• message layout and styling
• source and context text color
• hero excerpt line-height
• line clamping updates for card and list titles, and card excerpts

Thanks for verifying this!

Comment 30

[Matt Miermans]

Icon was changed to resource url.