Changeset 27575 in webkit

Timestamp:

Nov 7, 2007, 9:56:16 AM (18 years ago)

Author:

timothy@apple.com

Message:

Reviewed by Adam.

Bug 11920: Web Inspector should have Firebug-like CSS editing
​http://bugs.webkit.org/show_bug.cgi?id=11920

• css/CSSComputedStyleDeclaration.h: (WebCore::CSSComputedStyleDeclaration::isPropertyImplicit): Return false. I'm not sure why this was true, but computed style has no concept of implicit. So false makes more sense and makes the code simpler in the inspector. This function was added for the inspector, so this isn't a compatibility change.
• page/inspector/PropertiesSection.js: Add a getter/setter to reset populated status.
• page/inspector/StylesSidebarPane.js: Some refactoring along with the main support for style editing.
• page/inspector/inspector.css: Style changes for propery editing and focus correctness.
• page/inspector/inspector.js: Look for a handleKeyEvent function of the focus element before trying to call a function based on the element's id. Call focused and blurred on the focused element when currentFocusElement is changed. Use the new listItemElement getter instead of the private property.
• page/inspector/treeoutline.js: No longer expand on double click if ondblclick is implemented. Shrink the toggle zone to 10px to better match the size of the arrow. Add an onattach call to allow generation of the title using the DOM element. Add listItemElement and childrenListElement getters.
• page/inspector/utilities.js: Add new helper prototype methods on CSSStyleDeclaration.
• page/inspector/DocumentPanel.js: Use the new listItemElement getter instead of the private property. Also expand the DOM node on double click now that the TreeOutline dosen't do it.
• page/inspector/Resource.js: Use the new listItemElement and childrenListElement getters instead of the private properties.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• css/CSSComputedStyleDeclaration.h (modified) (1 diff)
• page/inspector/DocumentPanel.js (modified) (4 diffs)
• page/inspector/PropertiesSection.js (modified) (3 diffs)
• page/inspector/Resource.js (modified) (1 diff)
• page/inspector/StylesSidebarPane.js (modified) (10 diffs)
• page/inspector/inspector.css (modified) (4 diffs)
• page/inspector/inspector.js (modified) (6 diffs)
• page/inspector/treeoutline.js (modified) (6 diffs)
• page/inspector/utilities.js (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2007-11-06  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Adam.
+
+        Bug 11920: Web Inspector should have Firebug-like CSS editing
+        http://bugs.webkit.org/show_bug.cgi?id=11920
+
+        * css/CSSComputedStyleDeclaration.h:
+          (WebCore::CSSComputedStyleDeclaration::isPropertyImplicit): Return false. I'm not sure why
+          this was true, but computed style has no concept of implicit. So false makes more sense
+          and makes the code simpler in the inspector. This function was added for the inspector,
+          so this isn't a compatibility change.
+        * page/inspector/PropertiesSection.js: Add a getter/setter to reset populated status.
+        * page/inspector/StylesSidebarPane.js: Some refactoring along with the main support for
+          style editing.
+        * page/inspector/inspector.css: Style changes for propery editing and focus correctness.
+        * page/inspector/inspector.js: Look for a handleKeyEvent function of the focus element before
+          trying to call a function based on the element's id. Call focused and blurred on the focused
+          element when currentFocusElement is changed. Use the new listItemElement getter instead of
+          the private property.
+        * page/inspector/treeoutline.js: No longer expand on double click if ondblclick is implemented.
+          Shrink the toggle zone to 10px to better match the size of the arrow. Add an onattach call
+          to allow generation of the title using the DOM element. Add listItemElement and
+          childrenListElement getters.
+        * page/inspector/utilities.js: Add new helper prototype methods on CSSStyleDeclaration.
+        * page/inspector/DocumentPanel.js: Use the new listItemElement getter instead of the private
+          property. Also expand the DOM node on double click now that the TreeOutline dosen't do it.
+        * page/inspector/Resource.js: Use the new listItemElement and childrenListElement getters
+          instead of the private properties.
+
 2007-11-07  Simon Hausmann  <hausmann@kde.org>
 

trunk/WebCore/css/CSSComputedStyleDeclaration.h

@@ -49 +49 @@
     virtual bool getPropertyPriority(int propertyID) const;
     virtual int getPropertyShorthand(int propertyID) const { return -1; }
-    virtual bool isPropertyImplicit(int propertyID) const { return true; }
+    virtual bool isPropertyImplicit(int propertyID) const { return false; }
 
     virtual PassRefPtr<CSSMutableStyleDeclaration> copy() const;

trunk/WebCore/page/inspector/DocumentPanel.js

@@ -397 +397 @@
     updateSelection: function()
     {
-        if (!this._listItemNode)
+        var listItemElement = this.listItemElement;
+        if (!listItemElement)
             return;
 
@@ -403 +404 @@
             this.selectionElement = document.createElement("div");
             this.selectionElement.className = "selection selected";
-            this._listItemNode.insertBefore(this.selectionElement, this._listItemNode.firstChild);
-        }
-
-        this.selectionElement.style.height = this._listItemNode.offsetHeight + "px";
+            listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
+        }
+
+        this.selectionElement.style.height = listItemElement.offsetHeight + "px";
     },
 
