1915435 - Inspector color swatch checker background is not visible even on transluscent colors

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

This https://searchfox.org/mozilla-central/rev/45d6f8bf028e049f812aa26dced565d50068af5d/devtools/client/themes/inspector-swatches.css#84-98

.ruleview-colorswatch::before {
  content: '';
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

is supposed to add a checker background to the color swatch so when the color is transluscent, the user can spot it immediately.
Unfortunately, the negative z-index makes it invisible.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Note that this is broken since at least Firefox 70 (and maybe earlier, couldn't check on older versions)

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1915435 - [devtools] Show checker under transluscent colors in color swatch. r=#devtools-reviewers.

We used to show the checker but this regressed at some point.
A stacking context is needed to put the pseudo element which
contains the checker below the swatch, so we create it on
the swatch container.
We take this as an opportunity to cleanup the swatch rules,
using CSS variables to control swatch and background sizes.
This allows us to share the same classes for the computed panel
swatches, which only need a different size.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b42cc9156cad
[devtools] Show checker under transluscent colors in color swatch. r=devtools-reviewers,ochameau.

Comment 4

[Serban Stanca [:SerbanS]]

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