1693384 - WebRTC camera and active playback icon spacing should be optimized for Proton

Status: VERIFIED FIXED

(Firefox :: Theme, enhancement, P2)

Description

[Sören Hentzschel]

Attachment: screenshot

(filed as requested on chat.mozilla.org)

As you can see in the attached screenshot there is almost no spacing between the PIP and the active playback icons in the Proton tab. The colors are also very different but I am not sure if you see this as a problem. I can't propose a concrete solution but I guess something should be done to achieve a visual more appealing result for the active playback + picture in picture use case.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

This should get fixed by fixing bug 1693066.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

We could probably add a pixel or two more separation here.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Since bug 1693066, we no display a Picture In Picture icon, and we place all media icons (muted, playing, autoplay blocked) in the center of the favicon area, so this bug is now fixed/invalid.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

I missed the case of audio playing with WebRTC active.

See https://webrtc.github.io/samples/src/content/devices/input-output/ to reproduce.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1693384 - Move over pinned and overlay audio icon to move it away from the tab title.

Also update the icons to add background strokes when used as an overlay.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b8f7bee95415
Move over pinned and overlay audio icon to move it away from the tab title. r=desktop-theme-reviewers,harry

Comment 8

[Cosmin Sabou [:CosminS]]

Backed out for causing build bustages.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=b8f7bee954159b787365cf4b8a8e48cd86c93c36&selectedTaskRun=T__1flflSGu4tcAyf3CF5Q.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=337788157&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/715dbe8fb62a9fe866a861af6a4d122751c16c19

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5d69d822f586
Move over pinned and overlay audio icon to move it away from the tab title. r=desktop-theme-reviewers,harry

Comment 11

[Narcis Beleuzu [:NarcisB]]

Backed out for bc failure on browser_parsable_css.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/6a97950a60a6daa2275c776c817c764143806c4d
Log link: https://treeherder.mozilla.org/logviewer?job_id=337871406&repo=autoland&lineNumber=2344

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f57b728d597b
Move over pinned and overlay audio icon to move it away from the tab title. r=desktop-theme-reviewers,harry

Comment 13

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/f57b728d597b

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 9218454 [details]
Bug 1693384 - Move over pinned and overlay audio icon to move it away from the tab title.

Beta/Release Uplift Approval Request

• User impact if declined: Required for MR1/Proton
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Open and play a YouTube video
  Pin the tab
  Check that the playing icon is not positioned awkwardly over the site favicon
  Hover the icon and make sure that nothing looks out of the ordinary
  Mute the tab
  Check that the muted icon is not positioned awkwardly over the site favicon
  Hover the icon and make sure that nothing looks out of the ordinary
  Unpin the tab
  Go to https://webrtc.github.io/samples/src/content/devices/input-output/
  Check that the audio playback icon has enough space separation between the icon and the site label
  Hover the icon and make sure that nothing looks out of the ordinary

Repeat the above in the Light and Dark theme

• List of other uplifts needed: Bug 1706096
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): CSS and icon changes only
• String changes made/needed: none

Comment 15

[Hani Yacoub, Desktop QA]

Playing icon on pinned tabs looks the same as before but with a different icon which looks a bit smaller. The "awkward positioning" over the site favicon still persists since we aren't aware of other type of positioning that we should expect.

Due to the new small playing/mute icon you barely could see if the tab is muted or unmuted especially on macOS.
On Ubuntu using system theme playing/mute icon is not visible. Logged a new bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1708154

I confirm that the audio playback icon has enough space separation between the icon and the site label on Windows 10 x64, macOS 10.15, Ubuntu 20.04 and on Windows 7 x64.

Comment 16

[Pascal Chevrel:pascalc]

Comment on attachment 9218454 [details]
Bug 1693384 - Move over pinned and overlay audio icon to move it away from the tab title.

Approved for 89 beta 6, thanks.

Comment 17

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/a6b52ef85720

Comment 18

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Hani Yacoub from comment #15)

Due to the new small playing/mute icon you barely could see if the tab is muted or unmuted especially on macOS.
On Ubuntu using system theme playing/mute icon is not visible. Logged a new bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1708154

Thanks, I'll investigate Ubuntu.

Comment 19

[Hani Yacoub, Desktop QA]

Also logged bug 1708426 can't clearly distinguish if the pinned tab is playing or muted.

Comment 21

[Hani Yacoub, Desktop QA]

Verified as fixed on Windows 10 x64, macOS 10.15, Ubuntu 20.04 and on Windows 7 x64.