@@ -443 +444 @@
     onreveal: function()
     {
-        if (!this._listItemNode || !this.treeOutline || !this.treeOutline._childrenListNode)
-            return;
-        var parent = this.treeOutline.panel.views.dom.treeContentElement;
-        parent.scrollToElement(this._listItemNode);
+        if (!this.listItemElement || !this.treeOutline)
+            return;
+        this.treeOutline.panel.views.dom.treeContentElement.scrollToElement(this.listItemElement);
     },
 
@@ -466 +466 @@
         panel.rootDOMNode = this.representedObject.parentNode;
         panel.focusedDOMNode = this.representedObject;
+
+        if (this.hasChildren && !this.expanded)
+            this.expand();
     }
 }

trunk/WebCore/page/inspector/PropertiesSection.js

@@ -100 +100 @@
     },
 
+    get populated()
+    {
+        return this._populated;
+    },
+
+    set populated(x)
+    {
+        this._populated = x;
+        if (!x && this.onpopulate && this._expanded) {
+            this.onpopulate(this);
+            this._populated = true;
+        }
+    },
+
     expand: function()
     {
@@ -105 +119 @@
             return;
         this._expanded = true;
+        this.element.addStyleClass("expanded");
 
         if (!this._populated && this.onpopulate) {
@@ -110 +125 @@
             this._populated = true;
         }
-        this.element.addStyleClass("expanded");
     },
 

trunk/WebCore/page/inspector/Resource.js

@@ -685 +685 @@
 WebInspector.ResourceTreeElement.revealed = function(element)
 {
-    if (!element._listItemNode || !element.treeOutline || !element.treeOutline._childrenListNode)
+    if (!element.listItemElement || !element.treeOutline || !element.treeOutline.childrenListElement)
         return;
-    element.treeOutline._childrenListNode.scrollToElement(element._listItemNode);
+    element.treeOutline.childrenListElement.scrollToElement(element.listItemElement);
 }

trunk/WebCore/page/inspector/StylesSidebarPane.js

