[New Tab Page] Title containers in thumbnails need a top border

RESOLVED WONTFIX

Status

()

Firefox
Theme
RESOLVED WONTFIX
6 years ago
6 years ago

People

(Reporter: sdrocking, Assigned: bellindira)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

6 years ago
When a thumbnail has a light background there isn't a prominent difference between the title and the thumbnail. A border is needed in such cases. Suggested code change:

.newtab-title {
  border-top: 1px lightgray solid !important;
}
(Reporter)

Updated

6 years ago
Blocks: 729878
Assignee: nobody → bellindira
(Assignee)

Comment 1

6 years ago
Created attachment 617941 [details] [diff] [review]
Added top border to title container
Attachment #617941 - Flags: review?(ttaubert)
Comment on attachment 617941 [details] [diff] [review]
Added top border to title container

First of all, this doesn't belong in the base/content/ stylesheet but in themes/.

Secondly, why is it a problem that "there isn't a prominent difference between the title and the thumbnail"? Looks pretty good to me.
Attachment #617941 - Flags: review?(ttaubert) → review-

Updated

6 years ago
Component: General → Theme
QA Contact: general → theme
(In reply to Dão Gottwald [:dao] from comment #2)
> Secondly, why is it a problem that "there isn't a prominent difference
> between the title and the thumbnail"? Looks pretty good to me.

That's why this bug is still unconfirmed. Writing the patch is no big deal and we can at least get some feedback from UX and see what they think about it.
(Reporter)

Comment 4

6 years ago
Having a border helps to identify that the title is a separate part of the thumbnail and not a part of the webpage screenshot. Also it looks cleaner to have a separator instead of changing color from white (the background of most pages) to lightblue abruptly.

The color of the separator should be rgba(8, 22, 37, 0.16) or something similar. This needs to be finalized by UX.
(In reply to Siddhartha Dugar [:sdrocking] from comment #4)
> Having a border helps to identify that the title is a separate part of the
> thumbnail and not a part of the webpage screenshot.

This seems to be a non-issue for the thumbnails I've seen. Are there some particularly problematic sites with gigantic text or something?

> Also it looks cleaner to
> have a separator instead of changing color from white (the background of
> most pages) to lightblue abruptly.

It's not at all obvious to me that a separator is going to make it look cleaner.
(Reporter)

Comment 6

6 years ago
(In reply to Dão Gottwald [:dao] from comment #5)
> (In reply to Siddhartha Dugar [:sdrocking] from comment #4)
> > Having a border helps to identify that the title is a separate part of the
> > thumbnail and not a part of the webpage screenshot.
> 
> This seems to be a non-issue for the thumbnails I've seen. Are there some
> particularly problematic sites with gigantic text or something?

I do not recall such a site ATM, but you've understood what I wanted to convey. Now it's your call.
Bellindira, can you please attach a screenshot of a newtab page with the new border? It would be good to pick some thumbnails where the border is easily visible and some where it's not. I'd like to ask UX for their opinion about this.
OS: Windows 7 → All
Hardware: x86 → All
Summary: [New Tab Page]Title containers in thumbnails need a top border → [New Tab Page] Title containers in thumbnails need a top border
(Reporter)

Comment 8

6 years ago
Created attachment 622501 [details]
Comparison with and w/o border

Top thumbnails are based on Firefox defaults. Bottom thumbnails use this:

.newtab-title {
  border-top: 1px rgba(8, 22, 37, 0.16) solid !important;
}

Comment 9

6 years ago
Yes its difficult to distinguish the name of the website from the background of the thumbnail.

Adding a line also doesn't differentiate it.

My suggestion : The strip at the bottom of thumbnail should be black with some transparency and text written in White color.
(Assignee)

Comment 10

6 years ago
Created attachment 627407 [details]
Comparison current design vs new designs

Please check the designs and let me know if any of them would be ok. I think the black will have the same issue on sites with black background (and it could be fixed adding a border-top white). Also, please don't hesitate to tell me if you have any other suggestion to test it.

Thanks!
(Reporter)

Updated

6 years ago
Attachment #622501 - Flags: ui-review?(dao)
Comment on attachment 622501 [details]
Comparison with and w/o border

I don't think we need the border, but I also don't do ui-reviews.
Attachment #622501 - Flags: ui-review?(dao)
Attachment #622501 - Flags: ui-review?(ux-review)
Comment on attachment 622501 [details]
Comparison with and w/o border

The design was intentionally borderless with the title as an overlay and not an additional segmented box.

If there is a problem with the title blending too much with thumbnail we could add more vertical padding. I don't think that is the case though.
Attachment #622501 - Flags: ui-review?(ux-review) → ui-review-
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.