Style the NewTab screen

[0rAX0]

I just created a newtab branch to host the work on the NewTab screen. All your discussions/suggestions/fixes are welcome here.

[seleznev]

I want screenshot)

[0rAX0]

And I want a pony. :)

[seleznev]

pony

:D

It look very nice! I want see it in master =)

[0rAX0]

If you think it's stable enough, feel free to merge. I also want it in master :)

[piotrdrag]

And I want a pony. :)

I can hook you up with a lot of cartoon pony stuff.

Piotr "Brony" Drąg

[garrett]

Well, there's

http://www.reddit.com/r/mylittlepony ... and ... http://www.reddit.com/r/bronies

I've heard from friends that the new MLP is great, but I've never seen it myself. Too busy doing computer geekery and watching shows like Dr. Who.

[piotrdrag]

Don't forget http://www.equestriadaily.com/ ! :D

Getting a little off-topic here, but why can't you watch both? That's how Doctor Whooves was created! Also, it's on YouTube. :)

[0rAX0]

hahahaha

[garrett]

The titles don't show up, except when you hover over them. Since the screenshot thumbnail isn't generating screenshots for many of the sites I visit (https? not sure).

But anyway, I now have a bunch of blank squares, and a screenshot or two... unless I hover over the bottom of each tile.

[0rAX0]

Yes, I'm aware of the issue. :(

[seleznev]

Please test it now.

[garrett]

It's certainly better... It is really bad that Firefox isn't making thumbnails for many of my sites, and I wonder how many other people have this issue too.

[garrett]

Here's what my newtab screen looks like:

As you can see, it's not so useful anymore. The missing screenshot issue has been around for a while, but now I can't fall back to the titles.

http://support.mozilla.org/en-US/kb/thumbnails-on-new-tab-page-are-missing

"Some websites (such as HTTPS sites) don't allow files to be cached so they don't have a thumbnail." ← Sigh.

[0rAX0]

Yes, it currently sucks. And you're right we need titles. I'll try something tonight.

[garrett]

Awesome. Thanks!

I'm wondering if there's a workaround to show the screenshots. It's kind of crazy that they don't. I kind of understand why, but Chrome and others do it. There should be at least a fallback to showing a favicon (perhaps even up scaled w/ pixel doubling?) and a color based on the favicon.

If we could do that, it'd be great (and I highly doubt it)... but I really think Firefox itself needs to fix this, if they're not going to show screenshots for HTTPS no-cache websites (as there are quite a few now).

[seleznev]

@garrett, it's problem of Mozilla. I don't want do anything for fix it. =)

[garrett]

Yep, I'm just complaining out loud. (:

For the time being, we need to show the titles for the web pages as a workaround. Yeah, it sucks, but it's needed with the current implementation.

[kparal]

Hello guys. I just wanted to report this issue:

The NewTab style looks great, but displaying titles all of the time is a must, until Firefox fixes the missing thumbnails issue. I was googling for that issue a while ago and I found a closed bug stating that a fix should appear in a new version of Firefox, but nobody said whether they mean FF 16 or 17. Anyway, some fix should be on its way, let's hope it's soon. I don't have the bugzilla link now.

But there always probably be some cases when the thumbnail can't be displayed, like if you drag&drop a bookmark onto newtab page - until you open that page up, there is no content to generate the image from. Also, some sites are way too similar or they change too much, and it's hard to recognize them. So I think always-on titles are a good idea anyway.

[0rAX0]

So, I re-added the titles for your convenience, and beautified stuff. Also, included an idea to nuke the thumbnails all together and use this unified look. I like it and I'll keep using it. But if you don't like/want to ship it, you know what to do. :)

Please test and review.

[kparal]

Looks very nice, but I don't think that nuking all the thumbnails is a good idea. Without thumbnails I could use that page to display 50 bookmarks, not just 9.

But the globe image is pretty, can it be used as a default thumbnail for those pages that don't have a thumbnail for some reason? (the globe is not fully centered, I think it should be moved up a bit).

And the always-on titles are great, thank you.

[0rAX0]

Yes, I know that and I don't expect it to be released like that, I just like it and suggested it knowing it won't get through. :)

can it be used as a default thumbnail for those pages that don't have a thumbnail

That was the original idea. Unfortunately it's not that simple as those "failed" rectangles don't have a proper class to target. Let's wait for the rest of the team maybe they know something.

[seleznev]

@0rAX0, global in empty cell look as sucks. Please do anything with it (may be opacity 0.2 will be better). =)

And I think global icon need fix position and no fixed size (64 px not look good on all display's resolutions).

[0rAX0]

Does this mean that we're sticking with this look? 8)

[garrett]

It's a huge improvement! I'd suggest that we screen the placeholder image by lowering the opacity to make it less bold, and it should be centered in the visible area.

[0rAX0]

And now?

[seleznev]

@0rAX0, the small svg (16x16) isn't good scalable. Do you can make bigest size (> 128x128)? Or (maybe) we can use @media for different size.

[0rAX0]

Oh, no! But it's supposed to be SVG. It shouldn't look like that! :(

I think using @media complicates stuff, it's just a tab screen, and Mozilla isn't paying attention to resizing(just test Opera 12.10 to see what I mean). What if we fix the size at ~32px?

[garrett]

I have fixes for what I talked about, and can try a larger size now too. I'll have something committed and shared in a few minutes.

[seleznev]

@0rAX0:

Oh, no! But it's supposed to be SVG. It shouldn't look like that! :(

I don't understand it too. =)

just test Opera 12.10 just

hah =)

~32px?

I like 64px. =\

[0rAX0]

hah =)

Stop making fun of my favorite browser. :D

I like 64px. =\

You said it's too large, no?

(64 px not look good on all display's resolutions).

[0rAX0]

@garrett (waiting...) :)

[seleznev]

You said it's too large, no?

No. =) I thought that image can be very small with big resolutions. But may be it's not big problem)

[garrett]

There was a conflict in the commit and then I went to lunch. Working on it again now. (:

[0rAX0]

I have this idea(not commited) too:

[0rAX0]

Update(not commited):

[seleznev]

@0rAX0, how it will be look with rlt locales?

[0rAX0]

The same? :)

[seleznev]

@0rAX0, opacity for title in :active state is feature? Why it don't have opacity in :not(:active) state too? =\

[0rAX0]

What :active state?

[seleznev]

Ohhhh... I speak about :hover. Sorry. :panda_face:

[0rAX0]

Why it don't have opacity in :not(:active) state too? =\

I don't understand this too! :)

[seleznev]

Have not ideas how to adopt it:

[0rAX0]

I don't have an internet connection right now. I'll look into this ASAP.

[0rAX0]

How about something like this, @seleznev @garrett ?

[seleznev]

I like it! :+1: Many thanks. :)

---

// I want to wait some weeks (wait for stabilization in Firefox) and I will try to make it.

---

UPD: https://bugzilla.mozilla.org/show_bug.cgi?id=1030832