Improve ability to recognize the difference between a private window and private window with Tor #2735

Qix- · 2018-12-25T06:53:35Z

Description

Brave version: Version 0.58.18 Chromium: 71.0.3578.98 (Official Build) (64-bit)

In the new flashy Brave UI, it's almost impossible to tell if the tab is private or private with Tor. This is a severe downgrade from the old UI where it was at least easily recognizable at a glance.

This, along with #2734, make for a pretty sizable setback in Tor experience in Brave :/

Design

Differentiate Private Window from Private Window with Tor by changing tab and toolbar colors
The color changes would also increase contrast between active and inactive tabs by darkening tab background and lightening active tab+toolbar
Decrease contrast of tab separator: private window #3F3256, Private Window with Tor #5A5366
Differentiate Private Window with a "Private Window" badge on the right edge of toolbar
Differentiate Private Window with Tor with a "Private with Tor" badge on the right edge of toolbar and custom graphic on tab bar background

Contrast ratio improves:

Assets

Figma: https://www.figma.com/file/sS3l8tqUFxt54MEiBTalUI/Desktop-toolbar-and-menu?node-id=117%3A11091

Notes

Follow up issue to #8576

srirambv · 2018-12-25T13:41:56Z

cc: @tomlowenthal @brave/design

srirambv · 2018-12-28T05:26:59Z

TBH on Linux with GTX dark theme by default its only possible to distuingush if you have a new tab open which makes it clear what kind of window you are on

On Windows, you'd have different taskbar icons for each Private/Tor/Normal windows so its easy to guess which window is which but on Linux all the windows gets clubbed under one icon and keyboar shortcut isn't that user friendly to switch tabs of the same browser profile

Unless we can override the chrome colour profile on the Guest Window I don't think it will be much helpful in terms of UI distinction of Private/Tor windows

cc: @petemill @simonhong

Qix- · 2018-12-28T14:18:06Z

Well in the old version you could see "tor" in the tab. That was helpful enough. You'd also see "connecting to tor" in the address bar.

