1042564 - [meta] Add library support to visual events: jQuery, Prototype, YUI, Mootools, React, Ember and Angular

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

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

This seems like a big job but if you consider that we can use something like these parsers to get the event information from the libraries it is fairly simple:
https://github.com/DataTables/VisualEvent/tree/master/js/parsers

We should support the following libraries:
1. DOM0 - Already implemented
2. DOM2 - Already implemented
3. Eventi - https://github.com/esha/Eventi
4. ExtJs - http://www.sencha.com/products/extjs/
5. Glow - http://www.bbc.co.uk/glow/
6. JQuery - http://code.jquery.com/jquery-1.2.js
7. jQuery 1.3+ - http://code.jquery.com/jquery-1.11.1.js
8. jsBase - http://misteroneill.com/journal/jsbase-javascript-library/
9. Mootools - http://mootools.net/download
10. Prototype - http://prototypejs.org/download/
11. YUI - http://yuilibrary.com/yui/quick-start/

Comment 1

[Šime Vidas]

Problem: jQuery.cache is no longer available in version 2.x. 

I've tested with different versions of jQuery and it looks like this method works in 1.6+: 

    jQuery._data(elem).events

Live demo: http://jsfiddle.net/simevidas/2Uf9c/

I suggest implementing jQuery support first using the above method, i.e. iterate over all DOM elements and then perform something like this:

var events = jQuery._data(elem).events;
Object.keys( events ).forEach(function (type) {
    events[type].forEach(function (jHandler) {
        // type returns the event type
        // jHandler.handler references the original event handler
    });
});

Live demo: http://jsfiddle.net/simevidas/bNLjD/

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

As I mentioned on the list the 3 frameworks I would add are React, Ember and Angular, either here or by implementing support in extensions.

Comment 3

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

...and see if we can work with Luca to add support into the existing Ember and Angular Firefox extensions.

Comment 4

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

Re-purposing this as a meta bug.

We have decided to implement the following:
1. jQuery: bug 1044932
2. Prototype: bug 1044933
3. YUI: bug 1044935
4. Mootools: bug 1044936
5. React: bug 1044939
6. Ember: bug 1044942
7. Angular: bug 1044944

Comment 5

[Simon Lindholm]

In case it's helpful, a description of we do this in Firebug:

jQuery listeners are special-cased - we limit support to jQuery 1.4+ and use `jq._data(target, "events")`, where `jq` is taken from the event listener function's closure. To support pages that register all their listeners with `$(document).on(..., <selector>, ...)` we also show selectors for all listeners that have them (and strike out non-applying listeners, but that doesn't carry over well to a popup-based UI).

For all other libraries, we pattern-match the functions against "<fn>.(call|apply)" and show <fn>. This has the advantages of working almost everywhere (sometimes even on non-library code) and being easy to maintain, and the disadvantages of being harder to explain and sometimes coming out wrong.

(Implementation at https://github.com/firebug/firebug/blob/fae96c0d86713324ec94883766abc25a5060459e/extension/content/firebug/html/eventsPanel.js#L214-L343, feel free to steal from it if you want to.)

Comment 6

[Al Cud]

What about backbone?

Comment 7

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Al Cud from comment #6)
> What about backbone?

I think the correct approach from here on out is to encourage people to implement support in extensions for more niche libraries ( and let's be honest - every library is niche compared to jQuery )

Comment 8

[Brian Grinstead [:bgrins]]

(In reply to Al Cud from comment #6)
> What about backbone?

Doesn't backbone use jQuery by default for event binding?  As such, I would expect it to be supported already.

Comment 9

[Al Cud]

(In reply to Brian Grinstead [:bgrins] from comment #8)
> (In reply to Al Cud from comment #6)
> > What about backbone?
> 
> Doesn't backbone use jQuery by default for event binding?  As such, I would
> expect it to be supported already.

https://github.com/jashkenas/backbone/wiki/Using-Backbone-without-jQuery

Comment 10

[Brian Grinstead [:bgrins]]

(In reply to Al Cud from comment #9)
> (In reply to Brian Grinstead [:bgrins] from comment #8)
> > (In reply to Al Cud from comment #6)
> > > What about backbone?
> > 
> > Doesn't backbone use jQuery by default for event binding?  As such, I would
> > expect it to be supported already.
> 
> https://github.com/jashkenas/backbone/wiki/Using-Backbone-without-jQuery

So looks like you can swap jQuery out with another library for event binding, etc.  But since Backbone doesn't provide any event binding itself, we would need extension support for whichever libraries were popular replacements (it looks like the only browser based libraries mentioned in that doc are D3 and a reference "NativeView" that just calls addEventListener, etc).

Comment 11

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

Filter on 1ff0543e-b501-4893-a72b-e4773c01e655

We decided to only support jQuery for now.