search

firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

RFC: unifying syntax colors between CodeMirror and Reps #115

Open fvsch opened 4 years ago

fvsch commented 4 years ago

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

See https://github.com/firefox-devtools/ux/issues/103#issuecomment-587544000 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 commented 4 years ago

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 commented 4 years ago

cc @nchevobbe @violasong for input.

fvsch commented 4 years ago

User request: differentiating object keys and values

violasong commented 4 years ago

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 commented 4 years ago

@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

image