Conflict with extension "Indent Guides for Brackets" about brackets-show-whitespace

[DennisKehrig]

Thanks for letting me know! Sadly, I don't have time to look at this right now. Maaaaybe some time in June. I can't promise that, though.

[lkcampbell]

Dennis, first CodeMirror v3 ate your extension, and now your extension is eating my extension!

I will take a look at it and see if I figure out some sort of solution. Might need to figure out a way to make CodeMirror overlays behave with each other. Not sure if it is even possible but it's an interesting problem nonetheless.

[DennisKehrig]

Hey Lance, it's weird, right? "addOverlay" suggests multiple overlays can be added, spontaneously I'm surprised they would conflict. Well, I hope you will find the reason!

[lkcampbell]

I did some updates to Indent Guides today unrelated to this issue.

Now, my extension draws indent guides before every one of your white space dots, so now my extension has your extension surrounded! Muahahahah!

Seriously, though, I did look at this issue today. For some reason, my style is being applied to every one of your space character spans. It should only be applied to every 4th span (in the case where tab = four spaces).

I tried playing with my tokenizer but I can't really find anything wrong. I think I will run some simpler test cases this weekend and see if I can track down the specific problem.

To summarize, you might as well close this issue because your code is behaving correctly as far as I can tell. I will either fix it on my end or file a CodeMirror bug.

You can follow my progress at: lkcampbell/brackets-indent-guides#2

[DennisKehrig]

My extension comes in peace! It's waving a whitespace flag! Maybe I need an extension for that, too, cause clearly your extension can't see the flag. Make lines, not war!

[lkcampbell]

So, the reason why this is happening is because an overlay is just an application of a style to a span. Two overlays apply two styles to a span. For example, if I made an allSpacesRed overlay and you made an allSpaceBlue overlay, and they both got applied, all spaces would not be purple. Instead, the CSS specificity rules would kick in with its automagical algorithm, and make the spaces either red or blue.

We were both using pseudo-elements in our styles. Your style was more specific than mine. Your extension ate mine.

Since then, I changed my extension to use a repeating background-image style. It makes the lines smoother and, as an added bonus, no longer conflicts with your extension's style. So now, both styles can coexist and peace can reign for another thousand years.

The only problem now is this potential CodeMirror bug which is applying my style to every one of your matched spans. That's what is causing my extension to surround your extension. Once that is solved, the entire issue is solved.

[lkcampbell]

I fixed this bug in my extension.

[DennisKehrig]

Hey Lance, good idea for the solution! Does the background image work with changes in the font size?

Otherwise you could possible use :after instead of :before, if you only need one element for generated content...

[lkcampbell]

It does change with the font size. I just used a one pixel svg and repeat it vertically. Each segment is the height of the cursor automatically. I think there are only a few rare cases of font size where the segments don't completely connect.

The problem I found with using pseudo-elements is you can't change the height attribute value (actually, most of the attributes are immutable) so I would assign it an arbitrary em value to the height and the heights would jump all over the place when I changed the font size. Sometimes they would overlap, sometimes there were gaps, and sometimes it would be the correct size (but not very often). The image solution (a solution you actually suggested to me at some point) is definitely a better solution.

[DennisKehrig]

It's a bit tricky, but possible: with span.foo { position: relative } and span.foo:before { display: block; position: absolute; top: 0; bottom: 0 } you should get a pseudo element that is as high as its parent.

[lkcampbell]

Dennis, good to know :). You are definitely my "go to" guy for CSS questions.

BTW, you can probably close this issue. This was never a problem with your extension, it was a problem with mine.

[DennisKehrig]

But it keeps me in touch with you :)
Well, I suppose you'll find another way if need be ;)

[Gounlaf]

@DennisKehrig, Thanks for the time you spent !