1457957 - Devtools - Unable to remove the blue dotted lines, highlighting a selected element in inspector

Status: RESOLVED DUPLICATE of bug 1358983

(DevTools :: Inspector, enhancement, P5)

Description

[konradpapala]

Attachment: fx-devtools-markers.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20180404120016

Steps to reproduce:

Turn on dev tools in, especially the 'inspector',  select some element, Firefox marks the element in the main view. This also happens, when we console.log(someHtmlElement) and then we hover over it in the console.

This is usually useful but not always. 

I would love to see an option to remove it.

Illustration: https://pasteboard.co/HiWZdHZ.png

Actually I think it's more a feature request? I don't know, for me it's a little bug that we can't get rid of it:)


Actual results:

There is no option to enable/disable those lines.


Expected results:

We should have a simple toggle button to turn them on/off

Comment 1

[Patrick Brosset <:pbro>]

Marking as a bug because the highlighter normally disappears when you move your mouse away from the element in DevTools.
It might be a duplicate of bug 1457322 but I'm not sure.

Could you please provide a detailed list of steps to reproduce this?
Are you seeing this after you've moved off of the element in the console? Or did you mean that you don't want to see the highlighter at all, ever?

Comment 2

[konradpapala]

(In reply to Patrick Brosset <:pbro> from comment #1)

Thank you for your interest. 

Well, regarding detailed steps - yes, I do see it when I move off the element in the console, although... it seems to be a bit more complicated.

First of all it behaves better in 'inspector', at least it seems it does.

It's worse in the console, like e.g. with this particular page ( https://bugzilla.mozilla.org/show_bug.cgi?id=1457957 ) when we'll do:

document.querySelector('h1'); 

This will output the <h1 id="header-title" class="title"> element below, it the console.

When we hover it, FX will mark the element on the page.

Now... when we'll move the mouse out to *another* thing outputted in the console, we have like %80 chances that the highlighter will disappear. This is way #1 

If we will however move the mouse in such a way, that we'll miss other elements in the console along the way, or we'll do it very quickly, then the highlighter stays there. This is way #2

Also: when we do it (move the pointer using the #2 way), the highlighter becomes really stubborn - it doesn't want to disappear even when I *do* hover over other elements in the console. From now on it's really difficult to get rid of it - one needs to hover it again (in the console) and then move it using the #1 way.

Guessing here: the highlighter doesn't disappear when we move the pointer out of the element in console, but rather select / hover another thing there (in console).

Now, regarding the "Or did you mean that you don't want to see the highlighter at all, ever" - both! :) I would like it to disappear when it should (when we move the mouse out of the console element) *and* an optional button "show highlighter" in the dev tools would be nice as well :) Actually even a better idea - I often do want the highligher to tell me what I'm hovering now on - but when it does, I'm done, I get it - it could optionally disappear (fade off) after 2 s. :) I don't need it any more to cover my whole screen :)

And yeah, it sounds similar to this bug 1457322 although from my short tests it seems like the highlighter called inspector isn't *that* stubborn.

Thanks again for your interest!

Comment 3

[Patrick Brosset <:pbro>]

(In reply to konradpapala from comment #2)
> It's worse in the console, like e.g. with this particular page (
> https://bugzilla.mozilla.org/show_bug.cgi?id=1457957 ) when we'll do:
> document.querySelector('h1'); 
> This will output the <h1 id="header-title" class="title"> element below, it
> the console.
> When we hover it, FX will mark the element on the page.
> Now... when we'll move the mouse out to *another* thing outputted in the
> console, we have like %80 chances that the highlighter will disappear. This
> is way #1 
> If we will however move the mouse in such a way, that we'll miss other
> elements in the console along the way, or we'll do it very quickly, then the
> highlighter stays there. This is way #2
Ok, thank you for the details. This particular behaviour is definitely a bug, and has actually already been reported in bug 1358983.

> Now, regarding the "Or did you mean that you don't want to see the
> highlighter at all, ever" - both! :) I would like it to disappear when it
> should (when we move the mouse out of the console element) *and* an optional
> button "show highlighter" in the dev tools would be nice as well :) Actually
> even a better idea - I often do want the highligher to tell me what I'm
> hovering now on - but when it does, I'm done, I get it - it could optionally
> disappear (fade off) after 2 s. :) I don't need it any more to cover my
> whole screen :)
So, if the first bug was fixed, you'd get this quite easily: you move your mouse over a thing, the thing gets highlighter, and when you don't want the highlighter anymore, you just move your mouse off of the thing.
Isn't that enough?

Comment 4

[konradpapala]

(In reply to Patrick Brosset <:pbro> from comment #3)
> So, if the first bug was fixed, you'd get this quite easily: you move your
> mouse over a thing, the thing gets highlighter, and when you don't want the
> highlighter anymore, you just move your mouse off of the thing.
> Isn't that enough?

Well... yes, indeed,  this will indeed solve the issue if the highlighter will really disappear when I move the mouse off the thing - even if the element is still "selected", "focused", "expanded", "whatever" in the console / inspector. Yes, this will be something which will solve 99% of situations when the highlighter makes me nervous :)

So the 'highlighter fade off' idea was indeed not very relevant. But if we are at it - I still believe the "optional
button "enable/disable highlighter" in the dev tools" would be cool. Because quite often I am there in the inspector (yes, now talking about inspector, not console) to change things, I click here and there, change attributes, delete nodes, and I don't want the highlighter to cover my screen. But - it's now a different thing,  solving the above bug will be enough for 99% of cases :)

So yeah, my 'bug' / 'feature request' can be closed as duplicate I guess.

Thanks for your interest!

Comment 5

[Patrick Brosset <:pbro>]

(In reply to konradpapala from comment #4)
> I still believe the "optional
> button "enable/disable highlighter" in the dev tools" would be cool. Because
> quite often I am there in the inspector (yes, now talking about inspector,
> not console) to change things, I click here and there, change attributes,
> delete nodes, and I don't want the highlighter to cover my screen.
Thank you very much for explaining this.
Do you mind filing a new bug in the inspector component with this description?
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Inspector

Close this ticket as a duplicate of bug 1358983 for now.