Tried this out, great start! Noticed a few things:

• It'd be good to refresh the page after you activate the module so that you see the masterbar straight away. Same for when you deactivate it and go back to the old bar.
• When you hover over notifications it doesn't show the pointer cursor like the other items.

Worth noting that we're currently redesigning the Settings UI:
#6299
https://github.com/Automattic/jetpack/projects/3

You'll probably need to take this into account for the Jetpack Admin part. @eliorivero will be able to tell you a lot more.

Hi @vindl I'm going to close this since PRs to add new settings or enhancement has to be in the new settings UI project and created against feature/settings-overhaul.
I'll comment more on your original issue.

❗️ It's not necessary to delete this branch ❗️
When work is resumed, a new PR against feature/settings-overhaul must be created.

@jeherve @eliorivero Thanks for letting me know, I'll check it out and see how to adapt this for new settings UI.

@eliorivero when we decide where to place this in the new UI, I can make the changes and rebase and retarget it against feature/settings-overhaul branch, so I think there is no need to close the PR. Would it be a problem if we kept it open until then, since it would make sharing changes with the rest of my team easier?

Sure, that's ok 👍

This is looking pretty good! I definitely think we need to come up with a better way of presenting it in the settings UI than "Masterbar".

Following are some notes from just testing this "functionally":

I definitely agree it'd be good to refresh the page after enabling/disabling, since otherwise nothing seems to happen, so as a user, I'd guess it's "broken".

When a site is in development mode, Notifications are not available, so they don't appear in the toolbar. Maybe we should remove that block entirely in that case, so that things slide over to the right properly? Similarly, if I disable Notifications in Jetpack, it doesn't entirely reclaim that far-right position, so there's an additional gap there.

I got a PHP notice:

Notice: Undefined index: product_name_short in .../modules/masterbar/masterbar.php on line 480

Had some missing icons in the My Sites menu (maybe tied specifically to the fact this site was in Dev Mode?):

Also note that the URL shown in that menu is incorrectly encoded (install WP in a sub-directory, and you'll need to make sure you convert :: back to / for display purposes).

No dynamic items in the Reader menu? I expected to see my Lists + Tags there, as I do on WP.com.

Under the "Me" menu, I noticed that your "Sign Out" action is just signing me out of the current site. If this is supposed to be creating a more WordPress.com-like experience, should that log me out of WP.com as well? TBH I'm not 100% sure what a normal user would really expect there (or if they'd fully grok all the different things going on).

I noticed 2 things with the Notifications menu: one is that the animation of the unread indicator appears to be triggering every time my window loses/gains focus (so make sure you have an unread, then switch tabs away and back again, and the indicator will animate). The other is that the icon being used is actually different to the one on WP.com:

Thanks for the feedback @beaulebens! I'll add these issues to our milestone (in AT repo) and look into resolving them as soon as possible.

Maybe we should remove that block entirely in that case, so that things slide over to the right properly?

Either that, or we could also make sure to activate Notifications module after Masterbar is activated - otherwise the admin bar will not match the one on WordPress.com.

Had some missing icons in the My Sites menu (maybe tied specifically to the fact this site was in Dev Mode?)

Not sure what's causing this. My site is in Dev mode too, and the icons are displayed correctly.

No dynamic items in the Reader menu?

Haven't carried them over yet, will make sure to add them in future updates.

If this is supposed to be creating a more WordPress.com-like experience, should that log me out of WP.com as well?

I suppose we should log them out of WordPress.com as well.

Not sure what's causing this

Is your site publicly accessible? The one I saw that on was on localhost, so maybe it was somehow related to not being accessible from external sites?

log them out of WordPress.com

