little bit of styling + sending listener function declaration code ov…

…er, however not used

data/panel.css

@@ -93,6 +93,8 @@ body {
   padding: 5px 3px;
   margin: 0;
   list-style-type: none;
+
+  overflow: auto;
 }
 
 .record:hover {
@@ -101,17 +103,25 @@ body {
   color: white;
 }
 
-.record.event:not(:hover) {
+.event-name {
   color: orange;
+  font-weight: bold;
+}
+
+.record:hover .event-name {
+  color: white;
 }
 
 .target {
   float: right;
+  cursor: pointer;
 }
 
 .time {
-  color: #999;
+  color: #666;
   margin-right: 5px;
+  float: left;
+  width: 5%;
 }
 
 .target-tag {

data/panel.js

@@ -265,7 +265,8 @@ RecorderPanel.prototype = {
 
   buildRecordOutputFor_event({parentEl, data, time}) {
     let outputEl = this.doc.createElement("span");
-    outputEl.textContent = "Event " + data.type;
+    outputEl.innerHTML = "Event <span class='event-name'>" + data.type +
+                         "</span> handled";
     parentEl.appendChild(outputEl);
   },
 

data/recorder-frame-script.js

@@ -50,8 +50,13 @@ PageChangeRecorder.prototype = {
       // Add one system-group event listener per default event type found
       // so we can be called whenever one happens even if the handler prevents
       // propagation.
-      for (let {type} of listeners) {
-        els.addSystemEventListener(node, type, this._onEvent, true);
+      for (let listener of listeners) {
+        let {type, listenerObject} = listener.listener;
+        let onEvent = e => {
+          this._onEvent(e.type, e.target, listenerObject + "");
+        };
+        els.addSystemEventListener(node, type, onEvent, true);
+        listener.cb = onEvent;
       }
     }
   },
@@ -64,8 +69,8 @@ PageChangeRecorder.prototype = {
     this.isStarted = false;
 
     for (let [node, listeners] of this.addedListeners) {
-      for (let {type} of listeners) {
-        els.removeSystemEventListener(node, type, this._onEvent, true);
+      for (let {cb, listener} of listeners) {
+        els.removeSystemEventListener(node, listeber.type, cb, true);
       }
     }
     this.addedListenerTypes = null;
@@ -82,7 +87,10 @@ PageChangeRecorder.prototype = {
         if (!nodeEventListeners.has(node)) {
           nodeEventListeners.set(node, []);
         }
-        nodeEventListeners.get(node).push(listener);
+        nodeEventListeners.get(node).push({
+          listener: listener,
+          cb: null
+        });
       }
     }
     return nodeEventListeners;
@@ -118,8 +126,8 @@ PageChangeRecorder.prototype = {
     }
   },
 
-  _onEvent({type, target}) {
-    this._emitChange("event", {type, target});
+  _onEvent(type, target, functionDeclaration) {
+    this._emitChange("event", {type, target, functionDeclaration});
   },
 
   _emitChange(type, data) {