However, I don't see any of that anymore which leads me to believe that I'm not actually connected, which gives me lots of anxiety (: especially since things feel faster to connect in the new brave, which generally isn't a good sign when dealing with Tor.

So now I'm left with doubt about whether or not Brave is working as intended. The cognitive stress is much, much higher.

tildelowengrimm · 2019-01-11T18:13:50Z

In private windows with Tor, the word "Tor" is visible on the right, next to the menu button. On regular private windows, you see a pair of sunglasses there instead. But that's certainly not an easy way to tell windows apart at a glance, from menu bars, or so on.

NumDeP · 2019-09-12T17:40:29Z

Please keep in mind Session-Tabs when working on this feature because I remember this was also a concern for many users for when dozens of tabs started to shrink different tab types in the Muon version of Brave.

bbondy · 2020-10-30T17:23:14Z

@simonhong is this issue release blocking? If so could you please add a label? If not please remove it from the milestone.

https://github.com/brave/brave-browser/wiki/Triage-Guidelines#milestones-and-issues

simonhong · 2020-11-03T06:52:55Z

@karenkliu Can you share each theme(dark/private/tor)'s new hover color of location bar/omnibox popup also?
Or location/omnibox color change is not this issues range? (There color seems also changed in Figma)

karenkliu · 2020-11-03T18:47:55Z

@simonhong

Location bar hover border color

Dark Theme: no change
Private Window: #C6B3FF 2px border
Private Window with Tor: #CFABE2 2px border

Omnibox background color

Dark Theme: #181A21
Private Window: #0B0724
Private Window with Tor: #0B0724

Figma: https://www.figma.com/file/sS3l8tqUFxt54MEiBTalUI/?node-id=117%3A11090

LaurenWags · 2021-01-04T14:58:21Z

Questions sent to @rebron for clarification, marking as QA/Blocked for now

karenkliu · 2021-01-08T19:15:19Z

I verified the designs on Windows and noted no color discrepancies between platforms.

Tested:

MacOS Version 1.20.68 Chromium: 88.0.4324.51 (Official Build) nightly (x86_64)
Windows Version 1.20.68 Chromium: 88.0.4324.51 (Official Build) nightly (64-bit)

LaurenWags · 2021-01-08T21:44:53Z

Verified passed with

Brave | 1.19.79 Chromium: 87.0.4280.141 (Official Build) dev (x86_64)
-- | --
Revision | 9f05d1d9ee7483a73e9fe91ddcb8274ebcec9d7f-refs/branch-heads/4280@{#2007}
OS | macOS Version 10.15.7 (Build 19H15)

Confirmed visual differences between dark theme normal windows, private windows, and Tor windows.
Confirmed text on profile bubbles for Private and Tor windows as per brave/brave-core#6912 (comment).

`Dark theme example`	`Dark theme example`

`Private window example`	`Private window example`	`Private window example`

`Tor window example`	`Tor window example`	`Tor window example`

Verification passed on

Brave	1.19.81 Chromium: 87.0.4280.141 (Official Build) dev (64-bit)
Revision	9f05d1d9ee7483a73e9fe91ddcb8274ebcec9d7f-refs/branch-heads/4280@{#2007}
OS	Ubuntu 18.04 LTS

Confirmed visual differences between dark theme normal windows, private windows, and Tor windows.
Confirmed text on profile bubbles for Private and Tor windows as per brave/brave-core#6912 (comment).

`Dark theme example`	`Dark theme example`

`Private window example`	`Private window example`	`Private window example`

`Tor window example`	`Tor window example`	`Tor window example`

Verification passed on


Brave | 1.19.83 Chromium: 88.0.4324.79 (Official Build) (64-bit)
-- | --
Revision | bd1e9353659b2491dac971226a973ca3b5684a14-refs/branch-heads/4324@{#1520}
OS | Windows 10 OS Version 2004 (Build 19041.685)

Confirmed visual differences between dark theme normal windows, private windows, and Tor windows.
Confirmed text on profile bubbles for Private and Tor windows as per brave/brave-core#6912 (comment).

`Dark theme example`	`Dark theme example`

`Private window example`	`Private window example`	`Private window example`

`Tor window example`	`Tor window example`	`Tor window example`

srirambv added feature/tor design A design change, especially one which needs input from the design team feature/private-browsing labels Dec 25, 2018

srirambv added this to the 1.x Backlog milestone Dec 25, 2018

tildelowengrimm added the priority/P4 Planned work. We expect to get to it "soon". label Jan 24, 2019

rebron removed this from the 1.x Backlog milestone Feb 7, 2019

rossmoody self-assigned this May 31, 2019

rossmoody removed their assignment Jul 4, 2019

rebron assigned karenkliu Sep 8, 2020

rebron changed the title ~~Extremely hard to tell if tab is private or Tor in new version~~ [Desktop] Extremely hard to tell if tab is private or Tor in new version Sep 29, 2020

rebron assigned simonhong and unassigned karenkliu Sep 30, 2020

simonhong added this to the 1.18.x - Nightly milestone Oct 21, 2020

simonhong mentioned this issue Oct 21, 2020

Improve tab contrast brave/brave-core#6912

Merged

33 tasks

karenkliu mentioned this issue Oct 21, 2020

Looking for a better TAB contrast than the existing one #12249

Closed

bbondy removed this from the 1.18.x - Nightly milestone Oct 30, 2020

simonhong added QA/Yes release-notes/include labels Nov 18, 2020

simonhong closed this as completed in brave/brave-core#6912 Nov 25, 2020

simonhong added this to the 1.19.x - Nightly milestone Nov 25, 2020

simonhong added the OS/Desktop label Nov 27, 2020

LaurenWags added the QA/Blocked label Jan 4, 2021

rebron changed the title ~~[Desktop] Extremely hard to tell if tab is private or Tor in new version~~ Improve ability to recognize the difference between a private window and private window with Tor Jan 4, 2021

LaurenWags removed the QA/Blocked label Jan 7, 2021

LaurenWags added the QA Pass-macOS label Jan 8, 2021

btlechowski added the QA Pass-Linux label Jan 13, 2021

GeetaSarvadnya added the QA Pass-Win64 label Jan 14, 2021

kjozwiak mentioned this issue Jan 19, 2021

Release Notes for 1.19.x Release #1 (Release Channel) #13648

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve ability to recognize the difference between a private window and private window with Tor #2735

Improve ability to recognize the difference between a private window and private window with Tor #2735

Qix- commented Dec 25, 2018 •

edited by karenkliu

Loading

srirambv commented Dec 25, 2018

srirambv commented Dec 28, 2018

Qix- commented Dec 28, 2018 •

edited

Loading

tildelowengrimm commented Jan 11, 2019

NumDeP commented Sep 12, 2019 •

edited

Loading

bbondy commented Oct 30, 2020 •

edited

Loading

simonhong commented Nov 3, 2020 •

edited

Loading

karenkliu commented Nov 3, 2020 •

edited

Loading

LaurenWags commented Jan 4, 2021

karenkliu commented Jan 8, 2021

LaurenWags commented Jan 8, 2021 •

edited by GeetaSarvadnya

Loading

Improve ability to recognize the difference between a private window and private window with Tor #2735

Improve ability to recognize the difference between a private window and private window with Tor #2735

Comments

Qix- commented Dec 25, 2018 • edited by karenkliu Loading

Description

Design

Assets

Notes

srirambv commented Dec 25, 2018

srirambv commented Dec 28, 2018

Qix- commented Dec 28, 2018 • edited Loading

tildelowengrimm commented Jan 11, 2019

NumDeP commented Sep 12, 2019 • edited Loading

bbondy commented Oct 30, 2020 • edited Loading

simonhong commented Nov 3, 2020 • edited Loading

karenkliu commented Nov 3, 2020 • edited Loading

LaurenWags commented Jan 4, 2021

karenkliu commented Jan 8, 2021

LaurenWags commented Jan 8, 2021 • edited by GeetaSarvadnya Loading

Qix- commented Dec 25, 2018 •

edited by karenkliu

Loading

Qix- commented Dec 28, 2018 •

edited

Loading

NumDeP commented Sep 12, 2019 •

edited

Loading

bbondy commented Oct 30, 2020 •

edited

Loading

simonhong commented Nov 3, 2020 •

edited

Loading

karenkliu commented Nov 3, 2020 •

edited

Loading

LaurenWags commented Jan 8, 2021 •

edited by GeetaSarvadnya

Loading