Bug 30057 – Web Inspector: Adding new attributes in Element Panel is counterintuitive

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

[Pavel Feldman]

Follow up to https://bugs.webkit.org/show_bug.cgi?id=21108:

> - I kept it a "..." but now everything else is out of the way so it will be easy to experiment with this.

It really looks confusing as is and I think we should revisit this. When I first saw "..." on hover, I thought it was a bug: I was sure that hovered text became longer, went out of bounds and CSS truncated it and added ellipsis to it.

Two thing bother me most:
1) Discoverability: There is no way user would understand that ellipsis is for adding new attributes
2) Stuff jumping: Elements panel contents is jumping when I move mouse around. Sometime I miss text nodes that I want to edit.

I'd suggest that we 
1) replace "..." with " ?="
2) toggle add attribute span using setTimeout(500).

Attaching screenshot and a patch shortly.

[Pavel Feldman]

Created attachment 40593 [details]
[IMAGE] Screenshot

[Pavel Feldman]

Created attachment 40594 [details]
[PATCH] Suggested fix

[Timothy Hatcher]

Comment on attachment 40594 [details]
[PATCH] Suggested fix

I'm not too fond of the look. But it does make it clear. I do like the hysteresis.

Maybe an icon would be better in the long run?

[Pavel Feldman]

Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/ElementsTreeOutline.js
Committed r49419

[Jiayong Ou]

> Maybe an icon would be better in the long run?

An Icon would be much better. 

I just wanted to file a bug report on it since it looks like garbaged data…