Template for the event listener tooltip.

Author: Chris K

src/ecma-debugger/evlistenertooltip/evlistenertemplates.js

@@ -18,78 +18,59 @@
     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 = [];
     ret.push(["dt", listener[EVENT_TYPE], "class", "ev-type"]);
     ret.push(["dd", listener[USE_CAPTURE] ? "capturing phase" : "bubbling phase",
                     "class", "ev-phase"]);
-    ret.push(["dd", listener[ORIGIN] == ORIGIN_EVENT_TARGET
-                  ? "event target handler"
-                  : "attribute handler",
-                    "data-tooltip", "js-inspection",
-                    "data-rt-id", String(rt_id),
-                    "data-obj-id", String(listener[LISTENER_OBJECT_ID]),
-                    "data-class-name", "Function",
-                    "class", "ev-origin"]);
+    ret.push(["dd", 
+                ["span", listener[ORIGIN] == ORIGIN_EVENT_TARGET
+                       ? "event target handler"
+                       : "attribute handler",
+                         "data-tooltip", "js-inspection",
+                         "data-rt-id", String(rt_id),
+                         "data-obj-id", String(listener[LISTENER_OBJECT_ID]),
+                         "data-class-name", "Function",
+                         "class", "ev-origin"]]);
     var position = listener[POSITION];
     var script_id = position && position[SCRIPT_ID];
     var script = window.runtimes.getScript(script_id);
     if (script)
     {
-      ret.push(["dd", "added in ",
-                      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"]);
-    }
-    else
-    {
-      // TODO missing script
-    }
-    return ret;
-  };
+      var script_type = this._script_type_map[script.script_type] ||
+                        script.script_type;
+      var ctx = [];
+      if (script.uri)
+      {
+        var is_linked = script.script_type == "linked";
+        ctx.push("span", "added in " + script.filename + ":" + position[LINE_NUMBER], // TODO ui string
+                         "data-tooltip", is_linked && "url-tooltip", 
+                         "data-tooltip-text", is_linked && script.uri);
+      }
+      else
+      {
+        var rt = window.runtimes.getRuntime(script.runtime_id);
+        if (rt)
+          ctx.push("span", "added in " + rt.filename, // TODO ui string
+                           "data-tooltip", "url-tooltip", 
+                           "data-tooltip-text", rt.uri);
+        else
+          opera.postError(ui_strings.S_DRAGONFLY_INFO_MESSAGE + 
+                          " missing runtime in _ev_listener template.");
+      }
 
-  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 = ["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)
+      if (ctx.length)
       {
-        var ret = ["span", rt.filename, // line_number is relative to the inline script
-                           "data-tooltip", "js-script-select", 
-                           "data-tooltip-text", rt.uri,
-                           "class", "file-line"];
+        ctx.push("handler", "show-log-entry-source",
+                 "data-scriptid", String(script_id),
+                 "data-scriptline", String(position[LINE_NUMBER]),
+                 "class", "ev-added");
+        ret.push(["dd", ctx]);
       }
     }
+    else
+      ret.push(["dd", "<missing JavaScript source file>"]);  // TODO ui string
 
-    ret.push("script-id", String(script.script_id));
     return ret;
   };
 
-}).apply(window.templates || (window.templates = {}));
+}).apply(window.templates || (window.templates = {}));

src/ecma-debugger/evlistenertooltip/evlistenertooltip.js

@@ -7,6 +7,7 @@ cls.EvListenerTooltip = function()
 
 
   var _tooltip = null;
+  var _url_tooltip = null;
 
 
 
@@ -71,6 +72,7 @@ cls.EvListenerTooltip = function()
   var _init = function(view)
   {
     _tooltip = Tooltips.register(cls.EvListenerTooltip.tooltip_name, true);
+    _url_tooltip = Tooltips.register("url-tooltip", true);
 
     _tooltip.ontooltip = _ontooltip;
     _tooltip.onhide = _hide_tooltip;

src/ui-style/debugger_style.css

@@ -1615,3 +1615,19 @@ d
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 }
 
+.ev-added,
+.ev-origin
+{
+  border-radius: 2px;
+}
+
+.tooltip-function-source
+{
+  position: relative;
+}
+
+.tooltip-function-source .js-source-content
+{
+  margin-left: 40px;
+}
+