Record input breadcrumbs from contentEditable targets (#748)

* Record input events from contentEditable targets
* Add an integration test for contenteditable breadcrumbs

Author: thomsbg

src/raven.js

@@ -742,7 +742,7 @@ Raven.prototype = {
             // only consider keypress events on actual input elements
             // this will disregard keypresses targeting body (e.g. tabbing
             // through elements, hotkeys, etc)
-            if (!tagName || tagName !== 'INPUT' && tagName !== 'TEXTAREA')
+            if (!tagName || tagName !== 'INPUT' && tagName !== 'TEXTAREA' && !target.isContentEditable)
                 return;
 
             // record first keypress in a series, but ignore subsequent

test/integration/frame.html

@@ -78,6 +78,7 @@
   <!-- test element for breadcrumbs -->
   <form id="foo-form">
     <input name="foo" placeholder="lol"/>
+    <div class="contenteditable" contenteditable="true"></div>
   </form>
 
   <div class="c">

test/integration/test.js

@@ -735,6 +735,39 @@ describe('integration', function () {
             );
         });
 
+        it('should record consecutive keypress events in a contenteditable into a single "input" breadcrumb', function (done) {
+            var iframe = this.iframe;
+
+            iframeExecute(iframe, done,
+                function () {
+                    setTimeout(done);
+
+                    // some browsers trigger onpopstate for load / reset breadcrumb state
+                    Raven._breadcrumbs = [];
+
+                    // keypress <input/> twice
+                    var keypress1 = document.createEvent('KeyboardEvent');
+                    keypress1.initKeyboardEvent("keypress", true, true, window, "b", 66, 0, "", false);
+
+                    var keypress2 = document.createEvent('KeyboardEvent');
+                    keypress2.initKeyboardEvent("keypress", true, true, window, "a", 65, 0, "", false);
+
+                    var div = document.querySelector('[contenteditable]');
+                    div.dispatchEvent(keypress1);
+                    div.dispatchEvent(keypress2);
+                },
+                function () {
+                    var Raven = iframe.contentWindow.Raven,
+                        breadcrumbs = Raven._breadcrumbs;
+
+                    assert.equal(breadcrumbs.length, 1);
+
+                    assert.equal(breadcrumbs[0].category, 'ui.input');
+                    assert.equal(breadcrumbs[0].message, 'body > form#foo-form > div.contenteditable');
+                }
+            );
+        });
+
         it('should record history.[pushState|back] changes as navigation breadcrumbs', function (done) {
             var iframe = this.iframe;