1816589 - Feature Callout box shadow is too bright to see in dark mode

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P2)

Description

[Shane Hughes [:aminomancer]]

STR

1. Enable the dark theme
2. Load a feature callout e.g. in about:firefoxview

Expected

Box shadow on the callout and arrow should be about as visible as it is in light mode

Actual

The color is so close to the page background that it's effectively invisible

Comment 1

[Shane Hughes [:aminomancer]]

Actually, the arrow's shadow and the callout's shadow are both rgba(0, 0, 0, 0.15) (irrespective of color scheme) but with different blur radii, which are both dark enough to see, but the callout's is covered up by another shadow on .main-content: 0 2px 14px rgba(58, 57, 68, 0.2);

Removing it basically fixes this issue, but I think the best solution is to remove both of those box shadows and put one box shadow on the container, .onboardingContainer.featureCallout#root, as that keeps the shadow from casting on the bottom arrow (::after). It doesn't matter currently as the bottom arrow is invisible except for its own box shadow, but I have a fix in the works for the focus ring not appearing on the arrow, and it works by moving the border/focus ring to the bottom arrow (as opposed to the top arrow).

Comment 2

[Shane Hughes [:aminomancer]]

Will deal with this one after bug 1815501, since the approach here depends on changes there

Comment 3

[Shane Hughes [:aminomancer]]

Attachment: Bug 1816589 - Make FeatureCallout box shadow consistently dark. r=#omc-reviewers

Comment 4

[Shane Hughes [:aminomancer]]

Attachment: Before/after animation

Before/after animation

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/db987deda1fc
Make FeatureCallout box shadow consistently dark. r=hanna_a

Comment 6

[Sandor Molnar[:smolnar]]

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

Comment 7

[Ina Popescu, Desktop QA]

Attachment: callout box in 112.0b1 vs 113.0b9.png

I've visually compared the callout box in about:firefoxview when using Firefox 112.0b1 and Firefox 113.0b9 with the Dark theme enabled.
Marking this as VERIFIED because the callout box is consistent to the other sections Tab pickup and Recently closed in about:firefoxview in the latest Firefox version.