Change selection drawing.

[gruehle]

Selection is drawn as highlight rectangles behind the text. There are at most three rectangles drawn - one for the first partial line, one for the last partial line, and one for the block of lines in between. Selection is now true block selection, where the highlight extends to the right edge of the window.

The attached code is covered by the MIT license as follows.

---

Copyright ©2012 Adobe Systems Incorporated. All Rights Reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[marijnh]

This is interesting! I'll have to do a deeper review before I merge it, though, which I won't get to until next week.

[marijnh]

Merged, with a rather invasive set of revisions made in 21d8d39 . Please test!

[peterkroon]

Seem like the LESS mode fails.
Unable so make a selection. Tested in Canary. Would this be a mode bug or a lib bug?
http://codemirror.net/mode/less/index.html

[gruehle]

There are two issues with themes:

1. The span.CodeMirror-selected selectors needs to be renamed
   .CodeMirror-selected
2. Selection is not visible when using themes that specify a background
   color, like "night". This is due to the z-index: -1 on the selection pre,
   which causes the selection to be drawn behind the opaque background. I had
   the same approach in my original change (with the z-index set on the div
   instead of the selection pre/spans) and noticed the same problem.

The second issue is the reason why the LESS mode demo fails to show the
selection.

Everything else looks good so far! I'll do more testing on different
browsers and let you know if I find any other issues.

Glenn

[marijnh]

Pushed some things that seem to fix these in 6a00b5c

[peterkroon]

Go to: http://codemirror.net/demo/theme.html
Select theme rubyblue and then select the entire find function in the editor.
Now change theme to default. The selection does not get updated.

[gruehle]

Other than the issue Peter mentioned, everything else looks good. I tried Chrome, Firefox, Safari, IE8 & IE9.

[gruehle]

I did find one more issue:

• Go to the theme demo: http://codemirror.net/demo/theme.html
• Enter a large amount of text (I used the text from codemirror.js)
• Click+drag from the bottom of the text. Move the mouse to the top part of the window where it says "CodeMirror: Theme demo". This should start a scrolling drag selection.

Eventually the scrolling will stop and you will not be able to move the selection up any more. Note that this can be a bit hard to reproduce, but seems to happen more quickly when you keep moving the mouse while the text is scrolling.

[peterkroon]

I was able to experience this only once. Just before I reported.
I think this is a bug because you mention and experience this as well.
Just tried it again at http://codemirror.net/mode/coffeescript/index.html.
When selecting text from bottom to top and moving the mouse on the h1 tag, randomly/suddenly the selecting stops/breaks and at the top left of the editor there is an extra 2px line and at the bottom 1px line. The line appears from left to right and hangs over on the left side of the editor.
View this screenshot: http://5060.nl/codemirror/Knipsel_001.JPG

Edit: the 2 lines are supposed to hang over.....

[marijnh]

Pushed two more patches that (seem to) address the drag-select and theme-change issues.

[peterkroon]

Go to: http://codemirror.net/demo/folding.html
Select line 9-14 click on the gutter at line 10 to fold and click again to unfold.
The selection has changed.

[marijnh]

That is mostly by design, and worked the same before this change -- bounds of the selection can not sit in hidden lines. Though it did behave in a kind of surprising way by putting the cursor somewhere in the middle of the line after the hidden block, rather than at the start. I've pushed a patch to fix that.

[gruehle]

Go to: http://codemirror.net/demo/theme.html
Make a selection.
Resize the window horizontally until the size of the CodeMirror instance is changed.
Result: the right edge of the last line of the selection bounces around while the window is resized.

The drag selection bug is fixed!

[marijnh]

You say 'bounces around' -- does it move more than a single pixel for you?

This seems hard to work around. I initially set a width on the selection DIVs, which would cause similar behavior to happen when the start of the selection (on the same line as the end) was moved. The source of this appears to be rounding errors, where browsers report offsets in whole pixels but actually sub-pixel render them.

One workaround would be to overlay the colored selection with another white DIV, with both having a left set to a hard number of pixels, and a right: 0 to extend all the way to the right. But this seems too kludgy to be justified for such a small annoyance.

[gruehle]

It's definitely moving more than one pixel for me. If I resize the window quickly, I can get it to move about 50 pixels.

It is most noticeable on WebKit browsers (Chrome, Safari). I've only tested OSX.

[peterkroon]

Found another bug.
For example go to: http://codemirror.net/mode/groovy/index.html
Make a selection. To unselect selection click on the selection.
When selection get unselected the editor gets an orange line/field which appears very shortly.
Is this because of tabindex or because of this new drawing.

Edit: found in Canaray W7

Edit: focus also happens when right clicking the editor

[peterkroon]

Well, when tabindex is removed the "bug" disappears. So it's not a related to the new drawing method.