730872 - Improve Sync preferences pane layout and visual design

Status: RESOLVED INCOMPLETE

(Firefox :: Theme, enhancement)

Description

[Stephen Horlander [:shorlander]]

Attachment: Proposed Changes

Improve Sync preferences pane to increase readability, element grouping and consistency.

- Two columns
  - Left: Account related items
  - Right: Sync preferences

- Remove scrollbar in Sync item box to show all items at once

- Convert links that should be buttons into buttons: "Pair a Device" "Unlink this Device"

Comment 1

[:Margaret Leibovic]

Attachment: WIP - changes to sync.xul

I don't have time to work on this right now, but this is what I came up with when I messed around with this a while ago. I think this puts most of the XUL changes needed in place, but it obviously needs some CSS love.

Comment 2

[:Margaret Leibovic]

Charles, this may be something you'd be interested in working on after you finish bug 727997. It's definitely larger in scope, but it would be awesome to see this pane get fixed up! :)

Comment 3

[Charles Chan]

Margaret, this looks interesting. I will give it a try, but I am sure it's going to take me more time to learn than the last one. :)

Comment 4

[:Margaret Leibovic]

(In reply to Charles Chan from comment #3)
> Margaret, this looks interesting. I will give it a try, but I am sure it's
> going to take me more time to learn than the last one. :)

Awesome! Stephen and I would love to help you. If you ever need more real-time communication, you can find us on IRC (irc.mozilla.org) in #ux or #fx-team. Jared (jaws on IRC) is also familiar with our prefs UI and enjoys helping new contributors :)

Comment 5

[Charles Chan]

(Since I am developing on Ubuntu) Any suggestions on how I should test the CSS changes on other platforms?

Comment 6

[Stephen Horlander [:shorlander]]

