665933 - [highlighter] investigate showing elements listening to mouse & key events

Status: RESOLVED DUPLICATE of bug 1044932

(DevTools :: Inspector, defect)

Description

[Paul Rouget [:paul]]

See http://www.sprymedia.co.uk/article/Visual+Event

Comment 1

[Paul Rouget [:paul]]

Mike Ratcliffe suggested this:
> let eventListenerService =
> Components.classes["@mozilla.org/eventlistenerservice;1"]
> .getService(Components.interfaces.nsIEventListenerService);
> 
> let elt = content.document.getElementById(aNode.id);
> 
> eventListenerService .getListenerInfoFor(elt).getDebugObject();
> 
> I am fairly certain that this gives access to some useful event info
> ... the only problem is that the debugger needs to be running in
> order to use it.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

The debugger doesn't need to be running if you only need to list the listeners attached to an element. You can use the following code for that:

let eventListenerService =
  Components.classes["@mozilla.org/eventlistenerservice;1"]
    .getService(Components.interfaces.nsIEventListenerService);
 
  let elt = content.document.getElementById(aNode.id); 
  let result = eventListenerService.getListenerInfoFor(elt);

If you want to do more than simply listing them then the debugger needs to be running.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

See also following Firebug extension that uses nsIEventListenerService to display event handlers.

http://code.google.com/p/fbug/source/browse/#svn%2Feventbug%2Fbranches%2Feventbug0.1

Honza

Comment 4

[Rob Campbell [:rc] (:robcee)]

still want something like this.

Comment 5

[Willian Gustavo Veiga]

Attachment: Opera 12.16 handle this in an elegant way (highlighted in yellow).

On mouse over you can see all events types / handlers.

Comment 6

[flying sheep]

the firebug implementation lives in the following places.

https://github.com/firebug/firebug/blob/master/extension/content/firebug/lib/events.js#L588
https://github.com/firebug/firebug/blob/master/extension/content/firebug/console/commands/getEventListeners.js#L205

we could rip it out and put it into the web console, then use it to spice up the inspector

Comment 7

[Paul Rouget [:paul]]

(In reply to flying sheep from comment #6)
> the firebug implementation lives in the following places.
> 
> https://github.com/firebug/firebug/blob/master/extension/content/firebug/lib/
> events.js#L588
> https://github.com/firebug/firebug/blob/master/extension/content/firebug/
> console/commands/getEventListeners.js#L205
> 
> we could rip it out and put it into the web console, then use it to spice up
> the inspector

Thanks. elService being:

> let eventListenerService = Cc["@mozilla.org/eventlistenerservice;1"]
> .getService(Ci.nsIEventListenerService);

Comment 8

[Panos Astithas (he/him) [:past] (please ni?)]

Or we could reuse the code in the debugger (maybe even move it to devtools/shared/).

Comment 9

[flying sheep]

(In reply to Panos Astithas [:past] from comment #8)
> Or we could reuse the code in the debugger

which lives where? (i’d like to create an extension like eventbug for the web console, so i’d like to see all prior art here for inspiration ☺)

Comment 10

[Panos Astithas (he/him) [:past] (please ni?)]

The backend part which could be refactored to call a shared implementation is here:

http://dxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/script.js#1661

The main frontend part is here:

http://dxr.mozilla.org/mozilla-central/source/browser/devtools/debugger/debugger-controller.js#1414

Comment 11

[flying sheep]

thanks!

Comment 12

[Patrick Brosset <:pbro>]

We've had event information in the inspector for a while now, I think since bug 1044932.