I think I prefer chrome's approach of adding opacity. The grey colors feel a bit impersonal/cold to me.
Did you mean for the editor breakpoints, or in the Breakpoints pane?
When discussing our options with Jaril we found a bunch of issues with using opacity to suggest "breakpoints are deactivated".
Core problem is that we're trying to convey up to 3 bits of information for a given marker:
- Column markers: 1) deactivated (style?), 2) disabled (
opacity: 0.6), 3) breakpoint opportunity (
- Gutter markers: 1) deactivated (style?), 2) disabled (
opacity: 0.6), 3) type (color variants)
We could use the same
opacity: 0.6 for disabled and "deactivated" breakpoints, but then when users are in "deactivated" mode and change the enabled/disabled state of a given breakpoint they won't see a change in a UI at all.
Using greyscale markers was a way to avoid this issue, but it does lose the type information (color).
So it depends which trade-off we want.
Another option is to stop users from enabling/disabling breakpoints when in "deactivated" mode. Then we can mark all breakpoints as "disabled".
- Affordance issue: the overall low opacity (
opacity: 0.3 or similar) like in Chrome suggests that the whole pane is disabled and can't be interacted with. Not quite: you can still interact with it normally. Tried it in Chrome, it feels really strange IMO.
- Accessibility: with partial opacity we end up way below WCAG contrast ratios.