Status

()

defect
P1
normal
VERIFIED FIXED
3 months ago
3 months ago

People

(Reporter: wolasi, Assigned: gsuntop)

Tracking

({github-merged})

66 Branch
Firefox 67
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox66+ verified, firefox67 verified)

Details

Attachments

(5 attachments, 1 obsolete attachment)

Reporter

Description

3 months ago

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
Reporter

Updated

3 months ago
Reporter

Updated

3 months ago
Assignee: nobody → gsuntop

Comment 1

3 months ago

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

Iteration: --- → 67.2 - Feb 11 - 24
Priority: -- → P2

Updated

3 months ago
Iteration: 67.2 - Feb 11 - 24 → 67.1 - Jan 28 - Feb 10
Priority: P2 → P1
Assignee

Comment 2

3 months ago

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.

Assignee

Comment 3

3 months ago
Posted image tweaks2-review.jpg (obsolete) —
Assignee

Comment 4

3 months ago

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

Flags: needinfo?(wkonu)

Comment 5

3 months ago

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

Reporter

Comment 6

3 months ago
Posted image Source alignment
Flags: needinfo?(wkonu)
Reporter

Comment 7

3 months ago

@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.

Reporter

Comment 8

3 months ago
Posted image pocket-icon.png
Reporter

Comment 9

3 months ago

@gvn Pocket icon attached to ticket

Updated

3 months ago
Duplicate of this bug: 1527819
Assignee

Comment 11

3 months ago

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

Flags: needinfo?(mathijs)

Comment 12

3 months ago

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

Assignee

Comment 13

3 months ago
Posted image 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.

Attachment #9043778 - Attachment is obsolete: true
Flags: needinfo?(wkonu)
Reporter

Comment 14

3 months ago

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

Flags: needinfo?(wkonu)
Assignee

Comment 16

3 months ago

(Design approved by Wolasi via Vidyo.)

Keywords: github-merged

Updated

3 months ago
Blocks: 1528119
Status: NEW → RESOLVED
Last Resolved: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

Comment 18

3 months ago

Gavin, Can you add some QA steps for this?

Wolasi can you QA?

Flags: needinfo?(wkonu)
Flags: needinfo?(gsuntop)
Assignee

Comment 19

3 months ago

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

Flags: needinfo?(wkonu)
Flags: needinfo?(gsuntop)
Reporter

Comment 20

3 months ago

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

Updated

3 months ago
Status: RESOLVED → VERIFIED
Assignee

Comment 22

3 months ago

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

Attachment #9044313 - Flags: approval-mozilla-beta?

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.

Attachment #9044313 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

(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/)?

Flags: qe-verify+
Flags: needinfo?(wkonu)
Reporter

Comment 28

3 months ago

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
Flags: needinfo?(wkonu)

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

Flags: qe-verify+

Comment 30

3 months ago

Icon was changed to resource url.

Flags: needinfo?(mathijs)
You need to log in before you can comment on or make changes to this bug.