#1 Bug 1036949 - New API: MarkupView customization

Author: janodvarko

lib/firequery-actor.js

@@ -96,7 +96,7 @@ var FireQueryActor = ActorClass(
     this.parent = parent;
     this.state = "detached";
 
-    this.onDomNodeForm = this.onDomNodeForm.bind(this);
+    this.onNodeActorForm = this.onNodeActorForm.bind(this);
     this.onNavigate = this.onNavigate.bind(this);
   },
 
@@ -138,7 +138,7 @@ var FireQueryActor = ActorClass(
     Previewers.Object.unshift(this.onBuildPreview.bind(this));
 
     Events.on(this.parent, "navigate", this.onNavigate);
-    DebuggerServer.on("domnode-form", this.onDomNodeForm);
+    Events.on(NodeActor, "form", this.onNodeActorForm);
   }), {
     request: {},
     response: {
@@ -156,7 +156,7 @@ var FireQueryActor = ActorClass(
     this.state = "detached";
 
     Events.off(this.parent, "navigate", this.onNavigate);
-    DebuggerServer.off("domnode-form", this.onDomNodeForm);
+    Events.off(NodeActor, "form", this.onNodeActorForm);
 
     // xxxHonza: remove previewer
   }), {
@@ -305,17 +305,21 @@ var FireQueryActor = ActorClass(
 
   // Debugger Server Events
 
-  onDomNodeForm: makeInfallible(function(eventId, nodeActor, form) {
+  onNodeActorForm: makeInfallible(function(event) {
+    let nodeActor = event.target;
+    let form = event.data;
     let data = hasJQueryData(nodeActor.rawNode);
 
+    // xxxHonza: check that the event comes from an actor in the
+    // same connection as this actor.
+
     // Pass only a flag that says whether there are any jQuery
     // data associated or not. The data itself will be fetched
     // on demand (when displayed e.g. in a tooltip)
-    //form.setProperty("jQueryData", data);
-    form.setProperty("hasJQueryData", !!data)
+    form.setFormProperty("hasJQueryData", !!data)
 
     let json = data ? JSON.stringify(data) : "";
-    Trace.sysout("FireQueryActor.onDomNodeForm; " + json, arguments);
+    Trace.sysout("FireQueryActor.onNodeActorForm; " + json, arguments);
   })
 });
 
@@ -362,22 +366,37 @@ function hasJQueryData(object) {
 };
 
 // Patching NodeActor (add custom info into actor form)
-// xxxHonza: Bug 1036949 - New API: MarkupView customization
-/*let originalForm = NodeActor.prototype.form;
+// Bug 1036949 - New API: MarkupView customization
+// xxxHonza: Can be removed as soon as Firefox 41 is the
+// minimum required version.
+let originalForm = NodeActor.prototype.form;
 NodeActor.prototype.form = function() {
   let form = originalForm.apply(this, arguments);
-  if (!form.setProperty) {
-    form.setProperty = (name, value) => {
+
+  // form.setFormProperty has been introduced in Bug 1036949
+  // (released in Firefox 41)
+  // The content of the following if block is taken from the
+  // patch attached to Bug 1036949
+  if (!form.setFormProperty) {
+    // Add an extra API for custom properties added by other
+    // modules/extensions.
+    form.setFormProperty = (name, value) => {
       if (!form.props) {
         form.props = {};
       }
       form.props[name] = value;
     };
 
-    DebuggerServer.emit("domnode-form", this, form);
+    // Fire an event so, other modules can create its own properties
+    // that should be passed to the client (within the form.props field).
+    Events.emit(NodeActor, "form", {
+      target: this,
+      data: form
+    });
   }
+
   return form;
-}*/
+}
 
 // Exports from this module
 exports.FireQueryActor = FireQueryActor;

lib/inspector-overlay.js

@@ -187,9 +187,13 @@ const InspectorOverlay = Class(
   onMarkupViewContainerCreated: function(eventId, container) {
     Trace.sysout("InspectorOverlay.onMarkupViewContainerCreated; ", arguments);
 
+    // nodeFront.getFormProperty has been introduced in Bug 1036949
+    // (released in Firefox 41)
+    // xxxHonza: Checking existence of the method can be removed
+    // as soon as Firefox 41 is the minimum required version.
     let nodeFront = container.node;
-    let hasJQueryData = nodeFront.getProperty ?
-      nodeFront.getProperty("hasJQueryData") :
+    let hasJQueryData = nodeFront.getFormProperty ?
+      nodeFront.getFormProperty("hasJQueryData") :
       nodeFront._form.props.hasJQueryData;
 
     if (!hasJQueryData) {
@@ -199,47 +203,6 @@ const InspectorOverlay = Class(
     this.createDataIcon(container.elt);
   },
 
-  // xxxHonza: TODO remove
-  renderNode: function(node, type, data) {
-    if (type != "element") {
-      return;
-    }
-
-    // Get custom 'hasJQueryData' property send from the backed.
-    // If the node has some jQuery data the property is set to true.
-    // xxxHonza: back compatibility, can be removed when
-    // Bug 1036949 - New API: MarkupView customization
-    // .. is in the release channel. It implements the
-    // nodeFront.getProperty() method.
-    let nodeFront = data.node;
-    let hasJQueryData = nodeFront.getProperty ?
-      nodeFront.getProperty("hasJQueryData") :
-      nodeFront._form.props.hasJQueryData;
-
-    if (!hasJQueryData) {
-      return;
-    }
-
-    let icon = this.createDataIcon(node);
-    //icon.jQueryData = jQueryData;
-
-    // xxxHonza: jQuery data value isn't rendered within the MarkupView
-    // it's now displayed inside a tooltip.
-    /*let item = {
-      element: node,
-      jQueryData: jQueryData
-    };
-
-    // Render now if MarkupView content script is already loaded.
-    // Otherwise push it into an array and render as soon as
-    // the content is properly initialized.
-    if (this.markupScriptReady) {
-      this.postContentMessage("render", [item]);
-    } else {
-      this.nodes.push(item);
-    }*/
-  },
-
   createDataIcon: function(element) {
     let icon = element.querySelector(".fireQueryData");
     if (icon) {

lib/main.js

@@ -17,9 +17,6 @@ const { ConsoleOverlay } = require("./console-overlay.js");
 const { InspectorOverlay } = require("./inspector-overlay.js");
 const { FireQueryToolboxOverlay } = require("./firequery-toolbox-overlay.js");
 
-// Platform patch (should be removed as soon as it's built-in).
-const MarkupViewPatch = require("./markup-view-patch.js");
-
 // Localization files. All strings in the UI should be loaded from these
 // files, so the entire extension can be localized into other languages.
 Locale.registerStringBundle("chrome://firequery/locale/firequery.properties");