Merge pull request #11 from sourcelair/issue/9

Fixed incorrect row/column calculation in Firefox

addons/attach/attach.js

@@ -33,10 +33,10 @@
         socket.send(data);
       };
 
-      socket.addEventListener('message', _getMessage);
+      socket.addEventListener('message', term._getMessage);
 
       if (bidirectional) {
-        this.on('data', _sendData);
+        this.on('data', term._sendData);
       }
       
       socket.addEventListener('close', term.detach.bind(term, socket));
@@ -47,7 +47,12 @@
       var term = this;
 
       term.off('data', term._sendData);
-      socket.removeEventListener('message', term._getMessage);
+
+      socket = (typeof socket == 'undefined') ? term.socket : socket;
+
+      if (socket) {
+        socket.removeEventListener('message', term._getMessage);
+      }
 
       delete term.socket;
     };

addons/fit/fit.js

@@ -24,36 +24,51 @@
         fit(this.Xterm);
     }
 })(function (Xterm) {
+    Xterm.prototype.proposeGeometry = function () {
+        var parentElementStyle = window.getComputedStyle(this.element.parentElement),
+            parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
+            parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
+            elementStyle = window.getComputedStyle(this.element),
+            elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
+            elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
+            availableHeight = parentElementHeight - elementPaddingVer,
+            availableWidth = parentElementWidth - elementPaddingHor,
+            container = this.rowContainer,
+            subjectRow = this.rowContainer.firstElementChild,
+            contentBuffer = subjectRow.innerHTML,
+            characterHeight,
+            rows,
+            characterWidth,
+            cols,
+            geometry;
+
+        subjectRow.style.display = 'inline';
+        subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
+        characterWidth = parseInt(subjectRow.offsetWidth);
+        subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
+        characterHeight = parseInt(subjectRow.offsetHeight);
+        subjectRow.innerHTML = contentBuffer;
+
+        rows = parseInt(availableHeight / characterHeight);
+        /*
+         * The following hack takes place in order to get "fit" work properly
+         * in Mozilla Firefox.
+         * Most probably, because of a dimension calculation bug, Firefox
+         * calculates the width to be 1px less than it is actually drawn on
+         * screen.
+         */
+        if (navigator.userAgent.match(/Firefox/)) {
+            characterWidth++;
+        }
+        cols = parseInt(availableWidth / characterWidth);
+
+        geometry = {cols: cols, rows: rows};
+        return geometry;
+    };
+
     Xterm.prototype.fit = function () {
-      var container = this.rowContainer,
+        var geometry = this.proposeGeometry();
-          subjectRow = this.rowContainer.firstElementChild,
-          rows,
-          contentBuffer,
-          characterWidth,
-          cols;
 
-      subjectRow.style.display = 'inline';
+        this.resize(geometry.cols, geometry.rows);
-
-      contentBuffer = subjectRow.textContent;
-
-      subjectRow.innerHTML = ' '; /* Arbitrary character to calculate its dimensions */
-      characterWidth = parseInt(subjectRow.offsetWidth);
-      characterHeight = parseInt(subjectRow.offsetHeight);
-
-      subjectRow.style.display = '';
-
-      cols = container.offsetWidth / characterWidth;
-      cols = parseInt(cols);
-
-      var parentElementStyle = window.getComputedStyle(this.element.parentElement),
-          parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
-          elementStyle = window.getComputedStyle(this.element),
-          elementPadding = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
-          availableHeight = parentElementHeight - elementPadding,
-          rowHeight = this.rowContainer.firstElementChild.offsetHeight;
-
-      rows = parseInt(availableHeight / rowHeight);
-
-      this.resize(cols, rows);
     };
 });

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "xterm.js",
-  "version": "0.20",
+  "version": "0.26",
   "ignore": ["demo", "docs", "test", ".gitignore"]
 }

demo/main.js

@@ -1,12 +1,13 @@
 var terminalContainer = document.getElementById('terminal-container'),
-    term = new Terminal();
+    term = new Terminal(),
+    prompt = '> ';
 
 term.open(terminalContainer);
 term.fit();
 
 term.prompt = function () {
-  term.write('\r\n> ');
+  term.write('\r\n' + prompt);
-}
+};
 
 term.writeln('Welcome to xterm.js');
 term.writeln('Just type some keys in the prompt below.');
@@ -19,7 +20,12 @@ term.on('key', function (key, ev) {
   if (ev.keyIdentifier == 'Enter') {
     term.prompt();
   } else if (ev.keyCode == 8) {
-    term.write('\b \b');
+    /*
+     * Do not delete the prompt
+     */
+    if (term.x > 2) {
+      term.write('\b \b');
+    }
   } else if (printable) {
     term.write(key);
   }

docs/conf.py

@@ -51,9 +51,9 @@ copyright = u'2014, SourceLair Limited'
 # built documents.
 #
 # The short X.Y version.
-version = '0.20'
+version = '0.26'
 # The full version, including alpha/beta/rc tags.
-release = '0.20 Alpha'
+release = '0.26 Alpha'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

src/xterm.js

@@ -36,7 +36,7 @@
         /*
          * Require.js is available
          */
-        define([], xterm);
+        define([], xterm.bind(window));
     } else {
         /*
          * Plain browser environment