Selected rows are too bright, due to a faulty CSS selector

RESOLVED FIXED in Firefox 67

Status

defect
RESOLVED FIXED
4 months ago
4 months ago

People

(Reporter: fvsch, Assigned: tanhengyeow)

Tracking

({regression})

67 Branch
Firefox 68

Firefox Tracking Flags

(firefox-esr60 unaffected, firefox66 unaffected, firefox67 fixed, firefox68 fixed)

Details

Attachments

(1 attachment)

In bug 1512757 we removed the file icons that had been added to the Netmonitor list as replacement for image previews, because as discussed in the bug and at Mozlando those icons did not reflect the "this is an image" info well and did not reflect other file types either.

There was a mistake we didn't catch in this patch:
https://searchfox.org/mozilla-central/diff/f83e8a116167625461f7f3c7f0c117f88eb3b95f/devtools/client/netmonitor/src/assets/styles/RequestList.css#245

We end up with this code, which should be deleted:

.request-list-item.selected {
  filter: brightness(1.3);
}

This filter makes the row too bright on both Light and Dark theme, and diminishes text-to-background contrast.

In the light theme, this gives us a contrast ratio of 3.0:1, instead of the normal 4.5:1.

Firefox 67 is affected. Since the fix is straightforward, it would be great to be able to have it in beta as well.

Attachment #9052532 - Attachment description: Bug 1537566 - Selected rows are too bright, due to a faulty CSS selector. r=Honza, fvsch → Bug 1537566 - Fix brightness of selected netmonitor rows; r=fvsch
Assignee: nobody → E0032242
Status: NEW → ASSIGNED

Hi Jan, we have a small CSS fix landing for Nightly but I wonder if we should try to land it in 67 as well? Not sure what the process is.

Flags: needinfo?(odvarko)

(In reply to Florens Verschelde :fvsch from comment #2)

Hi Jan, we have a small CSS fix landing for Nightly but I wonder if we should try to land it in 67 as well? Not sure what the process is.

We can request for uplift as soon as this bug lands in Nightly.
It should be very easy (given that this is just a very simple change)

Honza

Flags: needinfo?(odvarko)
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68

[Tracking Requested - why for this release]:

Visual regression introduced at the end of the 67 cycle, fixed on 68.

It messes up the contrast of the selected Netmonitor rows, with text-to-background contrast ending up below WCAG accessibility guidelines (3.14:1 instead of the expected 4.5:1):
https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0094FF
It would be great to avoid this accessibility issue in 67.

Comment on attachment 9052532 [details]
Bug 1537566 - Fix brightness of selected netmonitor rows; r=fvsch

Beta/Release Uplift Approval Request

  • Feature/Bug causing the regression: Bug 1512757
  • User impact if declined: Wrong color in Developer Tools Network panel
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: No
  • If yes, steps to reproduce:
  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Just small CSS change
  • String changes made/needed: n/a
Attachment #9052532 - Flags: approval-mozilla-beta?
Has Regression Range: --- → yes
Has STR: --- → yes
Keywords: regression

Comment on attachment 9052532 [details]
Bug 1537566 - Fix brightness of selected netmonitor rows; r=fvsch

Fix for a visual regression in devtools which has an a11y impact, safe CSS patch verified on Nightly, approved for 67 beta 5, thanks!

Attachment #9052532 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
You need to log in before you can comment on or make changes to this bug.