Bug 16532

Summary:

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

Product:

WebKit

Reporter:

Danny Bloemendaal <danny.bloemendaal>

Component:

Web Inspector (Deprecated)

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Enhancement

CC:

dev+webkit, mrowe

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Bug Depends on:

Bug Blocks:

17777

Attachments:

Description	Flags
[WIP] Call InspectorController.highlightDOMNode on hover	none
[1/3] Highlight when hovering in the DOM tree	timothy: review+
[2/3] Highlight when hovering the DOM breadcrumbs	timothy: review+
[3/3] Highlight when hovering in the Console	timothy: review+

Danny Bloemendaal

Reported 2007-12-20 08:34:01 PST

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.

Attachments
[WIP] Call InspectorController.highlightDOMNode on hover (3.68 KB, patch) 2008-03-19 16:24 PDT, Adam Roben (:aroben)	no flags	Details Formatted Diff Diff
[1/3] Highlight when hovering in the DOM tree (4.97 KB, patch) 2008-03-20 13:08 PDT, Adam Roben (:aroben)	timothy: review+	Details Formatted Diff Diff
[2/3] Highlight when hovering the DOM breadcrumbs (3.54 KB, patch) 2008-03-20 13:08 PDT, Adam Roben (:aroben)	timothy: review+	Details Formatted Diff Diff
[3/3] Highlight when hovering in the Console (2.39 KB, patch) 2008-03-20 13:09 PDT, Adam Roben (:aroben)	timothy: review+	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Adam Roben (:aroben)

Comment 1 2008-01-29 11:09:56 PST

<rdar://problem/5712896>

Adam Roben (:aroben)

Comment 2 2008-03-11 10:01:15 PDT

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)

Comment 3 2008-03-19 16:24:20 PDT

Created attachment 19888 [details] [WIP] Call InspectorController.highlightDOMNode on hover Not for review yet

Adam Roben (:aroben)

Comment 4 2008-03-20 12:53:30 PDT

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)

Comment 5 2008-03-20 13:08:27 PDT

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

Adam Roben (:aroben)

Comment 6 2008-03-20 13:08:48 PDT

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

Adam Roben (:aroben)

Comment 7 2008-03-20 13:09:05 PDT

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

Adam Roben (:aroben)

Comment 8 2008-03-20 13:09:51 PDT

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)

Comment 9 2008-03-20 16:00:23 PDT

Committed these patches in r31190, r31191, and r31192.

Danny Bloemendaal

Comment 10 2008-03-21 01:26:35 PDT

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

Danny Bloemendaal

Comment 11 2008-03-21 01:33:57 PDT

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)

Comment 12 2008-03-21 07:38:26 PDT

(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)

Comment 13 2008-03-21 07:40:16 PDT

(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

Comment 14 2008-03-21 07:44:02 PDT

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)

Comment 15 2008-03-21 07:56:20 PDT

(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.

Note You need to log in before you can comment on or make changes to this bug.