Fix jumping mute tab button when hovering on inactive tab

[karenkliu]

Description

Currently when the user hovers over an inactive tab with audio, the mute button jumps to make room for the X icon. This causes accidentally clicking on the 'X' icon when the intended action was to mute the tab.

Original description:

Hey I have a user with feedback on the tab mute button; they sometimes click the "X" to close the tab rather than the speaker icon -> https://community.brave.com/t/ui-ux-issue-with-mute-tab-button/264858/2

Steps to Reproduce

1. Open a tab with audio
2. Navigate to a different tab
3. Hover over the inactive tab with audio to see the jumping mute tab button

Actual result:

Expected result:

Move the mute tab button to the left of the tab, between the favicon and page title. Give it a background color when unselected and on hover so that it reads as a button rather than an emoji.

Light theme

Dark theme

Reproduces how often:

Easily

Brave version (brave://version info)

all versions

Version/Channel Information:

• Can you reproduce this issue with the current release? yes
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the nightly channel? yes

Other Additional Information:

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

Assets

Figma

• Light theme: https://www.figma.com/file/sS3l8tqUFxt54MEiBTalUI/?node-id=975%3A11501
• Dark theme: https://www.figma.com/file/sS3l8tqUFxt54MEiBTalUI/?node-id=983%3A11719

[nullhook]

The area of this tab is called alert indicator and it's used for multiple states:

enum class TabAlertState {
  MEDIA_RECORDING,        // Audio/Video being recorded, consumed by tab.
  TAB_CAPTURING,          // Tab contents being captured.
  AUDIO_PLAYING,          // Audible audio is playing from the tab.
  AUDIO_MUTING,           // Tab audio is being muted.
  BLUETOOTH_CONNECTED,    // Tab is connected to a BT Device.
  BLUETOOTH_SCAN_ACTIVE,  // Tab is actively scanning for BT devices.
  USB_CONNECTED,          // Tab is connected to a USB device.
  HID_CONNECTED,          // Tab is connected to a HID device.
  SERIAL_CONNECTED,       // Tab is connected to a serial device.
  PIP_PLAYING,            // Tab contains a video in Picture-in-Picture mode.
  DESKTOP_CAPTURING,      // Desktop contents being recorded, consumed by tab.
  VR_PRESENTING_IN_HEADSET,  // VR content is being presented in a headset.
};

screen recording:

alert_indicator_jump.mov

are we only moving the audio icon over or the whole section that holds the above states? and are there any visual changes to other state icons? for ex, we've opted to change the background for audio.

@karenkliu @petemill

[karenkliu]

@nullhook Aside from the audio playing/muting, the other icons don't seem actionable to me. If that's correct, then I think it would be fine to only move the audio playing/muting buttons since the user probably wouldn't try to click on the other icons.

If it's cleaner to move everything over though, I'm fine with that too.

[nullhook]

@karenkliu the current implementation for hover/pressed states are "blended towards max contrast" based on the tab background color for dark/light and user custom themes.

For ex, light mode: it takes the current background color for the tab and manipulates the alpha value for hover/pressed states. The values for those alphas are hardcoded as follows:

hover: 72 alpha
pressed: 36 alpha

Can we change the default state color for the indicator to work under all scenarios? Ideally, if there's transparency/similarity to the current tab background would work. It has to work on all custom user themes.

[nullhook]

test.mov

Here's a test. i've manipulated the default state color (inherits from tab bg color) to alpha: 20. this works on all themes.

[stephendonner]

Verified PASSED using

Brave	1.29.12 Chromium: 92.0.4515.101 (Official Build) nightly (x86_64)
Revision	edb73f4fb624e2ea0cb6f5cc39c9e317ecd3535b-refs/branch-heads/4515@{#1536}
OS	macOS Version 11.4 (Build 20F71)

Steps:

1. opened a tab with audio (https://www.youtube.com/watch?v=rA56B4JyTgI)
2. navigate to a different tab (this issue)
3. hovered over the inactive tab with audio; no longer saw the "jumping" audio-playing icon

Confirmed the audio-playing icon is to the left of the page title in the tab's strip.
Confirmed clicking on it muted, and clicking again unmuted the audio.

@karenkliu if I'm not mistaken, it looks like the at-rest and hovered state colors for the dark theme are backwards? They go from light to darker, on hover, in the mockup, but here they go from dark to lighter, on hover.

---

Verification passed on

Brave	1.29.60 Chromium: 92.0.4515.131 (Official Build) beta (64-bit)
Revision	6b8d6c56ce21e38a72f7c4becb5abc1fa5134f29-refs/branch-heads/4515@{#1933}
OS	Ubuntu 18.04 LTS

Verified no "jumping" audio-playing icon

---

Verification passed on

Brave | 1.29.60 Chromium: 92.0.4515.131 (Official Build) beta (64-bit)
-- | --
Revision | 6b8d6c56ce21e38a72f7c4becb5abc1fa5134f29-refs/branch-heads/4515@{#1933}
OS | Windows 10 OS Version 2009 (Build 19043.1165)

Verified no "jumping" audio-playing icon

[karenkliu]

@stephendonner Yes good catch! It should be reversed on dark theme. The reason is because we are keeping the change in contrast consistent for the same interaction in both themes: In light theme, it starts as high contrast (darker color) and goes to low contrast on hover (light color). In dark theme, it should also start as high contrast (lighter color) and go to low contrast on hover (darker color).