Different private profile button style

[simonhong]

From current master build(Version 1.8.31 Chromium: 81.0.4044.69 (Developer Build) (64-bit)):

From current beta build(Version 1.7.67 Chromium: 80.0.3987.149 (Official Build) beta (64-bit)):

[rebron]

cc: @tomlowenthal
Button selected state is wrong but placement of [icon-text] vs [text-icon] looks better?

[rebron]

cc: @karenkliu can you take a look? This is on the latest nightly https://github.com/brave/brave-browser/releases/tag/v1.8.32

[tildelowengrimm]

No opinion on the order of the elements. But this is the first time I learned that this was a button rather than a badge. As far as I know, this was never specified as a button, and I’d prefer if it went back to being a badge.

[karenkliu]

☝️ what @tomlowenthal said.

This order [icon-text] is correct:

But it should have the same background color as the toolbar and should not be clickable.

[rebron]

cc: @mkarolin @petemill

[mkarolin]

The additional functionality from Chromium here is for when multiple Private windows were open. Then you have the window count in the button and the menu option to exit would exit them all at once. Not sure if we care for such functionality.

[bsclifton]

This is a nice feature; what action should we take with this ticket? Is the problem that it looks like a button?

[karenkliu]

@mkarolin I see - thanks for pointing this out.

@bsclifton I suspect that the "Private" label became clickable after Chrome added some additional functionality and we inherited it. For private windows the issue is styling. This is what I recommend:

Style the "Private" button like a Brave button so users know there is functionality there

On hover, show a hover state:

On click, show a panel tweaked so the Private icon doesn't look like another button and with Brave styling + icons:

When multiple windows are open, show this text treatment:

We should support dark theme for the panel:

TOR windows also inherits this functionality from Chrome but it doesn't really work:

• TOR panel doesn't show the number of TOR windows open
• Clicking "Exit Tor" doesn't close the window(s)

Should we file a separate issue to fix this in Tor? I would recommend doing the same treatment as our Private windows to keep interactions consistent; also keeping the sunglasses icon for Tor windows:

Figma link for reference: https://www.figma.com/file/5THkuEtO2Ewn9LfqrHZP9a/Desktop-Private-Tabs-and-TOR?node-id=4%3A4737