1036284 - Update styling of newtab tiles to enhanced tiles spec

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Ed Lee :Mardak]

Update tile-related styling from bug 1030832: (unhover, hover, pinned): resize tiles to 290x180, center text, radius, shadow, fading/opacity

Comment 1

[Ed Lee :Mardak]

Attachment: v1

Comment 2

[Ed Lee :Mardak]

Attachment: v1 screenshot

Comment 3

[Ed Lee :Mardak]

Attachment: v1.1

Patch didn't include the gradient overlay on history thumbnail (depends on bug 1036280).

Comment 4

[Ed Lee :Mardak]

Attachment: v1.2

Added the test change for pinned attr check

Comment 5

[Ed Lee :Mardak]

dcrobot says the page's background texture needs to be updated and search button font size reduced

Comment 6

[Ed Lee :Mardak]

Attachment: Enhanced_Tiles_Icons.svg

Comment 7

[Ed Lee :Mardak]

Attachment: Enhanced_Tiles_Icons.svg

dcrobot's updated svg

Comment 8

[Aaron]

Attachment: SVG Icons

Comment 9

[Ed Lee :Mardak]

shorlander, do you know why dcrobot's svg files don't work with -moz-image-rect? Is it because it doesn't specify a height and width? Even if I specify height="56px", it seems that the icons are not completely left aligned nor are they exactly 56x56 (probably because of the shadow)?

How would you create these svg files to be the correct size and spacing?

Comment 10

[Ed Lee :Mardak]

(In reply to Aaron from comment #8)
> Created attachment 8454088 [details]
> SVG Icons
There's actually 6 states for the pin button:
1) unpinned static
2) unpinned rollover
3) unpinned active
4) pinned static
5) pinned rollover
6) pinned active

We could just combine (1 and 6), (2 and 5), and (3 and 4).

See http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/newtab/[e-mail]

Comment 11

[Ed Lee :Mardak]

Attachment: v2

Added texture and adjusted search sizing.

Comment 12

[Ed Lee :Mardak]

Attachment: v2 screenshot

Comment 13

[Stephen Horlander [:shorlander]]

(In reply to Ed Lee :Mardak from comment #11)
> Created attachment 8454324 [details] [diff] [review]
> v2
> 
> Added texture and adjusted search sizing.

Two questions:
1) Why are we re-adding texture? Our incontent UI has been moving away from that.
2) Why is the border-radius so large on the tile? It isn't consistent with any of our other rounded corners.

Comment 14

[Stephen Horlander [:shorlander]]

(In reply to Ed Lee :Mardak from comment #9)
> shorlander, do you know why dcrobot's svg files don't work with
> -moz-image-rect? Is it because it doesn't specify a height and width? Even
> if I specify height="56px", it seems that the icons are not completely left
> aligned nor are they exactly 56x56 (probably because of the shadow)?
> 
> How would you create these svg files to be the correct size and spacing?

Well, the SVG coordinate system is kind of wonky and I don't think the way Illustrator exports SVG is helping here. Looks like all of the coordinates are offset pretty far into the canvas and the viewBox is just defining the visible area. It is also adding a decimal place (or several).

I have had the best results using SVG in product by making the canvas the actual size I want and matching the viewBox to that. Also by sticking to only whole numbers to avoid rounding errors.

You could clean it up a lot by referencing common shapes with xlink:href and by translating them the exact distance you want for your sprites. It also appears to be embedding the shadow as a bitmap, you could use a filter for that.

Comment 15

[Stephen Horlander [:shorlander]]

As for the dimensions, the base circle is ~58px with the shadow it is more like ~72px. Are they supposed to be 56px?

Comment 16

[Aaron]

Actually, the base circle is 28 x 28 pixels. I thought I had fixed the SVG file yesterday, but it didn't save out. I'm attaching a new version.

Comment 17

[Aaron]

Attachment: Enhanced_Tiles_Icons.svg (CORRECT VERSION)

The base circles should all be 28 x 28 pixels now.

Comment 18

[Ed Lee :Mardak]

(In reply to Aaron from comment #17)
> Created attachment 8454490 [details]
> Enhanced_Tiles_Icons.svg (CORRECT VERSION)
> The base circles should all be 28 x 28 pixels now.
dcrobot, not sure if you noticed but the SVG files went from 85.02 KB to 17.42 KB to now 239.28 KB.

I'm not sure what's the different (I'm thinking it's a width/height being set), shorlander's svg https://bug879921.bugzilla.mozilla.org/attachment.cgi?id=8396689 file causes the icons to be displayed in the top left corner of the browsing window whereas your attachment is vertically centered.

I'm thinking that's related to what's preventing the code from correctly slicing the image into buttons.

Comment 19

[Ed Lee :Mardak]

Attachment: Enhanced_Tiles_Icons-edited.svg

Edited by shorlander derived from the existing close.svg that works in Firefox already.

Comment 20

[Ed Lee :Mardak]

(In reply to Stephen Horlander [:shorlander] from comment #13)
> 1) Why are we re-adding texture? Our incontent UI has been moving away from
> that.
> 2) Why is the border-radius so large on the tile? It isn't consistent with
> any of our other rounded corners.
Are there guidelines or history for dcrobot to refer to?

Comment 21

[Aaron]

Horlander -

1.) When I first joined, I heard that some users felt that Firefox was feeling more like a "chrome" experience than "firefox". I added the texture to create a more natural feel and to better differentiate the new Tiles experience from Google's version. Also, I haven't been privy to any history concerning design ethos... just some general guidelines and whatever I can see with the Chameleon Sketch file. Having said all that, I'm happy to loose the texture if you'd like.

