From cc5cd114e604ca4f99850b13a89e94977043cc36 Mon Sep 17 00:00:00 2001
From: Fabian Jakobs <fabian.jakobs@web.de>
Date: Wed, 7 Apr 2010 17:40:42 +0200
Subject: [PATCH] Fix FF 3.6 issue, where mono spaced characters can have fixed
 sub pixel widths.

---
 CursorLayer.js     |  4 ++--
 MarkerLayer.js     | 10 +++++-----
 TextLayer.js       |  9 ++++++---
 VirtualRenderer.js |  6 +++---
 editor.css         |  2 +-
 editor.html        |  1 -
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/CursorLayer.js b/CursorLayer.js
index 0475f54e..41d88cda 100644
--- a/CursorLayer.js
+++ b/CursorLayer.js
@@ -50,8 +50,8 @@ CursorLayer.prototype.getPixelPosition = function() {
 CursorLayer.prototype.update = function(config)
 {
   if (!this.position) return;
-  
-  var cursorLeft = this.position.column * config.characterWidth;
+
+  var cursorLeft = Math.round(this.position.column * config.characterWidth);
   var cursorTop = this.position.row * config.lineHeight;
   
   this.pixelPos = {
diff --git a/MarkerLayer.js b/MarkerLayer.js
index c399d4c7..45db2b72 100644
--- a/MarkerLayer.js
+++ b/MarkerLayer.js
@@ -50,9 +50,9 @@ MarkerLayer.prototype.update = function(config)
         html.push(
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
-          "width:", config.width - (range.start.column * config.characterWidth), "px;",
+          "width:", Math.round(config.width - (range.start.column * config.characterWidth)), "px;",
           "top:", (range.start.row-config.firstRow)  * config.lineHeight, "px;",        
-          "left:", range.start.column * config.characterWidth, "px;'></div>"
+          "left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
         );
       }
         
@@ -62,7 +62,7 @@ MarkerLayer.prototype.update = function(config)
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
           "top:", (range.end.row-config.firstRow) * config.lineHeight, "px;",
-          "width:", range.end.column * config.characterWidth, "px;'></div>"
+          "width:", Math.round(range.end.column * config.characterWidth), "px;'></div>"
         );
       };
       
@@ -86,9 +86,9 @@ MarkerLayer.prototype.update = function(config)
         html.push(
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
-          "width:", (range.end.column - range.start.column) * config.characterWidth, "px;",
+          "width:", Math.round((range.end.column - range.start.column) * config.characterWidth), "px;",
           "top:", (range.start.row-config.firstRow)  * config.lineHeight, "px;",        
-          "left:", range.start.column * config.characterWidth, "px;'></div>"
+          "left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
         );
       }
     }
diff --git a/TextLayer.js b/TextLayer.js
index deafc2ee..cc67b914 100644
--- a/TextLayer.js
+++ b/TextLayer.js
@@ -30,11 +30,14 @@ TextLayer.prototype._measureSizes = function()
   style.position = "absolute";
   style.overflow = "visible";
     
-  measureNode.innerHTML = "X<br>X";
+  measureNode.innerHTML = new Array(1000).join("Xy");
   this.element.appendChild(measureNode);
   
-  this.lineHeight = Math.round(measureNode.offsetHeight / 2);
-  this.characterWidth = measureNode.offsetWidth;
+  // in FF 3.6 monospace fonts can have a fixed sub pixel width.
+  // that's why we have to measure many characters
+  // Note: characterWidth can be a float!
+  this.lineHeight = measureNode.offsetHeight;
+  this.characterWidth = measureNode.offsetWidth / 2000;
     
   this.element.removeChild(measureNode);
 };
diff --git a/VirtualRenderer.js b/VirtualRenderer.js
index f2baa828..dab66ed7 100644
--- a/VirtualRenderer.js
+++ b/VirtualRenderer.js
@@ -52,7 +52,7 @@ VirtualRenderer.prototype.draw = function()
   
   var longestLine = Math.max(
     this.scroller.clientWidth, 
-    this.doc.getWidth() * this.characterWidth
+    Math.round(this.doc.getWidth() * this.characterWidth)
   );
   
   var lineCount = Math.ceil(minHeight / this.lineHeight);
@@ -126,7 +126,7 @@ VirtualRenderer.prototype.scrollCursorIntoView = function()
   }
   
   if (this.scroller.scrollLeft + this.scroller.clientWidth < left + this.characterWidth) {
-    this.scroller.scrollLeft = left + this.characterWidth - this.scroller.clientWidth;
+    this.scroller.scrollLeft = Math.round(left + this.characterWidth - this.scroller.clientWidth);
   }
 },
 
@@ -136,7 +136,7 @@ VirtualRenderer.prototype.getScrollTop = function() {
 
 VirtualRenderer.prototype.scrollToY = function(scrollTop)
 {
-  var maxHeight = this.lines.length * this.lineHeight - this.scroller.offsetHeight;
+  var maxHeight = this.lines.length * this.lineHeight - this.scroller.clientHeight;
   var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
   
   if (this.scrollTop !== scrollTop) {
diff --git a/editor.css b/editor.css
index 7a435d19..e4142ba0 100644
--- a/editor.css
+++ b/editor.css
@@ -53,7 +53,7 @@
 }
 
 .text-layer {
-  font-family: Monaco, "Courier New";
+  font-family: Monaco, "Courier New", monospace;
   font-size: 12px;
   cursor: text;
 }
diff --git a/editor.html b/editor.html
index bff1a2a8..e984a58c 100644
--- a/editor.html
+++ b/editor.html
@@ -39,7 +39,6 @@
 var editor = new Editor(new TextDocument("Juhu Kinners"), new VirtualRenderer("container"));
 
 window.onresize = function() {
-  console.log("resize");
   editor.resize();
 }