Browser-laptop: Refine Toolbar UI with New Icons and styling refinements

[bradleyrichter]

Issue: Dreams of UI refinements stuck in design world.

Fix: Implement collection of UI design refinements and new icon set.

Test proceedure:

Open new instance that includes new changes.
Compare to previous version.
Be amazed by beauty of new version.
Click buttons and resize window to make sure nothing blows up or looks wonky.

actual screen shot showing changes from @petemill go here:

[petemill]

Initial aims

• [x] top nav height / alignment polish
• [x] Url bar style: titlemode, non-titlemode, :hover, :focus, :active
• [x] Url bar loading progress bar
• [x] Navigation icons update
• [x] Preferences icons update
• [x] Tab bar style update
• [x] Tab loading icon
• [x] Preview build 1
  
  
  
  • [x] Style updates from build 1 feedback
  
  
• [x] Preview build 2
  
  
  
  • [x] Style updates from build 2 feedback
  
  
• [x] Preview build 3
  
  
  
  • [x] Style updates from build 3 feedback
  
  

Additional aims

• [x] Icons v3 with explicit box sizing inside SVG
• [x] Ditch faded unloaded tab
• [x] Icon hover / active states on extension buttons, nav buttons and main menu button
• [x] fix weird url bar width behavior
• [x] fix solid tab border color cutting off favicon glow

Dependencies

• [x] v1 design sketch
• [x] icons
• [x] Shields icon spec
• [x] BAT icon spec
• [x] design spec or 👍on hover/active nav button styles
• [x] design spec or 👍on hover/active new tab button styles
• [x] design spec or 👍on hover/active extension button styles
• [x] Security 👍 on lock icon / EV text color

Test plan

URL bar progress bar

• URL bar shows loading progress bar during tab load
• URL bar does not show loading progress bar when tab is not loading

Icons

• Preferences navigation icons are new
• Top navigation bar icons are new
• All top navigation bar icons have hover and mousedown states (as depicted in below comment)
• Top navigation bar icons and url bar still fit when screen narrows to minimum width
• Tab loading animation is new spinner
• Tab loading animation fits on very small tabs at minimum width
• URL bar lock icon is grey local for https
• URL bar lock icon is green local for https with EV cert
• URL bar lock icon is red unlock for http / other
• URL bar icon is custom search engine for ':a hi' style search
• Menu icon is on top navigation bar (no longer next to tabs)
• When many extensions are enabled, the top nav icons, and url bar all fit gracefully

Payments button

• Payments button shows as disabled on about:* pages
• Payments button shows as enabled but inactive when first visiting a site
• Payments button automatically turns to enabled and active after 8 seconds
• Payments button can be clicked active / inactive when enabled

Shields button

• Notification count is centered within background 'bubble'
• Notification count gracefully fits a high number of blocked entries

[petemill]

Status as of beta:

Title mode

Status as of preview2:

Url bar

Title mode

Url mode

Hover

Focus

Icon variations

Tabs bar (click to enlarge)

New Tab Button

Hover

Mouse down

Nav buttons

Hover

Mouse down

All the buttons

Status as of preview1

[kjozwiak]

@petemill @bradleyrichter other than the changes outlined in https://github.com/brave/browser-laptop/issues/13981#issuecomment-391144864, is there anything else QA needs to do? Do we have a design document that outlines the behaviour of the new UI changes anywhere?

[petemill]

@kjozwiak no spec, it has been an iterative process. I believe we have approval from the design team along for the UX, with the included and pending iterative requests which are logged as separate issues, as of 0.23.14

[petemill]

Added screenshots at https://github.com/brave/browser-laptop/issues/13981#issuecomment-391144864 to verify notable behavior.

[petemill]

Added test plan to https://github.com/brave/browser-laptop/issues/13981#issuecomment-391075033

[srirambv]

@petemill Is this expected with the new icon set?

[petemill]

Not sure from the gif which aspect you are referring to as there are a lot
of separate things going on in it. The hover state is expected as is the
mouse down state, and the active state (which looks the same as hover
state) whilst the menu is open. There is also a focus state when the button
is tabbed to via the keyboard, or is sometimes, like any button, keeps
focus after being clicked. Did some aspect of those states strike you as in
the way of your experience?
On Mon, Jun 25, 2018 at 6:37 AM Sriram [e-mail] wrote:

@petemill https://github.com/petemill Is this expected with the new
icon set?
[image: shields click]
https://user-images.githubusercontent.com/17010094/41853227-4f466bbe-785b-11e8-80cc-f717699af378.gif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/brave/browser-laptop/issues/13981#issuecomment-399954382,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtRzBRGT7HIA0oZTlBija3Noj2jW_01ks5uAOeagaJpZM4TuOT4
.

[bradleyrichter]

Lion face has no color. Please define the svg face shape as white.

On Jun 25, 2018, at 7:45 AM, Pete Miller [e-mail] wrote:

Not sure from the gif which aspect you are referring to as there are a lot
of separate things going on in it. The hover state is expected as is the
mouse down state, and the active state (which looks the same as hover
state) whilst the menu is open. There is also a focus state when the button
is tabbed to via the keyboard, or is sometimes, like any button, keeps
focus after being clicked. Did some aspect of those states strike you as in
the way of your experience?
On Mon, Jun 25, 2018 at 6:37 AM Sriram [e-mail] wrote:

@petemill https://github.com/petemill Is this expected with the new
icon set?
[image: shields click]
https://user-images.githubusercontent.com/17010094/41853227-4f466bbe-785b-11e8-80cc-f717699af378.gif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/brave/browser-laptop/issues/13981#issuecomment-399954382,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtRzBRGT7HIA0oZTlBija3Noj2jW_01ks5uAOeagaJpZM4TuOT4
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[srirambv]

Verified on Windows 10 x64 using

• 0.23.19 - 178c3fb
• Muon - 7.1.3
• libchromiumcontent - 67.0.3396.87

Verified with macOS 10.12.6 using

• 0.23.19 178c3fb
• Muon 7.1.3
• libchromiumcontent 67.0.3396.87

Verified on Ubuntu 17.10 x64

• 0.23.19 178c3fbc045a0cbdbe098db08307503cce952081
• Muon 7.1.3
• libchromiumcontent: 67.0.3396.87