I see a mock. It might not be very complete in terms of hover/press states, but here it is.

Deleted: P - Chrome OSX - 200 - bookmark bar (1).png 692 KB

	P - Chrome OSX - 200 - bookmark bar (1).png 692 KB View Download

bettes@ suggested removing the button border, and only show it in the hover state.

Deleted: image (1).png 227 KB

	image (1).png 227 KB View Download

sgabriel@ - right now if you are not logged in, or only signed into one account, the user accounts button displays an icon. I don't see that icon in the list of vector icons, and I don't see any mocks with this icon. Can you provide more details on this?

@shrike: 

There's no specs for this UI at the moment. I won't be able to spec out the particulars until next week.

Per our discussion earlier, you could start by using the same MD-hover states that are seen in the rest of top-chrome. The same hover-state would then also be used as part of the menu's active state. 

The image in comment 3 is inaccurate. Attached is the updated version. 

Deleted: user-menu.png 754 KB

	user-menu.png 754 KB View Download

I think he also needed the account icon that you are using today. 
@Alan, would you be opposed to using this one to be more consistent with MD ?
Happy to created the necessary asset if ok.

Deleted: Screen Shot 2016-04-07 at 10.26.03 AM.png 4.9 KB

	Screen Shot 2016-04-07 at 10.26.03 AM.png 4.9 KB View Download

You mean doing something like the following? Im not opposed :) 

FWIW, the current avatar assets used can be found here, under avatar.png
https://drive.google.com/open?id=0B6x6iYCtKinEN2tvM2hBZkpwNXM

Deleted: Untitled-2.png 398 KB

	Untitled-2.png 398 KB View Download

I like the circular visual, will match well the new update paradigm. I'll export the asset.

sgabriel@ - did you export the asset?

Assets for prog rendering attached. I attached 1x and 2x version for polish. 
Sorry for the delay. 
I also updated the specs for hover and pressed based on the one we already had.

Deleted: avatar.zip 1.5 KB

avatar.zip 1.5 KB Download

Deleted: SPEC-core-ui-OSX-hover-active-states.png 269 KB

	SPEC-core-ui-OSX-hover-active-states.png 269 KB View Download

 Issue 616306  has been merged into this issue.

Moving this nonessential bug to the next milestone.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

+Jane as FYI

New Mac OSX specs ready for implementation: 

+ new signed out, single user state
+ removal of button outline on normal state
+ new hover and pressed states (parity with top-chrome)
+ menu appears on click-down (currently on click-release)

PREVIEW MAC OSX 
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Desktop%20Sign%20In/user_menu-button/P%20-%20macOSX#%3Fz=fit

SPEC
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Desktop%20Sign%20In/user_menu-button#%2FSPEC%20-%20user-menu-button.png

spqchan@ - I don't think this one is too much work, but I don't have a lot of time to look at it.

I noticed that this is already being worked on Windows/Linux: Issue 591586
Are the vector files available yet for the "signed out" and "sync error" icons?

I don't think the work being done in Issue 591586 is the same as this set of work. My understanding is that  Issue 635699  is the Win/Linux version of this bug, and work hasn't been started on it yet.

That being said, we should have assets for the signed out avatar and the sync error icon, since we already use both in the user menu, right?

Why does the signed out icon have a darker-gray square background? That looks really out of place. None of our other icons have a background. 

https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Desktop%20Sign%20In/user_menu-button/P%20-%20macOSX#%2F01-signed-out-single.png%3Fz=fit

Otherwise I like the rest! Excited to see this happen!

That's actually supposed to be the hover state. In the default state, there's no dark gray square background.

Alan will update the mocks. Thanks for catching that!

Thanks for the catch. Just a mock mistake. Updated drive
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Desktop%20Sign%20In/user_menu-button/P%20-%20macOSX#%2F01a-signed-out-single.png%3Fz=fit

Deleted: 01a-signed-out-single.png 135 KB

	01a-signed-out-single.png 135 KB View Download

Deleted: 01b-signed-out-single-hover.png 135 KB

	01b-signed-out-single-hover.png 135 KB View Download

Just want to check in on the status of this. Is this actively being worked on? Will this make it into M54 (which has already branched)? Should we update the milestone to M55?

CL is in review: https://codereview.chromium.org/2286993002/

And yes, this can make it to M54

Great, thanks Sarah. Is the plan to merge this once it lands?

Yes

Got it, thanks for the update Sarah :)

From codereview:

> Also, according to the specs, the icon should be in a 24x28 box.

spqchan@ - I'm not sure what you mean exactly, but here I've pasted the actual user account button next to the spec. You can see that the icon is much smaller than what's in the spec.

Let's be sure to give your cl(s) some air time on Canary before cherry-picking to M54.

Deleted: UserAccountButton.png 8.1 KB

	UserAccountButton.png 8.1 KB View Download

Ah, I see what you mean. I'll adjust it

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1f0a7bb629f3ad9464aba375a20a59e5d23ca23b

commit 1f0a7bb629f3ad9464aba375a20a59e5d23ca23b
Author: spqchan <spqchan@chromium.org>
Date: Fri Sep 02 23:19:11 2016

[Material][Mac] Update the User Account Button

BUG= 590917 