2.) The corner radius is 12 pixels. My reasoning is that I want the content work we're doing to feel related to the browser UI, but not an exact duplication. I don't want users confusing content with actual browser tools / functionality. More importantly, we've been thinking about moving towards circles for the actual tiles. The larger corner radius is intended to be a transition from rectangles to circles. Again, this is all just context. If you would prefer a different radius, then please specify what the standard is and I'll have Ed update the prototype.

-A

Comment 22

[Aaron]

Ed, I don't think I ever gave you specs for the empty tile state...

Size = 290 x 180
Border thickness = 2
HEX = C1C1C1
Dash = 5
Gap = 5

No rollover effects or active states at this time.

Comment 23

[Ed Lee :Mardak]

Attachment: v2.1

Comment 24

[Ed Lee :Mardak]

Attachment: v2.1 screenshot

Comment 25

[Ed Lee :Mardak]

Attachment: v2.2

Fixes a test failure with drag/drop because of the overlaid gradient used to prevent immediate dragging.

Comment 26

[Drew Willcoxon :adw]

Comment on attachment 8458768 [details] [diff] [review]
v2.2

Review of attachment 8458768 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/newtab/newTab.inc.css
@@ +130,5 @@
>    background-position: center center;
>    background-size: auto;
>  }
>  
> +.newtab-site[type=history]:not(:hover) .newtab-thumbnail:first-child:after {

A brief comment explaining this selector or at least the .newtab-thumbnail part would be helpful.

Comment 27

[Ed Lee :Mardak]

I had to backout for Windows 7 bc1 crashes:
https://hg.mozilla.org/integration/fx-team/rev/3b09d30c885f

XP and 8 seemed to run fine though:
https://tbpl.mozilla.org/?tree=Fx-Team&rev=0d2f538bddde

Comment 28

[Ed Lee :Mardak]

Attachment: v3

Turns out the windows 7 failures were because the window wasn't wide enough. Updated head.js to also adjust the innerWidth in addition to innerHeight.

Comment 29

[Drew Willcoxon :adw]

Comment on attachment 8460512 [details] [diff] [review]
v3

Review of attachment 8460512 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/base/content/test/newtab/head.js
@@ +27,5 @@
>  // Default to empty directory links
>  let gDirectorySource = "data:application/json,{}";
>  
> +// The tests assume all 3 rows and all 3 columns of sites are shown, but the
> +// window may be too short to actually show three rows.  Resize it if necessary.

too short to actually show three rows -> too small to show everything

Comment 30

[Ed Lee :Mardak]

https://hg.mozilla.org/integration/fx-team/rev/8b0f27654cc8

Comment 31

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/8b0f27654cc8

Comment 32

[Cornel Ionce [:noni] [Hubs QA]]

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Mozilla/5.0 (Windows NT 6.3; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:34.0) Gecko/20100101 Firefox/34.0
Mozilla/5.0 (X11; Linux i686; rv:34.0) Gecko/20100101 Firefox/34.0

Verified fixed using latest Nightly, build ID: 20140727030204.

Comment 33

[Sylvestre Ledru [:Sylvestre]]

Uplift has been managed in bug 1057602

Comment 34

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-aurora/rev/6d6b0c029f71

Comment 36

[Cornel Ionce [:noni] [Hubs QA]]

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:33.0) Gecko/20100101 Firefox/33.0
Mozilla/5.0 (X11; Linux i686; rv:33.0) Gecko/20100101 Firefox/33.0

Verified fixed on Windows 7 64bit, Mac OS X 10.8.5 and Ubuntu 14.04 32bit using latest Aurora, build ID: 20140828004002.