Bug 18299 – Inspector highlights nodes on mouse over which reduces usability

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Ismail Donmez]

How to reproduce,

- Inspect a node
- Node is nicely higlighted
- Now try to scroll the code with your mouse and highlighted region changes

This is imho not good because first of all Safari in general requires clicking to activate something so this is against that. This is also annoying because you can't focus on the highlighted node because it changes along the mouse.

[Adam Roben (:aroben)]

We implemented the highlight-on-hover because we'd heard from developers that it is useful (see bug 16532). But it's easy to see how the current implementation can be distracting, and that you might want the inspected node to be highlighted as well.

One possibility I've considered is to use the current highlight only for the inspected node, and then have a simpler, subtler highlight for the hovered node. This could be a more transparent and less opaque version of the current highlight, a simple outline, or something different altogether.

[Adam Roben (:aroben)]

(In reply to comment #1)
> This could be a more transparent and less opaque version of the current
> highlight

By which I meant "a more transparent and less saturated version of the current highlight".

[Matt Lilek]

Personally, I would much rather have the highlight show when hovering over the node in the WebView for bug 17772 and then go back to the old way of showing the highlight for the selected node in the tree, with a way to disable it if preferred, but that's just my two cents.

[Adam Roben (:aroben)]

(In reply to comment #3)
> Personally, I would much rather have the highlight show when hovering over the
> node in the WebView for bug 17772 and then go back to the old way of showing
> the highlight for the selected node in the tree, with a way to disable it if
> preferred, but that's just my two cents.

It doesn't have to be either-or. Or are you saying that you don't think highlighting in the WebView when hovering in the Inspector's interface is useful at all?

[Timothy Hatcher]

I have been fighting the highlight on hover today while inspecting the inspector to do some DOM and CSS editing. Some thoughts:

* Highlighting should be disabled while editing either the DOM or CSS. IMHO. Maybe not entirely disabled, just locked to the edited/selected node?
* Consider not scrolling for hovered highlights? The page jumps around a lot when hovering. 
* Highlight only when you hover over a node for a small amount of time. Many times you move across the DOM tree and a cacophony of highlights flash at you in the inspected page. This might solve my previous point too.
* Maybe we should only highlight the selected node? A subtile hover highlight might be OK too.

[James Berry]

How about only doing the hover highlighting if a modifier key is held down? I agree it's distracting, though it is useful at times—it would be nice to have easy access to it. A secondary, far subtler shading of the hover highlight might work as well, though on the surface a modifier key sounds right.

I love the new highlight style, btw, which shows padding and margins.

I dislike that fact that the webkit pane is scrolled to move the highlight into view: I put it where I wanted it, dammit, and I don't like it scrolling around, which often obscures exactly what I want to inspect.

And at the risk of putting far too much information in this one comment, I dislike, as ever, the fact that the highlights don't scroll in sync with the webview.

[Anthony Ricaud]

Personally, I prefer a mode where I choose the highlight-on-hovering behaviour. This is what bug 17772 is about.

With the actual behaviour, I often get nodes highlighted by mistake. For example, I click on Webkit in my dock (which is on the left), I move the mouse to the styles column to hack some CSS and another node gets highlighted during this movement because my mouse was going through the DOM window.

[Timothy Hatcher]

Created attachment 21188 [details]
Proposed patch

[Timothy Hatcher]

Landed in r33508.