(In reply to Charles Chan from comment #5)
> (Since I am developing on Ubuntu) Any suggestions on how I should test the
> CSS changes on other platforms?

If you don't have access to other platforms you can post a patch and ask someone else to test it for you.

Comment 7

[Charles Chan]

Attachment: Screenshot at 2012-03-07 22:31:26

Finally got time to work on it.

Screenshot incorporates the .xul patch from Margaret. Additional work required, but want to get some preliminary direction / feeback before hand:

1. Inject some space in between the 2 vertical columns (lots of empty space on the right hand margin.)
2. Move the icon down to line up better with the 'Sync My' caption.
3. Insert space in between email address and 'Manage Account' button.
4. I see lots of empty space in the bottom half of the panel, is this a problem?  (Any suggestions?)

Comment 8

[:Margaret Leibovic]

(In reply to Charles Chan from comment #7)

> Screenshot incorporates the .xul patch from Margaret. Additional work
> required, but want to get some preliminary direction / feeback before hand:
> 
> 1. Inject some space in between the 2 vertical columns (lots of empty space
> on the right hand margin.)
> 2. Move the icon down to line up better with the 'Sync My' caption.
> 3. Insert space in between email address and 'Manage Account' button.

These all sound like good places to start. Stephen may also have a larger icon you can use. We should also figure out if we want to style the background of the left and right sides differently, like Stephen's mockup indicates.

> 4. I see lots of empty space in the bottom half of the panel, is this a
> problem?  (Any suggestions?)

That's probably the pesky problem of the dialog becoming as tall as the tallest pane that gets opened. You may be able to add JS to scale it back down (I believe Jared did something like this for the customize toolbar dialog, or maybe adding more vertical padding in the changes you mentioned above will help make this look less bad. Eventually we're going to get rid of the dialog in favor of in-content preferences, so depending on when that change happens, you may not need to worry about this too much.

Comment 9

[Stephen Horlander [:shorlander]]

(In reply to Margaret Leibovic [:margaret] from comment #8)
> These all sound like good places to start. Stephen may also have a larger
> icon you can use. We should also figure out if we want to style the
> background of the left and right sides differently, like Stephen's mockup
> indicates.

Yes, I can get a larger icon there. Is that our icon or a GTK stock icon?


> > 4. I see lots of empty space in the bottom half of the panel, is this a
> > problem?  (Any suggestions?)
> 
> That's probably the pesky problem of the dialog becoming as tall as the
> tallest pane that gets opened. You may be able to add JS to scale it back
> down (I believe Jared did something like this for the customize toolbar
> dialog, or maybe adding more vertical padding in the changes you mentioned
> above will help make this look less bad. Eventually we're going to get rid
> of the dialog in favor of in-content preferences, so depending on when that
> change happens, you may not need to worry about this too much.

There also seems to be too much horizontal space? We should probably figure out how to fix all those issues. They don't happen on OSX FWIW.

Comment 10

[Charles Chan]

(In reply to Stephen Horlander from comment #9)
> (In reply to Margaret Leibovic [:margaret] from comment #8)
> > These all sound like good places to start. Stephen may also have a larger
> > icon you can use. We should also figure out if we want to style the
> > background of the left and right sides differently, like Stephen's mockup
> > indicates.
> 
> Yes, I can get a larger icon there. Is that our icon or a GTK stock icon?
> 

Think they are Mozilla icons, specified in the .css:
#accountCaptionImage {
  list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
}

The files appears under /mozilla-central:
./toolkit/themes/winstripe/mozapps/profile/profileicon.png
./toolkit/themes/pinstripe/mozapps/profile/profileicon.png
./toolkit/themes/gnomestripe/mozapps/profile/profileicon.png

> > > 4. I see lots of empty space in the bottom half of the panel, is this a
> > > problem?  (Any suggestions?)
> > 
> > That's probably the pesky problem of the dialog becoming as tall as the
> > tallest pane that gets opened. You may be able to add JS to scale it back
> > down (I believe Jared did something like this for the customize toolbar
> > dialog, or maybe adding more vertical padding in the changes you mentioned
> > above will help make this look less bad. Eventually we're going to get rid
> > of the dialog in favor of in-content preferences, so depending on when that
> > change happens, you may not need to worry about this too much.
> 
> There also seems to be too much horizontal space? We should probably figure
> out how to fix all those issues. They don't happen on OSX FWIW.

I don't think it's a good idea to use scale the window height for each tab, as that will probably cause the windows to resize and buttons (Help/Close) to shift as the user moves from one tab to another. Probably bad experience for the user. (Perhaps that is my opinion, open to other input.)

Also, from what I can tell (Ubuntu), the tallest pane is the Applications tab. 

I will be post a new screenshot after the changes listed above. At that point, we can evaluation if additional UI work is required.

Comment 11

[Charles Chan]

Attachment: Screenshot at 2012-03-09 22:16:09

Updated with new screenshot. Comments?

Comment 12

[Charles Chan]

Attachment: Bug-730872: Patch 1

Here are the aggregation of all changes so far, if anyone would like to help me try on different platforms.

Comment 13

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

Comment on attachment 604607 [details] [diff] [review]
Bug-730872: Patch 1

Margaret, can you take a look at this?

Comment 14

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

Comment on attachment 604607 [details] [diff] [review]
Bug-730872: Patch 1

I'll try to give feedback on this tomorrow.

Comment 15

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

Comment on attachment 604607 [details] [diff] [review]
Bug-730872: Patch 1

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

The XUL changes here look fine.

Can you make some changes to /browser/themes/*stripe/preferences/preferences.css to make the <vbox> containing the #syncEnginesList expand further to the right so the right edge of the #syncEnginesList is aligned with the right edge of the Help button? This should also allow the #syncComputerName to be a bit wider which would be an improvement.

After making that change, it would be worthwhile to see if we can do the different background color for the two sides of the preferences like in Stephen's mockup. I'm not sure how that would look with the OK/Cancel/Help buttons on the bottom, but I'm interested to see what you can come up with.

I'll attach a screenshot of the current patch on Windows.

Comment 16

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

Attachment: Screenshot of Patch 1 on Windows

Comment 17

[Charles Chan]

Attachment: Colorized boxes

(In reply to Jared Wein [:jaws] from comment #15)
> Can you make some changes to
> /browser/themes/*stripe/preferences/preferences.css to make the <vbox>
> containing the #syncEnginesList expand further to the right so the right
> edge of the #syncEnginesList is aligned with the right edge of the Help
> button? This should also allow the #syncComputerName to be a bit wider which
> would be an improvement.

Done.

> After making that change, it would be worthwhile to see if we can do the
> different background color for the two sides of the preferences like in
> Stephen's mockup. I'm not sure how that would look with the OK/Cancel/Help
> buttons on the bottom, but I'm interested to see what you can come up with.

This proves a little bit trickier. I am kind of banging my head right now as a result of the  following issues (please also see the screenshot):
1) [Green box] The <deck> element, which is the outer most element does not cut up the dialog as shown in Stephen's mockup. 
2) [Red box] Seems to have problem expanding the <vbox> to the full height, even if additional <spacer flex="1"/> elements haven been added.
3) Not sure how to access the system defined color scheme and access the 'darker' color.

If you have any suggestions, please let me know. (I guess I will be reading the full XUL tutorial as well.)

Comment 18

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

Comment on attachment 607060 [details]
Colorized boxes

You can find system colors here: https://developer.mozilla.org/en/CSS/color_value#Mozilla_System_Color_Extensions

Other than extra <spacer flex="1"> elements, what have you tried for increasing the height of the red box?

Comment 19

[Charles Chan]

Attachment: Stripped down sync preference box -- problem expanding yellow box to full height

I have been tweaking sync.xul and trying to get the boxes to fill the full height of the screen.

However, I just can't get the <vbox> (yellow) to occupy the full height of of the <hbox> (green). Even though both hbox and vbox has flex="1".

Please have a look and point out what I am doing incorrectly?
Thanks.

Comment 20

[Dão Gottwald [:dao]]

It seems that we need a design without the two backgrounds.

Comment 21

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months.
:dao, could you have a look please?
For more information, please visit auto_nag documentation.