Review-Url: https://codereview.chromium.org/2286993002
Cr-Commit-Position: refs/heads/master@{#416382}

[modify] https://crrev.com/1f0a7bb629f3ad9464aba375a20a59e5d23ca23b/chrome/browser/ui/cocoa/profiles/avatar_button_controller.mm
[modify] https://crrev.com/1f0a7bb629f3ad9464aba375a20a59e5d23ca23b/chrome/browser/ui/cocoa/profiles/avatar_button_controller_unittest.mm
[modify] https://crrev.com/1f0a7bb629f3ad9464aba375a20a59e5d23ca23b/ui/gfx/vector_icons/BUILD.gn
[add] https://crrev.com/1f0a7bb629f3ad9464aba375a20a59e5d23ca23b/ui/gfx/vector_icons/user_account_avatar.icon

Comment #17 suggests that '+ menu appears on click-down (currently on click-release)' which is not implemented with the landed CL. For the rest, looking good.

Just tested this out on Canary - looks good to me! :)

I'm currently working on the "show avatar dialog on click-down" spec.
Question: What happens if the user clicks down on the button when the bubble is already there?

> Question: What happens if the user clicks down on the button when the bubble is already there?

The dialog should dismiss.

I have a CL for the "show dialog on mouse down" spec here:
https://codereview.chromium.org/2316853002/

However, avi brought up a good point that on OSX, typically buttons trigger on mouse-up, not mouse-down. Going to hold on to this until things get cleared up.

Once things are worked out, I'll go ahead and request a merge to M54

Alan has filed a few minor UX bugs that require small tweaks/fixes:

 Issue 646060 
 Issue 646063 
 Issue 646066 

Assigning those to spqchan@ (since she's owning the avatar button update on Mac).

Alan - can you please respond to comment #38? Should we really trigger this on mouse-down if it goes against OS X norms?

Sorry for the confusion, let's keep the trigger for the user menu on mouse-up. Our overflow menu is mouse-down right now which is a bit of an anomaly in our UI so I'll address that in a different bug. 

OK, thanks Alan. Sarah - I think we're good to merge this change back to M54, and address the three follow-up issues that Alan filed.

I've assigned them to you.

Your change meets the bar and is auto-approved for M54 (branch: 2840)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/55351ebcc3e02ad4f8187a4700aad9dd3c728df9

commit 55351ebcc3e02ad4f8187a4700aad9dd3c728df9
Author: spqchan <spqchan@chromium.org>
Date: Tue Sep 13 22:38:37 2016

[Material][Mac] Update the User Account Button

BUG= 590917 

Review-Url: https://codereview.chromium.org/2286993002
Cr-Commit-Position: refs/heads/master@{#416382}
(cherry picked from commit 1f0a7bb629f3ad9464aba375a20a59e5d23ca23b)

Review URL: https://codereview.chromium.org/2340653002 .

Cr-Commit-Position: refs/branch-heads/2840@{#345}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/chrome/browser/ui/cocoa/profiles/avatar_button_controller.mm
[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/chrome/browser/ui/cocoa/profiles/avatar_button_controller_unittest.mm
[add] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/ui/gfx/vector_icons/user_account_avatar.icon
[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/ui/gfx/vector_icons_sources.gypi

Retested the above change on Mac 10.11.6 with chrome version '54.0.2840.27' and below are the screen shot for the same.

@spqchang: Hey, would you mind checking the screenshot and let us know if they are as per the specs.

I really appreciate your help.

Thank you!

Deleted: Screen Shot 2016-09-14 at 5.28.36 PM.png 8.5 KB

	Screen Shot 2016-09-14 at 5.28.36 PM.png 8.5 KB View Download

Deleted: Screen Shot 2016-09-14 at 5.28.25 PM.png 7.9 KB

	Screen Shot 2016-09-14 at 5.28.25 PM.png 7.9 KB View Download

Deleted: Screen Shot 2016-09-14 at 5.26.59 PM.png 9.3 KB

	Screen Shot 2016-09-14 at 5.26.59 PM.png 9.3 KB View Download

Deleted: Screen Shot 2016-09-14 at 5.26.30 PM.png 10.0 KB

	Screen Shot 2016-09-14 at 5.26.30 PM.png 10.0 KB View Download

I think those look to-spec. bettes@ (cc'ed) already did a UX pass, and filed new bugs for the things he found that were off (see comment #39).

Not blocking M54 release, planning to tag as verified once we get response for #46.

Not blocking M54 release, planning to tag as verified once we get response for #46.

#46 lgtm

Please test both retina and non-retina. Often things that look good when developed for one need tweaks for the other. 

ligimole@ - can you please help us verify that it looks good on both retina and non-retina screens?

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/55351ebcc3e02ad4f8187a4700aad9dd3c728df9

commit 55351ebcc3e02ad4f8187a4700aad9dd3c728df9
Author: spqchan <spqchan@chromium.org>
Date: Tue Sep 13 22:38:37 2016

[Material][Mac] Update the User Account Button

BUG= 590917 

Review-Url: https://codereview.chromium.org/2286993002
Cr-Commit-Position: refs/heads/master@{#416382}
(cherry picked from commit 1f0a7bb629f3ad9464aba375a20a59e5d23ca23b)

Review URL: https://codereview.chromium.org/2340653002 .

Cr-Commit-Position: refs/branch-heads/2840@{#345}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/chrome/browser/ui/cocoa/profiles/avatar_button_controller.mm
[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/chrome/browser/ui/cocoa/profiles/avatar_button_controller_unittest.mm
[add] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/ui/gfx/vector_icons/user_account_avatar.icon
[modify] https://crrev.com/55351ebcc3e02ad4f8187a4700aad9dd3c728df9/ui/gfx/vector_icons_sources.gypi