On Linux, move the passing of filedescriptors to a dedicated socketpair().

chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.
@@ skipping 42 matching lines @@
 
         var body = this.bodyElement;
         if (!refresh || !node) {
             body.removeChildren();
             this.sections = [];
         }
 
         if (!node)
             return;
 
+        var self = this;
+        var callback = function(styles) {
+            if (!styles)
+                return;
+            node._setStyles(styles.computedStyle, styles.inlineStyle, styles.styleAttributes, styles.matchedCSSRules);
+            self._update(refresh, body, node, editedSection, forceUpdate);
+        };
+        InspectorController.getStyles(node.id, !Preferences.showUserAgentStyles, callback);
+    },
+
+    _update: function(refresh, body, node, editedSection, forceUpdate)
+    {
+        if (!refresh) {
+            body.removeChildren();
+            this.sections = [];
+        }
+
         var styleRules = [];
 
         if (refresh) {
             for (var i = 0; i < this.sections.length; ++i) {
                 var section = this.sections[i];
+                if (section._blank)
+                    continue;
                 if (section.computedStyle)
                     section.styleRule.style = node.ownerDocument.defaultView.getComputedStyle(node);
-                var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle };
+                var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule };
                 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 };
+            // Always Show element's Style Attributes
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: node.style, isAttribute: true };
                 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 });
+                    styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
                 }
             }
         }
 
         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;
+            if (styleRule.section && styleRule.section.noAffect)
+                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;
 
@@ skipping 34 matching lines @@
         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);
+                var uniqueProperties = style.uniqueStyleProperties;
                 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];
@@ skipping 20 matching lines @@
 
                 var computedStyle = styleRule.computedStyle;
                 delete styleRule.computedStyle;
 
                 var ruleUsedProperties = styleRule.usedProperties;
                 delete styleRule.usedProperties;
 
                 var editable = styleRule.editable;
                 delete styleRule.editable;
 
+                var isAttribute = styleRule.isAttribute;
+                delete styleRule.isAttribute;
+
                 // 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 if (isAttribute && styleRule.style.length === 0)
+                    section.collapse(true);
                 else
                     section.expand(true);
 
                 body.appendChild(section.element);
                 this.sections.push(section);
             }
+
+            this.addBlankSection();
         }
+    },
+
+    addBlankSection: function()
+    {
+        var blankSection = new WebInspector.BlankStylePropertiesSection();
+        blankSection.pane = this;
+
+        this.bodyElement.insertBefore(blankSection.element, this.bodyElement.firstChild.nextSibling.nextSibling); // 0 is computed, 1 is element.style
+        var computed = this.sections.shift();
+        var elementStyle = this.sections.shift();
+        this.sections.unshift(blankSection);
+        this.sections.unshift(elementStyle);
+        this.sections.unshift(computed);
+    },
+
+    appropriateSelectorForNode: function()
+    {
+        var node = this.node;
+        if (!node)
+            return;
+
+        var id = node.getAttribute("id");
+        if (id)
+            return "#" + id;
+
+        var className = node.getAttribute("class");
+        if (className)
+            return "." + className.replace(/\s+/, ".");
+
+        var nodeName = node.nodeName.toLowerCase();
+        if (nodeName === "input" && node.getAttribute("type"))
+            return nodeName + "[type=\"" + node.getAttribute("type") + "\"]";
+
+        return nodeName;
     }
 }
 
 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
 
 WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)
 {
     WebInspector.PropertiesSection.call(this, styleRule.selectorText);
+    this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);
+    this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);
+    this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);
 
     this.styleRule = styleRule;
+    this.rule = this.styleRule.rule;
     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';
+    var isUserAgent = this.rule && this.rule.isUserAgent;
+    var isUser = this.rule && this.rule.isUser;
+    var isViaInspector = this.rule && this.rule.isViaInspector;
+
     if (isUserAgent || isUser)
         this.editable = false;
 
     this._usedProperties = usedProperties;
 
     if (computedStyle) {
         this.element.addStyleClass("computed-style");
 
         if (Preferences.showInheritedComputedStyleProperties)
             this.element.addStyleClass("show-inherited");
@@ skipping 21 matching lines @@
     } 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 if (isViaInspector)
