Mapbox-gl-js: passive event listeners

[musicformellons]

I am working with most.js stream framework to catch mapbox events in streams and stumble on this (since I got the message in my browser)
http://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responive

So are passive event listeners implemented yet in mapbox gl js?

[mourner]

I would guess that this is not applicable to GL JS since we rely on preventDefault for touchmove and wheel events. Not sure though.

[jfirebaugh]

This is related to #4259, but independent. Specifically, we could opt to pass {passive: true} in cases where we don't need to use preventDefault. Doing so might provide a performance benefit in some situations.

Because EventListenerOptions is not available on all targeted browsers, we will need to conditionalize its use, likely by writing internal utility methods wrapping {add,remove}EventListener with a feature detect. (Typical polyfills are not appropriate, since libraries such as Mapbox GL JS should not modify the global environment.)

[mourner]

Upgraded to Chrome 58 and it started complaining about this:

scroll_zoom.js:49 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
scroll_zoom.js:50 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
drag_pan.js:59 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
touch_zoom_rotate.js:54 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
bind_handlers.js:33 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
bind_handlers.js:35 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

[GLosch]

I'm getting the same behavior @mourner since adding map.scrollZoom.disable();.

Was hoping to be able to add {passive: true} as an option to that function, but it's not set up to accept it

[jfirebaugh]

6248 will silence the log messages from Chrome.

As a further step, we could explicitly specify {passive: true} or {passive: false} for every DOM event used. This would require a careful audit to figure out which events may need to preventDefault. The advantages would be:

• Theoretically better performance where {passive: true} is used, because the browser will know that these event bindings can't prevent default behavior.
• The use of {passive: false} where necessary will protect us against potential future browser changes described in https://github.com/WICG/interventions/issues/18.

The caveat to this is that it'll have publicly visible side effects, namely whether or not e.originalEvent.preventDefault() works if called from e.g. map.on('touchmove', (e) => { ... }.