Changeset 49419 in webkit

Timestamp:

Oct 10, 2009 12:21:31 PM (15 years ago)

Author:

pfeldman@chromium.org

Message:

2009-10-10 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Adding new attributes in Element Panel is
counterintuitive.

​https://bugs.webkit.org/show_bug.cgi?id=30057

• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeOutline.prototype._onmousemove): (WebInspector.ElementsTreeElement.prototype.set hovered): (WebInspector.ElementsTreeElement.prototype.toggleNewAttributeButton):

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/ElementsTreeOutline.js (modified) (4 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-10-10  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Adding new attributes in Element Panel is
+        counterintuitive.
+
+        https://bugs.webkit.org/show_bug.cgi?id=30057
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeOutline.prototype._onmousemove):
+        (WebInspector.ElementsTreeElement.prototype.set hovered):
+        (WebInspector.ElementsTreeElement.prototype.toggleNewAttributeButton):
+
 2009-10-10  Laszlo Gombos  <laszlo.1.gombos@nokia.com>
 

trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

@@ -198 +198 @@
     _onmousemove: function(event)
     {
+        var element = this._treeElementFromEvent(event);
+        if (element && this._previousHoveredElement === element)
+            return;
+
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
@@ -203 +207 @@
         }
 
-        var element = this._treeElementFromEvent(event);
         if (element && !element.elementCloseTag) {
             element.hovered = true;
@@ -277 +280 @@
                 this.updateSelection();
                 this.listItemElement.addStyleClass("hovered");
-            } else
+                this._pendingToggleNewAttribute = setTimeout(this.toggleNewAttributeButton.bind(this, true), 500);
+            } else {
                 this.listItemElement.removeStyleClass("hovered");
-            if (this._canAddAttributes)
-                this.toggleNewAttributeButton();
-        }
-    },
-
-    toggleNewAttributeButton: function()
-    {
-        function removeWhenEditing(event)
+                if (this._pendingToggleNewAttribute) {
+                    clearTimeout(this._pendingToggleNewAttribute);
+                    delete this._pendingToggleNewAttribute;
+                }
+                this.toggleNewAttributeButton(false);
+            }
+        }
+    },
+
+    toggleNewAttributeButton: function(visible)
+    {
+        function removeAddAttributeSpan()
         {
             if (this._addAttributeElement && this._addAttributeElement.parentNode)
@@ -293 +301 @@
         }
 
-        if (!this._addAttributeElement && this._hovered && !this._editing) {
+        if (!this._addAttributeElement && visible && !this._editing) {
             var span = document.createElement("span");
-            span.className = "add-attribute";
-            span.textContent = "\u2026";
-            span.addEventListener("dblclick", removeWhenEditing.bind(this), false);
+            span.className = "add-attribute webkit-html-attribute-name";
+            span.textContent = " ?=\"\"";
+            span.addEventListener("dblclick", removeAddAttributeSpan.bind(this), false);
             this._addAttributeElement = span;
 
             var tag = this.listItemElement.getElementsByClassName("webkit-html-tag")[0];
             this._insertInLastAttributePosition(tag, span);
-        } else if (!this._hovered && this._addAttributeElement) {
-            if (this._addAttributeElement.parentNode)
-                this._addAttributeElement.parentNode.removeChild(this._addAttributeElement);
-            delete this._addAttributeElement;
-        }
+        } else if (!visible && this._addAttributeElement)
+            removeAddAttributeSpan.call(this);
     },