Remove Inspector directory in prep for ref build rev.

chrome/resources/Inspector/StylesSidebarPane.js

Index: chrome/resources/Inspector/StylesSidebarPane.js
===================================================================
--- chrome/resources/Inspector/StylesSidebarPane.js	(revision 29943)
+++ chrome/resources/Inspector/StylesSidebarPane.js	(working copy)
@@ -1,927 +0,0 @@
-/*
- * Copyright (C) 2007 Apple Inc.  All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.StylesSidebarPane = function()
-{
-    WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles"));
-}
-
-WebInspector.StylesSidebarPane.prototype = {
-    update: function(node, editedSection, forceUpdate)
-    {
-        var refresh = false;
-
-        if (forceUpdate)
-            delete this.node;
-
-        if (!forceUpdate && (!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;
-        if (!refresh || !node) {
-            body.removeChildren();
-            this.sections = [];
-        }
-
-        if (!node)
-            return;
-
-        var styleRules = [];
-
-        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);
-            styleRules.push({ computedStyle: true, selectorText: WebInspector.UIString("Computed Style"), style: computedStyle, editable: false });
-
-            var nodeName = node.nodeName.toLowerCase();
-            for (var i = 0; i < node.attributes.length; ++i) {
-                var attr = node.attributes[i];
-                if (attr.style) {
-                    var attrStyle = { style: attr.style, editable: false };
-                    attrStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", attr.name);
-                    attrStyle.selectorText = nodeName + "[" + attr.name;
-                    if (attr.value.length)
-                        attrStyle.selectorText += "=" + attr.value;
-                    attrStyle.selectorText += "]";
-                    styleRules.push(attrStyle);
-                }
-            }
-
-            if (node.style && (node.style.length || Object.hasProperties(node.style.__disabledProperties))) {
-                var inlineStyle = { selectorText: WebInspector.UIString("Inline Style Attribute"), style: node.style };
-                inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style");
-                styleRules.push(inlineStyle);
-            }
-
-            var matchedStyleRules = node.ownerDocument.defaultView.getMatchedCSSRules(node, "", !Preferences.showUserAgentStyles);
-            if (matchedStyleRules) {
-                // Add rules in reverse order to match the cascade order.
-                for (var i = (matchedStyleRules.length - 1); i >= 0; --i) {
-                    var rule = matchedStyleRules[i];
-                    styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet });
-                }
-            }
-        }
-
-        function deleteDisabledProperty(style, name)
-        {
-            if (!style || !name)
-                return;
-            if (style.__disabledPropertyValues)
-                delete style.__disabledPropertyValues[name];
-            if (style.__disabledPropertyPriorities)
-                delete style.__disabledPropertyPriorities[name];
-            if (style.__disabledProperties)
-                delete style.__disabledProperties[name];
-        }
-
-        var usedProperties = {};
-        var disabledComputedProperties = {};
-        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 then this 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;
-                }
-
-                // Delete any disabled properties, since the property does exist.
-                // This prevents it from showing twice.
-                deleteDisabledProperty(style, name);
-                deleteDisabledProperty(style, style.getPropertyShorthand(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 styleRules[i].usedProperties)
-                usedProperties[name] = true;
-
-            // Remember all disabled properties so they show up in computed style.
-            if (style.__disabledProperties)
-                for (var name in style.__disabledProperties)
-                    disabledComputedProperties[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 style = styleRules[i].style;
-                var uniqueProperties = getUniqueStyleProperties(style);
-                for (var j = 0; j < uniqueProperties.length; ++j) {
-                    var name = uniqueProperties[j];
-                    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];
-                }
-            }
-        }
-
-        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;
-                if (styleRule.computedStyle)
-                    section.disabledComputedProperties = disabledComputedProperties;
-                section._usedProperties = (styleRule.usedProperties || usedProperties);
-                section.update((section === editedSection) || styleRule.computedStyle);
-            }
-        } else {
-            // Make a property section for each style rule.
-            for (var i = 0; i < styleRules.length; ++i) {
-                var styleRule = styleRules[i];
-                var subtitle = styleRule.subtitle;
-                delete styleRule.subtitle;
-
-                var computedStyle = styleRule.computedStyle;
-                delete styleRule.computedStyle;
-
-                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);
-                if (computedStyle)
-                    section.disabledComputedProperties = disabledComputedProperties;
-                section.pane = this;
-
-                if (Preferences.styleRulesExpandedState && section.identifier in Preferences.styleRulesExpandedState)
-                    section.expanded = Preferences.styleRulesExpandedState[section.identifier];
-                else if (computedStyle)
-                    section.collapse(true);
-                else
-                    section.expand(true);
-
-                body.appendChild(section.element);
-                this.sections.push(section);
-            }
-        }
-    }
-}
-
-WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
-
-WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)
-{
-    WebInspector.PropertiesSection.call(this, styleRule.selectorText);
-
-    this.styleRule = styleRule;
-    this.computedStyle = computedStyle;
-    this.editable = (editable && !computedStyle);
-
-    // Prevent editing the user agent and user rules.
-    var isUserAgent = this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode && !this.styleRule.parentStyleSheet.href;
-    var isUser = this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.ownerNode && this.styleRule.parentStyleSheet.ownerNode.nodeName == '#document';
-    if (isUserAgent || isUser)
-        this.editable = false;
-
-    this._usedProperties = usedProperties;
-
-    if (computedStyle) {
-        this.element.addStyleClass("computed-style");
-
-        if (Preferences.showInheritedComputedStyleProperties)
-            this.element.addStyleClass("show-inherited");
-
-        var showInheritedLabel = document.createElement("label");
-        var showInheritedInput = document.createElement("input");
-        showInheritedInput.type = "checkbox";
-        showInheritedInput.checked = Preferences.showInheritedComputedStyleProperties;
-
-        var computedStyleSection = this;
-        var showInheritedToggleFunction = function(event) {
-            Preferences.showInheritedComputedStyleProperties = showInheritedInput.checked;
-            if (Preferences.showInheritedComputedStyleProperties)
-                computedStyleSection.element.addStyleClass("show-inherited");
-            else
-                computedStyleSection.element.removeStyleClass("show-inherited");
-            event.stopPropagation();
-        };
-
-        showInheritedLabel.addEventListener("click", showInheritedToggleFunction, false);
-
-        showInheritedLabel.appendChild(showInheritedInput);
-        showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited")));
-        this.subtitleElement.appendChild(showInheritedLabel);
-    } else {
-        if (!subtitle) {
-            if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) {
-                var url = this.styleRule.parentStyleSheet.href;
-                subtitle = WebInspector.linkifyURL(url, WebInspector.displayNameForURL(url));
-                this.subtitleElement.addStyleClass("file");
-            } else if (isUserAgent)
-                subtitle = WebInspector.UIString("user agent stylesheet");
-            else if (isUser)
-                subtitle = WebInspector.UIString("user stylesheet");
-            else
-                subtitle = WebInspector.UIString("inline stylesheet");
-        }
-
-        this.subtitle = subtitle;
-    }
-
-    this.identifier = styleRule.selectorText;
-    if (this.subtitle)
-        this.identifier += ":" + this.subtitleElement.textContent;
-}
-
-WebInspector.StylePropertiesSection.prototype = {
-    get usedProperties()
-    {
-        return this._usedProperties || {};
-    },
-
-    set usedProperties(x)
-    {
-        this._usedProperties = x;
-        this.update();
-    },
-
-    expand: function(dontRememberState)
-    {
-        WebInspector.PropertiesSection.prototype.expand.call(this);
-        if (dontRememberState)
-            return;
-
-        if (!Preferences.styleRulesExpandedState)
-            Preferences.styleRulesExpandedState = {};
-        Preferences.styleRulesExpandedState[this.identifier] = true;
-    },
-
-    collapse: function(dontRememberState)
-    {
-        WebInspector.PropertiesSection.prototype.collapse.call(this);
-        if (dontRememberState)
-            return;
-
-        if (!Preferences.styleRulesExpandedState)
-            Preferences.styleRulesExpandedState = {};
-        Preferences.styleRulesExpandedState[this.identifier] = false;
-    },
-
-    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) && !(property in this.disabledComputedProperties);
-    },
-
-    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 = getLonghandProperties(this.styleRule.style, 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()
-    {
-        var style = this.styleRule.style;
-
-        var foundShorthands = {};
-        var uniqueProperties = getUniqueStyleProperties(style);
-        var disabledProperties = style.__disabledPropertyValues || {};
-
-        for (var name in disabledProperties)
-            uniqueProperties.push(name);
-
-        uniqueProperties.sort();
-
-        for (var i = 0; i < uniqueProperties.length; ++i) {
-            var name = uniqueProperties[i];
-            var disabled = name in disabledProperties;
-            if (!disabled && this.disabledComputedProperties && !(name in this.usedProperties) && name in this.disabledComputedProperties)
-                disabled = true;
-
-            var shorthand = !disabled ? style.getPropertyShorthand(name) : null;
-
-            if (shorthand && shorthand in foundShorthands)
-                continue;
-
-            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, disabled);
-            this.propertiesTreeOutline.appendChild(item);
-        }
-    }
-}
-
-WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
-
-WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded, disabled)
-{
-    this.style = style;
-    this.name = name;
-    this.shorthand = shorthand;
-    this._inherited = inherited;
-    this._overloaded = overloaded;
-    this._disabled = disabled;
-
-    // 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();
-    },
-
-    get disabled()
-    {
-        return this._disabled;
-    },
-
-    set disabled(x)
-    {
-        if (x === this._disabled)
-            return;
-        this._disabled = x;
-        this.updateState();
-    },
-
-    get priority()
-    {
-        if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)
-            return this.style.__disabledPropertyPriorities[this.name];
-        return (this.shorthand ? getShorthandPriority(this.style, this.name) : this.style.getPropertyPriority(this.name));
-    },
-
-    get value()
-    {
-        if (this.disabled && this.style.__disabledPropertyValues && this.name in this.style.__disabledPropertyValues)
-            return this.style.__disabledPropertyValues[this.name];
-        return (this.shorthand ? getShorthandValue(this.style, this.name) : this.style.getPropertyValue(this.name));
-    },
-
-    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.priority;
-        var value = this.value;
-        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 enabledCheckboxElement = document.createElement("input");
-        enabledCheckboxElement.className = "enabled-button";
-        enabledCheckboxElement.type = "checkbox";
-        enabledCheckboxElement.checked = !this.disabled;
-        enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
-
-        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();
-
-        // Append the checkbox for root elements of an editable section.
-        if (this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
-            this.listItemElement.appendChild(enabledCheckboxElement);
-        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 : "");
-    },
-
-    updateAll: function(updateAllRules)
-    {
-        if (updateAllRules && 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
-            this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
-    },
-
-    toggleEnabled: function(event)
-    {
-        var disabled = !event.target.checked;
-
-        if (disabled) {
-            if (!this.style.__disabledPropertyValues || !this.style.__disabledPropertyPriorities) {
-                var inspectedWindow = InspectorController.inspectedWindow();
-                this.style.__disabledProperties = new inspectedWindow.Object;
-                this.style.__disabledPropertyValues = new inspectedWindow.Object;
-                this.style.__disabledPropertyPriorities = new inspectedWindow.Object;
-            }
-
-            this.style.__disabledPropertyValues[this.name] = this.value;
-            this.style.__disabledPropertyPriorities[this.name] = this.priority;
-
-            if (this.shorthand) {
-                var longhandProperties = getLonghandProperties(this.style, this.name);
-                for (var i = 0; i < longhandProperties.length; ++i) {
-                    this.style.__disabledProperties[longhandProperties[i]] = true;
-                    this.style.removeProperty(longhandProperties[i]);
-                }
-            } else {
-                this.style.__disabledProperties[this.name] = true;
-                this.style.removeProperty(this.name);
-            }
-        } else {
-            this.style.setProperty(this.name, this.value, this.priority);
-            delete this.style.__disabledProperties[this.name];
-            delete this.style.__disabledPropertyValues[this.name];
-            delete this.style.__disabledPropertyPriorities[this.name];
-        }
-
-        // Set the disabled property here, since the code above replies on it not changing
-        // until after the value and priority are retrieved.
-        this.disabled = disabled;
-
-        if (this.treeOutline.section && this.treeOutline.section.pane)
-            this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
-
-        this.updateAll(true);
-    },
-
-    updateState: function()
-    {
-        if (!this.listItemElement)
-            return;
-
-        if (this.style.isPropertyImplicit(this.name) || this.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");
-
-        if (this.disabled)
-            this.listItemElement.addStyleClass("disabled");
-        else
-            this.listItemElement.removeStyleClass("disabled");
-    },
-
-    onpopulate: function()
-    {
-        // Only populate once and if this property is a shorthand.
-        if (this.children.length || !this.shorthand)
-            return;
-
-        var longhandProperties = getLonghandProperties(this.style, 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 (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutline.section && !this.treeOutline.section.editable))
-            return;
-
-        var context = { expanded: this.expanded, hasChildren: this.hasChildren };
-
-        // Lie about our children to prevent expanding on double click and to collapse shorthands.
-        this.hasChildren = false;
-
-        if (!selectElement)
-            selectElement = this.listItemElement;
-
-        this.listItemElement.handleKeyEvent = this.editingKeyDown.bind(this);
-
-        WebInspector.startEditing(this.listItemElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
-        window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
-    },
-
-    editingKeyDown: function(event)
-    {
-        var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
-        var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
-        if (!arrowKeyPressed && !pageKeyPressed)
-            return;
-
-        var selection = window.getSelection();
-        if (!selection.rangeCount)
-            return;
-
-        var selectionRange = selection.getRangeAt(0);
-        if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement))
-            return;
-
-        const styleValueDelimeters = " \t\n\"':;,/()";
-        var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement);
-        var wordString = wordRange.toString();
-        var replacementString = wordString;
-
-        var matches = /(.*?)(-?\d+(?:\.\d+)?)(.*)/.exec(wordString);
-        if (matches && matches.length) {
-            var prefix = matches[1];
-            var number = parseFloat(matches[2]);
-            var suffix = matches[3];
-
-            // If the number is near zero or the number is one and the direction will take it near zero.
-            var numberNearZero = (number < 1 && number > -1);
-            if (number === 1 && event.keyIdentifier === "Down")
-                numberNearZero = true;
-            else if (number === -1 && event.keyIdentifier === "Up")
-                numberNearZero = true;
-
-            if (numberNearZero && event.altKey && arrowKeyPressed) {
-                if (event.keyIdentifier === "Down")
-                    number = Math.ceil(number - 1);
-                else
-                    number = Math.floor(number + 1);
-            } else {
-                // Jump by 10 when shift is down or jump by 0.1 when near zero or Alt/Option is down.
-                // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
-                var changeAmount = 1;
-                if (event.shiftKey && pageKeyPressed)
-                    changeAmount = 100;
-                else if (event.shiftKey || pageKeyPressed)
-                    changeAmount = 10;
-                else if (event.altKey || numberNearZero)
-                    changeAmount = 0.1;
-
-                if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
-                    changeAmount *= -1;
-
-                // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
-                // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
-                number = Number((number + changeAmount).toFixed(6));
-            }
-
-            replacementString = prefix + number + suffix;
-        } else {
-            // FIXME: this should cycle through known keywords for the current property name.
-            return;
-        }
-
-        var replacementTextNode = document.createTextNode(replacementString);
-
-        wordRange.deleteContents();
-        wordRange.insertNode(replacementTextNode);
-
-        var finalSelectionRange = document.createRange();
-        finalSelectionRange.setStart(replacementTextNode, 0);
-        finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
-
-        selection.removeAllRanges();
-        selection.addRange(finalSelectionRange);
-
-        event.preventDefault();
-        event.handled = true;
-
-        if (!this.originalCSSText) {
-            // Remember the rule's original CSS text, so it can be restored
-            // if the editing is canceled and before each apply.
-            this.originalCSSText = getStyleTextWithShorthands(this.style);
-        } else {
-            // Restore the original CSS text before applying user changes. This is needed to prevent
-            // new properties from sticking around if the user adds one, then removes it.
-            this.style.cssText = this.originalCSSText;
-        }
-
-        this.applyStyleText(this.listItemElement.textContent);
-    },
-
-    editingEnded: function(context)
-    {
-        this.hasChildren = context.hasChildren;
-        if (context.expanded)
-            this.expand();
-        delete this.listItemElement.handleKeyEvent;
-        delete this.originalCSSText;
-    },
-
-    editingCancelled: function(element, context)
-    {
-        if (this.originalCSSText) {
-            this.style.cssText = this.originalCSSText;
-
-            if (this.treeOutline.section && this.treeOutline.section.pane)
-                this.treeOutline.section.pane.dispatchEventToListeners("style edited");
-
-            this.updateAll();
-        } else
-            this.updateTitle();
-
-        this.editingEnded(context);
-    },
-
-    editingCommitted: function(element, userInput, previousContent, context)
-    {
-        this.editingEnded(context);
-
-        if (userInput === previousContent)
-            return; // nothing changed, so do nothing else
-
-        this.applyStyleText(userInput, true);
-    },
-
-    applyStyleText: function(styleText, updateInterface)
-    {
-        var styleTextLength = styleText.trimWhitespace().length;
-
-        // Create a new element to parse the user input CSS.
-        var parseElement = document.createElement("span");
-        parseElement.setAttribute("style", styleText);
-
-        var tempStyle = parseElement.style;
-        if (tempStyle.length || !styleTextLength) {
-            // The input was parsable or the user deleted everything, so remove the
-            // original property from the real style declaration. If this represents
-            // a shorthand remove all the longhand properties.
-            if (this.shorthand) {
-                var longhandProperties = getLonghandProperties(this.style, this.name);
-                for (var i = 0; i < longhandProperties.length; ++i)
-                    this.style.removeProperty(longhandProperties[i]);
-            } else
-                this.style.removeProperty(this.name);
-        }
-
-        if (!styleTextLength) {
-            if (updateInterface) {
-                // The user deleted the everything, so remove the tree element and update.
-                if (this.treeOutline.section && this.treeOutline.section.pane)
-                    this.treeOutline.section.pane.update();
-                this.parent.removeChild(this);
-            }
-            return;
-        }
-
-        if (!tempStyle.length) {
-            // The user typed something, but it didn't parse. Just abort and restore
-            // the original title for this property.
-            if (updateInterface)
-                this.updateTitle();
-            return;
-        }
-
-        // 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 = getUniqueStyleProperties(tempStyle);
-        for (var i = 0; i < uniqueProperties.length; ++i) {
-            var name = uniqueProperties[i];
-            var shorthand = tempStyle.getPropertyShorthand(name);
-
-            if (shorthand && shorthand in foundShorthands)
-                continue;
-
-            if (shorthand) {
-                var value = getShorthandValue(tempStyle, shorthand);
-                var priority = getShorthandPriority(tempStyle, shorthand);
-                foundShorthands[shorthand] = true;
-            } else {
-                var value = tempStyle.getPropertyValue(name);
-                var priority = tempStyle.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.dispatchEventToListeners("style edited");
-
-        if (updateInterface)
-            this.updateAll(true);
-    }
-}
-
-WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototype;