Refactor remotefunctions

src/LiveDevelopment/Agents/DOMAgent.js

@@ -42,6 +42,7 @@ define(function DOMAgent(require, exports, module) {
 
     var Inspector = require("LiveDevelopment/Inspector/Inspector");
     var RemoteAgent = require("LiveDevelopment/Agents/RemoteAgent");
+    var EditAgent = require("LiveDevelopment/Agents/EditAgent");
     var DOMNode = require("LiveDevelopment/Agents/DOMNode");
     var DOMHelpers = require("LiveDevelopment/Agents/DOMHelpers");
 
@@ -269,7 +270,10 @@ define(function DOMAgent(require, exports, module) {
             value += text;
             value += node.value.substr(to - node.location);
             node.value = value;
-            Inspector.DOM.setNodeValue(node.nodeId, node.value);
+            if (!EditAgent.isEditing) {
+                // only update the DOM if the change was not caused by the edit agent
+                Inspector.DOM.setNodeValue(node.nodeId, node.value);
+            }
         } else {
             console.warn("Changing non-text nodes not supported.");
         }

src/LiveDevelopment/Agents/EditAgent.js

@@ -39,6 +39,8 @@ define(function EditAgent(require, exports, module) {
 
     var EditorManager = require("editor/EditorManager");
 
+    var _editedNode;
+
     /** Find changed characters
      * @param {string} old value
      * @param {string} changed value
@@ -74,28 +76,51 @@ define(function EditAgent(require, exports, module) {
         return { from: index, to: index + length, text: value };
     }
 
-    // Remote Event: Go to the given source node
-    function _onRemoteEdit(event, res) {
-        // res = {nodeId, name, value}
-        var node = DOMAgent.nodeWithId(res.nodeId);
-        node = node.children[0];
-        if (!node.location) {
+    // WebInspector Event: DOM.characterDataModified
+    function _onCharacterDataModified(event, res) {
+        // res = {nodeId, characterData}
+        if (_editedNode.nodeId !== res.nodeId) {
             return;
         }
+
         GotoAgent.open(DOMAgent.url);
         var editor = EditorManager.getCurrentFullEditor();
         var codeMirror = editor._codeMirror;
-        var change = _findChangedCharacters(node.value, res.value);
+        var change = _findChangedCharacters(_editedNode.value, res.characterData);
         if (change) {
-            var from = codeMirror.posFromIndex(node.location + change.from);
-            var to = codeMirror.posFromIndex(node.location + change.to);
+            var from = codeMirror.posFromIndex(_editedNode.location + change.from);
+            var to = codeMirror.posFromIndex(_editedNode.location + change.to);
+            exports.isEditing = true;
             editor.document.replaceRange(change.text, from, to);
+            exports.isEditing = false;
 
-            var newPos = codeMirror.posFromIndex(node.location + change.from + change.text.length);
+            var newPos = codeMirror.posFromIndex(_editedNode.location + change.from + change.text.length);
             editor.setCursorPos(newPos.line, newPos.ch);
         }
     }
 
+    // Remote Event: Go to the given source node
+    function _onRemoteEdit(event, res) {
+        // res = {nodeId, name, value}
+
+        // detach from DOM change events
+        if (res.value === "0") {
+            $(Inspector.DOM).off(".EditAgent");
+            return;
+        }
+
+        // find and store the edited node
+        var node = DOMAgent.nodeWithId(res.nodeId);
+        node = node.children[0];
+        if (!node.location) {
+            return;
+        }
+        _editedNode = node;
+
+        // attach to character data modified events
+        $(Inspector.DOM).on("characterDataModified.EditAgent", _onCharacterDataModified);
+    }
+
     /** Initialize the agent */
     function load() {
         $(RemoteAgent).on("edit.EditAgent", _onRemoteEdit);

src/LiveDevelopment/Agents/GotoAgent.js

@@ -127,9 +127,7 @@ define(function GotoAgent(require, exports, module) {
             }
             for (i in node.events) {
                 var trace = node.events[i];
-                if (trace.children.length > 0) {
-                    _makeJSTarget(targets, trace.children[0].callFrames[0]);
-                }
+                _makeJSTarget(targets, trace.callFrames[0]);
             }
             for (i in res.matchedCSSRules.reverse()) {
                 _makeCSSTarget(targets, res.matchedCSSRules[i]);

src/LiveDevelopment/Agents/HighlightAgent.js

@@ -46,7 +46,7 @@ define(function HighlightAgent(require, exports, module) {
         if (res.value === "1") {
             node = DOMAgent.nodeWithId(res.nodeId);
         }
-        $(exports).triggerHandler("highlight", node);
+        $(exports).triggerHandler("highlight", [node]);
     }
 
     /** Hide in-browser highlighting */

src/LiveDevelopment/Agents/RemoteAgent.js

@@ -37,6 +37,7 @@ define(function RemoteAgent(require, exports, module) {
 
     var $exports = $(exports);
 
+    var LiveDevelopment = require("LiveDevelopment/LiveDevelopment");
     var Inspector = require("LiveDevelopment/Inspector/Inspector");
 
     var _load; // deferred load
@@ -48,7 +49,7 @@ define(function RemoteAgent(require, exports, module) {
         var request = new XMLHttpRequest();
         request.open("GET", "LiveDevelopment/Agents/RemoteFunctions.js");
         request.onload = function onLoad() {
-            var run = "window._LD=" + request.response + "()";
+            var run = "window._LD=" + request.response + "(" + LiveDevelopment.config.experimental + ")";
             Inspector.Runtime.evaluate(run, function onEvaluate(res) {
                 console.assert(!res.wasThrown, res.result.description);
                 _objectId = res.result.objectId;