Merge pull request #1846 from ajaxorg/old_browser_compatibility

Fix old browser compatibility issues

doc/site/js/main.js

@@ -161,7 +161,7 @@ function highlight() {
     var highlighter = ace.require("ace/ext/static_highlight")
     var dom = ace.require("ace/lib/dom")
     function qsa(sel) {
-        return [].slice.call(document.querySelectorAll(sel));
+        return Array.apply(null, document.querySelectorAll(sel));
     }
 
     qsa("code[class]").forEach(function(el) {

index.html

@@ -9,8 +9,11 @@
         <link href="./doc/site/style.css" rel="stylesheet" type="text/css" />
         <link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon" />
 
-        <script src="./build/src-min/ace.js"></script>
+        <script src="./build/src/ace.js"></script>
-        <script src="./build/src-min/ext-static_highlight.js"></script>
+        <script src="./build/src/ext-static_highlight.js"></script>
+        <!--[if lt IE 9]>
+            <script src="./build/src/ext-old_ie.js"></script>
+        <![endif]-->
     </head>
     <body>
         <a href="http://github.com/ajaxorg/ace">
@@ -65,7 +68,7 @@
                                 and is the successor of the Mozilla Skywriter (Bespin) project.
                             </p>
                             
-                                <div id="ace_editor_demo" style="opacity:0">/**
+                                <pre id="ace_editor_demo" style="opacity:0">/**
  * In fact, you're looking at ACE right now. Go ahead and play with it!
  *
  * We are currently showing off the JavaScript mode. ACE has support for 45
@@ -80,7 +83,7 @@ function add(x, y) {
 
 var addResult = add(3, 2);
 console.log(addResult);
-</div>
+</pre>
                             <p id="embed_link"><a href="#nav=embedding">Learn how to embed this in your own site</a></p>
                             <p class="highlight_note">Looking for a more full-featured demo? Check out the
                                 <a href="build/kitchen-sink.html" target="_blank">kitchen sink</a>.
@@ -140,7 +143,7 @@ console.log(addResult);
                             <h1>Embedding Ace in Your Site</h1>
                             <p>Ace can be easily embedded into a web page. Get prebuilt version of ace from 
                             <a href="https://github.com/ajaxorg/ace-builds/">ace-builds</a> repository and use the code below:</p>
-                                <div id="embedded_ace_code" style="opacity:0">&lt;!DOCTYPE html>
+                                <pre id="embedded_ace_code" style="opacity:0">&lt;!DOCTYPE html>
 &lt;html lang="en">
 &lt;head>
 &lt;title>ACE in Action&lt;/title>
@@ -168,7 +171,7 @@ console.log(addResult);
     editor.getSession().setMode("ace/mode/javascript");
 &lt;/script>
 &lt;/body>
-&lt;/html></div>
+&lt;/html></pre>
                             <p>Now check out the <a href="#nav=howto">How-To Guide</a> for instructions on
                                 common operations, such as setting a different language mode or
                                 getting the contents from the editor.

lib/ace/ext/old_ie.js

@@ -103,6 +103,12 @@ patch(
     }"
 );
 
+patch(
+    require("../mode/text").Mode.prototype, "getTokenizer",
+    /Tokenizer/,
+    "TokenizerModule.Tokenizer"
+);
+
 useragent.isOldIE = true;
 
 });

lib/ace/ext/themelist.js

@@ -41,6 +41,7 @@
 
 define(function(require, exports, module) {
 "use strict";
+require("ace/lib/fixoldbrowsers");
 
 var themeData = [
     ["Chrome"         ],

lib/ace/keyboard/textinput.js

@@ -36,6 +36,7 @@ var useragent = require("../lib/useragent");
 var dom = require("../lib/dom");
 var lang = require("../lib/lang");
 var BROKEN_SETDATA = useragent.isChrome < 18;
+var USE_IE_MIME_TYPE =  useragent.isIE;
 
 var TextInput = function(parentNode, host) {
     var text = dom.createElement("textarea");
@@ -54,7 +55,6 @@ var TextInput = function(parentNode, host) {
 
     var PLACEHOLDER = "\x01\x01";
 
-    var cut = false;
     var copied = false;
     var pasted = false;
     var inComposition = false;
@@ -186,9 +186,7 @@ var TextInput = function(parentNode, host) {
     }
 
     var onSelect = function(e) {
-        if (cut) {
+        if (copied) {
-            cut = false;
-        } else if (copied) {
             copied = false;
         } else if (isAllSelected(text)) {
             host.selectAll();
@@ -243,55 +241,31 @@ var TextInput = function(parentNode, host) {
         sendText(data);
         resetValue();
     };
-
+    
-    var onCut = function(e) {
+    var handleClipboardData = function(e, data) {
-        var data = host.getCopyText();
-        if (!data) {
-            event.preventDefault(e);
-            return;
-        }
-
         var clipboardData = e.clipboardData || window.clipboardData;
-
+        if (!clipboardData || BROKEN_SETDATA)
-        if (clipboardData && !BROKEN_SETDATA) {
-            // Safari 5 has clipboardData object, but does not handle setData()
-            var supported = clipboardData.setData("Text", data);
-            if (supported) {
-                host.onCut();
-                event.preventDefault(e);
-            }
-        }
-
-        if (!supported) {
-            cut = true;
-            text.value = data;
-            text.select();
-            setTimeout(function(){
-                cut = false;
-                resetValue();
-                resetSelection();
-                host.onCut();
-            });
-        }
-    };
-
-    var onCopy = function(e) {
-        var data = host.getCopyText();
-        if (!data) {
-            event.preventDefault(e);
             return;
-        }
+        // using "Text" doesn't work on old webkit but ie needs it
-
+        // TODO are there other browsers that require "Text"?
-        var clipboardData = e.clipboardData || window.clipboardData;
+        var mime = USE_IE_MIME_TYPE ? "Text" : "text/plain";
-        if (clipboardData && !BROKEN_SETDATA) {
+        if (data) {
             // Safari 5 has clipboardData object, but does not handle setData()
-            var supported = clipboardData.setData("Text", data);
+            return clipboardData.setData(mime, data);
-            if (supported) {
+        } else {
-                host.onCopy();
+            return clipboardData.getData(mime);
-                event.preventDefault(e);
-            }
         }
-        if (!supported) {
+    }
+
+    var doCopy = function(e, isCut) {
+        var data = host.getCopyText();
+        if (!data)
+            return event.preventDefault(e);
+
+        if (handleClipboardData(e, data)) {
+            isCut ? host.onCut() : host.onCopy();
+            event.preventDefault(e);
+        } else {
             copied = true;
             text.value = data;
             text.select();
@@ -299,16 +273,22 @@ var TextInput = function(parentNode, host) {
                 copied = false;
                 resetValue();
                 resetSelection();
-                host.onCopy();
+                isCut ? host.onCut() : host.onCopy();
             });
         }
     };
-
+    
+    var onCut = function(e) {
+        doCopy(e, true);
+    }
+    
+    var onCopy = function(e) {
+        doCopy(e, false);
+    }
+    
     var onPaste = function(e) {
-        var clipboardData = e.clipboardData || window.clipboardData;
+        var data = handleClipboardData(e);
-
+        if (typeof data == "string") {
-        if (clipboardData) {
-            var data = clipboardData.getData("Text");
             if (data)
                 host.onPaste(data);
             if (useragent.isIE)
@@ -336,7 +316,7 @@ var TextInput = function(parentNode, host) {
     if (!('oncut' in text) || !('oncopy' in text) || !('onpaste' in text)){
         event.addListener(parentNode, "keydown", function(e) {
             if ((useragent.isMac && !e.metaKey) || !e.ctrlKey)
-            return;
+                return;
 
             switch (e.keyCode) {
                 case 67:

lib/ace/layer/font_metrics.js

@@ -54,7 +54,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
     
     if (!CHAR_COUNT)
         this.$testFractionalRect();
-    this.$measureNode.textContent = lang.stringRepeat("X", CHAR_COUNT);
+    this.$measureNode.innerHTML = lang.stringRepeat("X", CHAR_COUNT);
     
     this.$characterSize = {width: 0, height: 0};
     this.checkForSizeChanges();
@@ -121,11 +121,18 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
     };
 
     this.$measureSizes = function() {
-        var rect = this.$measureNode.getBoundingClientRect();
+        if (CHAR_COUNT === 1) {
-        var size = {
+            var rect = this.$measureNode.getBoundingClientRect();
-            height: rect.height,
+            var size = {
-            width: rect.width / CHAR_COUNT
+                height: rect.height,
-        };
+                width: rect.width
+            };
+        } else {
+            var size = {
+                height: this.$measureNode.clientHeight,
+                width: this.$measureNode.clientWidth / CHAR_COUNT
+            };
+        }
         // Size and width can be null if the editor is not visible or
         // detached from the document
         if (size.width === 0 || size.height === 0)
@@ -134,7 +141,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
     };
 
     this.$measureCharWidth = function(ch) {
-        this.$main.textContent = lang.stringRepeat(ch, CHAR_COUNT);
+        this.$main.innerHTML = lang.stringRepeat(ch, CHAR_COUNT);
         var rect = this.$main.getBoundingClientRect();
         return rect.width / CHAR_COUNT;
     };

lib/ace/lib/event.js

@@ -161,7 +161,7 @@ exports.addMouseWheelListener = function(el, callback) {
 
 exports.addMultiMouseDownListener = function(el, timeouts, eventHandler, callbackName) {
     var clicks = 0;
-    var startX, startY, timer;
+    var startX, startY, timer; 
     var eventNames = {
         2: "dblclick",
         3: "tripleclick",
@@ -180,9 +180,12 @@ exports.addMultiMouseDownListener = function(el, timeouts, eventHandler, callbac
         }
         if (useragent.isIE) {
             var isNewClick = Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5;
-            if (isNewClick) {
+            if (!timer || isNewClick)
                 clicks = 1;
-            }
+            if (timer)
+                clearTimeout(timer)
+            timer = setTimeout(function() {timer = null}, timeouts[clicks - 1] || 600);
+
             if (clicks == 1) {
                 startX = e.clientX;
                 startY = e.clientY;

lib/ace/lib/useragent.js

@@ -76,7 +76,8 @@ exports.isLinux = (os == "linux");
 // Windows Store JavaScript apps (aka Metro apps written in HTML5 and JavaScript) do not use the "Microsoft Internet Explorer" string in their user agent, but "MSAppHost" instead.
 exports.isIE = 
     (navigator.appName == "Microsoft Internet Explorer" || navigator.appName.indexOf("MSAppHost") >= 0)
-    && parseFloat(navigator.userAgent.match(/(?:Trident\/[0-9]+[\.0-9]+;.*rv:|MSIE )([0-9]+[\.0-9]+)/)[1]);
+    ? parseFloat((ua.match(/(?:MSIE |Trident\/[0-9]+[\.0-9]+;.*rv:)([0-9]+[\.0-9]+)/)||[])[1])
+    : parseFloat((ua.match(/(?:Trident\/[0-9]+[\.0-9]+;.*rv:)([0-9]+[\.0-9]+)/)||[])[1]); // for ie
     
 exports.isOldIE = exports.isIE && exports.isIE < 9;
 
@@ -84,7 +85,7 @@ exports.isOldIE = exports.isIE && exports.isIE < 9;
 exports.isGecko = exports.isMozilla = window.controllers && window.navigator.product === "Gecko";
 
 // oldGecko == rev < 2.0 
-exports.isOldGecko = exports.isGecko && parseInt((navigator.userAgent.match(/rv\:(\d+)/)||[])[1], 10) < 4;
+exports.isOldGecko = exports.isGecko && parseInt((ua.match(/rv\:(\d+)/)||[])[1], 10) < 4;
 
 // Is this Opera 
 exports.isOpera = window.opera && Object.prototype.toString.call(window.opera) == "[object Opera]";

lib/ace/mouse/default_handlers.js

@@ -181,6 +181,7 @@ function DefaultHandlers(mouseHandler) {
     this.selectAllEnd =
     this.selectByWordsEnd =
     this.selectByLinesEnd = function() {
+        this.$clickSelection = null;
         this.editor.unsetStyle("ace_selecting");
         if (this.editor.renderer.scroller.releaseCapture) {
             this.editor.renderer.scroller.releaseCapture();

lib/ace/mouse/mouse_handler.js

@@ -49,10 +49,10 @@ var MouseHandler = function(editor) {
     var mouseTarget = editor.renderer.getMouseEventTarget();
     event.addListener(mouseTarget, "click", this.onMouseEvent.bind(this, "click"));
     event.addListener(mouseTarget, "mousemove", this.onMouseMove.bind(this, "mousemove"));
-    event.addMultiMouseDownListener(mouseTarget, [300, 300, 250], this, "onMouseEvent");
+    event.addMultiMouseDownListener(mouseTarget, [400, 300, 250], this, "onMouseEvent");
     if (editor.renderer.scrollBarV) {
-        event.addMultiMouseDownListener(editor.renderer.scrollBarV.inner, [300, 300, 250], this, "onMouseEvent");
+        event.addMultiMouseDownListener(editor.renderer.scrollBarV.inner, [400, 300, 250], this, "onMouseEvent");
-        event.addMultiMouseDownListener(editor.renderer.scrollBarH.inner, [300, 300, 250], this, "onMouseEvent");
+        event.addMultiMouseDownListener(editor.renderer.scrollBarH.inner, [400, 300, 250], this, "onMouseEvent");
     }
     event.addMouseWheelListener(editor.container, this.onMouseWheel.bind(this, "mousewheel"));
 
@@ -112,6 +112,12 @@ var MouseHandler = function(editor) {
 
         var self = this;
         var onMouseMove = function(e) {
+            if (!e) return;
+            // if editor is loaded inside iframe, and mouseup event is outside
+            // we won't recieve it, so we cancel on first mousemove without button
+            if (useragent.isWebKit && !e.which && self.releaseMouse)
+                return self.releaseMouse();
+
             self.x = e.clientX;
             self.y = e.clientY;
             mouseMoveHandler && mouseMoveHandler(e);
@@ -123,14 +129,14 @@ var MouseHandler = function(editor) {
             clearInterval(timerId);
             onCaptureInterval();
             self[self.state + "End"] && self[self.state + "End"](e);
-            self.$clickSelection = null;
+            self.state = "";
             if (renderer.$keepTextAreaAtCursor == null) {
                 renderer.$keepTextAreaAtCursor = true;
                 renderer.$moveTextAreaToCursor();
             }
             self.isMousePressed = false;
             self.$onCaptureMouseMove = self.releaseMouse = null;
-            self.onMouseEvent("mouseup", e);
+            e && self.onMouseEvent("mouseup", e);
         };
 
         var onCaptureInterval = function() {