Create/Manage dialog UI changes for M22

Create/Manage dialog UI changes for M22.
1. Added selection border for Avatar grid
2. Moved "Name" label above box 
3. Added grey divider line above the button strip

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=149433

[James Hawkins, 2012-07-31 17:01:07]

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
File chrome/browser/resources/options2/manage_profile_overlay.css (right):

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.css:116: width: 92%;
Why 92%?

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
File chrome/browser/resources/options2/manage_profile_overlay.html (right):

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.html:11: <div
class="profile-name-area">
Optional nit: s/area/container/

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.html:21: <div
id="manage-profile-separator"></div>
What is this div about?

[Halli, 2012-07-31 17:37:05]

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
File chrome/browser/resources/options2/manage_profile_overlay.css (right):

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.css:116: width: 92%;
On 2012/07/31 17:01:07, James Hawkins wrote:
> Why 92%?
It looks right to me as the same width as the content area. I was having
problems getting the divider line to be a bottom border to the last child of the
content area (since the last child has width 50% instead of 100%) And then
adding a bottom border to the content area itself was also not working for me.
Do you have any suggestions?

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
File chrome/browser/resources/options2/manage_profile_overlay.html (right):

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.html:21: <div
id="manage-profile-separator"></div>
On 2012/07/31 17:01:07, James Hawkins wrote:
> What is this div about?
See comment on .css file. I added a separate div to get the grey divider line
above the button area, because I couldn't get a properly spaced line as a bottom
border for the content-area or top-border for the button area since I can't edit
the content-area or action-area css (right?) suggestions are more than welcome
(:

[Halli, 2012-07-31 23:57:51]

Thanks for the tips, this is way better!

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
File chrome/browser/resources/options2/manage_profile_overlay.html (right):

http://codereview.chromium.org/10832075/diff/1/chrome/browser/resources/optio...
chrome/browser/resources/options2/manage_profile_overlay.html:11: <div
class="profile-name-area">
On 2012/07/31 17:01:07, James Hawkins wrote:
> Optional nit: s/area/container/

Done.

[James Hawkins, 2012-08-01 00:42:54]

LGTM with nits.

No problem, glad to help!

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
File chrome/browser/resources/options2/manage_profile_overlay.css (right):

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
chrome/browser/resources/options2/manage_profile_overlay.css:85:
#create-profile-content:after {
nit: Document what this is for.

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
chrome/browser/resources/options2/manage_profile_overlay.css:94:
#manage-profile-content:after {
nit: Collapse this into the above block, i.e.,

#create-profile-content:after,
#manage-profile-content:after {
..
}

[Halli, 2012-08-01 15:36:25]

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
File chrome/browser/resources/options2/manage_profile_overlay.css (right):

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
chrome/browser/resources/options2/manage_profile_overlay.css:85:
#create-profile-content:after {
On 2012/08/01 00:42:54, James Hawkins wrote:
> nit: Document what this is for.

Done.

http://codereview.chromium.org/10832075/diff/6001/chrome/browser/resources/op...
chrome/browser/resources/options2/manage_profile_overlay.css:94:
#manage-profile-content:after {
On 2012/08/01 00:42:54, James Hawkins wrote:
> nit: Collapse this into the above block, i.e.,
> 
> #create-profile-content:after,
> #manage-profile-content:after {
> ..
> }

Done.

[commit-bot: I haz the power, 2012-08-01 15:36:46]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/hallielaine@chromium.org/10832075/9001

[commit-bot: I haz the power, 2012-08-01 17:12:03]

Change committed as 149433