Fix Show DOM properties action for jQuery data

Author: janodvarko

lib/inspector-overlay.js

@@ -141,25 +141,15 @@ const InspectorOverlay = Class(
   },
 
   onMarkupViewContainerCreated: function(eventId, container) {
-    Trace.sysout("InspectorOverlay.onMarkupViewContainerCreated; ", arguments);
+    //Trace.sysout("InspectorOverlay.onMarkupViewContainerCreated;");
 
+    // Create a little data-icon indicating that the rendered element
+    // has jQuery.data associated. Clickin on the icon opens a tooltip
+    // with more details.
     let nodeFront = container.node;
-    let hasJQueryData = false;
-
-    // nodeFront.getFormProperty has been introduced in Bug 1036949
-    // xxxHonza: Checking existence of the method can be removed
-    // as soon as Fx42 is the minimum required version.
-    if (nodeFront.getFormProperty) {
-      hasJQueryData = nodeFront.getFormProperty("hasJQueryData");
-    } else if (nodeFront._form.props) {
-      hasJQueryData = nodeFront._form.props.hasJQueryData;
-    }
-
-    if (!hasJQueryData) {
-      return;
+    if (this.hasJQueryData(nodeFront)) {
+      this.createDataIcon(container.elt);
     }
-
-    this.createDataIcon(container.elt);
   },
 
   createDataIcon: function(element) {
@@ -208,17 +198,7 @@ const InspectorOverlay = Class(
 
     // Get node front for the clicked element.
     let nodeFront = this.panel.selection.nodeFront;
-
-    // Use jQuery actor front to get fresh jQuery data
-    // for the clicked node (for the selection).
-    let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
-    if (!toolboxOverlay) {
-      TraceError.sysout("InspectorOverlay.onClickTooltip; ERROR no " +
-        "toolbox overlay!", this.context);
-      return;
-    }
-
-    toolboxOverlay.front.getJQueryData(nodeFront).then(response => {
+    this.getJQueryData(nodeFront).then(response => {
       // Create jQuery data tooltip object.
       let dataTooltip = new DataTooltip({
         toolbox: this.toolbox,
@@ -235,31 +215,36 @@ const InspectorOverlay = Class(
   showDOMProperties: function() {
     let original = this.showDOMPropertiesOriginal;
 
-    // The user needs to click on the jQueryData element (an envelope)
+    // The user needs to click on a little icon indicating
+    // jQuery.data in the element in order to show properties
+    // for the jQuery.data
     let target = this.panel.panelDoc.popupNode;
     if (!target.classList.contains("fireQueryData")) {
       return original.apply(this.panel, arguments);
     }
 
-    // There must be jQuery data associated with the node.
+    // Make sure there are jQuery data associated with the node.
     let nodeFront = this.panel.selection.nodeFront;
-    let jQueryData = nodeFront._form.jQueryData;
-    if (!jQueryData) {
+    if (!this.hasJQueryData(nodeFront)) {
       return original.apply(this.panel, arguments);
     }
 
-    Trace.sysout("InspectorOverlay.showDOMProperties;", jQueryData);
-
-    // Display clicked jQuery data instead of element properties.
-    this.toolbox.openSplitConsole().then(() => {
-      let panel = this.toolbox.getPanel("webconsole");
-      let output = panel.hud.ui.output;
-
-      output.openVariablesView({
-        label: "jQuery.data",
-        //objectActor: dataGrip,
-        rawObject: jQueryData,
-        autofocus: true,
+    // Alright, get jQuery.data from the backend and display
+    // them in the VariablesView (Console panel's side panel).
+    this.getJQueryData(nodeFront).then(response => {
+      this.toolbox.openSplitConsole().then(() => {
+        Trace.sysout("InspectorOverlay.showDOMProperties;", response);
+
+        let panel = this.toolbox.getPanel("webconsole");
+        let output = panel.hud.ui.output;
+
+        // Retrieved 'response.jQueryData' is a grip object.
+        output.openVariablesView({
+          label: "jQuery.data",
+          objectActor: response.jQueryData,
+          //rawObject: raw e.g. JSON object, would go here,
+          autofocus: true,
+        });
       });
     });
   },
@@ -310,6 +295,28 @@ const InspectorOverlay = Class(
       this.createDataIcon(element);
     }
   },
+
+  // Helpers for jQuery.data
+
+  hasJQueryData: function(nodeFront) {
+    let hasJQueryData;
+
+    // nodeFront.getFormProperty has been introduced in Bug 1036949
+    // xxxHonza: Checking existence of the method can be removed
+    // as soon as Fx42 is the minimum required version.
+    if (nodeFront.getFormProperty) {
+      hasJQueryData = nodeFront.getFormProperty("hasJQueryData");
+    } else if (nodeFront._form.props) {
+      hasJQueryData = nodeFront._form.props.hasJQueryData;
+    }
+
+    return hasJQueryData;
+  },
+
+  getJQueryData: function(nodeFront) {
+    let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
+    return toolboxOverlay.front.getJQueryData(nodeFront);
+  }
 });
 
 // Patching MarkupView (fire a new "container-created" event)