Closed Bug 1816589 Opened 1 year ago Closed 1 year ago

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

Categories

(Firefox :: Messaging System, defect, P2)

defect

Tracking

()

VERIFIED FIXED
113 Branch
Iteration:
113.1 - Mar 13 - Mar 24
Tracking Status
firefox113 --- verified

People

(Reporter: aminomancer, Assigned: aminomancer)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

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

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).

Severity: -- → S4
Priority: -- → P2
Iteration: --- → 112.1 - Feb 13 - Feb 24

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

Assignee: nobody → shughes
Status: NEW → ASSIGNED
Iteration: 112.1 - Feb 13 - Feb 24 → 112.2 - Feb 27 - Mar 10
Iteration: 112.2 - Feb 27 - Mar 10 → 113.1 - Mar 13 - Mar 24
Attached image Before/after animation

Before/after animation

Pushed by shughes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/db987deda1fc
Make FeatureCallout box shadow consistently dark. r=hanna_a
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 113 Branch
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: