Florent Fayolle Reporter
	Description • 9 years ago

Firebug 2.0 has an "Events" side panel which displays not only the events of the current element, but also the events of its parents.

I personally don't think it will be redundant but rather complementary to the badge displayed beside the element in the inspector panel.

Originally reported in this Firebug 3.0 issue:
https://github.com/firebug/firebug.next/issues/394

Florent

	usermirss
	Comment 1 • 9 years ago

I really think this is important, not only for ease of use (for some could be better as it is now, for others in a tab like we request) but for the parent events as well because it is VERY useful for debugging applications.

	Patrick Brosset <:pbro>
	Comment 2 • 8 years ago

Triaging (filter on CLIMBING SHOES).

	usermirss
	Comment 3 • 8 years ago

I implemented this on the firebug3 extension but since now it will be become integrated with devtools, could someone port it? its been my first time developing in here so it wont be easy for me to port it.

The code and implementation is here:
https://github.com/firebug/firebug.next/issues/474

Here is how it looks

http://i.imgur.com/x7ad9AG.jpg

The implementation works pretty well but it could be a lot more efficient if the devtools implemented the "selector" property of the events (.getEventListenerInfo()) like firebug had so with the front node we can find the child DOM objects using that selector, otherwise we have to do a paralel search in jquery to find that selector property.

	Patrick Brosset <:pbro>
	Comment 4 • 8 years ago

Sorry about the delay responding here. I've been sick these last couple of weeks and mostly away from my computer.
If this is a useful Firebug feature, then I think it makes sense to have it.

Mike is a much better person than me to help on this though, he was the one who worked on the event panel in devtools originally, I'll ping him here.

One concern I do have: we've had too many side panels in the past, and not a very good way to surface them. And so we're in the process of doing 2 things:
- removing side panels: which we did with the font panel (bug 1247723), which caused some drama, but that's another discussion, and we want to do the same with the box-model panel, by merging it inside the computed-view panel (bug 1247729)
- finding a better way to have more panels while keeping a simple tabbar UI that makes it easy to discover new tabs, while not have them all ON by default.

So, before we rush to add yet another panel, we should consider these 2 things.

	Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]
	Comment 5 • 8 years ago

As Patrick says, we do have to consider whether we want any more panels. Personally, I like the event bubbles in the markup view because you can see how events will bubble at a glance.

I suspect that this would make more sense as an extension.

Either way, In the markup view we use:
this.node.getEventListenerInfo().then(listenerInfo => {
  // Display results of listenerInfo array here.
});

There this.node is the current node actor... should be really easy from there.

	usermirss
	Comment 6 • 8 years ago

I do not think the bubble in there is enough considering all the info you need to show, you need to have ALL delegated events (so its a long list), their file, their line AND be able to LOOK UP the elements that push that delegation, so you need a "hover on" the parent to highlight it in the DOM, in which case, the bubble will be OVER those elements since it displays in front of the DOM elements.

The this.node in listenerInfo does not provide the SELECTOR to find delegated events, that was part of the issue and why this code was implemented in the way i did, maybe they should add the property "selectors" on the events (getEventListenerInfo()) to be able to look up the childs/parents that affect them.

Until this is decided could anyone port this into the devtools? I think its a MUST feature that would be too important to miss on the devtools.

I would port it myself but i have never done patches on mozilla, only for FIREBUG, so this would exceed my knowledge to even see where to start.

	Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]
	Comment 7 • 8 years ago

(In reply to usermirss from comment #6)
> I do not think the bubble in there is enough considering all the info you
> need to show, you need to have ALL delegated events (so its a long list),
> their file, their line AND be able to LOOK UP the elements that push that
> delegation, so you need a "hover on" the parent to highlight it in the DOM,
> in which case, the bubble will be OVER those elements since it displays in
> front of the DOM elements.
> 
> The this.node in listenerInfo does not provide the SELECTOR to find
> delegated events, that was part of the issue and why this code was
> implemented in the way i did, maybe they should add the property "selectors"
> on the events (getEventListenerInfo()) to be able to look up the
> childs/parents that affect them.
> 
> Until this is decided could anyone port this into the devtools? I think its
> a MUST feature that would be too important to miss on the devtools.
> 
> I would port it myself but i have never done patches on mozilla, only for
> FIREBUG, so this would exceed my knowledge to even see where to start.

From what you describe, an events side panel is going to be useful so I would be happy to mentor you... if you can write a Firebug extension you can certainly contribute to the Firefox DevTools.

There is a guide to getting started here:
https://wiki.mozilla.org/DevTools/Hacking

Would you like me to assign you to the bug?

	usermirss
	Comment 8 • 8 years ago

Thanks for the offer Michael,

Right now im in a tight spot with work to learn about the code in the devtools to be able port it over, i will do it when i get some free time if no one steps in and in that case, i will take you up on that offer :) , in the meantime i already made it available as an addon without firebug

https://addons.mozilla.org/en-US/firefox/addon/events-listener-tab/

So it should be easier than before (for someone who is familiar on the devtools) if someone wants to port it over since it doesnt depend anymore on firebug and its mostly native.

	Jan Honza Odvarko [:Honza] (always need-info? me)
	Comment 9 • 8 years ago

Note that bug 1305979 introduces a new API for appending new side panels into the Inspector panel. The API could be nicely utilized here.

This link might be helpful
https://github.com/janodvarko/prototypes/blob/master/inspector-sidebar/index.js

Honza