When project.showInvisibles is true; spaces, tabs and newlines are visible

src/app/edit-session.coffee

@@ -35,11 +35,12 @@ class EditSession
   cursors: null
   selections: null
   autoIndent: false # TODO: re-enabled auto-indent after fixing the rest of tokenization
+  tabLength: null
   softTabs: true
   softWrap: false
-  tabLength: null
+  showInvisibles: false
 
-  constructor: ({@project, @buffer, @tabLength, @autoIndent, @softTabs, @softWrap}) ->
+  constructor: ({@project, @buffer, @tabLength, @autoIndent, @softTabs, @softWrap, @showInvisibles}) ->
     @id = @constructor.idCounter++
     @softTabs ?= true
     @languageMode = new LanguageMode(this, @buffer.getExtension())

src/app/editor.coffee

@@ -873,12 +873,13 @@ class Editor extends View
     attributePairs.push "#{attributeName}=\"#{value}\"" for attributeName, value of lineAttributes
     line.push("<pre #{attributePairs.join(' ')}>")
 
-    if screenLine.text == ''
-      line.push('&nbsp;')
-    else
-      for token in screenLine.tokens
-        updateScopeStack(token.scopes)
-        line.push(token.escapeValue())
+    for token in screenLine.tokens
+      updateScopeStack(token.scopes)
+      line.push(token.escapeValue(@activeEditSession.showInvisibles))
+
+    if @activeEditSession.showInvisibles
+      line.push("<pre class='invisible'>¬</pre>")
+
     line.push('</pre>')
     line.join('')
 

src/app/token.coffee

@@ -5,8 +5,9 @@ class Token
   value: null
   scopes: null
   isAtomic: null
+  isTab: null
 
-  constructor: ({@value, @scopes, @isAtomic, @bufferDelta, @fold}) ->
+  constructor: ({@value, @scopes, @isAtomic, @bufferDelta, @fold, @isTab}) ->
     @screenDelta = @value.length
     @bufferDelta ?= @screenDelta
 
@@ -24,20 +25,30 @@ class Token
   breakOutTabCharacters: (tabLength) ->
     return [this] unless /\t/.test(@value)
 
+    tabText = new Array(tabLength + 1).join(" ")
     for substring in @value.match(/([^\t]+|\t)/g)
       if substring == '\t'
-        @buildTabToken(tabLength)
+        new Token(value: tabText, scopes: @scopes, bufferDelta: 1, isAtomic: true, isTab: true)
       else
         new Token(value: substring, scopes: @scopes)
 
   buildTabToken: (tabLength) ->
     tabText = new Array(tabLength + 1).join(" ")
-    new Token(value: tabText, scopes: @scopes, bufferDelta: 1, isAtomic: true)
 
-  escapeValue: ->
-    @value
+  escapeValue: (showInvisibles)->
+    return " " if @value == ""
+
+    value = @value
       .replace(/&/g, '&')
       .replace(/"/g, '"')
       .replace(/'/g, ''')
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')
+
+    if showInvisibles
+      if @isTab
+        value = "▸" + value[1..]
+      else
+        value = value.replace(/[ ]+/g, "•")
+
+    value