+                subtitle = WebInspector.UIString("via inspector");
             else
                 subtitle = WebInspector.UIString("inline stylesheet");
         }
 
         this.subtitle = subtitle;
     }
 
     this.identifier = styleRule.selectorText;
     if (this.subtitle)
-        this.identifier += ":" + this.subtitleElement.textContent;
+        this.identifier += ":" + this.subtitleElement.textContent;    
 }
 
 WebInspector.StylePropertiesSection.prototype = {
     get usedProperties()
     {
         return this._usedProperties || {};
     },
 
     set usedProperties(x)
     {
         this._usedProperties = x;
         this.update();
     },
 
     expand: function(dontRememberState)
     {
+        if (this._blank)
+            return;
+
         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)
+        if (!this.computedStyle || !this._usedProperties || this.noAffect)
             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)
+        if (this.computedStyle || !this._usedProperties || this.noAffect)
             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);
+        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;
     },
 
+    isInspectorStylesheet: function()
+    {
+        return (this.styleRule.parentStyleSheet === WebInspector.panels.elements.stylesheet);
+    },
+
     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);
             }
         }
+
+        if (this._afterUpdate) {
+            this._afterUpdate(this);
+            delete this._afterUpdate;
+        }
     },
 
     onpopulate: function()
     {
         var style = this.styleRule.style;
 
         var foundShorthands = {};
-        var uniqueProperties = getUniqueStyleProperties(style);
+        var uniqueProperties = style.uniqueStyleProperties;
         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);
+            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, isShorthand, inherited, overloaded, disabled);
             this.propertiesTreeOutline.appendChild(item);
         }
+    },
+
+    findTreeElementWithName: function(name)
+    {
+        var treeElement = this.propertiesTreeOutline.children[0];
+        while (treeElement) {
+            if (treeElement.name === name)
+                return treeElement;
+            treeElement = treeElement.traverseNextTreeElement(true, null, true);
+        }
+        return null;
+    },
+
+    addNewBlankProperty: function()
+    {
+        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, this.styleRule.style, "", false, false, false, false);
+        this.propertiesTreeOutline.appendChild(item);
+        item.listItemElement.textContent = "";
+        item._newProperty = true;
+        return item;
+    },
+
+    _dblclickEmptySpace: function(event)
+    {
+        this.expand();
+        this.addNewBlankProperty().startEditing();
+    },
+
+    _dblclickSelector: function(event)
+    {
+        if (!this.editable)
+            return;
+
+        if (!this.rule && this.propertiesTreeOutline.children.length === 0) {
+            this.expand();
+            this.addNewBlankProperty().startEditing();
+            return;
+        }
+
+        if (!this.rule)
+            return;
+
+        this.startEditingSelector();
+        event.stopPropagation();
+    },
+
+    startEditingSelector: function()
+    {
+        var element = this.titleElement;
+        if (WebInspector.isBeingEdited(element))
+            return;
+
+        var context = this.styleRule.selectorText;
+        WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), context);
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    },
+
+    editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
+    {
+        function moveToNextIfNeeded() {
+            if (!moveDirection || moveDirection !== "forward")
+                return;
+
+            this.expand();
+            if (this.propertiesTreeOutline.children.length === 0)
+                this.addNewBlankProperty().startEditing();
+            else {
+                var item = this.propertiesTreeOutline.children[0]
+                item.startEditing(item.valueElement);
+            }
+        }
+
+        if (newContent === oldContent)
+            return moveToNextIfNeeded.call(this);
+
+        var self = this;
+        var callback = function(result) {
+            if (!result) {
+                // Invalid Syntax for a Selector
+                self.editingSelectorCancelled(element, context);
+                moveToNextIfNeeded.call(self);
+                return;
+            }
+
+            var newRulePayload = result[0];
+            var doesAffectSelectedNode = result[1];
+            if (!doesAffectSelectedNode) {
+                self.noAffect = true;
+                self.element.addStyleClass("no-affect");
+            } else {
+                delete self.noAffect;
+                self.element.removeStyleClass("no-affect");
+            }
+
+            var newRule = WebInspector.CSSStyleDeclaration.parseRule(newRulePayload);
+            self.rule = newRule;
+            self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRule };
+            var oldIdentifier = this.identifier;
+            self.identifier = newRule.selectorText + ":" + self.subtitleElement.textContent;
+            self.pane.update(null, true);
+            WebInspector.panels.elements.renameSelector(oldIdentifier, this.identifier, oldContent, newContent);
+            moveToNextIfNeeded.call(self);
+        };
+
+        InspectorController.applyStyleRuleText(this.rule.id, newContent, this.pane.node.id, callback);
+    },
+
+    editingSelectorCancelled: function(element, context)
+    {
+        element.textContent = context;
     }
 }
 
 WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
 
-WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded, disabled)
+WebInspector.BlankStylePropertiesSection = function()
 {
+    WebInspector.PropertiesSection.call(this, WebInspector.UIString("Double-Click to Add"), null);
+
+    this._blank = true;
+    this._dblclickListener = this._dblclick.bind(this);
+    this.element.addStyleClass("blank-section");
+    this.titleElement.addStyleClass("blank-title");
+    this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);
+    this.titleElement.addEventListener("dblclick", this._dblclickListener, false);
+}
+
+WebInspector.BlankStylePropertiesSection.prototype = {
+    _dblclick: function(event)
+    {
+        this.startEditing();
+    },
+
+    startEditing: function()
+    {
+        var element = this.titleElement;
+        if (WebInspector.isBeingEdited(element))
+            return;
+
+        this.titleElement.textContent = this.pane.appropriateSelectorForNode();
+        this.titleElement.removeStyleClass("blank-title");
+        WebInspector.startEditing(this.titleElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), "");
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    },
+
+    editingCancelled: function()
+    {
+        this.titleElement.textContent = WebInspector.UIString("Double-Click to Add");
+        this.titleElement.addStyleClass("blank-title");
+    },
+
+    editingCommitted: function(element, newContent, oldContent, context)
+    {
+        var self = this;
+        var callback = function(result) {
+            if (!result) {
+                // Invalid Syntax for a Selector
+                self.editingCancelled();
+                return;
+            }
+            var styleRule = result[0];
+            var doesSelectorAffectSelectedNode = result[1];
+            self.makeNormal(WebInspector.CSSStyleDeclaration.parseRule(styleRule));
+
+            if (!doesSelectorAffectSelectedNode) {
+                self.noAffect = true;
+                self.element.addStyleClass("no-affect");
+            }
+
+            self.subtitleElement.textContent = WebInspector.UIString("via inspector");
+            self.expand();
+
+            self.pane.addBlankSection();
+            self.addNewBlankProperty().startEditing();
+        };
+        InspectorController.addStyleSelector(newContent, this.pane.node.id, callback);
+    },
+
+    makeNormal: function(styleRule)
+    {
+        this.titleElement.removeEventListener("dblclick", this._dblclickListener, false);
+        this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);
+        this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);
+        this.element.removeStyleClass("blank-section");
+        delete this._blank;
+        delete this._dblclick;
+        delete this.startEditing;
+        delete this.editingCancelled;
+        delete this.editingCommitted;
+        delete this._dblclickListener;
+        delete this.makeNormal;
+        this.styleRule = styleRule;
+        this.rule = styleRule.rule;
+        this.computedStyle = false;
+        this.editable = true;
+        this.identifier = styleRule.selectorText + ":inspector";
+        // leftovers are: this.noAffect if applicable
+    }
+}
+
+WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;
+
+WebInspector.StylePropertyTreeElement = function(styleRule, style, name, shorthand, inherited, overloaded, disabled)
+{
+    this._styleRule = styleRule;
     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);
 }
@@ skipping 35 matching lines @@
         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));
