Bug 16532 – Inspector should highlight nodes in page when hovering over nodes in Inspector's interface

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

[Danny Bloemendaal]

Firebug hightlights the element when you hover over an element in the dom tree. So it follows the selection. The good thing with this is that on hover, firebug also shows the paddings and borders of the highlight with a different color so you can quickly over over elements and actually SEE problems with padding and margins. Very very handy.

[Adam Roben (:aroben)]

<rdar://problem/5712896>

[Adam Roben (:aroben)]

This bug is now just about highlighting nodes in the page when you hover over them in the DOM tree. Bug 17221 covers showing the nodes' metrics in the node highlight.

[Adam Roben (:aroben)]

Created attachment 19888 [details]
[WIP] Call InspectorController.highlightDOMNode on hover

Not for review yet

[Adam Roben (:aroben)]

We should also highlight nodes when you hover over them in other parts of the Inspector's UI (e.g., the Console).

[Adam Roben (:aroben)]

Created attachment 19905 [details]
[1/3] Highlight when hovering in the DOM tree

[Adam Roben (:aroben)]

Created attachment 19906 [details]
[2/3] Highlight when hovering the DOM breadcrumbs

[Adam Roben (:aroben)]

Created attachment 19907 [details]
[3/3] Highlight when hovering in the Console

[Adam Roben (:aroben)]

We probably shouldn't land these patches until we change the node highlight to be less dramatic. Having the gray overlay come and go quickly is awfully noisy. This will probably be fixed by bug 17221.

[Adam Roben (:aroben)]

Committed these patches in r31190, r31191, and r31192.

[Danny Bloemendaal]

Wow! Great work people!! Another step ahead in the road to a firebug equivalent for webkit!!

[Danny Bloemendaal]

One problem I noticed though is that sometimes the highligh isn't removed and remains on the page. Then, when you scroll the page, the highlight remains on its fixed location which is weird.

[Adam Roben (:aroben)]

(In reply to comment #11)
> One problem I noticed though is that sometimes the highligh isn't removed and
> remains on the page.

Yes, it does seem to be possible to get the highlight to stick around if you move your mouse quickly enough.

> Then, when you scroll the page, the highlight remains on
> its fixed location which is weird.

That is bug 17920.

[Adam Roben (:aroben)]

(In reply to comment #12)
> (In reply to comment #11)
> > One problem I noticed though is that sometimes the highligh isn't removed and
> > remains on the page.
> 
> Yes, it does seem to be possible to get the highlight to stick around if you
> move your mouse quickly enough.

And this is now bug 17982.

[Danny Bloemendaal]

Ok, good. Now we only miss the other way around: in the webinstpector go into 'inspect' mode and hover over elements in the page, display its highlight and select the node in dom tree (after a slight delay).  Just like firebug does when you click the inspect button.

[Adam Roben (:aroben)]

(In reply to comment #14)
> Ok, good. Now we only miss the other way around: in the webinstpector go into
> 'inspect' mode and hover over elements in the page, display its highlight and
> select the node in dom tree (after a slight delay).  Just like firebug does
> when you click the inspect button.

See bug 17772.