RDM UI dropdowns are hard to distinguish from content on Windows

NEW
Unassigned

Status

P3
normal
2 years ago
5 months ago

People

(Reporter: alfredkayser, Unassigned)

Tracking

53 Branch
All
Windows

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [rdm-v2])

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8820386 [details]
rdm_dropdown.jpg

See attached screenshot.
The new RDM style misses borders on the dropdowns which makes them unclear.
(Reporter)

Updated

2 years ago
OS: Unspecified → All
Hardware: Unspecified → All
Version: 48 Branch → 53 Branch
Are you using Windows, or some other OS?

In my testing macOS seems to show a drop shadow, but Windows doesn't.
Flags: needinfo?(alfredkayser)
Priority: -- → P3
Whiteboard: [rdm-v2]
(Reporter)

Comment 2

2 years ago
This indeed on Windows 10. No drop shadow nor any border.
I can't see why this dropdown has no border, as there is no specific styling to remove the border from the normal dropdowns.
Flags: needinfo?(alfredkayser)
Summary: Dropdowns are missing the border → RDM UI dropdowns are missing the border
OS: All → Windows
Summary: RDM UI dropdowns are missing the border → RDM UI dropdowns are hard to distinguish from content on Windows
These styles look like the culprit to me: https://dxr.mozilla.org/mozilla-central/source/devtools/client/responsive.html/responsive-ua.css

They were added, because by default, selects have an un-even border (2px left border): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/forms.css#421

An easy fix would be changing the rule in responsive-ua.css to be: `border-inline-start-width: 1px !important;`

Updated

5 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.