speaker icon displays over page favicon in vertical tab mode with "Float on mouseover" selected

[LaurenWags]

Description

When vertical tabs are being used and "Float on mouseover" is selected, if a background tab is playing audio the speaker icon overlays the favicon. So, it's also not immediately obvious which tab is playing the audio.

Steps to Reproduce

1. Have vertical tabs enabled
2. Have "Float on mouseover" checked
3. Have a page playing audio which is not the active tab

Actual result:

I'm using dark mode, so my speaker icon is white. Favicons with more white which have the white speaker icon over top don't look great and it's tough on some to tell which are playing audio.

Brave Talk	HBO Max	Netflix	YouTube

Expected result:

Not sure, maybe not show the favicon and just show the speaker icon - would have to be determined by @rebron and design team

Reproduces how often:

easily

Brave version (brave://version info)

1.50.x

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a (behind a flag in 1.50.x)
• Can you reproduce this issue with the beta channel? yes 1.51.x
• Can you reproduce this issue with the nightly channel? probably 1.52.x

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields?
• Does the issue resolve itself when disabling Brave Rewards?
• Is the issue reproducible on the latest version of Chrome?

Miscellaneous Information:

cc @rebron

[aguscruiz]

Design update for this issue here:

https://www.figma.com/file/SEwlfGQ35DZxJyQBnsgfMA/Vertical-tabs?node-id=2453%3A81256&t=kVr7b8ZQK1Fi9TOO-1

[sangwoo108]

Yeah, the favicon should be hidden at least when the speaker icon is shown.

@aguscruiz , left some questions on the Figma. I'm not sure if I'm going to implement the new design right away or fix bugs first for now. It depends on the complexity of it. We'll see.

[kjozwiak]

The above requires 1.52.92 or higher for 1.52.x verification 👍

[stephendonner]

Verified PASSED using

Brave	1.52.92 Chromium: 113.0.5672.92 (Official Build) beta (x86_64)
Revision	b6f521170062a1fa8a82c33fb223b06fec566da1-refs/branch-heads/5672_63@{#10}
OS	macOS Version 13.4 (Build 22F62)

Steps:

1. installed 1.52.92
2. launched Brave
3. loaded and played video with audio across netflix.com, hbomax.com, youtube.com, and aol.com
4. confirmed collapsed (playing audio), collapsed (default), and expanded views
5. unchecked Float on mouseover in brave://settings/appearance
6. confirmed non-floated view

collapsed, playing audio	collapsed, default	floated	non-floated view