Bug 145807 – Web Inspector: Better truncation for DOM tree navigation bar

• Status: NEW
• Component: Web Inspector

[Nikita Vasilyev]

Created attachment 254577 [details]
[Image] DOM tree path bar

"E" icons take out space and they are not very informative. AFAIK, all but the last element in the path always have the "E" icon. I understand that it’s inspired by Xcode, but for this particular case it isn’t useful.

I propose to either:
– don't use any icons at all
– show icon only for the last element in the path

Yea or nay?

[Radar WebKit Bug Importer]

<rdar://problem/21302898>

[Brian Burg]

+1, I would also propose truncating components after the tag name when not enough space is available.

I guess a somewhat related usability issue is using <select> elements instead of our own styled widget makes any differences among siblings (in icon, or othrewise) pretty hard to see.

[Timothy Hatcher]

I disagree with this change. In small window situations, you will deal with primarily truncated text, which isn't useful either.

We should stay consistent in our icon use. These icons appear in other places where we refer to DOM nodes, and it is a good visual cue that ties them together. Just like we want to make all function or native function have distinct icons, and not just a function name. The icon communicates what it is.

[Timothy Hatcher]

(In reply to comment #2)
> +1, I would also propose truncating components after the tag name when not
> enough space is available.
> 
> I guess a somewhat related usability issue is using <select> elements
> instead of our own styled widget makes any differences among siblings (in
> icon, or othrewise) pretty hard to see.

We should make the selects support icons and nested submenus. Maybe add support for HTML5 <menu> for that?