@@ -33 +33 @@
 
 WebInspector.StylesSidebarPane.prototype = {
-    update: function(node)
-    {
+    update: function(node, editedSection)
+    {
+        var refresh = false;
+
+        if (!node || node === this.node)
+            refresh = true;
+
+        if (node && node.nodeType === Node.TEXT_NODE && node.parentNode)
+            node = node.parentNode;
+
+        if (node && node.nodeType !== Node.ELEMENT_NODE)
+            node = null;
+
+        if (node)
+            this.node = node;
+        else
+            node = this.node;
+
         var body = this.bodyElement;
-
-        body.removeChildren();
-
-        this.sections = [];
+        if (!refresh || !node) {
+            body.removeChildren();
+            this.sections = [];
+        }
 
         if (!node)
             return;
 
-        if (node.nodeType === Node.TEXT_NODE && node.parentNode)
-            node = node.parentNode;
-
         var styleRules = [];
-        var styleProperties = [];
-
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            var propertyCount = [];
-
+
+        if (refresh) {
+            for (var i = 0; i < this.sections.length; ++i) {
+                var section = this.sections[i];
+                if (section.computedStyle)
+                    section.styleRule.style = node.ownerDocument.defaultView.getComputedStyle(node);
+                var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle };
+                styleRules.push(styleRule);
+            }
+        } else {
             var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
-            if (computedStyle && computedStyle.length)
-                styleRules.push({ computedStyle: true, selectorText: "Computed Style", style: computedStyle });
+            styleRules.push({ computedStyle: true, selectorText: "Computed Style", style: computedStyle, editable: false });
 
             var nodeName = node.nodeName.toLowerCase();
@@ -61 +78 @@
                 var attr = node.attributes[i];
                 if (attr.style) {
-                    var attrStyle = { style: attr.style };
+                    var attrStyle = { style: attr.style, editable: false };
                     attrStyle.subtitle = "element\u2019s \u201C" + attr.name + "\u201D attribute";
                     attrStyle.selectorText = nodeName + "[" + attr.name;
@@ -83 +100 @@
                     styleRules.push(matchedStyleRules[i]);
             }
-
-            var usedProperties = {};
-            var priorityUsed = false;
-
-            // Walk the style rules and make a list of all used and overloaded properties.
-            for (var i = 0; i < styleRules.length; ++i) {
+        }
+
+        var usedProperties = {};
+        var priorityUsed = false;
+
+        // Walk the style rules and make a list of all used and overloaded properties.
+        for (var i = 0; i < styleRules.length; ++i) {
+            var styleRule = styleRules[i];
+            if (styleRule.computedStyle)
+                continue;
+
+            styleRule.usedProperties = {};
+
+            var style = styleRule.style;
+            for (var j = 0; j < style.length; ++j) {
+                var name = style[j];
+
+                if (!priorityUsed && style.getPropertyPriority(name).length)
+                    priorityUsed = true;
+
+                // If the property name is already used by another rule this is rule's
+                // property is overloaded, so don't add it to the rule's usedProperties.
+                if (!(name in usedProperties))
+                    styleRule.usedProperties[name] = true;
+
+                if (name === "font") {
+                    // The font property is not reported as a shorthand. Report finding the individual
+                    // properties so they are visible in computed style.
+                    // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15598 is fixed.
+                    styleRule.usedProperties["font-family"] = true;
+                    styleRule.usedProperties["font-size"] = true;
+                    styleRule.usedProperties["font-style"] = true;
+                    styleRule.usedProperties["font-variant"] = true;
+                    styleRule.usedProperties["font-weight"] = true;
+                    styleRule.usedProperties["line-height"] = true;
+                }
+            }
+
+            // Add all the properties found in this style to the used properties list.
+            // Do this here so only future rules are affect by properties used in this rule.
+            for (var name in styleRules[i].usedProperties)
+                usedProperties[name] = true;
+        }
+
+        if (priorityUsed) {
+            // Walk the properties again and account for !important.
+            var foundPriorityProperties = [];
+
+            // Walk in reverse to match the order !important overrides.
+            for (var i = (styleRules.length - 1); i >= 0; --i) {
                 if (styleRules[i].computedStyle)
                     continue;
 
-                styleRules[i].overloadedProperties = {};
-
                 var foundProperties = {};
-
                 var style = styleRules[i].style;
                 for (var j = 0; j < style.length; ++j) {
                     var name = style[j];
-                    var shorthand = style.getPropertyShorthand(name);
-                    var overloaded = (name in usedProperties);
-
-                    if (!priorityUsed && style.getPropertyPriority(name).length)
-                        priorityUsed = true;
-
-                    if (overloaded)
-                        styleRules[i].overloadedProperties[name] = true;
+
+                    // Skip duplicate properties in the same rule.
+                    if (name in foundProperties)
+                        continue;
 
                     foundProperties[name] = true;
-                    if (shorthand)
-                        foundProperties[shorthand] = true;
-
-                    if (name === "font") {
-                        // The font property is not reported as a shorthand. Report finding the individual
-                        // properties so they are visible in computed style.
-                        // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15598 is fixed.
-                        foundProperties["font-family"] = true;
-                        foundProperties["font-size"] = true;
-                        foundProperties["font-style"] = true;
-                        foundProperties["font-variant"] = true;
-                        foundProperties["font-weight"] = true;
-                        foundProperties["line-height"] = true;
-                    }
+
+                    if (style.getPropertyPriority(name).length) {
+                        if (!(name in foundPriorityProperties))
+                            styleRules[i].usedProperties[name] = true;
+                        else
+                            delete styleRules[i].usedProperties[name];
+                        foundPriorityProperties[name] = true;
+                    } else if (name in foundPriorityProperties)
+                        delete styleRules[i].usedProperties[name];
                 }
-
-                // Add all the properties found in this style to the used properties list.
-                // Do this here so only future rules are affect by properties used in this rule.
-                for (var name in foundProperties)
-                    usedProperties[name] = true;
-            }
-
-            if (priorityUsed) {
-                // Walk the properties again and account for !important.
-                var foundPriorityProperties = [];
-
-                // Walk in reverse to match the order !important overrides.
-                for (var i = (styleRules.length - 1); i >= 0; --i) {
-                    if (styleRules[i].computedStyle)
-                        continue;
-
-                    var foundProperties = {};
-                    var style = styleRules[i].style;
-                    for (var j = 0; j < style.length; ++j) {
-                        var name = style[j];
-
-                        // Skip duplicate properties in the same rule.
-                        if (name in foundProperties)
-                            continue;
-
-                        foundProperties[name] = true;
-
-                        if (style.getPropertyPriority(name).length) {
-                            if (!(name in foundPriorityProperties))
-                                delete styleRules[i].overloadedProperties[name];
-                            else
-                                styleRules[i].overloadedProperties[name] = true;
-                            foundPriorityProperties[name] = true;
-                        } else if (name in foundPriorityProperties)
-                            styleRules[i].overloadedProperties[name] = true;
-                    }
-                }
-            }
-
+            }
+        }
+
+        if (refresh) {
+            // Walk the style rules and update the sections with new overloaded and used properties.
+            for (var i = 0; i < styleRules.length; ++i) {
+                var styleRule = styleRules[i];
+                var section = styleRule.section;
+                section._usedProperties = (styleRule.usedProperties || usedProperties);
+                section.update((section === editedSection) || styleRule.computedStyle);
+            }
+        } else {
             // Make a property section for each style rule.
-            var styleRulesLength = styleRules.length;
-            for (var i = 0; i < styleRulesLength; ++i) {
+            for (var i = 0; i < styleRules.length; ++i) {
                 var styleRule = styleRules[i];
                 var subtitle = styleRule.subtitle;
@@ -173 +194 @@
                 delete styleRule.computedStyle;
 
-                var overloadedProperties = styleRule.overloadedProperties;
-                delete styleRule.overloadedProperties;
-
-                var section = new WebInspector.StylePropertiesSection(styleRule, subtitle, computedStyle, (overloadedProperties || usedProperties));
+                var ruleUsedProperties = styleRule.usedProperties;
+                delete styleRule.usedProperties;
+
+                var editable = styleRule.editable;
+                delete styleRule.editable;
+
+                // Default editable to true if it was omitted.
+                if (typeof editable === "undefined")
+                    editable = true;
+
+                var section = new WebInspector.StylePropertiesSection(styleRule, subtitle, computedStyle, (ruleUsedProperties || usedProperties), editable);
                 section.expanded = true;
+                section.pane = this;
 
                 body.appendChild(section.element);
                 this.sections.push(section);
             }
-        } else {
-            // can't style this node
         }
     }
@@ -190 +217 @@
 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
 
-WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, overloadedOrUsedProperties)
+WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)
 {
     WebInspector.PropertiesSection.call(this, styleRule.selectorText);
@@ -196 +223 @@
     this.styleRule = styleRule;
     this.computedStyle = computedStyle;
-
-    if (computedStyle)
-        this.usedProperties = overloadedOrUsedProperties;
-    else
-        this.overloadedProperties = overloadedOrUsedProperties || {};
+    this.editable = (editable && !computedStyle);
+
+    // Prevent editing the user agent rules.
+    if (this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode)
+        this.editable = false;
+
+    this._usedProperties = usedProperties;
 
     if (computedStyle) {
@@ -243 +272 @@
 
 WebInspector.StylePropertiesSection.prototype = {
+    get usedProperties()
+    {
+        return this._usedProperties || {};
+    },
+
+    set usedProperties(x)
+    {
+        this._usedProperties = x;
+        this.update();
+    },
+
+    isPropertyInherited: function(property)
+    {
+        if (!this.computedStyle || !this._usedProperties)
+            return false;
+        // These properties should always show for Computed Style.
+        var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
+        return !(property in this.usedProperties) && !(property in alwaysShowComputedProperties);
+    },
+
+    isPropertyOverloaded: function(property, shorthand)
+    {
+        if (this.computedStyle || !this._usedProperties)
+            return false;
+
+        var used = (property in this.usedProperties);
+        if (used || !shorthand)
+            return !used;
+
+        // Find out if any of the individual longhand properties of the shorthand
+        // are used, if none are then the shorthand is overloaded too.
+        var longhandProperties = this.styleRule.style.getLonghandProperties(property);
+        for (var j = 0; j < longhandProperties.length; ++j) {
+            var individualProperty = longhandProperties[j];
+            if (individualProperty in this.usedProperties)
+                return false;
+        }
+
+        return true;
+    },
+
+    update: function(full)
+    {
+        if (full || this.computedStyle) {
+            this.propertiesTreeOutline.removeChildren();
+            this.populated = false;
+        } else {
+            var child = this.propertiesTreeOutline.children[0];
+            while (child) {
+                child.overloaded = this.isPropertyOverloaded(child.name, child.shorthand);
+                child = child.traverseNextTreeElement(false, null, true);
+            }
+        }
+    },
+
     onpopulate: function()
     {
@@ -249 +333 @@
             return;
 
-        var foundProperties = {};
-
-        // Add properties in reverse order to better match how the style
-        // system picks the winning value for duplicate properties.
-        for (var i = (style.length - 1); i >= 0; --i) {
-            var name = style[i];
+        var foundShorthands = {};
+        var uniqueProperties = style.getUniqueProperties();
+        uniqueProperties.sort();
+
+        for (var i = 0; i < uniqueProperties.length; ++i) {
+            var name = uniqueProperties[i];
             var shorthand = style.getPropertyShorthand(name);
 
-            if (name in foundProperties || (shorthand && shorthand in foundProperties))
+            if (shorthand && shorthand in foundShorthands)
                 continue;
 
-            foundProperties[name] = true;
-            if (shorthand)
-                foundProperties[shorthand] = true;
-
-            if (this.computedStyle)
-                var inherited = (this.usedProperties && !((shorthand || name) in this.usedProperties));
-            else {
-                var overloaded = ((shorthand || name) in this.overloadedProperties);
-
-                if (shorthand && !overloaded) {
-                    // Find out if all the individual properties of a shorthand
-                    // are overloaded and mark the shorthand as overloaded too.
-
-                    var count = 0;
-                    var overloadCount = 0;
-                    for (var j = 0; j < style.length; ++j) {
-                        var individualProperty = style[j];
-                        if (style.getPropertyShorthand(individualProperty) !== shorthand)
-                            continue;
-                        ++count;
-                        if (individualProperty in this.overloadedProperties)
-                            ++overloadCount;
-                    }
-
-                    overloaded = (overloadCount >= count);
-                }
-            }
-
-            var item = new WebInspector.StylePropertyTreeElement(style, (shorthand || name), this.computedStyle, (shorthand ? true : false), (overloaded || inherited));
-            this.propertiesTreeOutline.insertChild(item, 0);
+            if (shorthand) {
+                foundShorthands[shorthand] = true;
+                name = shorthand;
+            }
+
+            var isShorthand = (shorthand ? true : false);
+            var inherited = this.isPropertyInherited(name);
+            var overloaded = this.isPropertyOverloaded(name, isShorthand);
+
+            var item = new WebInspector.StylePropertyTreeElement(style, name, isShorthand, inherited, overloaded);
+            this.propertiesTreeOutline.appendChild(item);
         }
     }
@@ -296 +361 @@
 WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
 
-WebInspector.StylePropertyTreeElement = function(style, name, computedStyle, shorthand, overloadedOrInherited)
+WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded)
 {
-    // These properties should always show for Computed Style
-    var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
-
-    // "Nicknames" for some common values that are easier to read.
-    var valueNicknames = {
-        "rgb(0, 0, 0)": "black",
-        "#000": "black",
-        "#000000": "black",
-        "rgb(255, 255, 255)": "white",
-        "#fff": "white",
-        "#ffffff": "white",
-        "#FFF": "white",
-        "#FFFFFF": "white",
-        "rgba(0, 0, 0, 0)": "transparent",
-        "rgb(255, 0, 0)": "red",
-        "rgb(0, 255, 0)": "lime",
-        "rgb(0, 0, 255)": "blue",
-        "rgb(255, 255, 0)": "yellow",
-        "rgb(255, 0, 255)": "magenta",
-        "rgb(0, 255, 255)": "cyan"
-    };
-
     this.style = style;
     this.name = name;
-    this.computedStyle = computedStyle;
     this.shorthand = shorthand;
-    this.overloaded = (!computedStyle && overloadedOrInherited);
-    this.inherited = (computedStyle && overloadedOrInherited && !(name in alwaysShowComputedProperties));
-
-    var priority = style.getPropertyPriority(name);
-    var value = style.getPropertyValue(name);
-    var htmlValue = value;
-
-    if (priority && !priority.length)
-        delete priority;
-
-    if (!priority && shorthand) {
-        // Priority is not returned for shorthands, find the priority from an individual property.
-        for (var i = 0; i < style.length; ++i) {
-            var individualProperty = style[i];
-            if (style.getPropertyShorthand(individualProperty) !== name)
-                continue;
-            priority = style.getPropertyPriority(individualProperty);
-            break;
-        }
-    }
-
-    if (value) {
-        var urls = value.match(/url\([^)]+\)/);
-        if (urls) {
-            for (var i = 0; i < urls.length; ++i) {
-                var url = urls[i].substring(4, urls[i].length - 1);
-                htmlValue = htmlValue.replace(urls[i], "url(" + WebInspector.linkifyURL(url) + ")");
-            }
-        } else {
-            if (value in valueNicknames)
-                htmlValue = valueNicknames[value];
-            htmlValue = htmlValue.escapeHTML();
-        }
-    } else if (shorthand) {
-        // Some shorthands (like border) return a null value, so compute a shorthand value.
-        // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15823 is fixed.
-
-        value = "";
-
-        var foundProperties = {};
-        for (var i = 0; i < style.length; ++i) {
-            var individualProperty = style[i];
-            if (style.getPropertyShorthand(individualProperty) !== name || individualProperty in foundProperties)
-                continue;
-
-            var individualValue = style.getPropertyValue(individualProperty);
-            if (style.isPropertyImplicit(individualProperty) || individualValue === "initial")
-                continue;
-
-            foundProperties[individualProperty] = true;
-
-            if (value.length)
-                value += " ";
-            value += individualValue;
-        }
-
-        htmlValue = value.escapeHTML();
-    } else
-        htmlValue = value = "";
-
-    var classes = [];
-    if (!computedStyle && (style.isPropertyImplicit(name) || value === "initial"))
-        classes.push("implicit");
-    if (this.inherited)
-        classes.push("inherited");
-    if (this.overloaded)
-        classes.push("overloaded");
-
-    var title = "";
-    if (classes.length)
-        title += "<span class=\"" + classes.join(" ") + "\">";
-
-    title += "<span class=\"name\">" + name.escapeHTML() + "</span>: ";
-    title += "<span class=\"value\">" + htmlValue;
-    if (priority)
-        title += " !" + priority;
-    title += "</span>;";
-
-    if (value) {
-        // FIXME: this dosen't catch keyword based colors like black and white
-        var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})/g);
-        if (colors) {
-            var colorsLength = colors.length;
-            for (var i = 0; i < colorsLength; ++i)
-                title += "<span class=\"swatch\" style=\"background-color: " + colors[i] + "\"></span>";
-        }
-    }
-
-    if (classes.length)
-        title += "</span>";
-
-    TreeElement.call(this, title, null, shorthand);
-
-    this.tooltip = name + ": " + (valueNicknames[value] || value) + (priority ? " !" + priority : "");
+    this._inherited = inherited;
+    this._overloaded = overloaded;
+
+    // Pass an empty title, the title gets made later in onattach.
+    TreeElement.call(this, "", null, shorthand);
 }
 
 WebInspector.StylePropertyTreeElement.prototype = {
+    get inherited()
+    {
+        return this._inherited;
+    },
+
+    set inherited(x)
+    {
+        if (x === this._inherited)
+            return;
+        this._inherited = x;
+        this.updateState();
+    },
+
+    get overloaded()
+    {
+        return this._overloaded;
+    },
+
+    set overloaded(x)
+    {
+        if (x === this._overloaded)
+            return;
+        this._overloaded = x;
+        this.updateState();
+    },
+
+    onattach: function()
+    {
+        this.updateTitle();
+    },
+
+    updateTitle: function()
+    {
+        // "Nicknames" for some common values that are easier to read.
+        var valueNicknames = {
+            "rgb(0, 0, 0)": "black",
+            "#000": "black",
+            "#000000": "black",
+            "rgb(255, 255, 255)": "white",
+            "#fff": "white",
+            "#ffffff": "white",
+            "#FFF": "white",
+            "#FFFFFF": "white",
+            "rgba(0, 0, 0, 0)": "transparent",
+            "rgb(255, 0, 0)": "red",
+            "rgb(0, 255, 0)": "lime",
+            "rgb(0, 0, 255)": "blue",
+            "rgb(255, 255, 0)": "yellow",
+            "rgb(255, 0, 255)": "magenta",
+            "rgb(0, 255, 255)": "cyan"
+        };
+
+        var priority = (this.shorthand ? this.style.getShorthandPriority(this.name) : this.style.getPropertyPriority(this.name));
+        var value = (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
+        var htmlValue = value;
+
+        if (priority && !priority.length)
+            delete priority;
+        if (priority)
+            priority = "!" + priority;
+
+        if (value) {
+            var urls = value.match(/url\([^)]+\)/);
+            if (urls) {
+                for (var i = 0; i < urls.length; ++i) {
+                    var url = urls[i].substring(4, urls[i].length - 1);
+                    htmlValue = htmlValue.replace(urls[i], "url(" + WebInspector.linkifyURL(url) + ")");
+                }
+            } else {
+                if (value in valueNicknames)
+                    htmlValue = valueNicknames[value];
+                htmlValue = htmlValue.escapeHTML();
+            }
+        } else
+            htmlValue = value = "";
+
+        this.updateState();
+
+        var nameElement = document.createElement("span");
+        nameElement.className = "name";
+        nameElement.textContent = this.name;
+
+        var valueElement = document.createElement("span");
+        valueElement.className = "value";
+        valueElement.innerHTML = htmlValue;
+
+        if (priority) {
+            var priorityElement = document.createElement("span");
+            priorityElement.className = "priority";
+            priorityElement.textContent = priority;
+        }
+
+        this.listItemElement.removeChildren();
+
+        this.listItemElement.appendChild(nameElement);
+        this.listItemElement.appendChild(document.createTextNode(": "));
+        this.listItemElement.appendChild(valueElement);
+
+        if (priorityElement) {
+            this.listItemElement.appendChild(document.createTextNode(" "));
+            this.listItemElement.appendChild(priorityElement);
+        }
+
+        this.listItemElement.appendChild(document.createTextNode(";"));
+
+        if (value) {
+            // FIXME: this dosen't catch keyword based colors like black and white
+            var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})/g);
+            if (colors) {
+                var colorsLength = colors.length;
+                for (var i = 0; i < colorsLength; ++i) {
+                    var swatchElement = document.createElement("span");
+                    swatchElement.className = "swatch";
+                    swatchElement.style.setProperty("background-color", colors[i]);
+                    this.listItemElement.appendChild(swatchElement);
+                }
+            }
+        }
+
+        this.tooltip = this.name + ": " + (valueNicknames[value] || value) + (priority ? " " + priority : "");
+    },
+
+    updateState: function()
+    {
+        if (!this.listItemElement)
+            return;
+
+        var value = (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
+        if (this.style.isPropertyImplicit(this.name) || value === "initial")
+            this.listItemElement.addStyleClass("implicit");
+        else
+            this.listItemElement.removeStyleClass("implicit");
+
+        if (this.inherited)
+            this.listItemElement.addStyleClass("inherited");
+        else
+            this.listItemElement.removeStyleClass("inherited");
+
+        if (this.overloaded)
+            this.listItemElement.addStyleClass("overloaded");
+        else
+            this.listItemElement.removeStyleClass("overloaded");
+    },
+
     onpopulate: function()
     {
@@ -427 +524 @@
             return;
 
-        var foundProperties = {};
-
-        // Add properties in reverse order to better match how the style
-        // system picks the winning value for duplicate properties.
-        for (var i = (this.style.length - 1); i >= 0; --i) {
-            var name = this.style[i];
-            var shorthand = this.style.getPropertyShorthand(name);
-
-            if (shorthand !== this.name || name in foundProperties)
-                continue;
-
-            foundProperties[name] = true;
-
-            if (this.computedStyle)
-                var inherited = (this.treeOutline.section.usedProperties && !(name in this.treeOutline.section.usedProperties));
+        var longhandProperties = this.style.getLonghandProperties(this.name);
+        for (var i = 0; i < longhandProperties.length; ++i) {
+            var name = longhandProperties[i];
+
+            if (this.treeOutline.section) {
+                var inherited = this.treeOutline.section.isPropertyInherited(name);
+                var overloaded = this.treeOutline.section.isPropertyOverloaded(name);
+            }
+
+            var item = new WebInspector.StylePropertyTreeElement(this.style, name, false, inherited, overloaded);
+            this.appendChild(item);
+        }
+    },
+
+    ondblclick: function(element, event)
+    {
+        this.startEditing(event.target);
+    },
+
+    startEditing: function(selectElement)
+    {
+        // FIXME: we don't allow editing of longhand properties under a shorthand right now.
+        if (this.parent.shorthand)
+            return;
+
+        if (this.editing || (this.treeOutline.section && !this.treeOutline.section.editable))
+            return;
+
+        this.editing = true;
+        this.previousTextContent = this.listItemElement.textContent;
+
+        this.listItemElement.addStyleClass("focusable");
+        this.listItemElement.addStyleClass("editing");
+        this.wasExpanded = this.expanded;
+        this.collapse();
+        // Lie about out children to prevent toggling on click.
+        this.hasChildren = false;
+
+        if (!selectElement)
+            selectElement = this.listItemElement;
+
+        window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
+
+        var treeElement = this;
+        this.listItemElement.blurred = function() { treeElement.endEditing() };
+        this.listItemElement.handleKeyEvent = function(event) {
+            if (event.keyIdentifier === "Enter") {
+                treeElement.endEditing();
+                event.preventDefault();
+            }
+        };
+
+        this.previousFocusElement = WebInspector.currentFocusElement;
+        WebInspector.currentFocusElement = this.listItemElement;
+    },
+
+    endEditing: function()
+    {
+        // Revert the changes done in startEditing().
+        delete this.listItemElement.blurred;
+        delete this.listItemElement.handleKeyEvent;
+
+        WebInspector.currentFocusElement = this.previousFocusElement;
+        delete this.previousFocusElement;
+
+        delete this.editing;
+
+        this.listItemElement.removeStyleClass("focusable");
+        this.listItemElement.removeStyleClass("editing");
+        this.hasChildren = (this.children.length ? true : false);
+        if (this.wasExpanded) {
+            delete this.wasExpanded;
+            this.expand();
+        }
+
+        var previousContent = this.previousTextContent;
+        delete this.previousTextContent;
+
+        var userInput = this.listItemElement.textContent;
+        if (userInput === previousContent)
+            return; // nothing changed, so do nothing else
+
+        // Remove the original property from the real style declaration, if this represents
+        // a shorthand remove all the longhand properties.
+        if (this.shorthand) {
+            var longhandProperties = this.style.getLonghandProperties(this.name);
+            for (var i = 0; i < longhandProperties.length; ++i)
+                this.style.removeProperty(longhandProperties[i]);
+        } else
+            this.style.removeProperty(this.name);
+
+        // Create a new element to parse the user input CSS.
+        var parseElement = document.createElement("span");
+        parseElement.setAttribute("style", userInput);
+
+        var userInputStyle = parseElement.style;
+        if (userInputStyle.length) {
+            // Iterate of the properties on the test element's style declaration and
+            // add them to the real style declaration. We take care to move shorthands.
+
+            var foundShorthands = {};
+            var uniqueProperties = userInputStyle.getUniqueProperties();
+
+            for (var i = 0; i < uniqueProperties.length; ++i) {
+                var name = uniqueProperties[i];
+                var shorthand = userInputStyle.getPropertyShorthand(name);
+
+                if (shorthand && shorthand in foundShorthands)
+                    continue;
+
+                if (shorthand) {
+                    var value = userInputStyle.getShorthandValue(shorthand);
+                    var priority = userInputStyle.getShorthandPriority(shorthand);
+                    foundShorthands[shorthand] = true;
+                } else {
+                    var value = userInputStyle.getPropertyValue(name);
+                    var priority = userInputStyle.getPropertyPriority(name);
+                }
+
+                // Set the property on the real style declaration.
+                this.style.setProperty((shorthand || name), value, priority);
+            }
+
+            if (this.treeOutline.section && this.treeOutline.section.pane)
+                this.treeOutline.section.pane.update(null, this.treeOutline.section);
+            else if (this.treeOutline.section)
+                this.treeOutline.section.update(true);
             else
-                var overloaded = (name in this.treeOutline.section.overloadedProperties);
-
-            var item = new WebInspector.StylePropertyTreeElement(this.style, name, this.computedStyle, false, (inherited || overloaded));
-            this.insertChild(item, 0);
+                this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
+        } else {
+            if (this.treeOutline.section && this.treeOutline.section.pane)
+                this.treeOutline.section.pane.update();
+            this.parent.removeChild(this);
         }
     }

trunk/WebCore/page/inspector/inspector.css

@@ -1022 +1022 @@
 }
 
-.focused .content.tree li.selected * {
+body:not(.inactive) .focused .content.tree li.selected * {
     color: inherit;
 }
@@ -1104 +1104 @@
     overflow: hidden;
     -webkit-user-select: text;
+    outline: none;
 }
 
@@ -1140 +1141 @@
 }
 