You might be able to achieve this with something like the redirect_to parameter (I think that's what it's called. So generate a local log out link, and then set the redirect to point to a WP.com log out. So they'd log out locally, get redirected, which would log them out of WP.com, and then get dropped on the log out screen from WP.com (the one talking about our apps). I think that'd work (as long as a nonce is not required to log out of WP.com).

Is your site publicly accessible? The one I saw that on was on localhost, so maybe it was somehow related to not being accessible from external sites?

Yup, it is. That's probably what's causing it. It seems to be connected to Notifications module somehow, since I'm able to reproduce it only when it's deactivated.

Good idea to just pull the CSS from wp.com. We should add a README and/or some code comments in the wp.com files to warn devs that changes made to those will also impact Jetpack.

We should add a README and/or some code comments in the wp.com files to warn devs that changes made to those will also impact Jetpack.

Good point @roundhill, I've added the comments in the diff linked above.

@beaulebens I've created issues based on your testing feedback in this milestone for easier tracking - most of them should be resolved by now.

No dynamic items in the Reader menu? I expected to see my Lists + Tags there, as I do on WP.com.

They are not currently present in WP.com toolbar either (only in Calypso), so I've decided to skip them for now.

@MichaelArestad let's chat today about the settings for this—the settings in this PR match the old style, for it to be merged we'll need to update that and find the right place for it (we we briefly discussed yesterday).

I still have some testing to do, but I had a few remarks after playing with the Masterbar for a bit:

• When I first activated the module, the page refreshed and the masterbar appeared, but clicking "My Sites" directed me to WordPress.com instead of triggering the dropdown.
• Clicking "Switch Sites" leads me to WordPress.com Sites instead of allowing me to switch sites from my site.
• The "Domains" and the WP Admin menu items probably shouldn't be displayed in the left menu.
• If the Stats module is disabled on my site, I would expect the Stats menu item to disappear from the Masterbar menu.
• Same thing with the Sharing menu if I disable Jetpack's Publicize and Jetpack's Sharing.
• The Masterbar doesn't seem to pick up my Gravatar; it shows mysteryman instead.
• Should we edit the "Help" link and direct it to http://jetpack.com/support/ instead?

• When I'm linked as an admin, I can see the Gravatar, but I can't when I'm linked as a non admin, an Editor in this case. In the split image, admin is on the left, editor on the right.

  

• When I'm linked as a Subscriber, these links should be hidden since it looks like I can post in the site

  

  and when I click to add a post, I'm taken to

  

@jeherve

When I first activated the module, the page refreshed and the masterbar appeared, but clicking "My Sites" directed me to WordPress.com instead of triggering the dropdown.

It looks like this was occurring in a short interval before all the required masterbar scripts were loaded. I've removed the URLs from top level menu items in 445241f in order to prevent this.

Clicking "Switch Sites" leads me to WordPress.com Sites instead of allowing me to switch sites from my site.

The same is true for current version of WordPress.com masterbar. In this iteration our main goal is just to replicate the current functionality as closely as possible.

The "Domains" and the WP Admin menu items probably shouldn't be displayed in the left menu.
...
Should we edit the "Help" link and direct it to http://jetpack.com/support/ instead?

I think that for AT sites we should show these three menu items and preserve the original WordPress.com links. On the other hand, for non-AT Jetpack sites it would make sense to hide them, or direct them to corresponding Jetpack URLs. Do you think that adding such AT specific check to Jetpack would be appropriate? Update: Added this check in f7c143a and 3049498, these items will no longer be shown on non-AT Jetpack sites.

If the Stats module is disabled on my site, I would expect the Stats menu item to disappear from the Masterbar menu.

Fixed in b2c32e8.

Same thing with the Sharing menu if I disable Jetpack's Publicize and Jetpack's Sharing.

Fixed in b2c32e8.

The Masterbar doesn't seem to pick up my Gravatar; it shows mysteryman instead.

Resolved in 51ddbd5.

@eliorivero

When I'm linked as an admin, I can see the Gravatar, but I can't when I'm linked as a non admin, an Editor in this case. In the split image, admin is on the left, editor on the right.

Resolved in 51ddbd5.

When I'm linked as a Subscriber, these links should be hidden since it looks like I can post in the site.

Fixed in 01ef071.

Thanks a lot for testing and feedback @jeherve and @eliorivero!

Note that the settings overhaul is being merged today, so this is going to need an update to match/fit into that style of settings now.

cc @ashleighaxios in case we can provide any design help on updating the Masterbar feature's settings card now that the new settings has merged (with Michael afk early next week).

This is looking good enough to merge. The smaller things will be addressed in following PR's, as will the merge to the new settings branch.