Closed Bug 1527370 Opened 1 year ago Closed 1 year ago

Design Tweaks

Categories

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

66 Branch
defect

Tracking

()

VERIFIED FIXED
Firefox 67
Iteration:
67.1 - Jan 28 - Feb 10
Tracking Status
firefox66 + verified
firefox67 --- verified

People

(Reporter: wolasi, Assigned: gsuntop)

References

Details

(Keywords: github-merged)

Attachments

(5 files, 1 obsolete file)

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
Assignee: nobody → gsuntop

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
Iteration: 67.2 - Feb 11 - 24 → 67.1 - Jan 28 - Feb 10
Priority: P2 → P1

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.

Attached image tweaks2-review.jpg (obsolete) —

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

Flags: needinfo?(wkonu)

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

Attached image Source alignment
Flags: needinfo?(wkonu)

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

Attached image pocket-icon.png

@gvn Pocket icon attached to ticket

Duplicate of this bug: 1527819

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

Flags: needinfo?(mathijs)

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

Attached 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)

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)

(Design approved by Wolasi via Vidyo.)

Blocks: 1528119
Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

Gavin, Can you add some QA steps for this?

Wolasi can you QA?

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

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)

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
Status: RESOLVED → VERIFIED

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)

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+

Icon was changed to resource url.

Flags: needinfo?(mathijs)
Component: Activity Streams: Newtab → New Tab Page
Regressions: 1566531
You need to log in before you can comment on or make changes to this bug.