+.section .properties li.editing {
+    -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
+    outline: 1px solid rgb(66%, 66%, 66%);
+    background-color: white;
+    -webkit-user-modify: read-write-plaintext-only;
+    text-overflow: clip;
+    margin-left: 8px;
+    padding-left: 2px;
+    margin-bottom: -1px;
+    padding-bottom: 1px;
+    text-decoration: none !important;
+    opacity: 1.0 !important;
+}
+
+.section .properties li.editing.parent::before {
+    display: none;
+}
+
+.section .properties li.editing * {
+    color: black !important;
+}
+
 .section .properties .overloaded {
     text-decoration: line-through;
 }
 
-.section .properties .implicit {
+.section .properties .implicit, .section .properties .inherited {
     opacity: 0.5;
 }
 
-.section .properties .inherited {
+.section:not(.show-inherited) .properties .inherited {
     display: none;
-    opacity: 0.5;
-}
-
-.section.show-inherited .properties .inherited {
-    display: inline;
 }
 
@@ -1163 +1181 @@
 .section .properties .number {
     color: blue;
+}
+
+.section .properties .priority {
+    color: rgb(128, 0, 0);
 }
 

trunk/WebCore/page/inspector/inspector.js

@@ -89 +89 @@
             this._currentFocusElement.removeStyleClass("focused");
             this._currentFocusElement.addStyleClass("blurred");
+            if (this._currentFocusElement.blurred)
+                this._currentFocusElement.blurred();
         }
 
@@ -96 +98 @@
             x.addStyleClass("focused");
             x.removeStyleClass("blurred");
+            if (this._currentFocusElement.focused)
+                this._currentFocusElement.focused();
         }
     },
