2018276 - Tab note background colour is incorrect for default light theme

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect, P3)

Description

[Amy Lee [:amylee] UX]

Attachment: Screenshot

Steps to reproduce [can add screenshots or video recordings for reference]:

Create a tab note in default light theme

Expected behavior [What should have happened?]:

Colour should be Violet 0 (#F4F0FF)

Actual behavior [What actually happened?]:

Colour is light grey (default token)

*Note: For custom themes we should default to toolbar_field token colour

Comment 1

[Amy Lee [:amylee] UX]

Attachment: Spec

Comment 2

[Stephen Thompson [:sthompson]]

The background for the tab note hover panel is defined as a CSS variable here https://searchfox.org/firefox-main/rev/e49de7d10506041f63f620dc80088f3fb37901dd/browser/themes/shared/tabbrowser/tab-hover-preview.css#107 and used as background-color here https://searchfox.org/firefox-main/rev/e49de7d10506041f63f620dc80088f3fb37901dd/browser/themes/shared/tabbrowser/tab-hover-preview.css#120.

Currently, its light mode value is rgba(0, 0, 0, 0.05) (a 5% transparency black), making it appear light gray. The spec defines a light mode color "Violet 0 (#F4F0FF)". Instead of hardcoding this value, you should use the value of the CSS variable --color-violet-0 which is defined in https://searchfox.org/firefox-main/rev/e49de7d10506041f63f620dc80088f3fb37901dd/toolkit/themes/shared/design-system/dist/tokens-shared.css#246 as a design token color value. Using var(--color-violet-0) instead of hardcoding it helps ensure that our use of colors in Firefox is consistent.

We only want to use the violet color when the user is not using a custom theme and when the user is using light mode. The expected values should be:

• if no custom theme and light mode: var(--color-violet-0)
• if user is using High Contrast Mode (@media (prefers-contrast)): transparent
• otherwise: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));

If there is a custom theme active in Firefox, the root element of the browser will have an lwtheme attribute. See https://searchfox.org/firefox-main/search?q=lwtheme&path=*.css&case=true&regexp=false for examples of using :not([lwtheme]) to select when there is no custom theme active.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme allows you to detect the light or dark mode of the browser.

In order to test, you can enable the tab notes feature by opening about:config and setting browser.tabs.notes.enabled to true. Right-click a tab with a web page, choose "Add Note," and save a note with some text. You can see this tab note panel by hovering your mouse over the tab note icon on the tab.

NOTE: We're only looking for a patch to update the default light mode background color. We considered using the custom theme toolbar_field color here, but decided against it because custom themes can have different light and dark modes in different parts of the Firefox UI, so it's possible to end up with unreadable combinations of text and background color in the tab note panel.

Comment 3

[konyhéa]

Hii, can I work on this?

Comment 4

[japandi]

HI please assign me !1

Comment 5

[ROSHAAN]

Hello, Can I work on it? It will be my first bug to solve.
Thank You!

Comment 6

[jonathancabera]

Requesting to have this bug assigned to me.

Comment 7

[Kelly Cochrane [:kcochrane]]

I'm going to assign this to ROSHAAN because they have not made any contributions yet. :japandi I've assigned you to a different bug (bug 2015071)

Comment 8

[ROSHAAN]

Attachment: Bug 2018276 - Use --color-violet-0 for tab note hover panel in light mode r=kcochrane

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6fcae532ae2d
https://hg.mozilla.org/integration/autoland/rev/14c1ee3674c2
Use --color-violet-0 for tab note hover panel in light mode r=kcochrane,desktop-theme-reviewers,tabbrowser-reviewers,sthompson

Comment 10

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/14c1ee3674c2

Comment 11

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/14c1ee3674c2