search

codemirror / codemirror5

In-browser code editor (version 5, legacy)
http://codemirror.net/5/
MIT License
26.69k stars 4.96k forks source link

[Mac only] Hair cursor color should be white when using a dark theme. #2743

Open RaymondLim opened 9 years ago

RaymondLim commented 9 years ago
  1. Open http://codemirror.net/demo/theme.html in a browser.
  2. Select a dark theme like pastel-on-dark.
  3. Move mouse over text and look at the moving hair cursor.

Result: You can barely see the cursor since it is blended into the background color.

marijnh commented 9 years ago

Doesn't OS X make sure mouse cursors are visible on all types of backgrounds? If so, maybe we should simply remove the hair cursor feature again (I believe it was contributed by Adobe)?

peterflynn commented 9 years ago

@marijnh It sounds like you might be referring to the crosshair that appears when you hold down Alt? That wasn't contributed by Adobe, but also this bug is about something different -- Raymond is referring to the regular "I beam" mouse cursor that appears any time you mouse over CodeMirror or any other text field.

It does look like this is a Mac OS problem. Windows uses an XOR cursor for this, but Mac seems to use a fixed-color cursor that is hard to see on dark gray backgrounds. I can see the same problem with a plain textarea: http://jsfiddle.net/Qz7F2/

Judging by forum threads like this -- https://discussions.apple.com/message/17250405#17250405 -- it sounds like this is a fact of life on OS X, and the only solution is to supply a custom mouse cursor for widgets that you know have a dark background. (Which, according to the thread, TextMate and Sublime do already).

It looks like CSS cursor allows a url() value, so it might be plausible to do that in CodeMirror (and/or Brackets). We can investigate that and at least create the image assets. Is it something you think would be worth including in CM core?

marijnh commented 9 years ago

If you can create a reasonably tiny image url, we can just put it into codemirror.css, and have the dark themes use it.

Although, actually, that might be one of those things that are a pain to do with CSS -- the themes can't force an extra class, and so the style would have to be associated with the themes' classes by including it in every single theme file.

Maybe, though I am not fond of such hacks, use computedStyle to measure the background color, and add a 'cm-dark-theme' class based on that?

arrbie commented 9 years ago

We are still waiting for the "I beam" cursor to become visible in dark themes. There is a very pale shadow outline, but that is definitely not enough. We would really like a white "I beam" cursor. Any progress on this?

marijnh commented 9 years ago

Are you talking about the regular 'text' cursor when you say 'i beam'? Is that one also hard to spot on dark backgrounds on Macs? (Wasn't this company supposed to be good at design?)

marijnh commented 9 years ago

[Pointlessly abusive comment removed]

peterflynn commented 9 years ago

@arrbie Please see the links I posted above. This is a limitation of Mac OS -- every app that wants to not have this problem needs to supply its own solution. Chrome didn't do that extra work to fix this; that's not CodeMirror's fault or Brackets's fault. Though we could put in extra effort to work around it, every text field on the web would need the same workaround so it seems much more sensible for Chrome or the OS itself to fix this.

That said, it looks like OS X 10.10 or a recent version of Chrome has actually fixed this, since I don't see this bug anymore either Brackets, CodeMirror, or my simple JSFiddle link above.