@@ -320 +324 @@
 WebInspector.documentKeypress = function(event)
 {
-    if (!this.currentFocusElement || !this.currentFocusElement.id || !this.currentFocusElement.id.length)
+    if (!this.currentFocusElement)
         return;
-    if (this.currentFocusElement.id + "Keypress" in WebInspector)
+    if (this.currentFocusElement.handleKeyEvent)
+        this.currentFocusElement.handleKeyEvent(event);
+    else if (this.currentFocusElement.id && this.currentFocusElement.id.length && WebInspector[this.currentFocusElement.id + "Keypress"])
         WebInspector[this.currentFocusElement.id + "Keypress"](event);
 }
@@ -392 +398 @@
             else if (key === "start")
                 start = animation[key];
-            else if (key == "current")
+            else if (key === "current")
                 current = animation[key];
             else if (key === "end")
@@ -816 +822 @@
         WebInspector.navigateToPanel(element.representedObject.panel, "source");
         element.representedObject.line.scrollIntoView(true);
-        resultsContainer.scrollToElement(element._listItemNode);
+        resultsContainer.scrollToElement(element.listItemElement);
     }
 
@@ -823 +829 @@
         WebInspector.navigateToPanel(element.representedObject.panel, "dom");
         element.representedObject.panel.focusedDOMNode = element.representedObject.node;
