RFC: unifying syntax colors between CodeMirror and Reps

[fvsch]

It looks like we currently have 2 color themes for code or code-like objects:

• CodeMirror styles (split into a few different files)
• Reps colors (used by Reps and sometimes by other components)

See #103 (comment) for a tiny bit of exploration. We also probably have some specific styles in Inspector (Markup, Rules) and a bunch of other places.

It leads to situations where strings can be dark blue (CodeMirror) or bright magenta (Reps), while we also use magenta for keywords like function, const, return etc. (CodeMirror).

It might be interesting to harmonize the colors of CodeMirror and Reps.

And since we're not sure we'll keep CodeMirror in the future (e.g. if moving to Monaco), I suggest creating a CSS module that defines CSS variables for light/dark themes for different data/keyword types, and then match them to Reps and CodeMirror selectors.

So something like:

/* devtools/client/shared/syntax-colors/colors.css */
.theme-light {
  --theme-syntax-number-color: var(--green-70);
}

/* devtools/client/shared/syntax-colors/codemirror.css */
.cm-s-mozilla .cm-number {
  color: var(--theme-syntax-number-color);
}

/* devtools/client/shared/components/reps/reps.css */
.objectBox-number {
  color: var(--theme-syntax-number-color);
}

And I'd like retiring the variables defined by Reps, and the use for syntax coloring of --theme-highlight-* variables whose values have changed a lot over time (red is magenta, purple is blue, etc.):

/* Current devtools/client/shared/components/reps/reps.css */
.theme-dark,
.theme-light {
  --number-color: var(--theme-highlight-green);
  --string-color: var(--theme-highlight-red);
  --null-color: var(--theme-comment);
  --object-color: var(--theme-highlight-blue);
  --caption-color: var(--theme-highlight-blue);
  --location-color: var(--theme-comment);
  --source-link-color: var(--theme-highlight-blue);
  --node-color: var(--theme-highlight-purple);
  --reference-color: var(--theme-highlight-blue);
  --comment-node-color: var(--theme-comment);
}

[digitarald]

I suggest creating a CSS module that defines CSS variables for light/dark themes for different data/keyword types, and then match them to Reps and CodeMirror selectors.

That sounds great and a lot more semantic than the current copy-pasta. Product-wise unifying the color palette should reduce the UI noise somewhat.

[digitarald]

cc @nchevobbe @violasong for input.

[fvsch]

User request: differentiating object keys and values

[violasong]

Re: keys/values, on Discourse, I mentioned

I’ve been moving to a pattern of blue key and black/white value, and it would be great to have that here.

Here's an example in the Network sidebar.

The blue/pink pattern was borrowed from the Inspector CSS syntax coloring, which was inspired by the HTML coloring. I think it works fine in the HTML/CSS schemes, but in the case of long lists of key/values as seen in Network/Console, especially when the value strings are lengthy like in Network, the magenta gets tough to read because of how bright it is. Moving to blue/(black|white) would keep it more neutral-looking, while still providing high contrast between the keys/values.

[digitarald]

@jasonLaster @nchevobbe what do you think about less-purple reps styling?

I’ve been moving to a pattern of blue key and black/white value, and it would be great to have that here.

One aspect from Discourse that isn't covered is that keys of child objects in an inspected object and not blue in Chrome but gray; which helps reducing the color bursts. It seems right now the work just focused on toning down the string values, correct?

How would this be applied to