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

Status: RESOLVED WONTFIX

(Firefox :: Theme, defect)

Description

[Siddhartha Dugar [:sdrocking]]

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;
}

Comment 1

[Bellindira Castillo [:bellindira]]

Attachment: Added top border to title container

Comment 2

[Dão Gottwald [:dao]]

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.

Comment 3

[Tim Taubert [:ttaubert] (inactive)]

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

Comment 4

[Siddhartha Dugar [:sdrocking]]

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.

Comment 5

[Dão Gottwald [:dao]]

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

Comment 6

[Siddhartha Dugar [:sdrocking]]

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

Comment 7

[Tim Taubert [:ttaubert] (inactive)]

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.

Comment 8

[Siddhartha Dugar [:sdrocking]]

Attachment: 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

[Himanshu]

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.

Comment 10

[Bellindira Castillo [:bellindira]]

Attachment: 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!

Comment 11

[Dão Gottwald [: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.

Comment 12

[Stephen Horlander [:shorlander]]

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.