1270884 - jQuery delegated events are not shown in the markup view

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[usermirss]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160502172042

Steps to reproduce:

HTML:

<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<style>
.media_preview {
	width:100px;
	height:100px;
	display:inline-block;
	margin:10px;
}
</style>

<div class="media_preview_container" style="width:300px;height:300px;background-color:black;">
	<div class="media_preview" style="background-color:red;"></div>
	<div class="media_preview" style="background-color:blue;"></div>
	<div class="media_preview" style="background-color:yellow;"></div>
</div>


Steps:
Open dev console, browse the .media_preview DIV and it has no event icon set, only the .media_preview_container has it and it doesnt point to any child, so there is no way to know that event is actually delegated to .media_preview


Actual results:

.media_preview doesnt show an event icon even tho it has an event assigned thru a delegation of .media_preview_container


Expected results:

Show the event icon in the .media_preview DIV and show its event code.

Comment 1

[usermirss]

Sorry, forgot to add the JS code to generate the event:

<script>
$(document).ready(function(){
	$(".media_preview_container").on("click.test",".media_preview",function(){
		alert('clicked on media preview class');
	});
});
</script>

Comment 2

[Andrew Overholt [:overholt]]

smaug, wdyt?

Comment 3

[Brian Grinstead [:bgrins]]

The event bubble jQuery adapter might be able to figure this out, although the exact elements that match that selector could change due to any mutations.  I'm also not sure if it's accurate to show as a normal event, since the event is really only bound on the parent node.  Maybe some alternate UI could work to show delegated event targets.

Comment 4

[Olli Pettay [:smaug][[e-mail]]]

Nothing to do with core DOM event handling. And I'm not familiar with the devtools code or UI here, and whether it can somehow show some jQuery constructs.
"delegation" is not a concept DOM events have. It is a concept in various script libraries.
(there has been some ideas to bring delegation to core DOM events, but not clear yet whether that will happen or whether it would be useful.)

Comment 5

[Patrick Brosset <:pbro>]

Flagging as an enhancement, but I'm not sure we should do this. I agree with comment 3.
Mike, what do you think?

Comment 6

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

Standard jQuery events use selector matching from an ancestral node so I don't see any reason not to show these.

I don't have time to look into this at the moment though.

Comment 7

[usermirss]

I implemented this on the firebug3 extension but since now it will be become integrated with devtools, could someone port it?

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

Here is now it looks

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

Comment 8

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 9

[Joe Walker [:jwalker]]

The jQuery folks pointed to this bug as their top priority for devtools to fix, so I've bumped the priority to P2.

Comment 10

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

Actually, I agree with pbrosset and bgrins... the event is actually bound to the container so that is where we should show the event bubble.

It would be misleading to add the event bubbles to the media_preview divs.

This is something that could be implemented in an event panel.

Comment 11

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

Attachment: test.html

Test case

Comment 12

[Patrick Brosset <:pbro>]

(In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #10)
> Actually, I agree with pbrosset and bgrins... the event is actually bound to
> the container so that is where we should show the event bubble.
> 
> It would be misleading to add the event bubbles to the media_preview divs.
> 
> This is something that could be implemented in an event panel.
I'm wondering if we couldn't just keep this information in the markup-view, with even bubbles, instead of adding another side panel.
What if we showed both the event bubble on the container (the node where the *real* event listener is added), and other (visually different) event bubbles on the children (the nodes the listener delegates to).

The icon could be the usual (ev) thing but with an arrow next to it, or through it, to represent the fact that an event is being delegated.

And when the popup is being opened, then the header could say "delegated from <div.media_preview_container>" or something.

Comment 9 and other flags indicate that this is a highly requested feature. Adding another side panel sounds like a big feature we'd need to prioritize for one of our next quarter. While the solution I suggest might be somewhat simpler (and maybe more discoverable/easier to use too).

@Mike: is this technically feasible?

Comment 13

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

(In reply to Patrick Brosset <:pbro> from comment #12)
> (In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #10)
> > Actually, I agree with pbrosset and bgrins... the event is actually bound to
> > the container so that is where we should show the event bubble.
> > 
> > It would be misleading to add the event bubbles to the media_preview divs.
> > 
> > This is something that could be implemented in an event panel.
> I'm wondering if we couldn't just keep this information in the markup-view,
> with even bubbles, instead of adding another side panel.
> What if we showed both the event bubble on the container (the node where the
> *real* event listener is added), and other (visually different) event
> bubbles on the children (the nodes the listener delegates to).
> 
> The icon could be the usual (ev) thing but with an arrow next to it, or
> through it, to represent the fact that an event is being delegated.
> 
> And when the popup is being opened, then the header could say "delegated
> from <div.media_preview_container>" or something.
> 
> Comment 9 and other flags indicate that this is a highly requested feature.
> Adding another side panel sounds like a big feature we'd need to prioritize
> for one of our next quarter. While the solution I suggest might be somewhat
> simpler (and maybe more discoverable/easier to use too).
> 
> @Mike: is this technically feasible?

Not only feasible... I think it is a great idea. We would need time to work out how we would get the information but I am sure that could be done.

Whilst not technically a papercut I have added my whiteboard tag to say it is on my todo list.

If anybody else wants to work on it in the meantime then they are more than welcome.

Comment 14

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

Filter on Brobdingnagian.

Comment 15

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

Attachment: [WIP] Make event bubbles support jQuery delegated events

When I added an extra icon for delegated events things looked messy in the markup view... I don't think we should go beyond a single icon.

It actually works really well just using the current event bubble and having it marked as Delegated when we click on it.

TODO:
  - Check that this works with all versions of jQuery.
  - Create a delegated events test for each version of jQuery from 1.4.2 to current.
  - In jQuery 1.7 .on() was supposed to be used instead of .delegate() e.g.

    ```
    // jQuery 1.4.3+
    $( elements ).delegate( selector, events, data, handler );
    // jQuery 1.7+
    $( elements ).on( events, selector, data, handler );
    ```

MozReview-Commit-ID: L3K4lLz8ltG

Comment 16

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

Attachment: [WIP] 1270884-event-bubbles-delegated-events.diff

Working on tests.

MozReview-Commit-ID: L3K4lLz8ltG

Comment 17

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

Filter on HOTFROG.

Comment 18

[Minkul]

Attachment: ancestor-events-firefox-vs-chrome.png

I hope Firefox DevTools team would take this into serious consideration.

When there are many parent nodes with multiple events attached to all parents - it is very difficult & time consuming to track down the delegated event in FF DevTools. Because in FF devtools the child node does not show list of events those will be delegated upto the target child node.

But in same condition Chrome devtools can easily show the full list of attached events.