automatically resize gutter for high line numbers

lib/ace/css/editor.css

@@ -35,24 +35,35 @@
     z-index: 4;
 }
 
+.ace_gutter .ace_layer {
+    position: relative;
+    min-width: 54px;
+    text-align: right;
+}
+
 .ace_gutter {
     position: absolute;
-    overflow-x: hidden;
+    overflow : hidden;
-    overflow-y: hidden;
     height: 100%;
+    width: auto;
     cursor: default;
 }
 
+.ace_gutter-cell {
+    padding-left: 19px;
+    padding-right: 6px;
+}
+
 .ace_gutter-cell.ace_error {
     background-image: url("data:image/gif,GIF89a%10%00%10%00%D5%00%00%F5or%F5%87%88%F5nr%F4ns%EBmq%F5z%7F%DDJT%DEKS%DFOW%F1Yc%F2ah%CE(7%CE)8%D18E%DD%40M%F2KZ%EBU%60%F4%60m%DCir%C8%16(%C8%19*%CE%255%F1%3FR%F1%3FS%E6%AB%B5%CA%5DI%CEn%5E%F7%A2%9A%C9G%3E%E0a%5B%F7%89%85%F5yy%F6%82%80%ED%82%80%FF%BF%BF%E3%C4%C4%FF%FF%FF%FF%FF%FF%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%01%00%00%25%00%2C%00%00%00%00%10%00%10%00%00%06p%C0%92pH%2C%1A%8F%C8%D2H%93%E1d4%23%E4%88%D3%09mB%1DN%B48%F5%90%40%60%92G%5B%94%20%3E%22%D2%87%24%FA%20%24%C5%06A%00%20%B1%07%02B%A38%89X.v%17%82%11%13q%10%0Fi%24%0F%8B%10%7BD%12%0Ei%09%92%09%0EpD%18%15%24%0A%9Ci%05%0C%18F%18%0B%07%04%01%04%06%A0H%18%12%0D%14%0D%12%A1I%B3%B4%B5IA%00%3B");
     background-repeat: no-repeat;
-    background-position: 4px center;
+    background-position: 2px center;
 }
 
 .ace_gutter-cell.ace_warning {
     background-image: url("data:image/gif,GIF89a%10%00%10%00%D5%00%00%FF%DBr%FF%DE%81%FF%E2%8D%FF%E2%8F%FF%E4%96%FF%E3%97%FF%E5%9D%FF%E6%9E%FF%EE%C1%FF%C8Z%FF%CDk%FF%D0s%FF%D4%81%FF%D5%82%FF%D5%83%FF%DC%97%FF%DE%9D%FF%E7%B8%FF%CCl%7BQ%13%80U%15%82W%16%81U%16%89%5B%18%87%5B%18%8C%5E%1A%94d%1D%C5%83-%C9%87%2F%C6%84.%C6%85.%CD%8B2%C9%871%CB%8A3%CD%8B5%DC%98%3F%DF%9BB%E0%9CC%E1%A5U%CB%871%CF%8B5%D1%8D6%DB%97%40%DF%9AB%DD%99B%E3%B0p%E7%CC%AE%FF%FF%FF%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%01%00%00%2F%00%2C%00%00%00%00%10%00%10%00%00%06a%C0%97pH%2C%1A%8FH%A1%ABTr%25%87%2B%04%82%F4%7C%B9X%91%08%CB%99%1C!%26%13%84*iJ9(%15G%CA%84%14%01%1A%97%0C%03%80%3A%9A%3E%81%84%3E%11%08%B1%8B%20%02%12%0F%18%1A%0F%0A%03'F%1C%04%0B%10%16%18%10%0B%05%1CF%1D-%06%07%9A%9A-%1EG%1B%A0%A1%A0U%A4%A5%A6BA%00%3B");
     background-repeat: no-repeat;
-    background-position: 4px center;
+    background-position: 2px center;
 }
 
 .ace_editor .ace_sb {

lib/ace/layer/gutter.js

@@ -40,6 +40,8 @@
 define(function(require, exports, module) {
 
 var dom = require("../lib/dom");
+var oop = require("../lib/oop");
+var EventEmitter = require("../lib/event_emitter").EventEmitter;
 
 var Gutter = function(parentEl) {
     this.element = dom.createElement("div");
@@ -47,6 +49,8 @@ var Gutter = function(parentEl) {
     parentEl.appendChild(this.element);
     this.setShowFoldWidgets(this.$showFoldWidgets);
     
+    this.gutterWidth = 0;
+
     this.$breakpoints = [];
     this.$annotations = [];
     this.$decorations = [];
@@ -54,6 +58,8 @@ var Gutter = function(parentEl) {
 
 (function() {
 
+    oop.implement(this, EventEmitter);
+    
     this.setSession = function(session) {
         this.session = session;
     };
@@ -151,6 +157,12 @@ var Gutter = function(parentEl) {
         }
         this.element = dom.setInnerHtml(this.element, html.join(""));
         this.element.style.height = config.minHeight + "px";
+        
+        var gutterWidth = this.element.offsetWidth;
+        if (gutterWidth !== this.gutterWidth) {
+            this.gutterWidth = gutterWidth;
+            this._emit("changeGutterWidth", gutterWidth);
+        }
     };
 
     this.$showFoldWidgets = true;
@@ -162,6 +174,7 @@ var Gutter = function(parentEl) {
 
         this.$showFoldWidgets = show;
     };
+    
     this.getShowFoldWidgets = function() {
         return this.$showFoldWidgets;
     };

lib/ace/virtual_renderer.js

@@ -82,6 +82,8 @@ var VirtualRenderer = function(container, theme) {
     this.scroller.appendChild(this.content);
 
     this.$gutterLayer = new GutterLayer(this.$gutter);
+    this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
+    
     this.$markerBack = new MarkerLayer(this.content);
 
     var textLayer = this.$textLayer = new TextLayer(this.content);

tool/Theme.tmpl.css

@@ -8,19 +8,8 @@
 }
 
 .%cssClass% .ace_gutter {
-  width: 50px;
   background: #e8e8e8;
   color: #333;
-  overflow : hidden;
-}
-
-.%cssClass% .ace_gutter-layer {
-  width: 100%;
-  text-align: right;
-}
-
-.%cssClass% .ace_gutter-layer .ace_gutter-cell {
-  padding-right: 6px;
 }
 
 .%cssClass% .ace_print_margin {