Added files for event listener tooltip.

Author: Chris K

src/build-application/build_ecmascript_debugger_6_0.js

@@ -20,6 +20,7 @@ window.app.builders.EcmascriptDebugger["6.0"] = function(service)
 
     cls.InspectableJSObject = namespace.InspectableJSObject;
     cls.JSInspectionTooltip.register();
+    cls.EvListenerTooltip.register();
     // disabled for now. see CORE-32113
     // cls.InspectableJSObject.register_enabled_listener();
     // for now we are filtering on the client side

src/client-en.xml

@@ -413,6 +413,8 @@ window.load_screen_timeout = window.setTimeout(function()
 <script src="./ecma-debugger/watches/view.js"/>
 <script src="./ecma-debugger/watches/propertyeditor.js"/>
 <script src="./ecma-debugger/jssourcetooltip.js"/>
+<script src="./ecma-debugger/evlistenertooltip/evlistenertooltip.js"/>
+<script src="./ecma-debugger/evlistenertooltip/evlistenertemplates.js"/>
 
 <script src="./searches/jssearchview.js"/>
 

src/ecma-debugger/evlistenertooltip/evlistenertemplates.js

@@ -0,0 +1,30 @@
+(function()
+{
+  this.ev_listeners = function(listener_list)
+  {
+    return ["table", ["tbody", listener_list.map(this._ev_listener, this)]];
+  };
+
+  this._ev_listener = function(listener)
+  {
+    var EVENT_TYPE = 0;
+    var ORIGIN = 1;
+    var ORIGIN_EVENT_TARGET = 1;
+    var ORIGIN_ATTRIBUTE = 2;
+    var POSITION = 2;
+    var USE_CAPTURE = 3;
+    var LISTENER_OBJECT_ID = 4;
+    var LISTENER_SCRIPT_DATA = 5;
+
+    var ret = [];
+    var row = 
+    ["tr",
+      ["td",
+        ["h2", listener[EVENT_TYPE], "class", "evl-type"]],
+      ["td", listener[USE_CAPTURE] ? "capturing phase" : "bubbling phase"]];
+    ret push(row);
+    return ret;
+
+  }
+
+}).apply(window.templates || (window.templates = {}));

src/ecma-debugger/evlistenertooltip/evlistenertooltip.js

@@ -0,0 +1,95 @@
+"use strict";
+
+window.cls || (window.cls = {});
+
+cls.EvListenerTooltip = function()
+{
+
+
+  var _tooltip = null;
+
+
+
+
+  var _hide_tooltip = function()
+  {
+    _tooltip.hide();
+  };
+
+  var _ontooltipenter = function(event)
+  {
+    if (!_cur_ctx)
+      return;
+    
+    switch (_cur_ctx.type.type)
+    {
+      case cls.PrettyPrinter.ELEMENT:
+        if (settings.dom.get("highlight-on-hover"))
+          hostspotlighter.spotlight(_cur_ctx.obj_id, true);
+        break;
+    }
+  };
+
+  var _ontooltipleave = function(event)
+  {
+    if (!_cur_ctx)
+      return;
+
+    switch (_cur_ctx.type.type)
+    {
+      case cls.PrettyPrinter.ELEMENT:
+        if (settings.dom.get("highlight-on-hover"))
+        {
+          if (views.dom.isvisible() && dom_data.target)
+            hostspotlighter.spotlight(dom_data.target, true);
+          else
+            hostspotlighter.clearSpotlight();
+        }
+        break;
+    }
+  };
+  
+  var _ontooltipclick = function(event)
+  {
+    if (!_cur_ctx)
+      return;
+
+    switch (_cur_ctx.type.type)
+    {
+      case cls.PrettyPrinter.ELEMENT:
+        UI.get_instance().show_view("dom");
+        dom_data.get_dom(_cur_ctx.rt_id, _cur_ctx.obj_id);
+        _hide_tooltip();
+        break;
+    }
+  };
+
+  var _ontooltip = function(event, target)
+  {
+
+    _hide_tooltip();
+    _tooltip.show(["span", "hello"]);
+
+
+  };
+
+  var _init = function(view)
+  {
+    _tooltip = Tooltips.register(cls.EvListenerTooltip.tooltip_name, true);
+
+    _tooltip.ontooltip = _ontooltip;
+    _tooltip.onhide = _hide_tooltip;
+    //_tooltip.ontooltipenter = _ontooltipenter;
+    //_tooltip.ontooltipleave = _ontooltipleave;
+    //_tooltip.ontooltipclick = _ontooltipclick;
+  };
+
+  _init();
+};
+
+cls.EvListenerTooltip.tooltip_name = "event-listener";
+
+cls.EvListenerTooltip.register = function()
+{
+  this._tooltip = new cls.EvListenerTooltip();
+};