1419412 - Unexpected value NaN parsing x1 attribute warning message show up inside console

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Mehdi]

Attachment: FF dev tools error.png

Hello,

In FF57 clicking on element inside Inspector add following warning:

Unexpected value NaN parsing x1 attribute (markup.js:334:6)

As you can see in attached screenshot.

Comment 1

[Julien Wajsberg [:julienw]]

I just saw the same problem right now, in latest nightly, with the following STR:

STR:

1. open https://paul.cx/public/exportify/exportify.html
2. open the inspector
3. hover the line <div class='ribbon'> in the inspector.

The following warnings appear in the console:

Unexpected value NaN parsing y1 attribute. markup.js:336:19
Unexpected value NaN parsing y2 attribute. markup.js:336:19
Unexpected value NaN parsing x1 attribute. markup.js:336:19
Unexpected value NaN parsing x2 attribute. markup.js:336:19
Unexpected value NaN parsing y1 attribute. markup.js:336:19
Unexpected value NaN parsing y2 attribute. markup.js:336:19
Unexpected value NaN parsing x1 attribute. markup.js:336:19
Unexpected value NaN parsing x2 attribute. markup.js:336:19

Note they appear in the page's console, so it's super distracting.

Comment 2

[Julien Wajsberg [:julienw]]

Clicking on the link for markup.js, we get to this line:

https://searchfox.org/mozilla-central/rev/662de518b1686c4769320d6b8825ce4864c4eda0/devtools/server/actors/highlighters/utils/markup.js#336

I don't really know what these x1/x2/y1/y2 are for.

Also I should add that the highlighter doesn't highlight properly the element but displays its size.

Comment 3

[Julien Wajsberg [:julienw]]

I don't really know what these x1/x2/y1/y2 are for.

Oh yes, this likely comes from one of these locations: [1] [2].
My preference is for [1] because there's a transform in this case indeed and I don't believe in coincidences :-).

For the sake of completeness I found also [3] but it should be fine because there's an explicit conversion to string.

[1] https://searchfox.org/mozilla-central/rev/662de518b1686c4769320d6b8825ce4864c4eda0/devtools/server/actors/highlighters/css-transform.js#174-177
[2] https://searchfox.org/mozilla-central/rev/662de518b1686c4769320d6b8825ce4864c4eda0/devtools/server/actors/highlighters/measuring-tool.js#403-427
[3] https://searchfox.org/mozilla-central/rev/662de518b1686c4769320d6b8825ce4864c4eda0/devtools/server/actors/highlighters/box-model.js#657-667

Comment 4

[Julien Wajsberg [:julienw]]

I believe the next steps are:

1. find out which of these locations is the problem here.
2. find where the NaN values come from.
3. fix the computation that brought these NaN values in the first place.

Comment 5

[Vedran]

Hi, I would love to help with fixing this bug.

I'm looking into contributing to FF for some time now but I think this is the perfect chance for me.
If you are looking for someone more experienced I will understand, if not you can assign me and we can proceed.

Comment 6

[Julien Wajsberg [:julienw]]

Hey Vedran, yes sure let's assign this bug to you!

To get started, we have a lot of documentation available at https://docs.firefox-dev.tools/getting-started/.
Note that when configuring your build, you'll want to use artifacts (this is one of the very first questions asked when configuring your environment) for a much faster experience when all we want to change is JS code, which is the case here.

Please ask here or on Slack if you need anything more!

Comment 7

[nicolasm]

hey guys, I want to contribute as well, I'm currently reading the getting started and would like a mentored bug to get started if possible :)

Comment 8

[Patrick Brosset <:pbro>]

(In reply to nicolasm from comment #7)

hey guys, I want to contribute as well, I'm currently reading the getting started and would like a mentored bug to get started if possible :)

Sure, you might be interested in taking a look at https://bugs.firefox-dev.tools/?easy&tool=all (which you can filter by "mentored" only and by tool depending on what you're interested in).

Comment 9

[Julien Wajsberg [:julienw]]

Hey Vedran, could you have a look at this bug ? Thanks !

The issue is still happening for me in latest nightly.

Comment 10

[modiibeats]

Hi, I am new here. I also have the same bug, and I am pretty sure that it has to do with transform. The exact same errors pop up whenever I hover above divs that have transform in them.

Has there been any updates on this?

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The problem is still there.

The warning comes from this line
https://searchfox.org/mozilla-central/rev/bd92b9b4a3c2ff022e830c1358968a84e6e69c95/devtools/server/actors/highlighters/utils/markup.js#412

I unassigned the bug since Vedran doesn't seem to be working on this and thus making it available to anyone interested

Honza

Comment 12

[Mehdi]

@julienw what info do you need for this issue from me?

Comment 13

[Julien Wajsberg [:julienw]]

I think this was a mistake, I meant to Need Info the assigned person, not the reporter. Sorry about that Mehdi.

Comment 14

[Sai Hemanth]

Hi, I'd like to work on this.
I dug around for a while and narrowed the issue to box-model.js (at least for the given STR). The bug was introduced as part of this change, where we are wrapping parameters with Math.round. The _updateGuide function assumes point to be undefined if guide is not needed, instead Math.round is returning an NaN which is uncaught.

I can send a patch if assigned.
Thanks!

Comment 15

[Julien Wajsberg [:julienw]]

Hey Sai, sure, thanks and sorry for missing your message earlier!

Comment 16

[Sai Hemanth]

Attachment: Bug 1419412 - Hide box model guide when point is NaN. r=julienw

Comment 17

[Sai Hemanth]

Thanks Julien. I've submitted a revision for the fix.

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ed7eb969635c
Hide box model guide when point is NaN. r=jdescottes

Comment 19

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/ed7eb969635c