From 2852638c45a0a6f770594a13c5e67acc3548ecff Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Wed, 19 Jun 2013 21:25:39 +0400
Subject: [PATCH 1/6] fix initial highlighting in hidden editor

---
 doc/site/js/main.js         | 4 ++--
 lib/ace/virtual_renderer.js | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/doc/site/js/main.js b/doc/site/js/main.js
index b52d6f6b..b7d61fae 100644
--- a/doc/site/js/main.js
+++ b/doc/site/js/main.js
@@ -64,8 +64,6 @@ $(function() {
      
      tabs.find(tab_a_selector).click(function(e) {         
         e.preventDefault();
-        embedded_editor.resize();
-        editor.resize();
         if ($(this).attr("href") === "/") {
             window.location = "http://ace.ajax.org";
             return;
@@ -102,6 +100,8 @@ $(function() {
         }
 
         $(this).tab("show");
+        embedded_editor.resize();
+        editor.resize();
 
         var state = {};
         state.nav = $(this).attr("href").substr(1);
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index 8449b958..3bd0fcc3 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -270,6 +270,7 @@ var VirtualRenderer = function(container, theme) {
         this.$textLayer.checkForSizeChanges();
     };
 
+    this.$changes = 0;
     /**
     * [Triggers a resize of the editor.]{: #VirtualRenderer.onResize}
     * @param {Boolean} force If `true`, recomputes the size, even if the height and width haven't changed
@@ -280,7 +281,7 @@ var VirtualRenderer = function(container, theme) {
     *
     **/
     this.onResize = function(force, gutterWidth, width, height) {
-        var changes = 0;
+        var changes = this.$changes || 0;
         var size = this.$size;
 
         if (this.resizing > 2)
@@ -644,8 +645,10 @@ var VirtualRenderer = function(container, theme) {
     };
 
     this.$renderChanges = function(changes, force) {
-        if (!force && (!changes || !this.session || !this.container.offsetWidth))
-            return;
+        if (!force && (!changes || !this.session || !this.container.offsetWidth)) {
+            this.$changes = changes;
+            return; 
+        }
 
         this._signal("beforeRender");
         // text, scrolling and resize changes can cause the view port size to change

From 2d9225326cd9003891826c3176e53f0419ed061e Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Wed, 19 Jun 2013 21:38:11 +0400
Subject: [PATCH 2/6] cleanup

---
 lib/ace/scrollbar.js | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js
index 36619bd5..642e2d3e 100644
--- a/lib/ace/scrollbar.js
+++ b/lib/ace/scrollbar.js
@@ -37,8 +37,6 @@ var event = require("./lib/event");
 var EventEmitter = require("./lib/event_emitter").EventEmitter;
 
 /**
- * 
- *
  * A set of methods for setting and retrieving the editor's scrollbar. 
  * @class ScrollBar
  **/
@@ -47,9 +45,6 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
  * Creates a new `ScrollBar`. `parent` is the owner of the scroll bar.
  * @param {DOMElement} parent A DOM element 
  *
- * 
- *
- * 
  * @constructor
  **/
 var ScrollBar = function(parent) {
@@ -62,8 +57,8 @@ var ScrollBar = function(parent) {
 
     parent.appendChild(this.element);
 
-    // in OSX lion the scrollbars appear to have no width. In this case resize
-    // the to show the scrollbar but still pretend that the scrollbar has a width
+    // in OSX lion the scrollbars appear to have no width. In this case resize the
+    // element to show the scrollbar but still pretend that the scrollbar has a width
     // of 0px
     // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
     // make element a little bit wider to retain scrollbar when page is zoomed 
@@ -80,9 +75,6 @@ var ScrollBar = function(parent) {
      * Emitted when the scroll bar, well, scrolls.
      * @event scroll
      * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position
-     *
-     * 
-     *
      **/
     this.onScroll = function() {
         if (!this.skipEvent) {
@@ -93,7 +85,6 @@ var ScrollBar = function(parent) {
     };
 
     /**
-     * 
      * Returns the width of the scroll bar.
      * @returns {Number}
      **/
@@ -104,9 +95,6 @@ var ScrollBar = function(parent) {
     /**
      * Sets the height of the scroll bar, in pixels.
      * @param {Number} height The new height
-     *
-     * 
-     *
      **/
     this.setHeight = function(height) {
         this.element.style.height = height + "px";
@@ -115,9 +103,6 @@ var ScrollBar = function(parent) {
     /**
      * Sets the inner height of the scroll bar, in pixels.
      * @param {Number} height The new inner height
-     *
-     * 
-     *
      **/
     this.setInnerHeight = function(height) {
         this.inner.style.height = height + "px";
@@ -129,9 +114,6 @@ var ScrollBar = function(parent) {
     /**
      * Sets the scroll top of the scroll bar.
      * @param {Number} scrollTop The new scroll top
-     *
-     * 
-     *
      **/
     this.setScrollTop = function(scrollTop) {
         if (this.scrollTop != scrollTop) {

From 43f1788ad403899c847421fc4b757120b6412ee7 Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Thu, 20 Jun 2013 15:44:07 +0400
Subject: [PATCH 3/6] use fake horizontal scrollbar

---
 lib/ace/css/editor.css      |  20 ++-
 lib/ace/edit_session.js     |   4 +-
 lib/ace/ext/textarea.js     |  30 +---
 lib/ace/scrollbar.js        |  85 ++++++++++-
 lib/ace/virtual_renderer.js | 289 ++++++++++++++++++++++++------------
 5 files changed, 302 insertions(+), 126 deletions(-)

diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
index 8ebc1616..0063ba2d 100644
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@@ -71,8 +71,8 @@
 
 .ace_scrollbar {
     position: absolute;
-    overflow-x: hidden;
-    overflow-y: scroll;
+    overflow: hidden;
+    overflow-y: auto;
     right: 0;
     top: 0;
     bottom: 0;
@@ -84,6 +84,22 @@
     left: 0;
 }
 
+.ace_scrollbar-h {
+    position: absolute;
+    overflow-x: auto;
+    overflow-y: hidden;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.ace_scrollbar-inner {
+    position: absolute;
+    height: 1px;
+    left: 0;
+}
+
+
 .ace_print-margin {
     position: absolute;
     height: 100%;
diff --git a/lib/ace/edit_session.js b/lib/ace/edit_session.js
index 4f9ace1f..90b727ef 100644
--- a/lib/ace/edit_session.js
+++ b/lib/ace/edit_session.js
@@ -985,7 +985,7 @@ var EditSession = function(text, mode) {
     *
     **/
     this.setScrollTop = function(scrollTop) {
-        scrollTop = Math.round(Math.max(0, scrollTop));
+        scrollTop = Math.round(scrollTop);
         if (this.$scrollTop === scrollTop || isNaN(scrollTop))
             return;
 
@@ -1006,7 +1006,7 @@ var EditSession = function(text, mode) {
     * [Sets the value of the distance between the left of the editor and the leftmost part of the visible content.]{: #EditSession.setScrollLeft}
     **/
     this.setScrollLeft = function(scrollLeft) {
-        scrollLeft = Math.round(Math.max(0, scrollLeft));
+        scrollLeft = Math.round(scrollLeft);
         if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft))
             return;
 
diff --git a/lib/ace/ext/textarea.js b/lib/ace/ext/textarea.js
index a402e65f..fee9b9b2 100644
--- a/lib/ace/ext/textarea.js
+++ b/lib/ace/ext/textarea.js
@@ -288,21 +288,18 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
             settingDiv.hideButton.focus();
             editor.on("focus", function onFocus() {
                 editor.removeListener("focus", onFocus);
-                settingDiv.style.display = "none"
+                settingDiv.style.display = "none";
             });
         } else {
             editor.focus();
-        };
+        }
     };
 
+    editor.$setOption = editor.setOption;
     editor.setOption = function(key, value) {
         if (options[key] == value) return;
 
         switch (key) {
-            case "gutter":
-                renderer.setShowGutter(toBool(value));
-            break;
-
             case "mode":
                 if (value != "text") {
                     // Load the required mode file. Files get loaded only once.
@@ -366,18 +363,9 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
                     break;
                 }
             break;
-
-            case "useSoftTabs":
-                session.setUseSoftTabs(toBool(value));
-            break;
-
-            case "showPrintMargin":
-                renderer.setShowPrintMargin(toBool(value));
-            break;
-
-            case "showInvisibles":
-                editor.setShowInvisibles(toBool(value));
-            break;
+            
+            default:
+                editor.$setOption(key, toBool(value));
         }
 
         options[key] = value;
@@ -391,9 +379,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
         return options;
     };
 
-    for (var option in exports.options) {
-        editor.setOption(option, exports.options[option]);
-    }
+    editor.setOptions(exports.options);
 
     return editor;
 }
@@ -493,7 +479,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
                     cValue == "true" ? "checked='true'" : "",
                "'></input>"
             );
-            return
+            return;
         }
         builder.push("<select title='" + option + "'>");
         for (var value in obj) {
diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js
index 642e2d3e..85b69b6f 100644
--- a/lib/ace/scrollbar.js
+++ b/lib/ace/scrollbar.js
@@ -47,7 +47,7 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
  *
  * @constructor
  **/
-var ScrollBar = function(parent) {
+var ScrollBarV = function(parent) {
     this.element = dom.createElement("div");
     this.element.className = "ace_scrollbar";
 
@@ -63,26 +63,73 @@ var ScrollBar = function(parent) {
     // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
     // make element a little bit wider to retain scrollbar when page is zoomed 
     this.width = dom.scrollbarWidth(parent.ownerDocument);
+    this.fullWidth = this.width;
     this.element.style.width = (this.width || 15) + 5 + "px";
+    this.setVisible(false);
+    this.element.style.overflowY = "scroll";
+    
+    event.addListener(this.element, "scroll", this.onScrollV.bind(this));
+};
 
-    event.addListener(this.element, "scroll", this.onScroll.bind(this));
+var ScrollBarH = function(parent) {
+    this.element = dom.createElement("div");
+    this.element.className = "ace_scrollbar-h";
+
+    this.inner = dom.createElement("div");
+    this.inner.className = "ace_scrollbar-inner";
+    this.element.appendChild(this.inner);
+
+    parent.appendChild(this.element);
+
+    // in OSX lion the scrollbars appear to have no width. In this case resize the
+    // element to show the scrollbar but still pretend that the scrollbar has a width
+    // of 0px
+    // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
+    // make element a little bit wider to retain scrollbar when page is zoomed 
+    this.height = dom.scrollbarWidth(parent.ownerDocument);
+    this.fullHeight = this.height;
+    this.element.style.height = (this.height || 15) + 5 + "px";
+    this.setVisible(false);
+    this.element.style.overflowX = "scroll";
+
+    event.addListener(this.element, "scroll", this.onScrollH.bind(this));
 };
 
 (function() {
     oop.implement(this, EventEmitter);
 
+    this.setVisible = function(show) {
+        if (show) {
+            this.element.style.display = "";
+            if (this.fullWidth)
+                this.width = this.fullWidth;
+            if (this.fullHeight)
+                this.height = this.fullHeight;
+        } else {
+            this.element.style.display = "none";
+            this.height = this.width = 0;
+        }
+    };
+    
     /**
      * Emitted when the scroll bar, well, scrolls.
      * @event scroll
      * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position
      **/
-    this.onScroll = function() {
+    this.onScrollV = function() {
         if (!this.skipEvent) {
             this.scrollTop = this.element.scrollTop;
             this._emit("scroll", {data: this.scrollTop});
         }
         this.skipEvent = false;
     };
+    this.onScrollH = function() {
+        if (!this.skipEvent) {
+            this.scrollLeft = this.element.scrollLeft;
+            this._emit("scroll", {data: this.scrollLeft});
+        }
+        this.skipEvent = false;
+    };
 
     /**
      * Returns the width of the scroll bar.
@@ -92,6 +139,10 @@ var ScrollBar = function(parent) {
         return this.width;
     };
 
+    this.getHeight = function() {
+        return this.height;
+    };
+
     /**
      * Sets the height of the scroll bar, in pixels.
      * @param {Number} height The new height
@@ -99,6 +150,10 @@ var ScrollBar = function(parent) {
     this.setHeight = function(height) {
         this.element.style.height = height + "px";
     };
+    
+    this.setWidth = function(width) {
+        this.element.style.width = width + "px";
+    };
 
     /**
      * Sets the inner height of the scroll bar, in pixels.
@@ -107,22 +162,36 @@ var ScrollBar = function(parent) {
     this.setInnerHeight = function(height) {
         this.inner.style.height = height + "px";
     };
+    
+    this.setInnerWidth = function(width) {
+        this.inner.style.width = width + "px";
+    };
 
-
-    // on chrome 17+ for small zoom levels after calling this function
-    // this.element.scrollTop != scrollTop which makes page to scroll up.
     /**
      * Sets the scroll top of the scroll bar.
      * @param {Number} scrollTop The new scroll top
      **/
+    // on chrome 17+ for small zoom levels after calling this function
+    // this.element.scrollTop != scrollTop which makes page to scroll up.
     this.setScrollTop = function(scrollTop) {
         if (this.scrollTop != scrollTop) {
             this.skipEvent = true;
             this.scrollTop = this.element.scrollTop = scrollTop;
         }
     };
+    this.setScrollLeft = function(scrollLeft) {
+        if (this.scrollLeft != scrollLeft) {
+            this.skipEvent = true;
+            this.scrollLeft = this.element.scrollLeft = scrollLeft;
+        }
+    };
 
-}).call(ScrollBar.prototype);
+}).call(ScrollBarV.prototype);
+ScrollBarH.prototype = ScrollBarV.prototype;
 
-exports.ScrollBar = ScrollBar;
+
+
+exports.ScrollBar = ScrollBarV; // backward compatibility
+exports.ScrollBarV = ScrollBarV;
+exports.ScrollBarH = ScrollBarH;
 });
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index 3bd0fcc3..6cb3ddc3 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -40,7 +40,8 @@ var GutterLayer = require("./layer/gutter").Gutter;
 var MarkerLayer = require("./layer/marker").Marker;
 var TextLayer = require("./layer/text").Text;
 var CursorLayer = require("./layer/cursor").Cursor;
-var ScrollBar = require("./scrollbar").ScrollBar;
+var ScrollBarH = require("./scrollbar").ScrollBarH;
+var ScrollBarV = require("./scrollbar").ScrollBarV;
 var RenderLoop = require("./renderloop").RenderLoop;
 var EventEmitter = require("./lib/event_emitter").EventEmitter;
 var editorCss = require("./requirejs/text!./css/editor.css");
@@ -102,22 +103,23 @@ var VirtualRenderer = function(container, theme) {
 
     // Indicates whether the horizontal scrollbar is visible
     this.$horizScroll = false;
+    this.$vScroll = false;
 
-    this.scrollBar = new ScrollBar(this.container);
-    this.scrollBar.addEventListener("scroll", function(e) {
+    this.scrollBar = 
+    this.scrollBarV = new ScrollBarV(this.container);
+    this.scrollBarH = new ScrollBarH(this.container);
+    this.scrollBarV.addEventListener("scroll", function(e) {
         if (!_self.$scrollAnimation)
-            _self.session.setScrollTop(e.data);
+            _self.session.setScrollTop(e.data - _self.scrollMargin.top);
+    });
+    this.scrollBarH.addEventListener("scroll", function(e) {
+        if (!_self.$scrollAnimation)
+            _self.session.setScrollLeft(e.data - _self.scrollMargin.left);
     });
 
     this.scrollTop = 0;
     this.scrollLeft = 0;
 
-    event.addListener(this.scroller, "scroll", function() {
-        var scrollLeft = _self.scroller.scrollLeft;
-        _self.scrollLeft = scrollLeft;
-        _self.session.setScrollLeft(scrollLeft);
-    });
-
     this.cursorPos = {
         row : 0,
         column : 0
@@ -126,6 +128,7 @@ var VirtualRenderer = function(container, theme) {
     this.$textLayer.addEventListener("changeCharacterSize", function() {
         _self.updateCharacterSize();
         _self.onResize(true);
+        _self._signal("changeCharacterSize");
     });
 
     this.$size = {
@@ -148,6 +151,15 @@ var VirtualRenderer = function(container, theme) {
         offset : 0,
         height : 1
     };
+    
+    this.scrollMargin = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        v: 0,
+        h: 0
+    }
 
     this.$loop = new RenderLoop(
         this.$renderChanges.bind(this),
@@ -175,6 +187,22 @@ var VirtualRenderer = function(container, theme) {
     this.CHANGE_FULL = 512;
     this.CHANGE_H_SCROLL = 1024;
 
+    this.$logChanges = function(changes) {
+        var a = ""
+        if (changes & this.CHANGE_CURSOR) a += " cursor";
+        if (changes & this.CHANGE_MARKER) a += " marker";
+        if (changes & this.CHANGE_GUTTER) a += " gutter";
+        if (changes & this.CHANGE_SCROLL) a += " scroll";
+        if (changes & this.CHANGE_LINES) a += " lines";
+        if (changes & this.CHANGE_TEXT) a += " text";
+        if (changes & this.CHANGE_SIZE) a += " size";
+        if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
+        if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
+        if (changes & this.CHANGE_FULL) a += " full";
+        if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
+        console.log(a.trim())
+    };
+
     oop.implement(this, EventEmitter);
 
     this.updateCharacterSize = function() {
@@ -281,9 +309,6 @@ var VirtualRenderer = function(container, theme) {
     *
     **/
     this.onResize = function(force, gutterWidth, width, height) {
-        var changes = this.$changes || 0;
-        var size = this.$size;
-
         if (this.resizing > 2)
             return;
         else if (this.resizing > 1)
@@ -291,41 +316,11 @@ var VirtualRenderer = function(container, theme) {
         else
             this.resizing = force ? 1 : 0;
         if (!height)
-            height = dom.getInnerHeight(this.container);
-
-        if (height && (force || size.height != height)) {
-            size.height = height;
-            changes = this.CHANGE_SIZE;
-
-            size.scrollerHeight = this.scroller.clientHeight;
-            if (force || !size.scrollerHeight) {
-                size.scrollerHeight = size.height;
-                if (this.$horizScroll)
-                    size.scrollerHeight -= this.scrollBar.getWidth();
-            }
-            this.scrollBar.setHeight(size.scrollerHeight);
-
-            if (this.session) {
-                this.session.setScrollTop(this.getScrollTop());
-                changes = changes | this.CHANGE_FULL;
-            }
-        }
-
+            height = this.container.clientHeight;
         if (!width)
-            width = dom.getInnerWidth(this.container);
+            width = this.container.clientWidth;
 
-        if (width && (force || this.resizing > 1 || size.width != width)) {
-            changes = this.CHANGE_SIZE;
-            size.width = width;
-
-            var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
-            this.scroller.style.left = gutterWidth + "px";
-            size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
-            this.scroller.style.right = this.scrollBar.getWidth() + "px";
-
-            if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
-                changes = changes | this.CHANGE_FULL;
-        }
+        var changes = this.$updateCachedSize(force, gutterWidth, width, height);
 
         if (!this.$size.scrollerHeight)
             return;
@@ -341,17 +336,57 @@ var VirtualRenderer = function(container, theme) {
         if (force)
             delete this.resizing;
     };
+    
+    this.$updateCachedSize = function(force, gutterWidth, width, height) {
+        var changes = this.$changes || 0;
+        var size = this.$size;
+        if (height && (force || size.height != height)) {
+            size.height = height;
+            changes = this.CHANGE_SIZE;
+
+            size.scrollerHeight = size.height;
+            if (this.$horizScroll)
+                size.scrollerHeight -= this.scrollBarH.getHeight();
+                
+            this.scrollBarV.setHeight(size.scrollerHeight);
+
+            if (this.session) {
+                this.session.setScrollTop(this.getScrollTop());
+                changes = changes | this.CHANGE_SCROLL;
+            }
+        }
+
+        if (width && (force || this.resizing > 1 || size.width != width)) {
+            changes = this.CHANGE_SIZE;
+            size.width = width;
+
+            var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
+            this.scrollBarH.element.style.left = 
+            this.scroller.style.left = gutterWidth + "px";
+            size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBarV.getWidth());           
+                
+            this.scroller.style.right = this.scrollBarV.getWidth() + "px";
+            this.scroller.style.bottom = this.scrollBarH.getHeight() + "px";
+                
+            this.scrollBarH.setWidth(size.scrollerWidth);
+
+            if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
+                changes = changes | this.CHANGE_FULL;
+        }
+        return changes;
+    };
 
     this.onGutterResize = function() {
         var width = this.$size.width;
         var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
-        this.scroller.style.left = gutterWidth + "px";
-        this.$size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
+        this.$updateCachedSize(true, gutterWidth, this.$size.width, this.$size.height);
 
         if (this.session.getUseWrapMode() && this.adjustWrapLimit())
             this.$loop.schedule(this.CHANGE_FULL);
-        else
+        else {
+            this.$computeLayerConfig();
             this.$loop.schedule(this.CHANGE_MARKER);
+        }
     };
 
     /**
@@ -534,6 +569,8 @@ var VirtualRenderer = function(container, theme) {
     // move text input over the cursor
     // this is required for iOS and IME
     this.$moveTextAreaToCursor = function() {
+    this.textarea.style.cssText = "top:0;left:0;position:fixed"
+    return
         if (!this.$keepTextAreaAtCursor)
             return;
         var config = this.layerConfig;
@@ -619,29 +656,56 @@ var VirtualRenderer = function(container, theme) {
         this.$loop.schedule(this.CHANGE_FULL);
         this.$updatePrintMargin();
     };
+    
+    this.setScrollMargin = function(top, left, bottom, right) {
+        var sm = this.scrollMargin;
+        sm.top = top|0;
+        sm.bottom = bottom|0;
+        sm.right = right|0;
+        sm.left = left|0;
+        sm.v = sm.top + sm.bottom;
+        sm.h = sm.left + sm.right;
+        this.updateFull();
+    };
 
     /**
-    *
-    * Returns whether the horizontal scrollbar is set to be always visible.
-    * @returns {Boolean}
-    **/
+     * Returns whether the horizontal scrollbar is set to be always visible.
+     * @returns {Boolean}
+     **/
     this.getHScrollBarAlwaysVisible = function() {
         return this.$hScrollBarAlwaysVisible;
     };
 
     /**
-    * Identifies whether you want to show the horizontal scrollbar or not.
-    * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
-    *
-    *
-    **/
+     * Identifies whether you want to show the horizontal scrollbar or not.
+     * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
+     **/
     this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
         this.setOption("hScrollBarAlwaysVisible", alwaysVisible);
     };
+    /**
+     * Returns whether the horizontal scrollbar is set to be always visible.
+     * @returns {Boolean}
+     **/
+    this.getVScrollBarAlwaysVisible = function() {
+        return this.$hScrollBarAlwaysVisible;
+    };
 
-    this.$updateScrollBar = function() {
-        this.scrollBar.setInnerHeight(this.layerConfig.maxHeight);
-        this.scrollBar.setScrollTop(this.scrollTop);
+    /**
+     * Identifies whether you want to show the horizontal scrollbar or not.
+     * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
+     **/
+    this.setVScrollBarAlwaysVisible = function(alwaysVisible) {
+        this.setOption("vScrollBarAlwaysVisible", alwaysVisible);
+    };
+
+    this.$updateScrollBarV = function() {
+        this.scrollBarV.setInnerHeight(this.layerConfig.maxHeight + this.scrollMargin.v);
+        this.scrollBarV.setScrollTop(this.scrollTop + this.scrollMargin.top);
+    };
+    this.$updateScrollBarH = function() {
+        this.scrollBarH.setInnerWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h);
+        this.scrollBarH.setScrollLeft(this.scrollLeft + this.scrollMargin.left);
     };
 
     this.$renderChanges = function(changes, force) {
@@ -649,7 +713,9 @@ var VirtualRenderer = function(container, theme) {
             this.$changes = changes;
             return; 
         }
-
+            
+        this.$logChanges(changes);
+        
         this._signal("beforeRender");
         // text, scrolling and resize changes can cause the view port size to change
         if (changes & this.CHANGE_FULL ||
@@ -662,21 +728,17 @@ var VirtualRenderer = function(container, theme) {
 
         // horizontal scrolling
         if (changes & this.CHANGE_H_SCROLL) {
-            this.scroller.scrollLeft = this.scrollLeft;
-
-            // read the value after writing it since the value might get clipped
-            var scrollLeft = this.scroller.scrollLeft;
-            this.scrollLeft = scrollLeft;
-            this.session.setScrollLeft(scrollLeft);
-
-            this.scroller.className = this.scrollLeft == 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
+            this.$updateScrollBarH();
+            this.content.style.marginLeft = -this.scrollLeft + "px";
+            this.scroller.className = this.scrollLeft <= 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
         }
 
         // full
         if (changes & this.CHANGE_FULL) {
             this.$textLayer.checkForSizeChanges();
             // update scrollbar first to not lose scroll position when gutter calls resize
-            this.$updateScrollBar();
+            this.$updateScrollBarV();
+            this.$updateScrollBarH();
             this.$textLayer.update(this.layerConfig);
             if (this.$showGutter)
                 this.$gutterLayer.update(this.layerConfig);
@@ -691,6 +753,7 @@ var VirtualRenderer = function(container, theme) {
 
         // scrolling
         if (changes & this.CHANGE_SCROLL) {
+            this.$updateScrollBarV();
             if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES)
                 this.$textLayer.update(this.layerConfig);
             else
@@ -703,7 +766,6 @@ var VirtualRenderer = function(container, theme) {
             this.$cursorLayer.update(this.layerConfig);
             this.$highlightGutterLine && this.$updateGutterLineHighlight();
             this.$moveTextAreaToCursor();
-            this.$updateScrollBar();
             this._signal("afterRender");
             return;
         }
@@ -736,35 +798,70 @@ var VirtualRenderer = function(container, theme) {
             this.$markerBack.update(this.layerConfig);
         }
 
-        if (changes & this.CHANGE_SIZE)
-            this.$updateScrollBar();
+        if (changes & this.CHANGE_SIZE) {
+            this.$updateScrollBarV();
+            this.$updateScrollBarH();
+        }
 
         this._signal("afterRender");
     };
 
+    
+    this.setSize = function(height, width) {
+        this.scrollBar.element.style.display = "";
+        this.scrollBar.width = this.scrollBar.orginalWidth;
+        this.container.style.height = config.height + "px";
+        
+        this.scrollTop = height - this.maxLines * this.lineHeight;
+    };
+    
     this.$computeLayerConfig = function() {
         if (!this.$size.scrollerHeight)
             return this.onResize(true);
 
         var session = this.session;
+        
+        var screenLines = this.session.getScreenLength()
+        if (this.$size.maxLines) {
+            var underflow = screenLines < this.$size.maxLines;
+            if (underflow != this.underflow) {
+                
+                
+            } else if (true) {
+            
+            }
+        }
+        var maxHeight =  screenLines * this.lineHeight;
+        
+            
 
         var offset = this.scrollTop % this.lineHeight;
         var minHeight = this.$size.scrollerHeight + this.lineHeight;
 
         var longestLine = this.$getLongestLine();
 
-        var horizScroll = this.$hScrollBarAlwaysVisible || this.$size.scrollerWidth - longestLine < 0;
+        var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0;
+        if (!horizScroll && this.$hScrollBarAlwaysVisible)
+            horizScroll = true;
+
         var horizScrollChanged = this.$horizScroll !== horizScroll;
-        this.$horizScroll = horizScroll;
         if (horizScrollChanged) {
-            this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden";
-            // when we hide scrollbar scroll event isn't emited
-            // leaving session with wrong scrollLeft value
-            if (!horizScroll)
-                this.session.setScrollLeft(0);
+            this.$horizScroll = horizScroll;
+            this.scrollBarH.setVisible(horizScroll);
         }
-        var maxHeight = this.session.getScreenLength() * this.lineHeight;
-        this.session.setScrollTop(Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight)));
+        
+        var vScroll = this.$vScrollBarAlwaysVisible || this.$size.scrollerHeight - maxHeight < 0;
+        var vScrollChanged = this.$vScroll !== vScroll;
+        if (vScrollChanged) {
+            this.$vScroll = vScroll;
+            this.scrollBarV.setVisible(vScroll);
+        }
+        
+        this.session.setScrollTop(Math.max(-this.scrollMargin.top,
+            Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v)));
+        console.log(longestLine , this.$size.scrollerWidth)
+        this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft, 
+            longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h)));
 
         var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
         var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight));
@@ -815,7 +912,7 @@ var VirtualRenderer = function(container, theme) {
 
         // Horizontal scrollbar visibility may have changed, which changes
         // the client height of the scroller
-        if (horizScrollChanged)
+        if (horizScrollChanged || vScrollChanged)
             this.onResize(true);
     };
 
@@ -952,6 +1049,10 @@ var VirtualRenderer = function(container, theme) {
         if (this.scrollTop > top) {
             if (offset)
                 top -= offset * this.$size.scrollerHeight;
+            if (top == 0)
+                top = - this.scrollMargin.top;
+            else if (top == 0)
+                top = + this.scrollMargin.bottom;
             this.session.setScrollTop(top);
         } else if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) {
             if (offset)
@@ -963,7 +1064,7 @@ var VirtualRenderer = function(container, theme) {
 
         if (scrollLeft > left) {
             if (left < this.$padding + 2 * this.layerConfig.characterWidth)
-                left = 0;
+                left = -this.scrollMargin.left;
             this.session.setScrollLeft(left);
         } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) {
             this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth));
@@ -1119,9 +1220,6 @@ var VirtualRenderer = function(container, theme) {
     * @returns {Number}
     **/
     this.scrollToX = function(scrollLeft) {
-        if (scrollLeft < 0)
-            scrollLeft = 0;
-
         if (this.scrollLeft !== scrollLeft)
             this.scrollLeft = scrollLeft;
         this.$loop.schedule(this.CHANGE_H_SCROLL);
@@ -1148,9 +1246,10 @@ var VirtualRenderer = function(container, theme) {
     * @returns {Boolean}
     **/
     this.isScrollableBy = function(deltaX, deltaY) {
-        if (deltaY < 0 && this.session.getScrollTop() >= 1)
+        if (deltaY < 0 && this.session.getScrollTop() >= 1 - this.scrollMargin.top)
            return true;
-        if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight - this.layerConfig.maxHeight < -1)
+        if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight
+            - this.layerConfig.maxHeight < -1 + this.scrollMargin.bottom)
            return true;
         // todo: handle horizontal scrolling
     };
@@ -1424,13 +1523,19 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
         value: true
     },
     hScrollBarAlwaysVisible: {
-        set: function(alwaysVisible) {
-            this.$hScrollBarAlwaysVisible = alwaysVisible;
+        set: function(val) {
             if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll)
                 this.$loop.schedule(this.CHANGE_SCROLL);
         },
         initialValue: false
     },
+    vScrollBarAlwaysVisible: {
+        set: function(val) {
+            if (!this.$vScrollBarAlwaysVisible || !this.$vScroll)
+                this.$loop.schedule(this.CHANGE_SCROLL);
+        },
+        initialValue: false
+    },
     fontSize:  {
         set: function(size) {
             if (typeof size == "number")

From b3e4d33e029b8639130d9c1432ed47c954008902 Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Mon, 24 Jun 2013 00:18:51 +0400
Subject: [PATCH 4/6] update scrollbar when inserting new line in the middle of
 the document

fixes regression from 9f1d8af9373e8e474db8cdc7f456316287128e25
---
 lib/ace/virtual_renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index 6cb3ddc3..692e1084 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -798,7 +798,7 @@ var VirtualRenderer = function(container, theme) {
             this.$markerBack.update(this.layerConfig);
         }
 
-        if (changes & this.CHANGE_SIZE) {
+        if (changes & this.CHANGE_SIZE || changes & this.CHANGE_LINES) {
             this.$updateScrollBarV();
             this.$updateScrollBarH();
         }

From 0479acfea78f4fb3f4cd8e9c122b41748f5844e3 Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Tue, 25 Jun 2013 20:59:06 +0400
Subject: [PATCH 5/6] add option to autoresize editor vertically

---
 demo/kitchen-sink/layout.js    | 62 +---------------------
 lib/ace/autocomplete/popup.js  | 41 ++-------------
 lib/ace/snippets/objc.snippets |  2 +-
 lib/ace/snippets/php.snippets  |  2 +-
 lib/ace/snippets/r.snippets    |  8 +--
 lib/ace/virtual_renderer.js    | 95 ++++++++++++++++++----------------
 6 files changed, 62 insertions(+), 148 deletions(-)

diff --git a/demo/kitchen-sink/layout.js b/demo/kitchen-sink/layout.js
index 36f85cf3..4729af44 100644
--- a/demo/kitchen-sink/layout.js
+++ b/demo/kitchen-sink/layout.js
@@ -103,11 +103,6 @@ var Split = function(){
 exports.singleLineEditor = function(el) {
     var renderer = new Renderer(el);
     el.style.overflow = "hidden";
-    renderer.scrollBar.element.style.top = "0";
-    renderer.scrollBar.element.style.display = "none";
-    renderer.scrollBar.orginalWidth = renderer.scrollBar.width;
-    renderer.scrollBar.width = 0;
-    renderer.content.style.height = "auto";
 
     renderer.screenToTextCoordinates = function(x, y) {
         var pos = this.pixelToScreenCoordinates(x, y);
@@ -117,61 +112,7 @@ exports.singleLineEditor = function(el) {
         );
     };
 
-    renderer.maxLines = 4;
-    renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
-    renderer.$computeLayerConfig = function() {
-        var config = this.layerConfig;
-        var height = this.session.getScreenLength() * this.lineHeight;
-        if (config.height != height) {
-            var vScroll = height > this.maxLines * this.lineHeight;
-
-            if (vScroll != this.$vScroll) {
-                if (vScroll) {
-                    this.scrollBar.element.style.display = "";
-                    this.scrollBar.width = this.scrollBar.orginalWidth;
-                    this.container.style.height = config.height + "px";
-                    height = config.height;
-                    this.scrollTop = height - this.maxLines * this.lineHeight;
-                } else {
-                    this.scrollBar.element.style.display = "none";
-                    this.scrollBar.width = 0;
-                }
-
-                this.onResize();
-                this.$vScroll = vScroll;
-            }
-
-            if (this.$vScroll)
-                return renderer.$computeLayerConfigWithScroll();
-
-            this.container.style.height = height + "px";
-            this.scroller.style.height = height + "px";
-            this.content.style.height = height + "px";
-            this._emit("resize");
-        }
-
-        var longestLine = this.$getLongestLine();
-        var firstRow = 0;
-        var lastRow = this.session.getLength();
-
-        this.scrollTop = 0;
-        config.width = longestLine;
-        config.padding = this.$padding;
-        config.firstRow = 0;
-        config.firstRowScreen = 0;
-        config.lastRow = lastRow;
-        config.lineHeight = this.lineHeight;
-        config.characterWidth = this.characterWidth;
-        config.minHeight = height;
-        config.maxHeight = height;
-        config.offset = 0;
-        config.height = height;
-
-        this.$gutterLayer.element.style.marginTop = 0 + "px";
-        this.content.style.marginTop = 0 + "px";
-        this.content.style.width = longestLine + 2 * this.$padding + "px";
-    };
-    renderer.isScrollableBy=function(){return false};
+    renderer.$maxLines = 4;
 
     renderer.setStyle("ace_one-line");
     var editor = new Editor(renderer);
@@ -182,7 +123,6 @@ exports.singleLineEditor = function(el) {
     editor.setShowPrintMargin(false);
     editor.renderer.setShowGutter(false);
     editor.renderer.setHighlightGutterLine(false);
-
     editor.$mouseHandler.$focusWaitTimout = 0;
 
     return editor;
diff --git a/lib/ace/autocomplete/popup.js b/lib/ace/autocomplete/popup.js
index 85a5d8b7..5b7ce0b3 100644
--- a/lib/ace/autocomplete/popup.js
+++ b/lib/ace/autocomplete/popup.js
@@ -42,42 +42,8 @@ var dom = require("../lib/dom");
 var $singleLineEditor = function(el) {
     var renderer = new Renderer(el);
 
-    renderer.maxLines = 4;
-    renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
-    renderer.scrollBar.orginalWidth = renderer.scrollBar.getWidth();
-    renderer.$computeLayerConfig = function() {
-        var height = this.session.getScreenLength() * this.lineHeight;
-        var maxHeight = this.maxLines * this.lineHeight;
-        var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height));
-        var vScroll = height > maxHeight;
-        if (desiredHeight != this.desiredHeight || vScroll != this.$vScroll) {
-            if (vScroll != this.$vScroll) {
-                if (vScroll) {
-                    this.scrollBar.element.style.display = "";
-                    this.scrollBar.width = this.scrollBar.orginalWidth;
-
-                    height = maxHeight;
-                    this.scrollTop = height - this.maxLines * this.lineHeight;
-                } else {
-                    this.scrollBar.element.style.display = "none";
-                    this.scrollBar.width = 0;
-                }
-
-                this.$size.height = 0;
-                this.$size.width = 0;
-
-                this.$vScroll = vScroll;
-            }
-
-            this.container.style.height = desiredHeight + "px";
-            this.onResize();
-            this.$loop.changes = 0;
-            this.desiredHeight = desiredHeight;
-            this.scroller.style.overflowX = "hidden";
-        }
-        return renderer.$computeLayerConfigWithScroll();
-    };
-
+    renderer.$maxLines = 4;
+    
     var editor = new Editor(renderer);
 
     editor.setHighlightActiveLine(false);
@@ -108,7 +74,7 @@ var AcePopup = function(parentNode) {
     popup.renderer.$cursorLayer.restartTimer = noop;
     popup.renderer.$cursorLayer.element.style.opacity = 0;
 
-    popup.renderer.maxLines = 8;
+    popup.renderer.$maxLines = 8;
     popup.renderer.$keepTextAreaAtCursor = false;
 
     popup.setHighlightActiveLine(true);
@@ -221,6 +187,7 @@ var AcePopup = function(parentNode) {
 
         el.style.left = pos.left + "px";
         el.style.display = "";
+        this.renderer.$textLayer.checkForSizeChanges();
 
         this._signal("show");
     };
diff --git a/lib/ace/snippets/objc.snippets b/lib/ace/snippets/objc.snippets
index 85b80d9e..5517b062 100644
--- a/lib/ace/snippets/objc.snippets
+++ b/lib/ace/snippets/objc.snippets
@@ -165,7 +165,7 @@ snippet fora
 		${4}
 	}
 # Try / Catch Block
-snippet	@try
+snippet @try
 	@try {
 		${1:statements}
 	}
diff --git a/lib/ace/snippets/php.snippets b/lib/ace/snippets/php.snippets
index e861a5be..97f17bc1 100644
--- a/lib/ace/snippets/php.snippets
+++ b/lib/ace/snippets/php.snippets
@@ -15,7 +15,7 @@ snippet ns
 snippet use
 	use ${1:Foo\Bar\Baz};
 	${2}
-snippet	c
+snippet c
 	${1:abstract }class ${2:`Filename()`}
 	{
 		${3}
diff --git a/lib/ace/snippets/r.snippets b/lib/ace/snippets/r.snippets
index 71186e35..cfe482bc 100644
--- a/lib/ace/snippets/r.snippets
+++ b/lib/ace/snippets/r.snippets
@@ -85,13 +85,13 @@ snippet la
 snippet l_
 	l_ply(${1:list}, ${2:function})
 
-snippet	md
+snippet md
 	mdply(${1:matrix}, ${2:function})
-snippet	ml
+snippet ml
 	mlply(${1:matrix}, ${2:function})
-snippet	ma
+snippet ma
 	maply(${1:matrix}, ${2:function})
-snippet	m_
+snippet m_
 	m_ply(${1:matrix}, ${2:function})
 
 # plot functions
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index 692e1084..a3afedc5 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -187,21 +187,21 @@ var VirtualRenderer = function(container, theme) {
     this.CHANGE_FULL = 512;
     this.CHANGE_H_SCROLL = 1024;
 
-    this.$logChanges = function(changes) {
-        var a = ""
-        if (changes & this.CHANGE_CURSOR) a += " cursor";
-        if (changes & this.CHANGE_MARKER) a += " marker";
-        if (changes & this.CHANGE_GUTTER) a += " gutter";
-        if (changes & this.CHANGE_SCROLL) a += " scroll";
-        if (changes & this.CHANGE_LINES) a += " lines";
-        if (changes & this.CHANGE_TEXT) a += " text";
-        if (changes & this.CHANGE_SIZE) a += " size";
-        if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
-        if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
-        if (changes & this.CHANGE_FULL) a += " full";
-        if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
-        console.log(a.trim())
-    };
+    // this.$logChanges = function(changes) {
+    //     var a = ""
+    //     if (changes & this.CHANGE_CURSOR) a += " cursor";
+    //     if (changes & this.CHANGE_MARKER) a += " marker";
+    //     if (changes & this.CHANGE_GUTTER) a += " gutter";
+    //     if (changes & this.CHANGE_SCROLL) a += " scroll";
+    //     if (changes & this.CHANGE_LINES) a += " lines";
+    //     if (changes & this.CHANGE_TEXT) a += " text";
+    //     if (changes & this.CHANGE_SIZE) a += " size";
+    //     if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
+    //     if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
+    //     if (changes & this.CHANGE_FULL) a += " full";
+    //     if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
+    //     console.log(a.trim())
+    // };
 
     oop.implement(this, EventEmitter);
 
@@ -569,8 +569,6 @@ var VirtualRenderer = function(container, theme) {
     // move text input over the cursor
     // this is required for iOS and IME
     this.$moveTextAreaToCursor = function() {
-    this.textarea.style.cssText = "top:0;left:0;position:fixed"
-    return
         if (!this.$keepTextAreaAtCursor)
             return;
         var config = this.layerConfig;
@@ -657,7 +655,7 @@ var VirtualRenderer = function(container, theme) {
         this.$updatePrintMargin();
     };
     
-    this.setScrollMargin = function(top, left, bottom, right) {
+    this.setScrollMargin = function(top, bottom, left, right) {
         var sm = this.scrollMargin;
         sm.top = top|0;
         sm.bottom = bottom|0;
@@ -714,7 +712,7 @@ var VirtualRenderer = function(container, theme) {
             return; 
         }
             
-        this.$logChanges(changes);
+        // this.$logChanges(changes);
         
         this._signal("beforeRender");
         // text, scrolling and resize changes can cause the view port size to change
@@ -807,50 +805,55 @@ var VirtualRenderer = function(container, theme) {
     };
 
     
-    this.setSize = function(height, width) {
-        this.scrollBar.element.style.display = "";
-        this.scrollBar.width = this.scrollBar.orginalWidth;
-        this.container.style.height = config.height + "px";
+    this.$autosize = function(height, width) {
+        var height = this.session.getScreenLength() * this.lineHeight;
+        var maxHeight = this.$maxLines * this.lineHeight;
+        var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height));
+        var vScroll = height > maxHeight;
         
-        this.scrollTop = height - this.maxLines * this.lineHeight;
+        if (desiredHeight != this.desiredHeight ||
+            this.$size.height != this.desiredHeight || vScroll != this.$vScroll) {
+            if (vScroll != this.$vScroll) {
+                this.$vScroll = vScroll;
+                this.scrollBarV.setVisible(vScroll);
+            }
+
+            this.container.style.height = desiredHeight + "px";
+            this.$updateCachedSize(true, this.$gutterWidth, this.$size.width, desiredHeight);
+            // this.$loop.changes = 0;
+            this.desiredHeight = desiredHeight;
+        }
     };
     
     this.$computeLayerConfig = function() {
+        if (this.$maxLines && this.lineHeight > 1)
+            this.$autosize();
+
         if (!this.$size.scrollerHeight)
             return this.onResize(true);
 
         var session = this.session;
         
+        var hideScrollbars = this.$size.height <= 2 * this.lineHeight;
         var screenLines = this.session.getScreenLength()
-        if (this.$size.maxLines) {
-            var underflow = screenLines < this.$size.maxLines;
-            if (underflow != this.underflow) {
-                
-                
-            } else if (true) {
-            
-            }
-        }
         var maxHeight =  screenLines * this.lineHeight;
-        
-            
 
         var offset = this.scrollTop % this.lineHeight;
         var minHeight = this.$size.scrollerHeight + this.lineHeight;
 
         var longestLine = this.$getLongestLine();
+        
+        var horizScroll = !hideScrollbars && (this.$hScrollBarAlwaysVisible ||
+            this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0);
 
-        var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0;
-        if (!horizScroll && this.$hScrollBarAlwaysVisible)
-            horizScroll = true;
-
-        var horizScrollChanged = this.$horizScroll !== horizScroll;
-        if (horizScrollChanged) {
+        var hScrollChanged = this.$horizScroll !== horizScroll;
+        if (hScrollChanged) {
             this.$horizScroll = horizScroll;
             this.scrollBarH.setVisible(horizScroll);
         }
         
-        var vScroll = this.$vScrollBarAlwaysVisible || this.$size.scrollerHeight - maxHeight < 0;
+        var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible ||
+            this.$size.scrollerHeight - maxHeight < 0);
         var vScrollChanged = this.$vScroll !== vScroll;
         if (vScrollChanged) {
             this.$vScroll = vScroll;
@@ -859,7 +862,7 @@ var VirtualRenderer = function(container, theme) {
         
         this.session.setScrollTop(Math.max(-this.scrollMargin.top,
             Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v)));
-        console.log(longestLine , this.$size.scrollerWidth)
+
         this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft, 
             longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h)));
 
@@ -912,8 +915,10 @@ var VirtualRenderer = function(container, theme) {
 
         // Horizontal scrollbar visibility may have changed, which changes
         // the client height of the scroller
-        if (horizScrollChanged || vScrollChanged)
+        if (hScrollChanged || vScrollChanged) {
             this.onResize(true);
+            this._signal("scrollbarVisibilityChanged");
+        }
     };
 
     this.$updateLines = function() {
@@ -1068,6 +1073,8 @@ var VirtualRenderer = function(container, theme) {
             this.session.setScrollLeft(left);
         } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) {
             this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth));
+        } else if (scrollLeft <= this.$padding && left - scrollLeft < this.characterWidth) {
+            this.session.setScrollLeft(0);
         }
     };
 

From 78585a9c5d15b7ca061fb28706f80f9269ab30b2 Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Tue, 25 Jun 2013 23:50:00 +0400
Subject: [PATCH 6/6] add demo/autoresize.html

---
 demo/autoresize.html        | 48 +++++++++++++++++++++++++++++++++++++
 lib/ace/editor.js           |  2 ++
 lib/ace/virtual_renderer.js | 20 +++++++++++++---
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 demo/autoresize.html

diff --git a/demo/autoresize.html b/demo/autoresize.html
new file mode 100644
index 00000000..cc1dc5e3
--- /dev/null
+++ b/demo/autoresize.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Editor</title>
+  <style type="text/css" media="screen">
+
+	.ace_editor {
+		position: relative !important;
+		border: 1px solid lightgray;
+		margin: auto;
+		height: 200px;
+		width: 80%;
+	}
+	.scrollmargin {
+		height: 100px;
+        text-align: center;
+	}
+    </style>
+</head>
+<body>
+<pre id="editor">autoresizing editor</pre>
+<div class="scrollmargin"></div>
+<pre id="editor2">minHeight = 2 lines</pre>
+
+<script src="../build/src/ace.js"></script>
+<script>
+
+// create first editor
+var editor = ace.edit("editor");
+editor.setTheme("ace/theme/tomorrow");
+editor.session.setMode("ace/mode/html");
+editor.setAutoScrollEditorIntoView();
+editor.setOption("maxLines", 100);
+
+var editor2 = ace.edit("editor2");
+editor2.setTheme("ace/theme/tomorrow_night_blue");
+editor2.session.setMode("ace/mode/html");
+editor2.setAutoScrollEditorIntoView();
+editor2.setOption("maxLines", 30);
+editor2.setOption("minLines", 2);
+
+
+</script>
+
+</body>
+</html>
diff --git a/lib/ace/editor.js b/lib/ace/editor.js
index 62a4c37f..088fbaae 100644
--- a/lib/ace/editor.js
+++ b/lib/ace/editor.js
@@ -2259,6 +2259,8 @@ config.defineOptions(Editor.prototype, "editor", {
     displayIndentGuides: "renderer",
     fontSize: "renderer",
     fontFamily: "renderer",
+    maxLines: "renderer",
+    minLines: "renderer",
 
     scrollSpeed: "$mouseHandler",
     dragDelay: "$mouseHandler",
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index a3afedc5..90403095 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -808,7 +808,10 @@ var VirtualRenderer = function(container, theme) {
     this.$autosize = function(height, width) {
         var height = this.session.getScreenLength() * this.lineHeight;
         var maxHeight = this.$maxLines * this.lineHeight;
-        var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height));
+        var desiredHeight = Math.max(
+            (this.$minLines||1) * this.lineHeight,
+            Math.min(maxHeight, height)
+        );
         var vScroll = height > maxHeight;
         
         if (desiredHeight != this.desiredHeight ||
@@ -817,9 +820,10 @@ var VirtualRenderer = function(container, theme) {
                 this.$vScroll = vScroll;
                 this.scrollBarV.setVisible(vScroll);
             }
-
+            
+            var w = this.container.clientWidth;
             this.container.style.height = desiredHeight + "px";
-            this.$updateCachedSize(true, this.$gutterWidth, this.$size.width, desiredHeight);
+            this.$updateCachedSize(true, this.$gutterWidth, w, desiredHeight);
             // this.$loop.changes = 0;
             this.desiredHeight = desiredHeight;
         }
@@ -1557,6 +1561,16 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
             this.container.style.fontFamily = name;
             this.updateFontSize();
         }
+    },
+    maxLines: {
+        set: function(val) {
+            this.updateFull();
+        }
+    },
+    minLines: {
+        set: function(name) {        
+            this.updateFull();
+        }
     }
 });