Properly remove the icon indicator (not from child containers)

Author: janodvarko

lib/inspector-overlay.js

@@ -33,11 +33,17 @@ const ToolboxOverlayId = FireQueryToolboxOverlay.prototype.overlayId;
 
 /**
  * @overlay This object represents an overlay for the existing
- * Inspector panel which is responsible for customization.
+ * Inspector panel. The overlay is responsible for customization
+ * of the panel.
  *
  * Every element that has jQuery.data associated has additional
  * icon rendered right next to it. Clicking on the icon opens
  * a tooltip displaying the data.
+ *
+ * It's also possible to right click on the icon and pick
+ * 'Show DOM Properties' - it'll show jQuery.data in the
+ * Variables View (Console's panel side panel). This built-in
+ * action is usually used for elements.
  */
 const InspectorOverlay = Class(
 /** @lends InspectorOverlay */
@@ -144,7 +150,7 @@ const InspectorOverlay = Class(
     //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
+    // has jQuery.data associated. Clicking on the icon opens a tooltip
     // with more details.
     let nodeFront = container.node;
     if (this.hasJQueryData(nodeFront)) {
@@ -153,19 +159,18 @@ const InspectorOverlay = Class(
   },
 
   createDataIcon: function(element) {
-    Trace.sysout("InspectorOverlay.createDataIcon; ", element);
+    if (!element.classList.contains("editor")) {
+      element = element.querySelector(".tag-line .editor");
+    }
 
+    // Bail out if the icon is already created.
     let icon = element.querySelector(".fireQueryData");
     if (icon) {
       return;
     }
 
-    if (!element.classList.contains("editor")) {
-      element = element.querySelector(".tag-line .editor");
-    }
-
-    // Create a little icon indicating the the node (displayed in the
-    // Markup View) has jQuery data associated. Clicking the icon
+    // Create a little icon indicating that the node (displayed in the
+    // MarkupView) has jQuery.data associated. Clicking the icon
     // displays the data as an expandable tree in a tooltip.
     let doc = element.ownerDocument;
     icon = doc.createElementNS(XHTML_NS, "span");
@@ -178,14 +183,15 @@ const InspectorOverlay = Class(
   },
 
   removeDataIcon: function(element) {
-    Trace.sysout("InspectorOverlay.removeDataIcon;", element);
+    if (!element.classList.contains("editor")) {
+      element = element.querySelector(".tag-line .editor");
+    }
 
+    // Bail out if the icon doesn't exist.
     let icon = element.querySelector(".fireQueryData");
-    if (!icon) {
-      return;
+    if (icon) {
+      icon.remove();
     }
-
-    icon.remove();
   },
 
   onClickTooltip: function(event) {
@@ -256,7 +262,11 @@ const InspectorOverlay = Class(
 
     front.on("data-modified", this.onDataModified);
 
-    // Update the markup view
+    // 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();
   },
@@ -275,10 +285,11 @@ const InspectorOverlay = Class(
     let client = this.toolbox.target.client;
     let nodeFront = nodeData.node;
 
-    // The container doesn't have to be always there (visible).
+    // The container doesn't have to be always visible/available.
     let container = markupView.getContainer(nodeFront);
     if (!container) {
-      Trace.sysout("InspectorOverlay.onDataModified; No Container", nodeData);
+      Trace.sysout("InspectorOverlay.onDataModified; no container, " +
+        "has data: " + hasJQueryData);
       return;
     }