869101 - Update in-content customization to remove the Appearance section and clean up the styling

Status: RESOLVED FIXED

(Firefox :: General, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Mockup by shorlander

As per the attached mockup, the in-content styling needs to be cleaned up to have larger icons, improved text, better padding and colors.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: WIP v1

This patch implements most of the changes that the mockup showed.

Still need to be done:
- Change the background of the main-window to be a green grid (need to double check if we do want to make this change, since it's the first time I've seen this).
- Determine what needs to be done for the panel area background
- Switch to a dotted border for the customization area

Screenshot of the work-in-progress: http://screencast.com/t/Aklkgy8w1DLG

Stephen, are we switching the background of the main-window to the green grid, or was this mockup created to show what Windows Olive theme should look like?

Comment 2

[u428464]

AFAIK the green background appears on every Win 8 mockup (https://bug859751.bugzilla.mozilla.org/attachment.cgi?id=742384 ). I think it shows what Win Olive should look like. The interpretation I have is that the background grid should keep the color of the windows in customization mode (at least on Win 8).

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch

This implements most of what is seen in the mockup, with the exception of the placeholder items in the panel while customizing.

Here is an updated screenshot: http://screencast.com/t/t7xc1YZbiu

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Guillaume C. [:ge3k0s] from comment #2)
> AFAIK the green background appears on every Win 8 mockup
> (https://bug859751.bugzilla.mozilla.org/attachment.cgi?id=742384 ). I think
> it shows what Win Olive should look like. The interpretation I have is that
> the background grid should keep the color of the windows in customization
> mode (at least on Win 8).

Keeping the blue background surrounding the panel and the blue background surrounding the rest of the browser ends up looking really awkward, almost like there is a huge hole in the browser.

After playing with it for a while, I think the secondary color (olive in this case), looks better than a single color for both areas.

Comment 5

[u428464]

(In reply to Jared Wein [:jaws] from comment #4)
> (In reply to Guillaume C. [:ge3k0s] from comment #2)
> > AFAIK the green background appears on every Win 8 mockup
> > (https://bug859751.bugzilla.mozilla.org/attachment.cgi?id=742384 ). I think
> > it shows what Win Olive should look like. The interpretation I have is that
> > the background grid should keep the color of the windows in customization
> > mode (at least on Win 8).
> 
> Keeping the blue background surrounding the panel and the blue background
> surrounding the rest of the browser ends up looking really awkward, almost
> like there is a huge hole in the browser.
> 
> After playing with it for a while, I think the secondary color (olive in
> this case), looks better than a single color for both areas.

Olive looks strange though especially on Aero theme.

BTW if the customization color could cover the borders it would look better.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Guillaume C. [:ge3k0s] from comment #5)
> BTW if the customization color could cover the borders it would look better.

We need bug 590945 fixed to draw over the window borders.

Comment 7

[Stephen Horlander [:shorlander]]

(In reply to Jared Wein [:jaws] from comment #4)
> (In reply to Guillaume C. [:ge3k0s] from comment #2)
> > AFAIK the green background appears on every Win 8 mockup
> > (https://bug859751.bugzilla.mozilla.org/attachment.cgi?id=742384 ). I think
> > it shows what Win Olive should look like. The interpretation I have is that
> > the background grid should keep the color of the windows in customization
> > mode (at least on Win 8).
> 
> Keeping the blue background surrounding the panel and the blue background
> surrounding the rest of the browser ends up looking really awkward, almost
> like there is a huge hole in the browser.
> 
> After playing with it for a while, I think the secondary color (olive in
> this case), looks better than a single color for both areas.

Yeah the green in these mockups just happens to be the color I picked for Windows 8. It's the same as the old Aero glass tint color just solid :)

I will attach mockups for the rest of the platforms.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v1.1

Removed the aero reference to the background.jpg and shortened the duration of the transition since the padding was decreased.

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 746377 [details] [diff] [review]
Patch v1.1

Bumping down to feedback? since the window colors aren't finalized, but most everything else should be pretty stable.

Comment 10

[UK92]

Will be only grid mode of panel menu? ...no list view mode?

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 746377 [details] [diff] [review]
Patch v1.1

It's amazing what a fresh lick of paint can do to a feature. :)

Yeah, I dig this approach. Looking forward to seeing the finalized colours. Anywho, code looks sane, so feedback+.

Comment 12

[u428464]

One of the change still to make is the background's color of the "add more tools" part that should be more whit-ish (it will help to differentiate it from the blue toolbars above).

Comment 13

[u428464]

(In reply to Jared Wein [:jaws] from comment #6)
> (In reply to Guillaume C. [:ge3k0s] from comment #5)
> > BTW if the customization color could cover the borders it would look better.
> 
> We need bug 590945 fixed to draw over the window borders.

Looking at this new mockup (http://cl.ly/image/3C2X1f281T1D ) I think the borders will be less noticeable and that's good.

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v1.2

Now with final colors and images. See http://screencast.com/t/WeLg79JSxXZf for a screenshot.

Comment 15

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 746968 [details] [diff] [review]
Patch v1.2

This looks *fantastic* on Windows, but as I said in IRC, it looks quite a bit worse on OSX and Linux GTK. Unless you want to file follow-up bugs to handle those, I'm canceling the review request.

Comment 16

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v1.3

I got this built and tested on Ubuntu and OS X. Here's where it stands:

Ubuntu:
- I added padding to the top of the window since the narrowed tabbar adjoined with the wider top-of-the-window looked awkward. I also adjusted how the background-image is applied because setting it on #main-window wouldn't have any effect. Here's a screenshot of what it looks like now: http://screencast.com/t/rfOlM6ID 
- The palette items are still overflowing their container, but I'd like to move that to a follow-up bug, since the issue only affects Linux GTK.

OS X:
- OS X had a very similar issue as Ubuntu in regards to the padding at the top of the window, except on OS X it's made worse due to the window-dragging behavior on OS X. Here's the scenarios:
-- Padding-top applied: You can drag the window by dragging the tabbar. Trying to drag the window by dragging the top of the window is unreliable and works sometimes but fails most of the time.
-- Padding-top not applied, but padding-left and padding-right applied: Due to the way that OS X draws a gradient at the top of the window, there is now an obvious visual disconnect here between the top of the window and the tabbar. This is exacerbated by the presence of the Lion fullscreen button, since it stays at the top-right of the window while the rest of the browser gets narrower.
--- The gradient in the top of the window also makes it hard to draw a background-gradient for the rest of the padding that makes it match as good as http://f.cl.ly/items/1g45311C3f2V0l3N1o43/Australis-i02-DesktopSpec-CustomizationMode.png looks. Maybe there is something we can do here to turn off that gradient when in this mode?
With all that said, I decided in the interim it would look better having no padding around the browser. I think we should revisit this because the padding around the browser is a nice usability and UX-consistency win.

In summary, I was able to fix most of the issues facing Ubuntu and OS X. The issues brought up in this tome can be handled as follow-up bugs. We need to investigate drawing the full window on OS X and the overflowing palette items on Ubuntu.

Comment 17

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 747412 [details] [diff] [review]
Patch v1.3

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

This looks good to me. Please fix the nit I noticed, and file follow-ups for Linux and OSX, as well as support for when using a lightweight theme (currently, if I have a lwtheme installed, customization mode looks kinda funky).

::: browser/themes/shared/customizableui/customizeMode.inc.css
@@ +3,5 @@
>   * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
>  
>  /* Customization mode */
>  
> +#main-window #tab-view-deck {

This can just be reduced to #tab-view-deck, I think.

Comment 18

[Jared Wein [:jaws] (please needinfo? me)]

https://hg.mozilla.org/projects/jamun/rev/7b73f1048bfe

I filed bug 870574 and bug 870577 as follow-ups for this work.

Comment 19

[Mike Conley (:mconley) (:⚙️)]

Landed in UX as https://hg.mozilla.org/projects/ux/rev/7b73f1048bfe

Comment 20

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/7b73f1048bfe