[rulers addon] Make sure rulers don't cause scrollbars

Closes codemirror#4042

Author: marijnh

addon/display/rulers.js

@@ -11,30 +11,26 @@
 })(function(CodeMirror) {
   "use strict";
 
-  CodeMirror.defineOption("rulers", false, function(cm, val, old) {
-    if (old && old != CodeMirror.Init) {
-      clearRulers(cm);
-      cm.off("refresh", refreshRulers);
+  CodeMirror.defineOption("rulers", false, function(cm, val) {
+    if (cm.state.rulerDiv) {
+      cm.display.lineSpace.removeChild(cm.state.rulerDiv)
+      cm.state.rulerDiv = null
+      cm.off("refresh", drawRulers)
     }
     if (val && val.length) {
-      setRulers(cm);
-      cm.on("refresh", refreshRulers);
+      cm.state.rulerDiv = cm.display.lineSpace.insertBefore(document.createElement("div"), cm.display.cursorDiv)
+      cm.state.rulerDiv.className = "CodeMirror-rulers"
+      drawRulers(cm)
+      cm.on("refresh", drawRulers)
     }
   });
 
-  function clearRulers(cm) {
-    for (var i = cm.display.lineSpace.childNodes.length - 1; i >= 0; i--) {
-      var node = cm.display.lineSpace.childNodes[i];
-      if (/(^|\s)CodeMirror-ruler($|\s)/.test(node.className))
-        node.parentNode.removeChild(node);
-    }
-  }
-
-  function setRulers(cm) {
+  function drawRulers(cm) {
+    cm.state.rulerDiv.textContent = ""
     var val = cm.getOption("rulers");
     var cw = cm.defaultCharWidth();
     var left = cm.charCoords(CodeMirror.Pos(cm.firstLine(), 0), "div").left;
-    var minH = cm.display.scroller.offsetHeight + 30;
+    cm.state.rulerDiv.style.minHeight = (cm.display.scroller.offsetHeight + 30) + "px";
     for (var i = 0; i < val.length; i++) {
       var elt = document.createElement("div");
       elt.className = "CodeMirror-ruler";
@@ -49,15 +45,7 @@
         if (conf.width) elt.style.borderLeftWidth = conf.width;
       }
       elt.style.left = (left + col * cw) + "px";
-      elt.style.top = "-50px";
-      elt.style.bottom = "-20px";
-      elt.style.minHeight = minH + "px";
-      cm.display.lineSpace.insertBefore(elt, cm.display.cursorDiv);
+      cm.state.rulerDiv.appendChild(elt)
     }
   }
-
-  function refreshRulers(cm) {
-    clearRulers(cm);
-    setRulers(cm);
-  }
 });

lib/codemirror.css

@@ -88,8 +88,14 @@
 
 .cm-tab { display: inline-block; text-decoration: inherit; }
 
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
   position: absolute;
 }