1667368 - Inspector node highlighting is randomly glitching

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P1)

Description

[juraj.masiar]

Attachment: Screenshot 2020-09-25 14.05.18.png

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

Steps to reproduce:

Step one - open Inspector (Ctrl + Shift + C).
No more steps required!

Actual results:

Depending how "lucky" you are, you can get:

• multiple nodes highlighted with no way to deselect them (see attachment with 3 pre-selected nodes)
• no node is highlighted BUT also node can be highlighted - it's just stuck

Expected results:

There should be no highlighting issues.

I think there were some rare random issues also before, but this is definitely regression in 82. It happens also in clean Firefox profile.

Comment 1

[juraj.masiar]

EDIT:

• no node is highlighted BUT also NO node can be highlighted - it's stuck

Comment 2

[Braedon]

Attachment: Example of the inspector stuck with multiple elements highlighted

I'm getting this issue as well.

(User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0)

Steps to reproduce the multiple nodes highlighted issue:

• With the devtools closed, place your mouse in the area on the screen where the HTML section of the Inspector pane will appear,
• Open the inspector, moving your mouse around while the devtools are loading.

Note that the issue seems to occur in some situations after the devtools are fully loaded as well, but this is a reliable way to reproduce it.

Comment 3

[Braedon]

Attachment: Example of no highlighting showing after reload

Another symptom is if you refresh the page while the devtools are open, highlighting will break entirely - hovering over a page element with the picker active will select the appropriate node in the inspector, but highlighting isn't shown on the page. Closing the devtools and re-opening resets this.

Comment 4

[Braedon]

Attachment: Example of persistent highlighting

Also, if highlighting isn't fully broken yet, hovering over a node in the HTML section will sometimes cause the element to be highlighted persistently in the page, even after you stop hovering. Hovering over something else clears the highlight. I haven't been able to work out how to reproduce it reliably, but it seems related to how your mouse leaves the HTML section.

Comment 5

[Razvan Caliman [:rcaliman]]

The element highlighter logic was updated recently in Bug 1646028 to support the Fission project goals.
The intermittent bugs are likely the result of race conditions between showing/hiding highlighter instances.

We'll investigate and fix.

Comment 6

[Chris Peterson [:cpeterson]]

Tracking dt-fission-m2-mvp bugs for Fission Nightly milestone (M6c).

Comment 7

[Neha Kochar [:neha]]

Bulk move of all m2-mvp devtools bugs to Fission M7.

Comment 8

[Julian Descottes [:jdescottes]]

Potentially found STRs. It happens really frequently if you start picking when the inspector has not been initialized. Eg:

• open devtools on debugger
• click on node picker
• quickly mouse over on the page

By the time the inspector is fully initialized I usually have a few "ghost" highlighters on the page

Comment 11

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

