Codemirror 2 -> 3

.gitignore

@@ -2,3 +2,4 @@ js/friendlycode-built.js
 css/friendlycode-built.css
 node_modules/
 transifex/
+.DS_Store

css/editor.css

@@ -31,11 +31,11 @@
   background-repeat: no-repeat;
   -webkit-box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5);
   box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5);
-  
+
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  
+
   -moz-animation-duration: 4s;
   -moz-animation-name: friendlycode-loading-fadein;
   -webkit-animation-duration: 4s;
@@ -47,11 +47,11 @@
    * connections will see it, but users on fast connections won't
    * see the distracting flicker of a loading message that only shows
    * itself for a split-second. */
-  
+
   from {
     color: white;
   }
-  
+
   to {
     color: lightgray;
   }
@@ -61,7 +61,7 @@
   from {
     color: white;
   }
-  
+
   to {
     color: lightgray;
   }
@@ -82,9 +82,9 @@
   padding: 0;
 
   border-bottom: 1px solid #D6D6D6;
-  
+
   background: white;
-  
+
   -webkit-box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5);
   box-shadow: 0 5px 5px 0 rgba(233,233,233,0.5);
 }
@@ -134,7 +134,7 @@
   -moz-transition: opacity 0.5s;
   -webkit-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
-  
+
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -454,11 +454,6 @@ div.editor-actions {
   background-color: white;
 }
 
-.source-code .CodeMirror, .source-code .CodeMirror-scroll {
-  height: 100%;
-  overflow: auto;
-}
-
 .tipsy.friendlycode-base {
   /* Make tipsy tooltips slightly larger than the default. */
   font-size: 12px;
@@ -483,7 +478,7 @@ div.editor-actions {
   pointer-events: none;
 }
 .friendlycode-base .breadcrumbs:after {
-  border-left-color: #fff; 
+  border-left-color: #fff;
   border-width: 5px;
   top: 50%;
   margin-top: -5px;
@@ -494,3 +489,13 @@ div.editor-actions {
   top: 50%;
   margin-top: -7px;
 }
+
+.source-code .CodeMirror {
+  height:100%;
+  overflow:hidden;
+}
+
+.source-code .CodeMirror-scroll {
+  height: 100%;
+  overflow: auto;
+}

css/errorhelp.css

@@ -223,6 +223,7 @@ html .flipped .down-arrow {
   margin-top: -1.3em;
 
   background-size: 100% 100%;
+  z-index: 999;
 }
 
 .hint-marker-help {
@@ -244,3 +245,25 @@ svg.gutter-pointer.gutter-highlight-error polygon {
 svg.gutter-pointer.gutter-highlight-help polygon {
   fill: #FF9933;
 }
+
+.gutter-markers {
+  position: relative;
+  width: 0px;
+}
+
+.gutter-mark {
+  display: inline-block;
+  position: relative;
+  width: 1000px;
+  margin-left: -1000px;
+  opacity: 0.5;
+  z-index:999;
+}
+
+.gutter-mark.gutter-highlight-error {
+  background: #FF2A04;
+}
+
+.gutter-mark.gutter-highlight-help {
+  background: #FF9933;
+}

css/friendlycode.css

@@ -1,12 +1,12 @@
-/* 
+/*
  * This stylesheet is only intended for development purposes,
  * due to the inefficiency of import [1]. For production use, this
  * file should be a raw concatenation of all the import at-rules below.
  *
  * [1] http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  */
 
-@import url(../vendor/codemirror2/lib/codemirror.css);
+@import url(../vendor/codemirror3/lib/codemirror.css);
 
 @import url(jsbin-codemirror-theme.css);
 @import url(tipsy.css);

js/fc/current-page-manager.js

@@ -3,26 +3,26 @@ define(function() {
     // We don't currently support dynamically changing the URL
     // without a full page reload, unfortunately, so just trigger a
     // reload if the user clicked the 'back' button after we pushed
-    // a new URL to it.    
+    // a new URL to it.
     return function() { window.location.reload() };
   }
-  
+
   return function CurrentPageManager(options) {
     var self = {},
         window = options.window,
         pageToLoad = options.currentPage,
         loadPage = options.loadPage || defaultLoadPage(window),
         supportsPushState = window.history.pushState ? true : false;
-    
+
     if (supportsPushState)
       window.history.replaceState({pageToLoad: pageToLoad}, "",
                                   window.location.href);
-    
+
     // If a URL hash is specified, it should override anything provided by
     // a server.
     if (window.location.hash.slice(1))
       pageToLoad = window.location.hash.slice(1);
-    
+
     window.addEventListener("hashchange", function(event) {
       var newPageToLoad = window.location.hash.slice(1);
       if (newPageToLoad != pageToLoad) {
@@ -41,7 +41,7 @@ define(function() {
           loadPage(pageToLoad);
         }
       }, false);
-    
+
     self.currentPage = function() { return pageToLoad; };
     self.changePage = function(page, url) {
       pageToLoad = page;
@@ -50,7 +50,7 @@ define(function() {
       else
         window.location.hash = "#" + page;
     };
-    
+
     return self;
   };
 });

js/fc/publisher.js

@@ -4,7 +4,7 @@
 // to save and load published code.
 define(["jquery"], function($) {
   var myOrigin = window.location.protocol + "//" + window.location.host;
-  
+
   function Publisher(baseURL) {
     // We want to support CORS for development but in production it doesn't
     // matter because all requests will be same-origin. However, browsers
@@ -53,7 +53,7 @@ define(["jquery"], function($) {
       }
     };
   }
-  
+
   // This is a fix for https://github.com/mozilla/webpagemaker/issues/20.
   function fixDoctypeHeadBodyMunging(html) {
     var lines = html.split('\n');
@@ -65,9 +65,9 @@ define(["jquery"], function($) {
     }
     return html;
   }
-  
+
   // Exposing this for unit testing purposes only.
   Publisher._fixDoctypeHeadBodyMunging = fixDoctypeHeadBodyMunging;
-  
+
   return Publisher;
 });

js/fc/ui/context-sensitive-help.js

@@ -57,18 +57,21 @@ define([
       }
       var oldOffset = helpArea.offset();
       helpArea.html(template(help)).show();
-      var startMark = null;
+      var startMark = null,
+          endMark = null;
       help.highlights.forEach(function(interval) {
         var start = interval.start,
             end = interval.end;
         // Show the help message closest to the highlight that
         // encloses the current cursor position.
-        if (start <= cursorIndex && end >= cursorIndex)
+        if (start <= cursorIndex && end >= cursorIndex) {
           startMark = start;
+          endMark = end;
+        }
         cursorHelpMarks.mark(start, end, "cursor-help-highlight");
       });
       if (startMark !== null) {
-        relocator.relocate(helpArea, startMark, "help");
+        relocator.relocate(helpArea, startMark, endMark, "help");
         var newOffset = helpArea.offset();
         if (newOffset.top != oldOffset.top ||
             newOffset.left != oldOffset.left) {

js/fc/ui/editor-panes.js

@@ -11,10 +11,10 @@ define(function(require) {
       Relocator = require("fc/ui/relocator"),
       HelpMsgTemplate = require("template!help-msg"),
       ErrorMsgTemplate = require("template!error-msg");
-  
+
   require('slowparse-errors');
   require("codemirror/html");
-  
+
   return function EditorPanes(options) {
     var self = {},
         div = options.container,
@@ -24,13 +24,17 @@ define(function(require) {
         previewArea = $('<div class="preview-holder"></div>').appendTo(div),
         helpArea = $('<div class="help hidden"></div>').appendTo(div),
         errorArea =  $('<div class="error hidden"></div>').appendTo(div);
-    
+
     var codeMirror = self.codeMirror = ParsingCodeMirror(sourceCode[0], {
       mode: "text/html",
       theme: "jsbin",
       tabMode: "indent",
       lineWrapping: true,
       lineNumbers: true,
+      gutters: [
+        "CodeMirror-linenumbers",
+        "gutter-markers"
+      ],
       value: initialValue,
       parse: function(html) {
         return Slowparse.HTML(document, html,
@@ -57,7 +61,7 @@ define(function(require) {
       previewArea: previewArea
     });
     var previewToEditorMapping = PreviewToEditorMapping(preview);
-    
+
     return self;
   };
 });

js/fc/ui/error-help.js

@@ -50,8 +50,9 @@ define(["jquery-slowparse", "./mark-tracker"], function($, MarkTracker) {
 
     // Report the given Slowparse error.
     function reportError(error) {
-      var startMark = null;
-      var errorHTML = $("<div></div>").fillError(error);
+      var startMark = null,
+          endMark = null,
+          errorHTML = $("<div></div>").fillError(error);
       errorArea.html(template({error: errorHTML.html()})).show();
       errorArea.eachErrorHighlight(function(start, end, i) {
         // Point the error message's arrow at the first occurrence of
@@ -64,8 +65,9 @@ define(["jquery-slowparse", "./mark-tracker"], function($, MarkTracker) {
           codeMirror.setCursor(pos);
           pointAtPosition(codeMirror, pos);
         });
+        endMark = end;
       });
-      relocator.relocate(errorArea, startMark, "error");
+      relocator.relocate(errorArea, startMark, endMark, "error");
 
       // clicking the dismiss link should also close error help
       var dismiss = errorArea.find(".dismiss");

js/fc/ui/gutter-pointer.js

@@ -8,7 +8,7 @@
 //   |  \
 //   |  /
 //   --/
-// 
+//
 // It also puts the shape between the gutter and the content of a
 // CodeMirror line. The shape will be vertically stretched to take up the
 // entire height of the line.
@@ -17,7 +17,7 @@
 // class as the highlightClass argument.
 //
 // Arguments:
-// 
+//
 //   codeMirror: The CodeMirror instance to apply the pointer to.
 //
 //   highlightClass: The class name used to "highlight" the desired
@@ -30,27 +30,28 @@
 
 define(["jquery"], function($) {
   var SVG_NS = "http://www.w3.org/2000/svg";
-  
+
   function attrs(element, attributes) {
     for (var name in attributes)
       element.setAttribute(name, attributes[name].toString());
   }
-  
-  return function gutterPointer(codeMirror, highlightClass) {    
-    var wrapper = $(codeMirror.getWrapperElement());
-    var highlight = $(".CodeMirror-gutter-text ." + highlightClass, wrapper);
-    var svg = document.createElementNS(SVG_NS, "svg");
-    var pointer = document.createElementNS(SVG_NS, "polygon");
-    var w = ($(".CodeMirror-gutter", wrapper).outerWidth() -
-             highlight.width()) * 2;
-    var h = highlight[0].getBoundingClientRect().height;
-    var pos = highlight.position();
-
-    pos.left += highlight.width();
+
+  return function gutterPointer(codeMirror, highlightClass) {
+    var wrapper = $(codeMirror.getWrapperElement()),
+        svg = document.createElementNS(SVG_NS, "svg"),
+        pointer = document.createElementNS(SVG_NS, "polygon"),
+        w = $(".CodeMirror-gutters").width()/2,
+        selector = ".gutter-mark."+highlightClass,
+        collection = $(selector, wrapper),
+        first = collection.first()[0],
+        last = collection.last()[0],
+        h = last.getBoundingClientRect().bottom - first.getBoundingClientRect().top;
+
     attrs(svg, {
       'class': "gutter-pointer " + highlightClass,
       viewBox: [0, 0, w, h].join(" ")
     });
+
     attrs(pointer, {
       points: [
         "0,0",
@@ -60,17 +61,17 @@ define(["jquery"], function($) {
         "0," + h
       ].join(" ")
     });
+
     svg.appendChild(pointer);
     $(svg).css({
       position: 'absolute',
       width: w + "px",
       height: h + "px",
-      top: pos.top + "px",
-      left: pos.left + "px"
+      right: "-" + w + "px"
     });
 
-    $(".CodeMirror-scroll", wrapper).append(svg);
-    
+    $(first).append(svg);
+
     return $(svg);
   };
 });