Closed Bug 730872 Opened 12 years ago Closed 2 years ago

Improve Sync preferences pane layout and visual design

Categories

(Firefox :: Theme, enhancement)

enhancement
Not set
normal

Tracking

()

RESOLVED INCOMPLETE

People

(Reporter: shorlander, Unassigned)

Details

Attachments

(8 files)

Attached image 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"
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.
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! :)
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. :)
(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 :)
Assignee: nobody → charles.wh.chan
Status: NEW → ASSIGNED
(Since I am developing on Ubuntu) Any suggestions on how I should test the CSS changes on other platforms?
(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.
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?)
(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.
(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.
(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.
Updated with new screenshot. Comments?
Here are the aggregation of all changes so far, if anyone would like to help me try on different platforms.
Attachment #604607 - Flags: review?
Comment on attachment 604607 [details] [diff] [review]
Bug-730872: Patch 1

Margaret, can you take a look at this?
Attachment #604607 - Flags: review? → review?(margaret.leibovic)
Comment on attachment 604607 [details] [diff] [review]
Bug-730872: Patch 1

I'll try to give feedback on this tomorrow.
Attachment #604607 - Flags: review?(margaret.leibovic) → feedback?(jwein)
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.
Attachment #604607 - Flags: feedback?(jwein) → feedback+
Attached image 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.)
Attachment #607060 - Flags: feedback?(jwein)
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?
Attachment #607060 - Flags: feedback?(jwein) → feedback+
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.
It seems that we need a design without the two backgrounds.

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.

Assignee: charles.wh.chan → nobody
Status: ASSIGNED → NEW
Flags: needinfo?(dao+bmo)
Status: NEW → RESOLVED
Closed: 2 years ago
Flags: needinfo?(dao+bmo)
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: