Question

This thread was archived. Please ask a new question if you need help.

Developer Tools-Style Editor_change selected code text color

10 replies
1 has this problem
159 views
Last reply by JoeB

Duela 4 urte

20/3/2 15:26

This is about Style Editor, which uses different code for styling. The colors used in browser toolbox (Ctrl + Shft + Alt + I) *Style Editor* uses Code Mirror selectors. Due to less than perfect sight & the poor visibility / contrast colors of found search terms & several other things in Style Editor, I needed to change things.

I didn't have too much problem finding most of CM's CSS selectors for what I needed. In all the CSS files associated with code mirror in the dark theme, I haven't found how to change the foreground (text) color when selecting lines or sections of code.

In Linux, Style Editor's default selected background is almost the same as the body BG color (looking at the hex colors used, and just visually. This from codemirror.css in omni.ja, changes selected, unfocused background: .CodeMirror-selected {

 background: #D4E7F9 !important;

This changes the selected, focused BG color: .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {

  background-color: #E9ECD8 !important; }

But I've found nothing for foreground "color," to make the selected text legible through the light selected BG color I chose. Just adding "color: #0000FF !important;" - under the background property doesn't work (like many CSS styled UIs - especially text editors).

Is it possible that Code Mirror doesn't have a way to change the text color on selected areas? Most text editors I've tested usually have preference menu settings for things like selected - foreground & BG color. Or they have themes that add extra UI styling ability. The themes on code mirror's site don't seem to use selected foreground color (or just "color"). Maybe it doesn't understand that concept.

If the highlight BG color chosen for CM is fairly light with some transparency, you can read some darker syntax colors, but not all.

Using another text editor with better search, I looked & searched all files I could find that control some of Style Editor's / code mirror's colors.

The only thing I found where I could change selected text color was one rule for searching in Style Editor. It's in codemirror.css ... and it doesn't work that consistently for visibility. /chrome/devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css

The default colors (someone) used for search term matches have little contrast.

LINE 330: .cm-searching {

 background-color: rgba(255, 255, 170, 0.6) !important; /* The 1st BG value listed is for focused search result highlight.*/
 color: #0808E5 !important;
 background-color: rgba(2226, 253, 251, .6) !important; }

NOTE: I added the color property in ".cm-searching" - and it worked. Same trick doesn't work for any selection rules I tried. Codemirror's online manual is fairly spartan https://codemirror.net/doc/manual.html#styling

This is about Style Editor, which uses different code for styling. The colors used in browser toolbox (Ctrl + Shft + Alt + I) *Style Editor* uses Code Mirror selectors. Due to less than perfect sight & the poor visibility / contrast colors of found search terms & several other things in Style Editor, I needed to change things. I didn't have too much problem finding most of CM's CSS selectors for what I needed. In all the CSS files associated with code mirror in the dark theme, I haven't found how to change the foreground (text) color when selecting lines or sections of code. In Linux, Style Editor's default selected background is almost the same as the body BG color (looking at the hex colors used, and just visually. This from codemirror.css in omni.ja, changes selected, unfocused background: .CodeMirror-selected { background: #D4E7F9 !important; This changes the selected, focused BG color: .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background-color: #E9ECD8 !important; } But I've found nothing for foreground "color," to make the selected text legible through the light selected BG color I chose. Just adding "color: #0000FF !important;" - under the background property doesn't work (like many CSS styled UIs - especially text editors). Is it possible that Code Mirror doesn't have a way to change the text color on selected areas? Most text editors I've tested usually have preference menu settings for things like selected - foreground & BG color. Or they have themes that add extra UI styling ability. The themes on code mirror's site don't seem to use selected foreground color (or just "color"). Maybe it doesn't understand that concept. If the highlight BG color chosen for CM is fairly light with some transparency, you can read some darker syntax colors, but not all. Using another text editor with better search, I looked & searched all files I could find that control some of Style Editor's / code mirror's colors. The only thing I found where I could change selected text color was one rule for searching in Style Editor. It's in codemirror.css ... and it doesn't work that consistently for visibility. /chrome/devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css The default colors (someone) used for search term matches have little contrast. LINE 330: .cm-searching { background-color: rgba(255, 255, 170, 0.6) !important; /* The 1st BG value listed is for focused search result highlight.*/ color: #0808E5 !important; background-color: rgba(2226, 253, 251, .6) !important; } NOTE: I added the color property in ".cm-searching" - and it worked. Same trick doesn't work for any selection rules I tried. Codemirror's online manual is fairly spartan https://codemirror.net/doc/manual.html#styling

Chosen solution

Holy, Cannoli ! This has taken a long time. It's like that last bolt you have to remove on an engine. There's usually one that takes almost as much time as all the others, together. Some of the ways things work in Style Editor, or lack there of, look like things I might put together.

I finally found part of the problem - why search highlight colors (only in Style Editor) are so unruly.

The "search engine" in Style Editor apparently sucks (technical term). It doesn't have the capabilities of the other dev tools. Style Editor won't use a 2nd color for unfocused search matches (don't think). You also have to continually hit Ctrl+g to advance to next search hit instead of Enter or space bar.

It may have to do w/ Mozilla's tinkering, but using 2 .cm-searching background colors - one below the other, just uses the 2nd value for focused & unfocused matches.

And, Mozilla added a file, mozilla.css with code for codemirror searching. As you know, CSS code for Style Editor has ".cm-..." or, "CodeMirror-...." in the selectors. Plus the code from codemirror.css. Now we're trying to add more codemirror searching code to a userChrome.css file. Suffice to say, background colors I entered for search highlight were not what came out the other side.

Not sure if something for focused search hits would work, like .cm-searching .CodeMirror-focused .CodeMirror-selected { background-color: <focused color>,

I managed to make search matches visible - mostly by using a ti, uh, hot pink for text color & the border, under the highlighted background around search hit - color: #FF00ED !important;.

There's a very small amount of color or transparency difference in focused & unfocused search hits. Most wouldn't notice it.

I'm not sure if the code in mozilla.css can be overridden. I tried the usual tricks & didn't work. We could modify the codemirror.css & mozilla.css files in omni.ja, but the next Fx update would undo it.

👍 0

Answer 1 · 2020-03-02 15:26:27

cor-el

Moderator
Top 10 Contributor

20/3/3 12:37

I make the text bold for better readability as the normal colors are rather faint.

See also:

resource:///chrome/devtools/skin/
resource:///chrome/devtools/skin/light-theme.css

resource:///chrome/devtools/content/
resource:///chrome/devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css

.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
  background: rgb(185, 215, 253);
}

.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
  background: rgb(210, 210, 210);
}

.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
  background: rgba(185, 215, 253, .35);
}

Answer 2 · 2020-03-02 15:26:27

JoeB Question owner

20/3/4 07:05

Thanks. I have fonts set = bold, too (in another rule). That doesn't help much if the syntax color of something happens to be somewhat near the color of the selected text background.

You're using the light theme, which may? make selected text background color work a bit better? I have to use a dark theme.

I don't think the background you show:  .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 background: rgb(185, 215, 253); }

is actually placing the BG color BELOW the selected text, in this case.

Why? Because the very lite yellow selected text color I use w/ 0.6 alpha value, significantly dulls / fades almost all the syntax colors in Style Editor. If it was really underneath the dark text, it wouldn't reduce fairly dark colors' contrast.

A syntax color like med. gray / dark beige is barely visible - even using 0.6 alpha in rgba for pale yellow selected text BG. (affecting Style Editor).

The short workaround is use a very low rgba alpha value (.2) on the BG color.

It's no longer light yell (on black body BG color), but it's visible enough to easily see where highlighting begins / ends, and it hardly affects the color of selected code.

As for the question, "does Code Mirror (in Style Editor) have a hidden option to change foreground text color (to something contrasting) when selecting text (using what they call "background" color)? I think I answered it myself.

No, I don't think it does - not as it's configured in Fx devtools. Mozilla decided on some things to leave out, or even picking colors for you. There are several bugs, asking devs to change specific colors in Code Mirror, meaning it's not easy (or near impossible) for users to do.

CodeMirror.net has an addon listed, "mark-selection.js". Its demo shows normal change of text color when something is selected / highlighted. If codemirror had that ability, there'd be no need for the simple addon.

However, I didn't find details (anywhere) how or if addons could be installed when codemirror is embedded in an app like Fx. Discussions I found on using CM addons sounded like if using it as a stand alone editor.

FYI - everyone, codemirror.net has "themes" (CSS files) that change mostly syntax coloring (have previews). They would be editable. I think they'd have to replace the "default theme" in "codemirror.css," in omni.ja, then repack omni.ja.

Unless you wanted most of the default theme's colors changed, it'd be easier to copy the theme's code, then put it in the firefox profile folder: chrome_debugger-profile, in a userChrome.css file you create.

You can view codemirror.css contents by pasting: chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css, in Firefox's URL bar. It controls colors in Style Editor in devtools.

Thanks. I have fonts set = bold, too (in another rule). That doesn't help much if the syntax color of something happens to be somewhat near the color of the selected text background. You're using the light theme, which may? make selected text background color work a bit better? I have to use a dark theme. I don't think the background you show: .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ background: rgb(185, 215, 253); } is actually placing the BG color BELOW the selected text, in this case. Why? Because the very lite yellow selected text color I use w/ 0.6 alpha value, significantly dulls / fades almost all the syntax colors in Style Editor. If it was really underneath the dark text, it wouldn't reduce fairly dark colors' contrast. A syntax color like med. gray / dark beige is barely visible - even using 0.6 alpha in rgba for pale yellow selected text BG. (affecting Style Editor). The short workaround is use a very low rgba alpha value (.2) on the BG color. It's no longer light yell (on black body BG color), but it's visible enough to easily see where highlighting begins / ends, and it hardly affects the color of selected code. As for the question, "does Code Mirror (in Style Editor) have a hidden option to change foreground text color (to something contrasting) when selecting text (using what they call "background" color)? I think I answered it myself. No, I don't think it does - not as it's configured in Fx devtools. Mozilla decided on some things to leave out, or even picking colors for you. There are several bugs, asking devs to change specific colors in Code Mirror, meaning it's not easy (or near impossible) for users to do. CodeMirror.net has an addon listed, "mark-selection.js". Its demo shows normal change of text color when something is selected / highlighted. If codemirror had that ability, there'd be no need for the simple addon. However, I didn't find details (anywhere) how or if addons could be installed when codemirror is embedded in an app like Fx. Discussions I found on using CM addons sounded like if using it as a '''stand alone '''editor. FYI - everyone, codemirror.net has "themes" (CSS files) that change mostly syntax coloring (have previews). They would be editable. I think they'd have to replace the "default theme" in "codemirror.css," in omni.ja, then repack omni.ja. Unless you wanted most of the default theme's colors changed, it'd be easier to copy the theme's code, then put it in the firefox profile folder: '''chrome_debugger-profile''', in a userChrome.css file you create. You can view codemirror.css contents by pasting: chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css, in Firefox's URL bar. It controls colors in Style Editor in devtools.

Answer 3 · 2020-03-02 15:26:27

cor-el

Moderator
Top 10 Contributor

20/3/4 09:54

There is a dark-theme.css file.

https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/dark-theme.css

I see what you mean with the BG selection color.

These rules in codemirror.css and variables.css seem to apply.

resource://devtools/client/themes/variables.css

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
    background: 
    #d7d4f0;
}
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
    background: #d7d4f0;
}
::selection {
    background-color: var(--theme-selection-background);
    color: var(--theme-selection-color);
}

Answer 4 · 2020-03-02 15:26:27

JoeB Question owner

20/3/5 09:22

Chosen Solution