+        return (this.shorthand ? this.style.getShorthandPriority(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));
+        return (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
     },
 
     onattach: function()
     {
         this.updateTitle();
     },
 
     updateTitle: function()
     {
         // "Nicknames" for some common values that are easier to read.
@@ skipping 43 matching lines @@
 
         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;
+        this.nameElement = nameElement;
 
         var valueElement = document.createElement("span");
         valueElement.className = "value";
         valueElement.innerHTML = htmlValue;
+        this.valueElement = valueElement;
 
         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 only covers W3C and CSS 16 valid color names
-            var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow/g);
+            var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow|transparent/g);
+            var swatch;
             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);
+                    swatch = swatchElement;
+                }
+            }
+
+            // Rotate through Color Representations by Clicking on the Swatch
+            // Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> ...
+            // Advanced: rgba -> hsla -> nickname? -> ...            
+            if (colors && colors.length === 1) {
+                try {
+                    var color = new WebInspector.Color(htmlValue);
+                } catch(e) {
+                    var color = null;
+                }
+
+                if (color) {
+                    swatch.addEventListener("click", changeColorDisplay, false);
+                    swatch.addEventListener("dblclick", function(event) {
+                        event.stopPropagation();
+                    }, false);
+
+                    var mode = color.mode;
+                    var valueElement = this.valueElement;
+                    function changeColorDisplay(event) {
+
+                        function changeTo(newMode, content) {
+                            mode = newMode;
+                            valueElement.textContent = content;
+                        }
+
+                        switch (mode) {
+                            case "rgb":
+                                changeTo("hsl", color.toHsl());
+                                break;
+
+                            case "shorthex":
+                                changeTo("hex", color.toHex());
+                                break;
+
+                            case "hex":
+                                changeTo("rgb", color.toRgb());
+                                break;
+
+                            case "nickname":
+                                if (color.simple) {
+                                    if (color.hasShortHex())
+                                        changeTo("shorthex", color.toShortHex());
+                                    else
+                                        changeTo("hex", color.toHex());
+                                } else
+                                    changeTo("rgba", color.toRgba());
+                                break;
+
+                            case "hsl":
+                                if (color.nickname)
+                                    changeTo("nickname", color.toNickname());
+                                else if (color.hasShortHex())
+                                    changeTo("shorthex", color.toShortHex());
+                                else
+                                    changeTo("hex", color.toHex());
+                                break;
+
+                            case "rgba":
+                                changeTo("hsla", color.toHsla());
+                                break;
+
+                            case "hsla":
+                                if (color.nickname)
+                                    changeTo("nickname", color.toNickname());
+                                else
+                                    changeTo("rgba", color.toRgba());
+                                break;
+                        }
+                    }
                 }
             }
         }
 
         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;
-            }
+        var self = this;
+        var callback = function(newPayload) {
+            if (!newPayload)
+                return;
 
-            this.style.__disabledPropertyValues[this.name] = this.value;
-            this.style.__disabledPropertyPriorities[this.name] = this.priority;
+            self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);
+            self._styleRule.style = self.style;
 
-            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.
+            self.disabled = disabled;
 
-        // 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 (self.treeOutline.section && self.treeOutline.section.pane)
+                self.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
 
-        if (this.treeOutline.section && this.treeOutline.section.pane)
-            this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
-
-        this.updateAll(true);
+            self.updateAll(true);
+        };
+        InspectorController.toggleStyleEnabled(this.style.id, this.name, disabled, callback);
     },
 
     updateState: function()
     {
         if (!this.listItemElement)
             return;
 
         if (this.style.isPropertyImplicit(this.name) || this.value === "initial")
             this.listItemElement.addStyleClass("implicit");
         else
@@ skipping 14 matching lines @@
         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);
+        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);
+            var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, name, false, inherited, overloaded);
             this.appendChild(item);
         }
     },
 
     ondblclick: function(element, event)
     {
         this.startEditing(event.target);
+        event.stopPropagation();
     },
 
     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;
@@ skipping 86 matching lines @@
 
         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);
+            this.originalCSSText = this.style.styleTextWithShorthands();
         } 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;
