Some style fixes.

Author: Chris K

src/ecma-debugger/action_handler.js

@@ -170,6 +170,11 @@ window.eventHandlers.click['set-break-point'] = function(event)
   var li = target.get_ancestor("li");
   var input = li.querySelector("input");
   var line_number = input && Number(input.value);
+  if (!line_number)
+  {
+    var span = li.querySelector(".line-number");
+    line_number = span && Number(span.textContent);
+  }
   var script_id = window.views.js_source.getCurrentScriptId() ||
                   Number(target.get_ancestor_attr("data-script-id"));
   if (script_id && line_number)

src/ecma-debugger/evlistenertooltip/evlistenertemplates.js

@@ -3,7 +3,7 @@
   this.ev_listeners = function(listener_list, rt_id)
   {
     return ["dl", listener_list.map(this._ev_listener.bind(this, rt_id)),
-                  "class", "ev-listener"]; // , this), "class", "ev-listener"];
+                  "class", "ev-listener mono"];
   };
 
   this._ev_listener = function(rt_id, listener)
@@ -19,6 +19,8 @@
     var LISTENER_OBJECT_ID = 4;
     var LISTENER_SCRIPT_DATA = 5;
     var ret = [];
+    var position = listener[POSITION];
+
     ret.push(["dt", listener[EVENT_TYPE], "class", "ev-type"]);
     ret.push(["dd", listener[USE_CAPTURE] ? "capturing phase" : "bubbling phase",
                     "class", "ev-phase"]);
@@ -31,40 +33,21 @@
                          "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)
     {
-      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.");
-      }
 
-      if (ctx.length)
+      var sc_link = this.script_link_with_file_number(script,
+                                                      position[LINE_NUMBER],
+                                                      "added in %s"); //TODO ui string
+      if (sc_link.length)
       {
-        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]);
+        sc_link.push("handler", "show-log-entry-source",
+                     "data-scriptid", String(script_id),
+                     "data-scriptline", String(position[LINE_NUMBER]),
+                     "class", "ev-added");
+        ret.push(["dd", sc_link]);
       }
     }
     else
@@ -73,4 +56,31 @@
     return ret;
   };
 
+  this.script_link_with_file_number = function(script, line_number, str)
+  {
+    str || (str = "%s");
+    var ret = [];
+    var script_type = this._script_type_map[script.script_type] ||
+                      script.script_type;
+    if (script.uri)
+    {
+      var is_linked = script.script_type == "linked";
+      ret.push("span", str.replace("%s", script.filename + ":" + line_number),
+                       "data-tooltip", is_linked && "url-tooltip", 
+                       "data-tooltip-text", is_linked && script.uri);
+    }
+    else
+    {
+      var rt = window.runtimes.getRuntime(script.runtime_id);
+      if (rt)
+        ret.push("span", str.replace("%s", rt.filename),
+                         "data-tooltip", "url-tooltip", 
+                         "data-tooltip-text", rt.uri);
+      else
+        opera.postError(ui_strings.S_DRAGONFLY_INFO_MESSAGE + 
+                        " missing runtime in _ev_listener template.");
+    }
+    return ret;
+  }
+
 }).apply(window.templates || (window.templates = {}));

src/ecma-debugger/objectinspection.6.0/prettyprinter.js

@@ -117,6 +117,16 @@ cls.PrettyPrinter.types[cls.PrettyPrinter.FUNCTION] =
       var end_line = ctx.function_definition.end_line;
       var line_numbers = ["ul"];
       var lines = ["div"];
+      var head = [];
+      var sc_link = window.templates.script_link_with_file_number(script, start_line);
+      if (sc_link)
+      {
+        sc_link.push("handler", "show-log-entry-source",
+                     "data-scriptid", String(script.script_id),
+                     "data-scriptline", String(start_line),
+                     "data-script-endline", String(end_line)),
+        head = ["h2", sc_link, "class", "js-tooltip-title"];
+      }
       for (var i = start_line; i <= end_line; i++)
       {
         var data = script.get_line(i);
@@ -125,15 +135,18 @@ cls.PrettyPrinter.types[cls.PrettyPrinter.FUNCTION] =
         window.templates.highlight_js_source(data, null, start_state, line_tmpl);
         lines.push(line_tmpl);
         var num_templ = ["li"];
-        num_templ.push(["input", "value", String(i)]);
-        num_templ.push(["span", "handler", "set-break-point"]);
+        num_templ.push(["span", String(i), "class", "line-number"]);
+        num_templ.push(["span", "handler", "set-break-point", "class", "break-point"]);
         line_numbers.push(num_templ);
       }
       lines.push("class", "js-source-content js-source mono");
       line_numbers.push("class", "js-source-line-numbers");
+
       tmpl = ["div", 
-                lines, 
-                line_numbers, 
+                head,
+                ["div",
+                  ["div", lines, line_numbers, "class", "position-relative"],
+                  "class", "js-tooltip-examine-container mono"],
                 "class", "tooltip-function-source",
                 "data-script-id", String(script.script_id)];
     }

src/ui-scripts/tooltip/tooltip.css

@@ -13,6 +13,7 @@
   color: #000;
   background-color: #aac2f2;
   box-shadow: 0 0 0 1px #aac2f2;
+  border-radius: 2px;
 }
 
 .basic-tooltip

src/ui-style/debugger_style.css

@@ -694,11 +694,19 @@ parent-offset
 .node-with-ev-listener
 {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  background: transparent url("../ui-images/icons/icon_ev_listener.png") no-repeat 0 0;
+  height: 12px;
+  line-height: 12px;
   vertical-align: middle;
   margin-left: 3px;
+  padding: 0 2px;
+  background-color: hsl(0, 0% , 70%);
+  color: #fff;
+  border-radius: 2px;
+}
+
+.node-with-ev-listener::after
+{
+  content: "ev";
 }
 
 .css-layout > div > h2:first-child
@@ -1615,19 +1623,42 @@ d
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 }
 
+.ev-listener
+{
+  margin: 0;
+}
+
+.ev-type
+{
+  font-weight: bold;
+}
+
 .ev-added,
 .ev-origin
 {
   border-radius: 2px;
 }
 
-.tooltip-function-source
+.tooltip-function-source .js-tooltip-examine-container
 {
-  position: relative;
+  padding: 0;
+}
+
+.tooltip-function-source .js-source-line-numbers
+{
+  background-color: hsla(0, 0%, 0%, .03);
+  border-radius: 0 0 0 3px;
 }
 
 .tooltip-function-source .js-source-content
 {
   margin-left: 40px;
 }
 
+.position-relative
+{
+  position: relative;
+}
+
+
+

src/ui-style/js-source.css

@@ -84,7 +84,7 @@
   position: relative;
 }
 
-.js-source-line-numbers span
+.js-source-line-numbers .break-point
 {
   position: absolute;
   left: 0;
@@ -94,7 +94,8 @@
   background: transparent url('../ui-images/line-types.png') no-repeat 0 0;
 }
 
-.js-source-line-numbers input
+.js-source-line-numbers input,
+.js-source-line-numbers .line-number
 {
   width: 37px;
   text-align: right;
@@ -108,6 +109,7 @@
   font-family: inherit;
   vertical-align: middle;
   color: #b3b3b3;
+  display: inline-block;
 }
 
 .js-source-line-numbers input:hover