Template for event listener tooltip.

Author: Chris K

src/ecma-debugger/dominspection/inspectabledomnode.js

@@ -29,6 +29,7 @@ cls.EcmascriptDebugger["6.0"].InspectableDOMNode.FRAME_ELEMENT = 12;
 cls.EcmascriptDebugger["6.0"].InspectableDOMNode.MATCH_REASON = 13;
 cls.EcmascriptDebugger["6.0"].InspectableDOMNode.PSEUDO_ELEMENT = 14;
 cls.EcmascriptDebugger["6.0"].InspectableDOMNode.PSEUDO_NODE = 0;
+cls.EcmascriptDebugger["6.0"].InspectableDOMNode.EVENT_LISTENER_LIST = 15;
 
 cls.EcmascriptDebugger["6.0"].InspectableDOMNode.prototype = new function()
 {
@@ -62,7 +63,8 @@ cls.EcmascriptDebugger["6.0"].InspectableDOMNode.prototype = new function()
   BEFORE_ALIKES = [BEFORE, FIRST_LETTER, FIRST_LINE],
   AFTER_ALIKES = [AFTER],
   ERROR_MSG = 0,
-  PSEUDO_NAME = {};
+  PSEUDO_NAME = {},
+  EVENT_LISTENER_LIST = cls.EcmascriptDebugger["6.0"].InspectableDOMNode.EVENT_LISTENER_LIST;
 
   PSEUDO_NAME[BEFORE] = "before";
   PSEUDO_NAME[AFTER] = "after";
@@ -437,12 +439,27 @@ cls.EcmascriptDebugger["6.0"].InspectableDOMNode.prototype = new function()
   {
     return Boolean(this._data && this._data.length);
   }
+  
+  this.get_node = function(node_id)
+  {
+    if (this.has_data())
+    {
+      for (var i = 0; this._data[i] && this._data[i][ID] != node_id; i++);
+      return this._data[i];
+    }
+    return null;
+  };
 
   this.has_node = function(node_id)
   {
-    for (var i = 0; this._data[i] && this._data[i][ID] != node_id; i++);
-    return Boolean(this._data[i]);
-  }
+    return Boolean(this.get_node(node_id));
+  };
+
+  this.get_ev_listeners = function(node_id)
+  {
+    var node = this.get_node(node_id);
+    return node && node[EVENT_LISTENER_LIST] || [];
+  };
 
   this.get_data = this.getData = function()
   {

src/ecma-debugger/evlistenertooltip/evlistenertemplates.js

@@ -12,19 +12,88 @@
     var ORIGIN_EVENT_TARGET = 1;
     var ORIGIN_ATTRIBUTE = 2;
     var POSITION = 2;
+    var SCRIPT_ID = 0;
+    var LINE_NUMBER = 1;
     var USE_CAPTURE = 3;
     var LISTENER_OBJECT_ID = 4;
     var LISTENER_SCRIPT_DATA = 5;
 
+    /*
+      matchReason: TRAVERSAL (1)
+      pseudoElementList:
+      eventListenerList:
+        eventener:
+          eventType: "click"
+          origin: EVENT_TARGET (1)
+          position:
+            scriptID: 2544
+            lineNumber: 19
+          useCapture: 0
+          listenerObjectID: 17
+    */
+
     var ret = [];
     var row = 
     ["tr",
       ["td",
-        ["h2", listener[EVENT_TYPE], "class", "evl-type"]],
+        ["h2", listener[EVENT_TYPE], "class", "ev-type"]],
       ["td", listener[USE_CAPTURE] ? "capturing phase" : "bubbling phase"]];
-    ret push(row);
+    ret.push(row);
+    row =
+    ["tr",
+      ["td", listener[ORIGIN] == ORIGIN_EVENT_TARGET ? 
+             "event target handler" :
+             "attribute handler",
+             "colspan", "2", "class", "ev-origin"]];
+    ret.push(row);
+    var position = listener[POSITION];
+    var script_id = position && position[SCRIPT_ID];
+    var script = window.runtimes.getScript(script_id);
+    if (script)
+    {
+      row =
+      ["tr",
+        ["td", "added:"],
+        this.ev_script_link(script, position[LINE_NUMBER]),
+        "handler", "show-log-entry-source",
+        "data-scriptid", String(script_id),
+        "data-scriptline", String(position[LINE_NUMBER]),
+        "class", "ev-added"];
+      ret.push(row);
+    }
     return ret;
+  };
 
-  }
+  this.ev_script_link = function(script, line_number)
+  {
+    var script_type = this._script_type_map[script.script_type] ||
+                      script.script_type;
+    if (script.uri)
+    {
+      var is_linked = script.script_type == "linked";
+      var ret = 
+      ["td", 
+        ["span", script.filename + ":" + line_number, 
+                 "data-tooltip", is_linked && "js-script-select", 
+                 "data-tooltip-text", is_linked && script.uri,
+                 "class", "file-line"]];
+    }
+    else
+    {
+      var rt = window.runtimes.getRuntime(script.runtime_id);
+      if (rt)
+      {
+        var ret = 
+        ["td", 
+          ["span", rt.filename + ":" + line_number,
+                   "data-tooltip", "js-script-select", 
+                   "data-tooltip-text", rt.uri,
+                   "class", "file-line"]];
+      }
+    }
+
+    ret.push("script-id", String(script.script_id));
+    return ret;
+  };
 
 }).apply(window.templates || (window.templates = {}));

src/ecma-debugger/evlistenertooltip/evlistenertooltip.js

@@ -68,9 +68,14 @@ cls.EvListenerTooltip = function()
   {
 
     _hide_tooltip();
-    _tooltip.show(["span", "hello"]);
-
-
+    var model = window.dominspections[target.get_ancestor_attr("data-model-id")];
+    var node_id = target.get_ancestor_attr("ref-id");
+    if (model && node_id)
+    {
+      var listeners = model.get_ev_listeners(node_id);
+      var tmpl = window.templates.ev_listeners(listeners);
+      _tooltip.show(tmpl);
+    }
   };
 
   var _init = function(view)

src/ui-scripts/tooltip/tooltip.css

@@ -12,8 +12,7 @@
 {
   color: #000;
   background-color: #aac2f2;
-  padding: 1px;
-  margin: -1px;
+  box-shadow: 0 0 0 1px #aac2f2;
 }
 
 .basic-tooltip