Bug 910183 - Highlight trailing space in the editor. r=msucan

browser/app/profile/firefox.js

@@ -1150,10 +1150,14 @@ pref("devtools.tilt.enabled", true);
 pref("devtools.tilt.intro_transition", true);
 pref("devtools.tilt.outro_transition", true);
 
-// The maximum number of recently-opened files stored.
+// Scratchpad settings
-// Setting this preference to 0 will not clear any recent files, but rather hide
+// - recentFileMax: The maximum number of recently-opened files
-// the 'Open Recent'-menu.
+//                  stored. Setting this preference to 0 will not
+//                  clear any recent files, but rather hide the
+//                  'Open Recent'-menu.
+// - showTrailingSpace: Whether to highlight trailing space or not.
 pref("devtools.scratchpad.recentFilesMax", 10);
+pref("devtools.scratchpad.showTrailingSpace", false);
 
 // Enable the Style Editor.
 pref("devtools.styleeditor.enabled", true);

browser/devtools/jar.mn

@@ -36,6 +36,7 @@ browser.jar:
     content/browser/devtools/codemirror/htmlmixed.js                   (sourceeditor/codemirror/htmlmixed.js)
     content/browser/devtools/codemirror/clike.js                       (sourceeditor/codemirror/clike.js)
     content/browser/devtools/codemirror/activeline.js                  (sourceeditor/codemirror/activeline.js)
+    content/browser/devtools/codemirror/trailingspace.js               (sourceeditor/codemirror/trailingspace.js)
     content/browser/devtools/codemirror/matchbrackets.js               (sourceeditor/codemirror/matchbrackets.js)
     content/browser/devtools/codemirror/closebrackets.js               (sourceeditor/codemirror/closebrackets.js)
     content/browser/devtools/codemirror/comment.js                     (sourceeditor/codemirror/comment.js)

browser/devtools/scratchpad/scratchpad.js

@@ -29,6 +29,7 @@ const EVAL_FUNCTION_TIMEOUT      = 1000; // milliseconds
 const SCRATCHPAD_L10N = "chrome://browser/locale/devtools/scratchpad.properties";
 const DEVTOOLS_CHROME_ENABLED = "devtools.chrome.enabled";
 const PREF_RECENT_FILES_MAX = "devtools.scratchpad.recentFilesMax";
+const SHOW_TRAILING_SPACE = "devtools.scratchpad.showTrailingSpace";
 
 const VARIABLES_VIEW_URL = "chrome://browser/content/devtools/widgets/VariablesView.xul";
 
@@ -1487,6 +1488,7 @@ var Scratchpad = {
       mode: Editor.modes.js,
       value: initialText,
       lineNumbers: true,
+      showTrailingSpace: Services.prefs.getBoolPref(SHOW_TRAILING_SPACE),
       contextMenu: "scratchpad-text-popup"
     });
 

browser/devtools/sourceeditor/codemirror/README

@@ -45,6 +45,7 @@ in the LICENSE file:
  * clike.js
  * matchbrackets.js
  * closebrackets.js
+ * trailingspace.js
  * search/match-highlighter.js
  * search/search.js
  * search/searchcursor.js

browser/devtools/sourceeditor/codemirror/mozilla.css

@@ -80,4 +80,11 @@ selector in floating-scrollbar-light.css across all platforms. */
 
 .CodeMirror-gutter-elt {
   transform: translate(0,-50%);
+}
+
+.cm-trailingspace {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==");
+  opacity: 0.75;
+  background-position: left bottom;
+  background-repeat: repeat-x;
 }

browser/devtools/sourceeditor/codemirror/trailingspace.js

@@ -0,0 +1,19 @@
+(function() {
+  "use strict";
+
+  CodeMirror.defineOption("showTrailingSpace", true, function(cm, val, prev) {
+    if (prev == CodeMirror.Init) prev = false;
+    if (prev && !val)
+    cm.removeOverlay("trailingspace");
+    else if (!prev && val)
+    cm.addOverlay({
+      token: function(stream) {
+        for (var l = stream.string.length, i = l; i && /\s/.test(stream.string.charAt(i - 1)); --i) {}
+        if (i > stream.pos) { stream.pos = i; return null; }
+        stream.pos = l;
+        return "trailingspace";
+      },
+      name: "trailingspace"
+    });
+  });
+})();

browser/devtools/sourceeditor/editor.js

@@ -47,7 +47,8 @@ const CM_SCRIPTS  = [
   "chrome://browser/content/devtools/codemirror/css.js",
   "chrome://browser/content/devtools/codemirror/htmlmixed.js",
   "chrome://browser/content/devtools/codemirror/clike.js",
-  "chrome://browser/content/devtools/codemirror/activeline.js"
+  "chrome://browser/content/devtools/codemirror/activeline.js",
+  "chrome://browser/content/devtools/codemirror/trailingspace.js"
 ];
 
 const CM_IFRAME   =

browser/devtools/sourceeditor/test/browser.ini

@@ -14,5 +14,6 @@ support-files =
 [browser_editor_history.js]
 [browser_editor_markers.js]
 [browser_editor_movelines.js]
+[browser_editor_addons.js]
 [browser_codemirror.js]
 [browser_sourceeditor_initialization.js]

browser/devtools/sourceeditor/test/browser_editor_addons.js

@@ -0,0 +1,20 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function test() {
+  waitForExplicitFinish();
+  setup((ed, win) => {
+    let doc = win.document.querySelector("iframe").contentWindow.document;
+
+    // trailingspace.js
+    ed.setText("Hello   ");
+    ed.setOption("showTrailingSpace", false);
+    ok(!doc.querySelector(".cm-trailingspace"));
+    ed.setOption("showTrailingSpace", true);
+    ok(doc.querySelector(".cm-trailingspace"));
+
+    teardown(ed, win);
+  });
+}