-        resultsContainer.scrollToElement(element._listItemNode);
+        resultsContainer.scrollToElement(element.listItemElement);
     }
 

trunk/WebCore/page/inspector/treeoutline.js

@@ -402 +402 @@
 
 TreeElement.prototype = {
+    get listItemElement() {
+        return this._listItemNode;
+    },
+
+    get childrenListElement() {
+        return this._childrenListNode;
+    },
+
     get title() {
         return this._title;
@@ -475 +483 @@
         this._listItemNode.addEventListener("click", TreeElement.treeElementToggled, false);
         this._listItemNode.addEventListener("dblclick", TreeElement.treeElementDoubleClicked, false);
+
+        if (this.onattach)
+            this.onattach(this);
     }
 
@@ -500 +511 @@
         return;
 
-    if (event.offsetX > 20 || !element.treeElement.hasChildren)
+    if (event.offsetX > 10 || !element.treeElement.hasChildren)
         element.treeElement.select();
 }
@@ -510 +521 @@
         return;
 
-    if (event.offsetX <= 20 && element.treeElement.hasChildren) {
+    if (event.offsetX <= 10 && element.treeElement.hasChildren) {
         if (element.treeElement.expanded) {
             if (event.altKey)
@@ -531 +542 @@
         return;
 
-    if (element.treeElement.hasChildren && !element.treeElement.expanded)
+    if (element.treeElement.ondblclick)
+        element.treeElement.ondblclick(element.treeElement, event);
+    else if (element.treeElement.hasChildren && !element.treeElement.expanded)
         element.treeElement.expand();
-
-    if (element.treeElement.ondblclick)
-        element.treeElement.ondblclick(element.treeElement);
 }
 
@@ -582 +592 @@
             this.onpopulate(this);
 
-        for (var i = 0; i < this.children.length; ++i) {
-            var child = this.children[i];
-            child._attach();
-        }
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i]._attach();
 
         delete this.refreshChildren;

trunk/WebCore/page/inspector/utilities.js

@@ -243 +243 @@
         result = result.replace(new RegExp("^" + baseURLDomain.escapeForRegExp(), "i"), "");
     return result;
+}
+
+CSSStyleDeclaration.prototype.getShorthandValue = function(shorthandProperty)
+{
+    var value = this.getPropertyValue(shorthandProperty);
+    if (!value) {
+        // Some shorthands (like border) return a null value, so compute a shorthand value.
+        // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15823 is fixed.
+
+        var foundProperties = {};
+        for (var i = 0; i < this.length; ++i) {
+            var individualProperty = this[i];
+            if (individualProperty in foundProperties || this.getPropertyShorthand(individualProperty) !== shorthandProperty)
+                continue;
+
+            var individualValue = this.getPropertyValue(individualProperty);
+            if (this.isPropertyImplicit(individualProperty) || individualValue === "initial")
+                continue;
+
+            foundProperties[individualProperty] = true;
+
+            if (!value)
+                value = "";
+            else if (value.length)
+                value += " ";
+            value += individualValue;
+        }
+    }
+    return value;
+}
+
+CSSStyleDeclaration.prototype.getShorthandPriority = function(shorthandProperty)
+{
+    var priority = this.getPropertyPriority(shorthandProperty);
+    if (!priority) {
+        for (var i = 0; i < this.length; ++i) {
+            var individualProperty = this[i];
+            if (this.getPropertyShorthand(individualProperty) !== shorthandProperty)
+                continue;
+            priority = this.getPropertyPriority(individualProperty);
+            break;
+        }
+    }
+    return priority;
+}
+
+CSSStyleDeclaration.prototype.getLonghandProperties = function(shorthandProperty)
+{
+    var properties = [];
+    var foundProperties = {};
+
+    for (var i = 0; i < this.length; ++i) {
+        var individualProperty = this[i];
+        if (individualProperty in foundProperties || this.getPropertyShorthand(individualProperty) !== shorthandProperty)
+            continue;
+        foundProperties[individualProperty] = true;
+        properties.push(individualProperty);
+    }
+
+    return properties;
+}
+
+CSSStyleDeclaration.prototype.getUniqueProperties = function()
+{
+    var properties = [];
+    var foundProperties = {};
+
+    for (var i = 0; i < this.length; ++i) {
+        var property = this[i];
+        if (property in foundProperties)
+            continue;
+        foundProperties[property] = true;
+        properties.push(property);
+    }
+
+    return properties;
 }