changed to using CodeMirror.runMode for better performance

main.css

@@ -1,38 +1,38 @@
 #mini-map {
-
+    -webkit-transform-origin: 100% 0%;
+    -webkit-transform: scale(1);
 	position: fixed;
 	top: 37px;
 	width: 70px;
 	right:0;
 	margin-right:86px;
-	z-index: 21;
+	z-index: 0;
 }
 
 #mini-map .selection {	
-	top:-2px;
+	top:0px;
 	position: absolute;
 	width:141px;
 	border-radius:3px;
 	background-color:rgba(0,0,0, 0.06);
 	border: 1px solid rgba(0,0,0,0.2);
-	z-index:22;
+	z-index:2;
 }
 
 #mini-map pre {
-
 	font-family: 'SourceCodePro', monospace;	
 	white-space: pre;
 	word-wrap: normal;
 	border-color:transparent;
-	font-size:2px;
-	line-height:1px;
+	font-size:3px;
+	line-height:3px;
 	padding: 0;
 	margin:0;
 	background:transparent;
 	overflow:hidden;
-	width:135px;
+	width:135px; 
 }
-	
+
 @media (max-width: 600px) {
 	#mini-map{
 		display: none;

main.js

@@ -1,10 +1,11 @@
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, window */
+/*global define, $, brackets, window, CodeMirror, document */
 
 define(function (require, exports, module) {
 	"use strict";
 
 	require('jquery-ui-1.9.2.custom.min');
+	require('runmode');
 
 	var CommandManager = brackets.getModule("command/CommandManager"),
 		EditorManager = brackets.getModule("editor/EditorManager"),
@@ -15,92 +16,85 @@ define(function (require, exports, module) {
 		Menus = brackets.getModule("command/Menus"),
 		COMMAND_ID = "me.drewh.brackets.minimap";
 
-	var loadCSSPromise = ExtensionUtils.loadStyleSheet(module, 'main.css');
 
+	var loadCSSPromise = ExtensionUtils.loadStyleSheet(module, 'main.css');
 
-	function _change(text) {
-		$('#mini-map-code').html(text);
-	}
 
 	function _drawMap() {
-		$('.main-view').append('<div id="mini-map"><div class="selection"></div><div class="cm-s-default" id="mini-map-code"></div></div>');
+		$('.main-view').append('<div id="mini-map"><div class="selection"></div><pre class="cm-s-default" id="mini-map-code"></pre></div>');
 	}
 
 	function lineToPx(line) {
 		return line * 4;
 	}
 
-
 	function pxToLine(px) {
 		return px / 8.4;
 	}
 
+	/* function _documentChange() {
+		
+        var editor = EditorManager.getCurrentFullEditor();
+        $(editor).on('scroll', function(e){
+            var height = $(editor.getScrollerElement()).height();
+            var totalHeight = editor.totalHeight(true);
+            var miniSelectionEl = $('#mini-map .selection')[0];     
+            miniSelectionEl.style.top = (e.delegateTarget.scrollTop/(totalHeight-height))*height+e.delegateTarget.scrollTop+"px";
+        });
+        _documentUpdate();
+    }*/
+
+	function _updateMiniMap(editor) {
+
+		var doc = editor.document;
+		var text = doc.getText();
+
+		var fileType = editor.getModeForDocument();
+
+		if (fileType === 'htmlmixed') {
+			fileType = 'html';
+		}
+
+		CodeMirror.runMode(text, "text/" + fileType, document.getElementById("mini-map-code"));
+	}
 
 	function _documentChange() {
 
 		var miniSelectionEl = $('#mini-map .selection');
-		var drag = false;
-		var height = $(window).height();
 
 		var editor = EditorManager.getCurrentFullEditor();
-
+		var doc = editor.document;
+
+		var height = $(editor.getScrollerElement()).height();
+		var width = $(editor.getScrollerElement()).width();
 		var lineCount = editor.lineCount();
-
-		console.log(lineCount);
 		var totalHeight = editor.totalHeight(true);
-		console.log(editor.totalHeight(true) + ' ' + height );
 
-		var doc = DocumentManager.getCurrentDocument();
-		console.log($(doc));
-		//var doc = editor.document;	
+		var ratio = (height - 200) / totalHeight;
+
+		// $("#mini-map").css('-webkit-transform', 'scale('+ratio+','+ratio+')');
 
 		if (doc) {
-			//console.log($('.CodeMirror-lines div div:eq(2)').html());
-			_change($('.CodeMirror-lines div div:eq(2)').html());
 
-			$(doc).on('change', function () {
-				_change($('.CodeMirror-lines div div:eq(2)').html());
-			});
+			_updateMiniMap(editor);
 
 			miniSelectionEl.css({
 				height: pxToLine(height) + 'px'
 			});
 
-			//			miniSelectionEl.draggable({
-			//				containment: "parent",
-			//				start: function () {
-			//					drag = true;
-			//				},
-			//				drag: function () {
-			//					drag = true;
-			//					var x = editor.getScrollPos().x;
-			//					var y = $('#mini-map .selection').offset().top - 40;
-			//					editor.setScrollPos(x, y);
-			//				},
-			//				stop: function () {
-			//					drag = false;
-			//				}
-			//			});
-			//
-			//			$(editor).on('scroll', function () {
-			//				if (drag === false) {
-			//					var y = editor.getScrollPos().y / 10;
-			//					miniSelectionEl.css({
-			//						'top': y + 'px'
-			//					});
-			//				}
-			//			});
+			/* miniSelectionEl.css({
+				height: height + 'px',
+                width: width + 'px'
+			}); */
 		}
 	}
 
-
-
 	loadCSSPromise.then(function () {
 		_drawMap();
 		_documentChange();
-		$(DocumentManager).on('currentDocumentChange', function (e) {
-			_documentChange();
-		});
+		$(DocumentManager).on('currentDocumentChange', _documentChange);
+	    $(DocumentManager).on('documentSaved', _documentChange);
 	});
 
+
 });

runmode.js

@@ -0,0 +1,49 @@
+CodeMirror.runMode = function(string, modespec, callback, options) {
+  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
+  var isNode = callback.nodeType == 1;
+  var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
+  if (isNode) {
+    var node = callback, accum = [], col = 0;
+    callback = function(text, style) {
+      if (text == "\n") {
+        accum.push("<br>");
+        col = 0;
+        return;
+      }
+      var escaped = "";
+      // HTML-escape and replace tabs
+      for (var pos = 0;;) {
+        var idx = text.indexOf("\t", pos);
+        if (idx == -1) {
+          escaped += CodeMirror.htmlEscape(text.slice(pos));
+          col += text.length - pos;
+          break;
+        } else {
+          col += idx - pos;
+          escaped += CodeMirror.htmlEscape(text.slice(pos, idx));
+          var size = tabSize - col % tabSize;
+          col += size;
+          for (var i = 0; i < size; ++i) escaped += " ";
+          pos = idx + 1;
+        }
+      }
+
+      if (style) 
+        accum.push("<span class=\"cm-" + CodeMirror.htmlEscape(style) + "\">" + escaped + "</span>");
+      else
+        accum.push(escaped);
+    }
+  }
+  var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
+  for (var i = 0, e = lines.length; i < e; ++i) {
+    if (i) callback("\n");
+    var stream = new CodeMirror.StringStream(lines[i]);
+    while (!stream.eol()) {
+      var style = mode.token(stream, state);
+      callback(stream.current(), style, i, stream.start);
+      stream.start = stream.pos;
+    }
+  }
+  if (isNode)
+    node.innerHTML = accum.join("");
+};