Bug 878441 - Add simple mutation watching to the inspector actor. r=jwalker

--HG--
extra : rebase_source : 1f6a187ccaa8a8d0454da7271a5adbfd890c7c79

toolkit/devtools/server/actors/inspector.js

@@ -48,6 +48,7 @@ const {Arg, Option, method, RetVal, types} = protocol;
 const {LongStringActor, ShortLongString} = require("devtools/server/actors/string");
 const promise = require("sdk/core/promise");
 const object = require("sdk/util/object");
+const events = require("sdk/event/core");
 
 Cu.import("resource://gre/modules/Services.jsm");
 
@@ -207,6 +208,12 @@ let NodeFront = protocol.FrontClass(NodeActor, {
   },
 
   destroy: function() {
+    // If an observer was added on this node, shut it down.
+    if (this.observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+
     // Disconnect this item and from the ownership tree and destroy
     // all of its children.
     this.reparent(null);
@@ -221,6 +228,7 @@ let NodeFront = protocol.FrontClass(NodeActor, {
     // Shallow copy of the form.  We could just store a reference, but
     // eventually we'll want to update some of the data.
     this._form = object.merge(form);
+    this._form.attrs = this._form.attrs ? this._form.attrs.slice() : [];
 
     if (form.parent) {
       // Get the owner actor for this actor (the walker), and find the
@@ -231,6 +239,46 @@ let NodeFront = protocol.FrontClass(NodeActor, {
     }
   },
 
+  /**
+   * Process a mutation entry as returned from the walker's `getMutations`
+   * request.  Only tries to handle changes of the node's contents
+   * themselves (character data and attribute changes), the walker itself
+   * will keep the ownership tree up to date.
+   */
+  updateMutation: function(change) {
+    if (change.type === "attributes") {
+      // We'll need to lazily reparse the attributes after this change.
+      this._attrMap = undefined;
+
+      // Update any already-existing attributes.
+      let found = false;
+      for (let i = 0; i < this.attributes.length; i++) {
+        let attr = this.attributes[i];
+        if (attr.name == change.attributeName &&
+            attr.namespace == change.attributeNamespace) {
+          if (change.newValue !== null) {
+            attr.value = change.newValue;
+          } else {
+            this.attributes.splice(i, 1);
+          }
+          found = true;
+          break;
+        }
+      }
+      // This is a new attribute.
+      if (!found)  {
+        this.attributes.push({
+          name: change.attributeName,
+          namespace: change.attributeNamespace,
+          value: change.newValue
+        });
+      }
+    } else if (change.type === "characterData") {
+      this._form.shortValue = change.newValue;
+      this._form.incompleteValue = change.incompleteValue;
+    }
+  },
+
   // Some accessors to make NodeFront feel more like an nsIDOMNode
 
   get id() this.getAttribute("id"),
@@ -264,7 +312,7 @@ let NodeFront = protocol.FrontClass(NodeActor, {
     return (name in this._attrMap);
   },
 
-  get attributes() this._form.attrs || [],
+  get attributes() this._form.attrs,
 
   getNodeValue: protocol.custom(function() {
     if (!this.incompleteValue) {
@@ -371,6 +419,9 @@ types.addDictType("disconnectedNodeArray", {
   // Nodes that are needed to connect those nodes to the root.
   newNodes: "array:domnode"
 });
+
+types.addDictType("dommutation", {});
+
 /**
  * Server side of a node list as returned by querySelectorAll()
  */
@@ -518,6 +569,12 @@ let traversalMethod = {
 var WalkerActor = protocol.ActorClass({
   typeName: "domwalker",
 
+  events: {
+    "new-mutations" : {
+      type: "newMutations"
+    }
+  },
+
   /**
    * Create the WalkerActor
    * @param DebuggerServerConnection conn
@@ -527,11 +584,13 @@ var WalkerActor = protocol.ActorClass({
     protocol.Actor.prototype.initialize.call(this, conn);
     this.rootDoc = document;
     this._refMap = new Map();
+    this._pendingMutations = [];
+
+    this.onMutations = this.onMutations.bind(this);
 
     // Ensure that the root document node actor is ready and
     // managed.
     this.rootNode = this.document();
-    this.manage(this.rootNode);
   },
 
   // Returns the JSON representation of this object over the wire.
@@ -570,9 +629,29 @@ var WalkerActor = protocol.ActorClass({
     // it an actorID.
     this.manage(actor);
     this._refMap.set(node, actor);
+
+    if (node.nodeType === Ci.nsIDOMNode.DOCUMENT_NODE) {
+      this._watchDocument(actor);
+    }
     return actor;
   },
 
+  /**
+   * Watch the given document node for mutations using the DOM observer
+   * API.
+   */
+  _watchDocument: function(actor) {
+    let node = actor.rawNode;
+    // Create the observer on the node's actor.  The node will make sure
+    // the observer is cleaned up when the actor is released.
+    actor.observer = actor.rawNode.defaultView.MutationObserver(this.onMutations);
+    actor.observer.observe(node, {
+      attributes: true,
+      characterData: true,
+      subtree: true
+    });
+  },
+
   /**
    * Return the document node that contains the given node,
    * or the root node if no node is specified.
@@ -926,7 +1005,83 @@ var WalkerActor = protocol.ActorClass({
     response: {
       list: RetVal("domnodelist")
     }
-  })
+  }),
+
+  /**
+   * Get any pending mutation records.  Must be called by the client after
+   * the `new-mutations` notification is received.  Returns an array of
+   * mutation records.
+   *
+   * Mutation records have a basic structure:
+   *
+   * {
+   *   type: attributes|characterData,
+   *   target: <domnode actor ID>,
+   * }
+   *
+   * And additional attributes based on the mutation type:
+   * `attributes` type:
+   *   attributeName: <string> - the attribute that changed
+   *   attributeNamespace: <string> - the attribute's namespace URI, if any.
+   *   newValue: <string> - The new value of the attribute, if any.
+   *
+   * `characterData` type:
+   *   newValue: <string> - the new shortValue for the node
+   *   [incompleteValue: true] - True if the shortValue was truncated.
+   *
+   */
+  getMutations: method(function() {
+    let pending = this._pendingMutations || [];
+    this._pendingMutations = [];
+    return pending;
+  }, {
+    request: {},
+    response: {
+      mutations: RetVal("array:dommutation")
+    }
+  }),
+
+  /**
+   * Handles mutations from the DOM mutation observer API.
+   *
+   * @param array[MutationRecord] mutations
+   *    See https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationRecord
+   */
+  onMutations: function(mutations) {
+    // We only send the `new-mutations` notification once, until the client
+    // fetches mutations with the `getMutations` packet.
+    let needEvent = this._pendingMutations.length === 0;
+
+    for (let change of mutations) {
+      let targetActor = this._refMap.get(change.target);
+      if (!targetActor) {
+        continue;
+      }
+      let targetNode = change.target;
+      let mutation = {
+        type: change.type,
+        target: targetActor.actorID,
+      }
+
+      if (mutation.type === "attributes") {
+        mutation.attributeName = change.attributeName;
+        mutation.attributeNamespace = change.attributeNamespace || undefined;
+        mutation.newValue = targetNode.getAttribute(mutation.attributeName);
+      } else if (mutation.type === "characterData") {
+        if (targetNode.nodeValue.length > gValueSummaryLength) {
+          mutation.newValue = targetNode.nodeValue.substring(0, gValueSummaryLength);
+          mutation.incompleteValue = true;
+        } else {
+          mutation.newValue = targetNode.nodeValue;
+        }
+      }
+      this._pendingMutations.push(mutation);
+    }
+    if (needEvent) {
+      events.emit(this, "new-mutations");
+    }
+  }
+
 });
 
 /**
@@ -952,7 +1107,7 @@ var WalkerFront = exports.WalkerFront = protocol.FrontClass(WalkerActor, {
    * parent front.  The protocol guarantees that the parent will be seen
    * by the client in either a previous or the current request.
    * So if we've already seen this parent return it, otherwise create
-   * a bare-bones standin node.  The standin node will be updated
+   * a bare-bones stand-in node.  The stand-in node will be updated
    * with a real form by the end of the deserialization.
    */
   ensureParentFront: function(id) {
@@ -982,6 +1137,41 @@ var WalkerFront = exports.WalkerFront = protocol.FrontClass(WalkerActor, {
     impl: "_querySelector"
   }),
 
+  /**
+   * Get any unprocessed mutation records and process them.
+   */
+  getMutations: protocol.custom(function() {
+    return this._getMutations().then(mutations => {
+      let emitMutations = [];
+      for (let change of mutations) {
+        // The target is only an actorID, get the associated front.
+        let targetID = change.target;
+        let targetFront = this.get(targetID);
+        if (!targetFront) {
+          console.error("Got a mutation for an unexpected actor: " + targetID);
+          continue;
+        }
+        targetFront.updateMutation(change);
+
+        // Emit the mutation as received, except update the target to
+        // piont at the front rather than a bare actorID.
+        emitMutations.push(object.merge(change, { target: targetFront }));
+      }
+      events.emit(this, "mutations", emitMutations);
+    });
+  }, {
+    impl: "_getMutations"
+  }),
+
+  /**
+   * Handle the `new-mutations` notification by fetching the
+   * available mutation records.
+   */
+  onMutations: protocol.preEvent("new-mutations", function() {
+    // Fetch and process the mutations.
+    this.getMutations().then(null, console.error);
+  }),
+
   // XXX hack during transition to remote inspector: get a proper NodeFront
   // for a given local node.  Only works locally.
   frontForRawNode: function(rawNode){

toolkit/devtools/server/tests/mochitest/Makefile.in

@@ -14,6 +14,8 @@ include $(DEPTH)/config/autoconf.mk
 MOCHITEST_CHROME_FILES	= \
 	inspector-helpers.js \
 	inspector-traversal-data.html \
+	test_inspector-mutations-attr.html \
+	test_inspector-mutations-value.html \
 	test_inspector-release.html \
 	test_inspector-traversal.html \
 	test_unsafeDereference.html \

toolkit/devtools/server/tests/mochitest/test_inspector-mutations-attr.html

@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug </title>
+
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
+  <script type="application/javascript;version=1.8">
+Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+
+const Promise = devtools.require("sdk/core/promise");
+const inspector = devtools.require("devtools/server/actors/inspector");
+
+window.onload = function() {
+  SimpleTest.waitForExplicitFinish();
+  runNextTest();
+}
+
+var gInspectee = null;
+var gWalker = null;
+var gClient = null;
+var attrNode;
+var attrFront;
+
+addTest(function setup() {
+  let url = document.getElementById("inspectorContent").href;
+  attachURL(url, function(err, client, tab, doc) {
+    gInspectee = doc;
+    let {InspectorFront} = devtools.require("devtools/server/actors/inspector");
+    let inspector = InspectorFront(client, tab);
+    promiseDone(inspector.getWalker().then(walker => {
+      ok(walker, "getWalker() should return an actor.");
+      gClient = client;
+      gWalker = walker;
+    }).then(runNextTest));
+  });
+});
+
+addTest(setupAttrTest);
+addTest(testAddAttribute);
+addTest(testChangeAttribute);
+addTest(testRemoveAttribute);
+addTest(setupFrameAttrTest);
+addTest(testAddAttribute);
+addTest(testChangeAttribute);
+addTest(testRemoveAttribute);
+
+
+function setupAttrTest() {
+  attrNode = gInspectee.querySelector("#a")
+  promiseDone(gWalker.querySelector(gWalker.rootNode, "#a").then(node => {
+    attrFront = node;
+  }).then(runNextTest));
+}
+
+function setupFrameAttrTest() {
+  let frame = gInspectee.querySelector('#childFrame');
+  attrNode = frame.contentDocument.querySelector("#a");
+
+  promiseDone(gWalker.querySelector(gWalker.rootNode, "#childFrame").then(childFrame => {
+    return gWalker.children(childFrame);
+  }).then(children => {
+    let nodes = children.nodes;
+    ok(nodes.length, 1, "There should be only one child of the iframe");
+    is(nodes[0].nodeType, Node.DOCUMENT_NODE, "iframe child should be a document node");
+    return gWalker.querySelector(nodes[0], "#a");
+  }).then(node => {
+    attrFront = node;
+  }).then(runNextTest));
+}
+
+function testAddAttribute() {
+  attrNode.setAttribute("data-newattr", "newvalue");
+  attrNode.setAttribute("data-newattr2", "newvalue");
+  gWalker.once("mutations", () => {
+    is(attrFront.attributes.length, 3, "Should have id and two new attributes.");
+    is(attrFront.getAttribute("data-newattr"), "newvalue", "Node front should have the first new attribute");
+    is(attrFront.getAttribute("data-newattr2"), "newvalue", "Node front should have the second new attribute.");
+    runNextTest();
+  });
+}
+
+function testChangeAttribute() {
+  attrNode.setAttribute("data-newattr", "changedvalue");
+  gWalker.once("mutations", () => {
+    is(attrFront.attributes.length, 3, "Should have id and two new attributes.");
+    is(attrFront.getAttribute("data-newattr"), "changedvalue", "Node front should have the changed first value");
+    is(attrFront.getAttribute("data-newattr2"), "newvalue", "Second value should remain unchanged.");
+    runNextTest();
+  });
+}
+
+function testRemoveAttribute() {
+  attrNode.removeAttribute("data-newattr2");
+  gWalker.once("mutations", () => {
+    is(attrFront.attributes.length, 2, "Should have id and one remaining attribute.");
+    is(attrFront.getAttribute("data-newattr"), "changedvalue", "Node front should still have the first value");
+    ok(!attrFront.hasAttribute("data-newattr2"), "Second value should be removed.");
+    runNextTest();
+  })
+}
+
+addTest(function cleanup() {
+  delete gInspectee;
+  delete gWalker;
+  delete gClient;
+  runNextTest();
+});
+
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>

toolkit/devtools/server/tests/mochitest/test_inspector-mutations-value.html

@@ -0,0 +1,151 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug </title>
+
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
+  <script type="application/javascript;version=1.8">
+Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+
+const Promise = devtools.require("sdk/core/promise");
+const inspector = devtools.require("devtools/server/actors/inspector");
+
+window.onload = function() {
+  SimpleTest.waitForExplicitFinish();
+  runNextTest();
+}
+
+const testSummaryLength = 10;
+inspector.setValueSummaryLength(testSummaryLength);
+SimpleTest.registerCleanupFunction(function() {
+  inspector.setValueSummaryLength(inspector.DEFAULT_VALUE_SUMMARY_LENGTH);
+});
+
+var gInspectee = null;
+var gWalker = null;
+var gClient = null;
+var valueNode;
+var valueFront;
+var longString = "stringstringstringstringstringstringstringstringstringstringstring";
+var truncatedLongString = longString.substring(0, testSummaryLength);
+var shortString = "str";
+var shortString2 = "str2";
+
+addTest(function setup() {
+  let url = document.getElementById("inspectorContent").href;
+  attachURL(url, function(err, client, tab, doc) {
+    gInspectee = doc;
+    let {InspectorFront} = devtools.require("devtools/server/actors/inspector");
+    let inspector = InspectorFront(client, tab);
+    promiseDone(inspector.getWalker().then(walker => {
+      ok(walker, "getWalker() should return an actor.");
+      gClient = client;
+      gWalker = walker;
+    }).then(runNextTest));
+  });
+});
+
+addTest(setupValueTest);
+addTest(testKeepLongValue);
+addTest(testSetShortValue);
+addTest(testKeepShortValue);
+addTest(testSetLongValue);
+addTest(setupFrameValueTest);
+addTest(testKeepLongValue);
+addTest(testSetShortValue);
+addTest(testKeepShortValue);
+addTest(testSetLongValue);
+
+function setupValueTest() {
+  valueNode = gInspectee.querySelector("#longstring").firstChild;
+  promiseDone(gWalker.querySelector(gWalker.rootNode, "#longstring").then(node => {
+    return gWalker.children(node);
+  }).then(children => {
+    valueFront = children.nodes[0];
+  }).then(runNextTest));
+}
+
+function setupFrameValueTest() {
+  let frame = gInspectee.querySelector('#childFrame');
+  valueNode = frame.contentDocument.querySelector("#longstring").firstChild;
+
+  promiseDone(gWalker.querySelector(gWalker.rootNode, "#childFrame").then(childFrame => {
+    return gWalker.children(childFrame);
+  }).then(children => {
+    let nodes = children.nodes;
+    ok(nodes.length, 1, "There should be only one child of the iframe");
+    is(nodes[0].nodeType, Node.DOCUMENT_NODE, "iframe child should be a document node");
+    return gWalker.querySelector(nodes[0], "#longstring");
+  }).then(node => {
+    return gWalker.children(node);
+  }).then(children => {
+    valueFront = children.nodes[0];
+  }).then(runNextTest));
+}
+
+function testKeepLongValue() {
+  // After first setup we should have a long string in the node
+  is(valueFront.shortValue.length, testSummaryLength, "After setup the test node should be truncated.");
+  ok(valueFront.incompleteValue, "After setup the node value should be incomplete.");
+  valueNode.nodeValue = longString;
+  gWalker.once("mutations", () => {
+    is(valueFront.shortValue, truncatedLongString, "Value should have changed to a truncated value");
+    ok(valueFront.incompleteValue, "Node value should stay incomplete.");
+    runNextTest();
+  });
+}
+
+function testSetShortValue() {
+  valueNode.nodeValue = shortString;
+  gWalker.once("mutations", () => {
+    is(valueFront.shortValue, shortString, "Value should not be truncated.");
+    ok(!valueFront.incompleteValue, "Value should not be incomplete.");
+    runNextTest();
+  });
+}
+
+function testKeepShortValue() {
+  valueNode.nodeValue = shortString2;
+  gWalker.once("mutations", () => {
+    is(valueFront.shortValue, shortString2, "Value should not be truncated.");
+    ok(!valueFront.incompleteValue, "Value should not be incomplete.");
+    runNextTest();
+  });
+}
+
+function testSetLongValue() {
+  valueNode.nodeValue = longString;
+  gWalker.once("mutations", () => {
+    is(valueFront.shortValue, truncatedLongString, "Value should have changed to a truncated value");
+    ok(valueFront.incompleteValue, "Node value should stay incomplete.");
+    runNextTest();
+  });
+}
+
+addTest(function cleanup() {
+  delete gInspectee;
+  delete gWalker;
+  delete gClient;
+  runNextTest();
+});
+
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>