Properly listen to data-modified events

Author: janodvarko

chrome/resources/jquery2-patch.js

@@ -25,17 +25,17 @@
         newValues: newValues
       };*/
       // send event for each matched element
-      this.each(function() {
-        var event = new CustomEvent("firequery-event"/*, { "detail": detail }*/);
-        this.dispatchEvent(event);
-      });
+      //this.each(function() {
+      //  var event = new CustomEvent("firequery-event"/*, { "detail": detail }*/);
+      //  this.dispatchEvent(event);
+      //});
       // simulate original return value
       return res;
     };
   };
 
-  $.fn.data = wrap(originalDataFn);
-  $.fn.removeData = wrap(originalRemoveDataFn);
+  //$.fn.data = wrap(originalDataFn);
+  //$.fn.removeData = wrap(originalRemoveDataFn);
 
   // wrap data calls on jQuery object
 
@@ -55,8 +55,11 @@
         newValues: newValues
       };*/
       // send event
-      var event = new CustomEvent("firequery-event"/*, { "detail": detail }*/);
-      elem.dispatchEvent(event);
+      if (elem instanceof HTMLElement) {
+        var event = new CustomEvent("firequery-event"/*, { "detail": detail }*/);
+        elem.dispatchEvent(event);
+      }
+
       // simulate original return value
       return res;
     };

lib/firequery-actor.js

@@ -9,7 +9,7 @@
  */
 
 // Add-on SDK
-const { Cu, components } = require("chrome");
+const { Cu, Ci, components } = require("chrome");
 
 // DevTools
 const { DebuggerServer } = Cu.import("resource://gre/modules/devtools/dbg-server.jsm", {});
@@ -315,12 +315,19 @@ var FireQueryActor = ActorClass(
       return;
     }
 
+    if (!(event.target instanceof Ci.nsIDOMElement)) {
+      return;
+    }
+
     let walkerActor = this.conn.getActor(this.walkerActorID);
     let data = walkerActor.attachElement(event.target);
     let available = !!hasJQueryData(event.target);
 
-    Trace.sysout("FireQueryActor.onDataModified; " + win.location, {
-      data: data,
+    Trace.sysout("FireQueryActor.onDataModified; " + event.target + " " +
+      win.location, {
+      nodeName: event.target.nodeName,
+      nodeId: event.target.id,
+      nodeClass: event.target.className,
       hasJQueryData: available
     });
 

lib/firequery-toolbox-overlay.js

@@ -103,12 +103,12 @@ const FireQueryToolboxOverlay = Class(
     Rdp.registerTabActor(client, config).then(({registrar, front}) => {
       Trace.sysout("FireQueryToolboxOverlay.attach; READY", this);
 
-      this.front = front;
-
       // xxxHonza: Unregister at shutdown
       this.registrar = registrar;
+      this.front = front;
 
       // Patch jQuery on the backend and resolve when it's done.
+      // xxxHonza: This should be done as part of the 'attach' packet.
       this.patchJQuery().then(() => {
         emit(this, "attach", front);
         this.deferredAttach.resolve(front);

lib/inspector-overlay.js

@@ -11,7 +11,8 @@ const self = require("sdk/self");
 const { Cu, Ci } = require("chrome");
 const { Class } = require("sdk/core/heritage");
 const { loadSheet, removeSheet } = require("sdk/stylesheet/utils");
-const { on, off } = require("sdk/event/core");
+const { on, off, once } = require("sdk/event/core");
+const { defer } = require("sdk/core/promise");
 
 // DevTools
 const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
@@ -70,20 +71,12 @@ const InspectorOverlay = Class(
     // Tooltip events
     this.onClickTooltip = this.onClickTooltip.bind(this);
 
-    // FireQueryToolboxOverlay events
-    this.onAttach = this.onAttach.bind(this);
-    this.onDetach = this.onDetach.bind(this);
-
     // Backend events
     this.onDataModified = this.onDataModified.bind(this);
   },
 
   destroy: function() {
     Trace.sysout("InspectorOverlay.destroy;", arguments);
-
-    let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
-    off(toolboxOverlay, "attach", this.onAttach);
-    off(toolboxOverlay, "detach", this.onDetach);
   },
 
   // Overlay Events
@@ -99,11 +92,27 @@ const InspectorOverlay = Class(
     this.panel.on("inspector-updated", this.onInspectorUpdated);
     this.panel.on("container-created", this.onMarkupViewContainerCreated)
 
-    // Listen to {@FireQueryToolboxOverlay} events related to
-    // backend actor attach and detach.
+    // Listen to data-modified events from the backend actor. These
+    // events are used to update the indicator icon for elements
+    // with jQuery.data
+    this.getFrontWhenReady().then(front => {
+      front.on("data-modified", this.onDataModified);
+    });
+
+    // Update the Inspector panel when 'attach' is fired. The event
+    // might be already gone at this point, which is fine and in
+    // that case the panel will be properly initialized since
+    // the backend is already setup.
+    // Otherwise, if the 'Inspector' panel is the default the backend
+    // registration needs usually more time and happens when the
+    // content is already there. In this case we need to refresh
+    // panel content to make sure jQuery.data indicators (icons) are
+    // also rendered.
+    // xxxHonza: request better API (e.g. this.panel.refresh());
     let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
-    on(toolboxOverlay, "attach", this.onAttach);
-    on(toolboxOverlay, "detach", this.onDetach);
+    once(toolboxOverlay, "attach", () => {
+      this.panel.onNewRoot();
+    });
 
     // Monkey patch the InspectorPanel.
     // xxxHonza: what about extension uninstall/disable?
@@ -117,6 +126,22 @@ const InspectorOverlay = Class(
     Trace.sysout("InspectorOverlay.onReady;", options);
   },
 
+  // FireQueryFront
+
+  getFrontWhenReady: function() {
+    let deferred = defer();
+    let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
+    let front = toolboxOverlay.front;
+    if (front) {
+      deferred.resolve(front);
+    } else {
+      once(toolboxOverlay, "attach", (front) => {
+        deferred.resolve(front);
+      });
+    }
+    return deferred.promise;
+  },
+
   // MarkupView Event Handlers
 
   /**
@@ -255,36 +280,17 @@ const InspectorOverlay = Class(
     });
   },
 
-  // ToolboxOverlay Events
-
-  onAttach: function(front) {
-    Trace.sysout("InspectorOverlay.onAttach;", arguments);
-
-    front.on("data-modified", this.onDataModified);
-
-    // Update the markup view. It might happen that the backend
-    // registration is done after the panel is already displayed.
-    // To improve the first-time experience - the panel is auto
-    // refreshed so, all jQuery.data indicators are properly
-    // rendered within the panel.
-    // xxxHonza: request better API (e.g. this.panel.refresh());
-    this.panel.onNewRoot();
-  },
-
-  onDetach: function() {
-    Trace.sysout("InspectorOverlay.onDetach;", arguments);
-  },
-
   // Backend Events
 
   onDataModified: function(nodeData, hasJQueryData) {
-    Trace.sysout("InspectorOverlay.onDataModified; has data: " +
-      hasJQueryData);
-
     let markupView = this.panel.markup;
     let client = this.toolbox.target.client;
     let nodeFront = nodeData.node;
 
+    Trace.sysout("InspectorOverlay.onDataModified; " +
+       nodeFront.nodeName + "#" + nodeFront.id +
+       ", has data: " + hasJQueryData, nodeFront);
+
     // The container doesn't have to be always visible/available.
     let container = markupView.getContainer(nodeFront);
     if (!container) {