Feature Request: show all white-space about brackets-show-whitespace

[DennisKehrig]

I agree, I want it to do more, too!
I know your "why" question is rhetorical, but still: the initial motivation was to have an easier time testing the TabToSpace extension by David Deraedt.

Showing all white-space should be fairly easy to implement. I'm more wondering about what the UI should look like - I'd like to have an option to show indentation white-space only, i.e. to switch back and forth between showing all white-space and showing indentation white-space. But two menu entries for such a small feature seems excessive. Any thoughts on this on your end?

Another question I'd like to ask is something Jonathan Diehl proposed, namely what Sublime Text does: just highlight white-space in selected parts of the code. No setting to turn on and off. Would you like that, too? I can see pros and cons for it.

[redmunds]

Too funny! I am making a pass through all of the extensions on the Brackets Extensions page, and I opened up Visual Studio to test David Deraedt's TabToSpace extension, and then I saw yours :) . I should change the order that they appear on that page!

I like the idea of only highlighting white-space in selected text. You're really only interested in what you can see at any one time. If you want to page through the entire file, then you can "select all".

As far as the UI, Brackets needs a Preferences dialog. After we have one, it will be easy to add other Preferences, but nobody wants to be the one to create it :) . Eventually we'll get there.

[DennisKehrig]

Hey there! I took a first stab at showing all whitespace today. Wasn't as easy as I thought it would be.
It's in the branch issue-1 (9a5a6ca)

[redmunds]

Very cool! I can really notice the slowdown, but I think it's the kind of thing that you'd only turn on temporarily, anyway.

A few observations:

• Tab chars are displayed whether "Show Indentations" is on or off!
• the glyphs used to whitespace are colored differently based on syntax coloring. I don't remember seeing it done that way, so I'm not sure if that's a bug or a feature :)
• I have seen some tools display something at the end of the line to show CR, LF, or CRLF

[DennisKehrig]

Thank you for your review!

The part about the slowdown is especially interesting. I tried to be efficient, but I only adhered to bits and pieces about what is supposedly fast (i.e. concatenating strings by putting them in an array and calling join rather than using +, avoiding regular expressions). Instead I should do some benchmarking. There are probably some optimizations I could do.
Just to clarify: do you mean slower than the version before or just slower than without visualizing whitespace?

1. True, so far I only focused on correctly identifying and marking whitespace.
2. Are you sure? Whitespace in the indentation should be grey, other whitespace should be hot pink. This is so I can see at a glance that the whitespace is categorized correctly (so I can later support an option to switch between indentation only or everywhere). If it is indeed sensitive to syntax coloring (not my observation so far), can you provide a code example for me to reproduce this? Thanks!
3. I thought about this as well. This is not as straightforward - so far I'm modifying the output of CodeMirror's _Line.getHTML, and that doesn't contain information about the kind of line endings that were used. It even creates a space at the end of lines if the cursor is placed there which might cause even more trouble. But it's an interesting feature.

Another thing I thought of yesterday is maybe visualizing trailing whitespace in a different way. One rarely wants whitespace at the end of a line. On the other hand, when it is wanted, getting warned about it is annoying, and when it is not wanted, it usually isn't a problem either. What do you think?

[redmunds]

For performance, I was comparing to "Show Indentations" tuned off. Also, you'll need to update the name of the menu item when you show more than indentation.

1. You're right. I saw different colors and assumed it was the syntax coloring.
2. I noticed a bug that may be related to this: If line has only a single space char it's not displayed.

I can't think of a case where whitespace at the end of a line would ever be desirable, so I'd always want to see it.

Here's another idea: for people that always uses spaces, they might like to see "show me all whitespace other than spaces". You'd have to display something for CRLF so you could see spaces at the end of a line.

I also created a test file with a bunch of other non-alphanumeric chars to see what your extension would do. It's not what I was hoping for, but it's a problem with Brackets, so I opened this issue: adobe/brackets#1760 . Let me know if you want me to send you the test file.

[DennisKehrig]

The single space issue is indeed the result of CodeMirror adding a space to empty lines, presumably so the pre tag actually has a height. So if a line contains only one space, I ignore it, which unfortunately also means ignoring legitimate single space lines.

Assuming I visualize line breaks, I'd need direct access to the raw line (I'm worried about the performance impact of that), and then I would be able to distinguish the two cases of single space lines in the output.

One case were trailing whitespace is useful is Jade templates:

span.foo Hello
span.bar World

would render as:

<span class="foo">Hello</span><span class="bar">World</span>

which on the screen would appear as:

HelloWorld

Adding a space at the end of the first line is an easy way out, although the space is then contained in the span tag:

<span class="foo">Hello </span><span class="bar">World</span>

Adding another space before World would be ignored. The most proper way would be this:

span.foo Hello
| 
span.bar World

The pipe sign is for plain text. But there HAS to be a space after the pipe because otherwise the pipe character would be added literally - it's meant to be used like this: "| bla bla bla".

Yes, please send me the test file! I only deal with spaces and tabs so far.

[DennisKehrig]

Hey @redmunds,

the master branch now has the changes from issue-1, plus more:

• I renamed the extension
• The same color is used for all whitespace
• Lines with a single space are now properly visualized

I tried restricting the visualization to selected text, but that's not easy since CodeMirror implements selection in a custom manner - neither via browser-based selection (which I could exploit via CSS) nor via modifying the HTML output of the lines (to which I already have access), so I'd need to find a way to get the selection offsets and compare these (could be simple, but right now I don't have a straightforward way to access the CodeMirror object).
An alternative would be to set the whitespace visualization color to the background, so it's only visible when the selection creates some contrast. It's plain white then, though, I didn't like it.

[redmunds]

Verified Fix. Closing.

[itswil]

My 2 pence:

http://i.imgur.com/JUH0sUD.png
Top image: Brackets on text selection (sprint 22 experimental build 0.22.0-6428)

Bottom image: Sublime Text 2 on text selection;
Tabs are represented with a horizontal bar, spaces are represented with a dot.