1007325 - [UX] Show lightweight themes in customization mode

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[Zhenshuo Fang (:fang) - Firefox UX Team]

In bug 870602, there's some weirdness going on when showing lightweight themes in customization mode, and we decided to disable lw-theme because of time constrain to ship Australis. Now that we have a bit more time, we can explore how to better integrate lw-themes in customization.

Lw-themes only show up on the top part of the window, we could potentiality fade out the lightweight theme and show the grid for the bottom half of the window.

Comment 1

[Zhenshuo Fang (:fang) - Firefox UX Team]

Attachment: Mac.png

After exploring different options, this is the design we want to move forward with: show the theme image above the toolbar area, show the grey background with grid below the toolbar, and show a border at the edge of the theme image. 

We also thought about showing a gradient (something like http://cl.ly/image/2w2c0s0F253z) but it's hard to implement, might affect the performance and doesn't look good on Win7 or 8 with the transparent window.

Jaws suggested to show some behind-the-scene process (like putting tapes on the corner, etc) We can do something subtle like flipping the corner a little bit and show an animation when setting the theme (http://cl.ly/image/2j370o3C292x) This is not required for MVP, so we can do more exploration if we want while implementing the current solution.

And how to set lw-themes in customization mode is in Bug 1007311

Comment 2

[Zhenshuo Fang (:fang) - Firefox UX Team]

Attachment: Windows.png

This is what the design looks like on Windows with the transparent background.