Fix #488: Implement configurable tab width

demo/index.html

@@ -17,10 +17,13 @@
         <div>
           <h2>Options</h2>
           <p>
-            <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
+            <label>cursorBlink <input type="checkbox" id="option-cursor-blink"></label>
           </p>
           <p>
-            <label>Scrollback <input type="number" id="option-scrollback" value="1000" /></label>
+            <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
+          </p>
+          <p>
+            <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="4" /></label>
           </p>
           <div>
           	<h3>Size</h3>

demo/main.js

@@ -9,7 +9,8 @@ var term,
 var terminalContainer = document.getElementById('terminal-container'),
     optionElements = {
       cursorBlink: document.querySelector('#option-cursor-blink'),
-      scrollback: document.querySelector('#option-scrollback')
+      scrollback: document.querySelector('#option-scrollback'),
+      tabstopwidth: document.querySelector('#option-tabstopwidth')
     },
     colsElement = document.getElementById('cols'),
     rowsElement = document.getElementById('rows');
@@ -32,7 +33,11 @@ optionElements.cursorBlink.addEventListener('change', function () {
   term.setOption('cursorBlink', optionElements.cursorBlink.checked);
 });
 optionElements.scrollback.addEventListener('change', function () {
-  terminal.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
+  term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
+});
+optionElements.tabstopwidth.addEventListener('change', function () {
+  term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value));
+  term.setupStops();
 });
 
 createTerminal();
@@ -44,7 +49,8 @@ function createTerminal() {
   }
   term = new Terminal({
     cursorBlink: optionElements.cursorBlink.checked,
-    scrollback: parseInt(optionElements.scrollback.value, 10)
+    scrollback: parseInt(optionElements.scrollback.value, 10),
+    tabStopWidth: parseInt(optionElements.tabstopwidth.value)
   });
   term.on('resize', function (size) {
     if (!pid) {

src/xterm.js

@@ -360,7 +360,8 @@ Terminal.defaults = {
   screenKeys: false,
   debug: false,
   cancelEvents: false,
-  disableStdin: false
+  disableStdin: false,
+  tabStopWidth: 8
   // programFeatures: false,
   // focusKeys: false,
 };
@@ -2118,7 +2119,7 @@ Terminal.prototype.setupStops = function(i) {
     i = 0;
   }
 
-  for (; i < this.cols; i += 8) {
+  for (; i < this.cols; i += this.getOption('tabStopWidth')) {
     this.tabs[i] = true;
   }
 };