(In reply to Julian Descottes [:jdescottes] from comment #8)

Potentially found STRs. It happens really frequently if you start picking when the inspector has not been initialized. Eg:

Yes, I have the same experience. The problem happens at the very beginning or not at all for me.
It's also relatively easy to reproduce with the Browser Toolbox

1. Open a browser window with any page (I am testing with youtube.com)
2. Open the Browser Toolbox and select the Inspector panel. Sometimes the highlighter for the default selected element is already stuck.
3. Click on the element Picker
4. Move your mouse over the web page opened in #1 (rather faster). A ghost highlighter appears quickly
5. If you can't repro in #4 - close the Browser Toolbox and start again with step #2

Honza

Comment 12

[juraj.masiar]

Why is this marked as wontfix for 82? Are you sure you want to bubble this up to the release? It's gonna be a nightmare for all developers. Look at it, it has 3 votes and it's only in beta for two weeks. You should seriously revert it if you can't fix it now.
I'm using Firefox for development every day and this is one of the most annoying bugs I've seen in years.

Comment 13

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1667368 - [devtools] Prevent accidentally creating multiple highlighter instances

Comment 14

[Razvan Caliman [:rcaliman]]

@juraj.masiar

Why is this marked as wontfix for 82? Are you sure you want to bubble this up to the release?

Thank you for filing the issue and for your concern. We found a fix and will attempt to uplift to Firefox 82.

Comment 15

[juraj.masiar]

Thank YOU @Razvan for a super fast fix! I'm sure many will be happy to see it fixed :), I know I will!

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b09ad2bbe331
[devtools] Prevent accidentally creating multiple highlighter instances r=jdescottes

Comment 17

[Atila Butkovits]

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

Comment 18

[Razvan Caliman [:rcaliman]]

Comment on attachment 9180231 [details]
Bug 1667368 - [devtools] Prevent accidentally creating multiple highlighter instances

Beta/Release Uplift Approval Request

• User impact if declined: When using the DevTools Inspector node picker, users end up with permanently visible highlighted nodes on the page with no way to get rid of them other than restarting DevTools. It's disruptive for their workflow.
  The node picker is one of the most used tools in DevTools.

This is a regression introduced by Bug 1646028. It occurs intermittently, but often enough.
People started logging many duplicate bugs for the issue while in Beta. We want to avoid shipping this bug to Firefox Release where many more people will encounter it.

• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: It was an intermittent issue, but it can be reproduced more frequently this way:

• Open https://www.youtube.com/
• Open DevTools on a panel other than the Inspector, for example on the Debugger: Ctrl + Shift + Z (Windows) / Cmd + Shift + Z (macOS)
• Click the Node Picker icon in the upper left hand corner of DevTools
• Quickly move the mouse over the page while the Inspector panel is still loading

Expected result:

• Only one node at a time should be highlighted while moving the cursor

Broken result (current Firefox 82 Beta):

• Sometimes, multiple nodes are highlighted at the same time. Moving the mouse doesn't get rid of the permanent highlight.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This patch is hardening checks for race conditions in a discrete part of DevTools code. It is not changing functionality. It is already covered by preexisting automated tests.
• String changes made/needed:

Comment 19

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

I can't reproduce the issue using my STRs from comment #11

Thanks Razvan!

Honza

Comment 20

[Julien Cristau [:jcristau] (back April 22)]

Comment on attachment 9180231 [details]
Bug 1667368 - [devtools] Prevent accidentally creating multiple highlighter instances

approved for 82.0b9

Comment 21

[Julien Cristau [:jcristau] (back April 22)]

https://hg.mozilla.org/releases/mozilla-beta/rev/e30a26be083a

Comment 22

[Alin Ilea, Desktop QA]

Reproduced the initial issue, following the steps from comment 18, in Beta 82.0b8 using Windows 10.
Verified - Fixed in latest Nightly 83.0a1 (build id: 20201008210150) and Beta 82.0b9 (build id: 20201008183927), on Windows 10 and Ubuntu 18.04.

Comment 23

[Razvan Caliman [:rcaliman]]

Thank you Alin, Julien and team for getting this uplifted to Beta 82.0b9!

Comment 24

[Braedon]

The multiple highlighted nodes issue seems fixed for me on 82.0b9, thanks all!

I'm still getting the other two symptoms noted above, however:

• Highlighting broken entirely after refresh (comment)
• Intermittent sticky highlighting (comment)

The latter isn't a major issue, but the former is pretty annoying. Are they related, or do they need separate bugs?

Comment 25

[David Lower]

Hey everyone,

I downloaded the update, quit Firefox (dev edition) and for me the bugs highlighted in this thread are still very much present. I'm on Mac 10.15.7. Essentially what @braedon said earlier in the thread 👇🏻.

"Another symptom is if you refresh the page while the devtools are open, highlighting will break entirely - hovering over a page element with the picker active will select the appropriate node in the inspector, but highlighting isn't shown on the page. Closing the devtools and re-opening resets this."

Comment 26

[Razvan Caliman [:rcaliman]]

@Braedon

Highlighting broken entirely after refresh

This is fixed by Bug 1668265 which has now landed in Nightly 83.

It is pending uplift to Beta 82. That may or may not happen in time depending on the closing window for uplifts to Beta before it moves to Release in about one week (there is a code freeze period).

Nonetheless, if you're a Beta user, that fix will definitely get to you within the regular release schedule of Firefox Beta/DevEdition in about one week, around October 19.

@David Lower

I downloaded the update, quit Firefox (dev edition) and for me the bugs highlighted in this thread are still very much present.

The fix for persistent multiple highlighters is uplifted to Firefox Developer Edition 82.0b9 (64-bit).
As mentioned above, the fix for the broken highlighter after page refresh is addressed by Bug 1668265

Comment 28

[David Lower]

Hi,

I am still getting the bug where if you leave the devtools panel 'quickly' the blue highlighter on the web page stays active even though you are no longer inside devtools. The highlighter stays active until you re-enter the devtools panel again. Otherwise you can't interact with the actual webpage itself with the highlighter present. This bug is inconsistent. If you go in and out of devtools slowly the highlighter will eventually reset and behave as normal. I see it is reported as fixed - but it is not on my end. I have the latest version 8.3 downloaded. Thanks.

Comment 29

[juraj.masiar]

This bug was originally about the pre-selected nodes when you opened the dev tools. This got fixed.
There is a second bug reported for the "stuck" highlight here: bug 1670498

But I totally agree, it's crazy annoying.