+            InspectorController.setStyleText(this.style.id, 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._newProperty)
+            this.treeOutline.removeChild(this);
+        else if (this.originalCSSText) {
+            InspectorController.setStyleText(this.style.id, 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)
+    editingCommitted: function(element, userInput, previousContent, context, moveDirection)
     {
         this.editingEnded(context);
 
-        if (userInput === previousContent)
-            return; // nothing changed, so do nothing else
+        // Determine where to move to before making changes
+        var newProperty, moveToPropertyName, moveToSelector;
+        var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling);
+        if (moveTo)
+            moveToPropertyName = moveTo.name;
+        else if (moveDirection === "forward")
+            newProperty = true;
+        else if (moveDirection === "backward" && this.treeOutline.section.rule)
+            moveToSelector = true;
 
-        this.applyStyleText(userInput, true);
+        // Make the Changes and trigger the moveToNextCallback after updating
+        var blankInput = /^\s*$/.test(userInput);
+        if (userInput !== previousContent || (this._newProperty && blankInput)) { // only if something changed, or adding a new style and it was blank
+            this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput);
+            this.applyStyleText(userInput, true);
+        } else
+            moveToNextCallback(this._newProperty, false, this.treeOutline.section, false);
+
+        // The Callback to start editing the next property
+        function moveToNextCallback(alreadyNew, valueChanged, section) {
+            if (!moveDirection)
+                return;
+
+            // User just tabbed through without changes
+            if (moveTo && moveTo.parent) {
+                moveTo.startEditing(moveTo.valueElement);
+                return;
+            }
+
+            // User has made a change then tabbed, wiping all the original treeElements,
+            // recalculate the new treeElement for the same property we were going to edit next
+            if (moveTo && !moveTo.parent) {
+                var treeElement = section.findTreeElementWithName(moveToPropertyName);
+                if (treeElement)
+                    treeElement.startEditing(treeElement.valueElement);
+                return;
+            }
+
+            // Create a new attribute in this section
+            if (newProperty) {
+                if (alreadyNew && !valueChanged)
+                    return;
+
+                var item = section.addNewBlankProperty();
+                item.startEditing();
+                return;
+            }
+
+            if (moveToSelector)
+                section.startEditingSelector();
+        }
     },
 
     applyStyleText: function(styleText, updateInterface)
     {
+        var section = this.treeOutline.section;
+        var elementsPanel = WebInspector.panels.elements;
         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();
+                // The user deleted everything, so remove the tree element and update.
+                if (!this._newProperty)
+                    delete section._afterUpdate;
+                if (section && section.pane)
+                    section.pane.update();
                 this.parent.removeChild(this);
+                elementsPanel.removeStyleChange(section.identifier, this.style, this.name);
             }
             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);
+        var self = this;
+        var callback = function(result) {
+            if (!result) {
+                // The user typed something, but it didn't parse. Just abort and restore
+                // the original title for this property.  If this was a new attribute and
+                // we couldn't parse, then just remove it.
+                if (self._newProperty) {
+                    self.parent.removeChild(self);
+                    return;
+                }
+                if (updateInterface)
+                    self.updateTitle();
+                return;
             }
 
-            // Set the property on the real style declaration.
-            this.style.setProperty((shorthand || name), value, priority);
-        }
+            var newPayload = result[0];
+            var changedProperties = result[1];
+            elementsPanel.removeStyleChange(section.identifier, self.style, self.name);
 
-        if (this.treeOutline.section && this.treeOutline.section.pane)
-            this.treeOutline.section.pane.dispatchEventToListeners("style edited");
+            self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);
+            for (var i = 0; i < changedProperties.length; ++i)
+                elementsPanel.addStyleChange(section.identifier, self.style, changedProperties[i]);
+            self._styleRule.style = self.style;
+            if (section && section.pane)
+                section.pane.dispatchEventToListeners("style edited");
 
-        if (updateInterface)
-            this.updateAll(true);
+            if (updateInterface)
+                self.updateAll(true);
+
+            if (!self.rule)
+                WebInspector.panels.elements.treeOutline.update();
+        };
+        InspectorController.applyStyleText(this.style.id, styleText.trimWhitespace(), this.name, callback);
     }
 }
 
 WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototype;