Changeset 56688 in webkit

Timestamp:

Mar 28, 2010 3:33:23 AM (14 years ago)

Author:

Joseph Pecoraro

Message:

2010-03-28 Joseph Pecoraro <Joseph Pecoraro>

Reviewed by Pavel Feldman.

Web Inspector: Consolidate Tree Hierarchy Attribute HTML Generation
​https://bugs.webkit.org/show_bug.cgi?id=36719

Consolidates the generation of Element Tree Hierarchy attribute code
generation to a single function: _attributeHTML.

• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeElement.prototype._addNewAttribute): convert to use attributeHTML. (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.regenerateStyledAttribute): convert to use attributeHTML. (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted): (WebInspector.ElementsTreeElement.prototype._attributeHTML): a single point for generating the html for attributes.

Location:

trunk/WebCore

Files:

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

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-03-28  Joseph Pecoraro  <joepeck@webkit.org>
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: Consolidate Tree Hierarchy Attribute HTML Generation
+        https://bugs.webkit.org/show_bug.cgi?id=36719
+
+          Consolidates the generation of Element Tree Hierarchy attribute code
+          generation to a single function: _attributeHTML.
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement.prototype._addNewAttribute): convert to use attributeHTML.
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.regenerateStyledAttribute): convert to use attributeHTML.
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted):
+        (WebInspector.ElementsTreeElement.prototype._attributeHTML): a single point for generating the html for attributes.
+
 2010-03-28  Joseph Pecoraro  <joepeck@webkit.org>
 

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

@@ -787 +787 @@
     _addNewAttribute: function()
     {
-        var attr = document.createElement("span");
-        attr.className = "webkit-html-attribute";
+        // Cannot just convert the textual html into an element without
+        // a parent node. Use a temporary span container for the HTML.
+        var container = document.createElement("span");
+        container.innerHTML = this._attributeHTML(" ", "");
+        var attr = container.firstChild;
         attr.style.marginLeft = "2px"; // overrides the .editing margin rule
         attr.style.marginRight = "2px"; // overrides the .editing margin rule
-        var name = document.createElement("span");
-        name.className = "webkit-html-attribute-name new-attribute";
-        name.textContent = " ";
-        var value = document.createElement("span");
-        value.className = "webkit-html-attribute-value";
-        attr.appendChild(name);
-        attr.appendChild(value);
 
         var tag = this.listItemElement.getElementsByClassName("webkit-html-tag")[0];
@@ -1025 +1021 @@
             if (!previous || previous.nodeType !== Node.TEXT_NODE)
                 element.parentNode.insertBefore(document.createTextNode(" "), element);
-            element.outerHTML = "<span class=\"webkit-html-attribute\">" +
-                                  "<span class=\"webkit-html-attribute-name\">" + attr.name.escapeHTML() + "</span>=&#8203;\"" +
-                                  "<span class=\"webkit-html-attribute-value\">" + attr.value.escapeHTML() + "</span>&#8203;\"" +
-                                "</span>";
+            element.outerHTML = this._attributeHTML(name, value);
         }
 
@@ -1053 +1046 @@
             try {
                 this.representedObject.setAttribute(attr.name, attr.value);
-                regenerateStyledAttribute(attr.name, attr.value);
+                regenerateStyledAttribute.call(this, attr.name, attr.value);
             } catch(e) {} // ignore invalid attribute (innerHTML doesn't throw errors, but this can)
         }
@@ -1215 +1208 @@
     },
 
+    _attributeHTML: function(name, value, node, linkify, tooltipText)
+    {
+        var hasText = (value.length > 0);
+        var html = "<span class=\"webkit-html-attribute\"><span class=\"webkit-html-attribute-name\">" + name.escapeHTML() + "</span>";
+
+        if (hasText)
+            html += "=&#8203;\"";
+
+        if (linkify && (name === "src" || name === "href")) {
+            value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
+            html += linkify(this._rewriteAttrHref(node, value), value, "webkit-html-attribute-value", node.nodeName.toLowerCase() === "a", tooltipText);
+        } else {
+            value = value.escapeHTML().replace(/([\/;:\)\]\}])/g, "$1&#8203;");
+            html += "<span class=\"webkit-html-attribute-value\">" + value + "</span>";
+        }
+
+        if (hasText)
+            html += "\"";
+
+        html += "</span>";
+        return html;
+    },
+
     _nodeTitleInfo: function(linkify, tooltipText)
     {
@@ -1236 +1252 @@
                     for (var i = 0; i < node.attributes.length; ++i) {
                         var attr = node.attributes[i];
-                        info.title += " <span class=\"webkit-html-attribute\"><span class=\"webkit-html-attribute-name\">" + attr.name.escapeHTML() + "</span>=&#8203;\"";
-
-                        var value = attr.value;
-                        if (linkify && (attr.name === "src" || attr.name === "href")) {
-                            var value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
-                            info.title += linkify(this._rewriteAttrHref(node, attr.value), value, "webkit-html-attribute-value", node.nodeName.toLowerCase() == "a", tooltipText);
-                        } else {
-                            var value = value.escapeHTML();
-                            value = value.replace(/([\/;:\)\]\}])/g, "$1&#8203;");
-                            info.title += "<span class=\"webkit-html-attribute-value\">" + value + "</span>";
-                        }
-                        info.title += "\"</span>";
+                        info.title += " " + this._attributeHTML(attr.name, attr.value, node, linkify, tooltipText);
                     }
                 }