1916881 - Clicking on event badge doesn't do anything on some pages using jQuery

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Andrew]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

I work on a website with a lot of javascript.
I frequently use the Developer Tools to locate am html elements javascript source.
I do this by clicking on the "event" bubble/button.

Actual results:

Clicking on the "event" bubble beside an element no longer displays the event listener javascript.

Expected results:

The javascript source should display, with a line number and preview.

** I suspect there is an issue with one or more of the javascript files on the website.
However I have no idea how to track down what that issue might be.

Comment 1

[Andrew]

Attachment: event-click-working.png

Event at the top of the same page works, it previews a couple of the javascript files.

Comment 2

[Andrew]

Attachment: event-click-not-working.png

Another event on the page, has javascript from a different js file, clicking on the this event does nothing.

Comment 3

[Andrew]

Attachment: example of this happening

You can see this happening here for the form event in the image.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Andrew, could you open the Browser Console (https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html), click on the event badge and copy any error message you see there please?

Also, could you share the link to the website you're seeing this on, or is it private?

Comment 5

[Andrew]

The only error is the following, because of an old version of jQuery.
But this error has been there for years.

The Components object is deprecated. It will soon be removed. ............. jquery1.4.4.allb.js:965:227

The website is private, but I did find a way for you to see this happening. Details are in the last image I uploaded.

Comment 6

[Andrew]

As far as I'm aware the JavaScript on the site is running perfectly.

The only issue I have is when developing I've lost the ability to drill onto an element and quickly locate the listener source code.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Andrew from comment #6)

As far as I'm aware the JavaScript on the site is running perfectly.

The only issue I have is when developing I've lost the ability to drill onto an element and quickly locate the listener source code.

Ah yes, thank you, I'm able to reproduce the issue. I'm doing some bisect to find the regression, and I'll work on a patch to fix this

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916881 - [devtools] Don't use for..in loop to iterate over jQuery events. r=#devtools-reviewers.

for..in will loop through the prototype chain, which we don't want.
But it also look like those might already be arrays in some cases,
so we can iterate other them directly, and only creating arrays
for iterating when we need to.

No tests added because I'm not sure how the jQuery code should be
written to trigger the issue.

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1555498

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7ffba7bd4247
[devtools] Don't use for..in loop to iterate over jQuery events. r=devtools-reviewers,jdescottes.

Comment 11

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/7ffba7bd4247

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916881 - [devtools] Don't use for..in loop to iterate over jQuery events. r=#devtools-reviewers.

for..in will loop through the prototype chain, which might get us into trouble
when the Array prototype is extended (e.g. with Moo.js).
Since the jquery events object we get might already be an arrays in some cases,
we can iterate other them directly, and only creating arrays when those are objects.

Original Revision: https://phabricator.services.mozilla.com/D221118

Comment 13

[Phabricator Automation]

esr128 Uplift Approval Request

• User impact if declined: event panel in inspector does not work
• Code covered by automated testing: yes
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: -
• Risk associated with taking this patch: low
• Explanation of risk level: devtools only, reverting to previous version of the code, covered by tests
• String changes made/needed: -
• Is Android affected?: no

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916881 - [devtools] Don't use for..in loop to iterate over jQuery events. r=#devtools-reviewers.

for..in will loop through the prototype chain, which might get us into trouble
when the Array prototype is extended (e.g. with Moo.js).
Since the jquery events object we get might already be an arrays in some cases,
we can iterate other them directly, and only creating arrays when those are objects.

Original Revision: https://phabricator.services.mozilla.com/D221118

Comment 15

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: event panel in inspector does not work
• Code covered by automated testing: yes
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: -
• Risk associated with taking this patch: low
• Explanation of risk level: devtools only, reverting to previous version of the code, covered by tests
• String changes made/needed: -
• Is Android affected?: no

Comment 16

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/089fb66fc57b

Comment 17

[Andrew]

Comment on attachment 9422752 [details]
example of this happening

removed post bug fix.

Comment 18

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr128/rev/2b7e72a36a67