Web Inspector: Color picker should not be available in Computed Styles pane
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Feb 2013 14:01:54 +0000 (14:01 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Feb 2013 14:01:54 +0000 (14:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=109697

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-18
Reviewed by Pavel Feldman.

Source/WebCore:

Refactored PropertiesSection and TreeElement inheritors in StylesSidebarPane.js for cleaner separation
of read-only and editable properties.

* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection.prototype.onpopulate):
(WebInspector.StylePropertiesSection.prototype.addNewBlankProperty):
(WebInspector.ComputedStylePropertiesSection):
(WebInspector.ComputedStylePropertiesSection.prototype.onpopulate):
(WebInspector.BlankStylePropertiesSection):
(WebInspector.StylePropertyTreeElementBase):
(WebInspector.StylePropertyTreeElementBase.prototype.node):
(WebInspector.StylePropertyTreeElementBase.prototype.editablePane):
(WebInspector.StylePropertyTreeElementBase.prototype.onattach):
(WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.linkifyURL):
(WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.):
(WebInspector.StylePropertyTreeElementBase.prototype):
(.event):
(.isRevert):

LayoutTests:

* inspector/styles/undo-add-property.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@143207 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/inspector/styles/undo-add-property.html
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/StylesSidebarPane.js

index f278ac0079aad7eedc539aae8536364f979ab07b..0891b4748157d5cbae2947c082bf1ccda8dbf424 100644 (file)
@@ -1,3 +1,12 @@
+2013-02-18  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Color picker should not be available in Computed Styles pane
+        https://bugs.webkit.org/show_bug.cgi?id=109697
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/styles/undo-add-property.html:
+
 2013-02-18  Andrey Adaikin  <aandrey@chromium.org>
 
         Web Inspector: [Canvas] group replay log calls by frames
index f815014e437bcaf5efcce9424a643d8cc2f5adec..dd1d31c3fedede3bded9b21680d7f334eb7e4ff7 100644 (file)
@@ -40,7 +40,7 @@ function test()
         InspectorTest.dumpSelectedElementStyles(true);
 
         var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("font-weight");
-        var treeElement = treeItem.section.addNewBlankProperty(index);
+        var treeElement = treeItem.section().addNewBlankProperty(index);
         treeElement.applyStyleText(propertyText, true, true);
         InspectorTest.waitForStyles("container", step1);
 
index 1927acac7d9d526ac4b30e4a262074a01e0f3344..4c88e1a9fe1470f25bd7df2b061bf8ebd5292e21 100644 (file)
@@ -1,3 +1,29 @@
+2013-02-18  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Color picker should not be available in Computed Styles pane
+        https://bugs.webkit.org/show_bug.cgi?id=109697
+
+        Reviewed by Pavel Feldman.
+
+        Refactored PropertiesSection and TreeElement inheritors in StylesSidebarPane.js for cleaner separation
+        of read-only and editable properties.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertiesSection.prototype.onpopulate):
+        (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty):
+        (WebInspector.ComputedStylePropertiesSection):
+        (WebInspector.ComputedStylePropertiesSection.prototype.onpopulate):
+        (WebInspector.BlankStylePropertiesSection):
+        (WebInspector.StylePropertyTreeElementBase):
+        (WebInspector.StylePropertyTreeElementBase.prototype.node):
+        (WebInspector.StylePropertyTreeElementBase.prototype.editablePane):
+        (WebInspector.StylePropertyTreeElementBase.prototype.onattach):
+        (WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.linkifyURL):
+        (WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.):
+        (WebInspector.StylePropertyTreeElementBase.prototype):
+        (.event):
+        (.isRevert):
+
 2013-02-18  Andrey Adaikin  <aandrey@chromium.org>
 
         Web Inspector: [Canvas] group replay log calls by frames
index 4ce3c115ed590f6877d308a46cc4ed624df93ef9..0b3ebbd94f0959fdc07e7f67b02b33e252e2bcc7 100644 (file)
@@ -1040,7 +1040,7 @@ WebInspector.StylePropertiesSection.prototype = {
                 var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
                 var inherited = this.isPropertyInherited(property.name);
                 var overloaded = property.inactive || this.isPropertyOverloaded(property.name);
-                var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
+                var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
                 this.propertiesTreeOutline.appendChild(item);
             }
             return;
@@ -1074,7 +1074,7 @@ WebInspector.StylePropertiesSection.prototype = {
                 // Generate synthetic shorthand we have a value for.
                 var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), "", "style", true, true, undefined);
                 var overloaded = property.inactive || this.isPropertyOverloaded(property.name, true);
-                var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, shorthandProperty,  /* isShorthand */ true, /* inherited */ false, overloaded);
+                var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, shorthandProperty,  /* isShorthand */ true, /* inherited */ false, overloaded);
                 this.propertiesTreeOutline.appendChild(item);
                 generatedShorthands[shorthand] = shorthandProperty;
                 shorthandPropertyAvailable = true;
@@ -1084,7 +1084,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
             var inherited = this.isPropertyInherited(property.name);
             var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand);
-            var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
+            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
     },
@@ -1158,7 +1158,7 @@ WebInspector.StylePropertiesSection.prototype = {
     {
         var style = this.styleRule.style;
         var property = style.newBlankProperty(index);
-        var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, false, false, false);
+        var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, false, false, false);
         index = property.index;
         this.propertiesTreeOutline.insertChild(item, index);
         item.listItemElement.textContent = "";
@@ -1347,16 +1347,16 @@ WebInspector.StylePropertiesSection.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.PropertiesSection}
- * @param {!WebInspector.StylesSidebarPane} parentPane
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {!Object} styleRule
  * @param {!Object.<string, boolean>} usedProperties
  */
-WebInspector.ComputedStylePropertiesSection = function(parentPane, styleRule, usedProperties)
+WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, usedProperties)
 {
     WebInspector.PropertiesSection.call(this, "");
     this.headerElement.addStyleClass("hidden");
     this.element.className = "styles-section monospace first-styles-section read-only computed-style";
-    this._parentPane = parentPane;
+    this._stylesPane = stylesPane;
     this.styleRule = styleRule;
     this._usedProperties = usedProperties;
     this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
@@ -1366,11 +1366,6 @@ WebInspector.ComputedStylePropertiesSection = function(parentPane, styleRule, us
 }
 
 WebInspector.ComputedStylePropertiesSection.prototype = {
-    get pane()
-    {
-        return this._parentPane;
-    },
-
     collapse: function(dontRememberState)
     {
         // Overriding with empty body.
@@ -1415,7 +1410,7 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
         for (var i = 0; i < uniqueProperties.length; ++i) {
             var property = uniqueProperties[i];
             var inherited = this._isPropertyInherited(property.name);
-            var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, false, inherited, false);
+            var item = new WebInspector.ComputedStylePropertyTreeElement(this._stylesPane, this.styleRule, style, property, inherited);
             this.propertiesTreeOutline.appendChild(item);
             this._propertyTreeElements[property.name] = item;
         }
@@ -1470,10 +1465,12 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.StylePropertiesSection}
+ * @param {WebInspector.StylesSidebarPane} stylesPane
+ * @param {string} defaultSelectorText
  */
-WebInspector.BlankStylePropertiesSection = function(parentPane, defaultSelectorText)
+WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText)
 {
-    WebInspector.StylePropertiesSection.call(this, parentPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
+    WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
     this.element.addStyleClass("blank-section");
 }
 
@@ -1549,33 +1546,44 @@ WebInspector.BlankStylePropertiesSection.prototype = {
 /**
  * @constructor
  * @extends {TreeElement}
- * @param {WebInspector.StylePropertiesSection|WebInspector.ComputedStylePropertiesSection} section
- * @param {?WebInspector.StylesSidebarPane} parentPane
  * @param {Object} styleRule
  * @param {WebInspector.CSSStyleDeclaration} style
  * @param {WebInspector.CSSProperty} property
- * @param {boolean} isShorthand
  * @param {boolean} inherited
  * @param {boolean} overloaded
+ * @param {boolean} hasChildren
  */
-WebInspector.StylePropertyTreeElement = function(section, parentPane, styleRule, style, property, isShorthand, inherited, overloaded)
+WebInspector.StylePropertyTreeElementBase = function(styleRule, style, property, inherited, overloaded, hasChildren)
 {
-    this.section = section;
-    this._parentPane = parentPane;
     this._styleRule = styleRule;
     this.style = style;
     this.property = property;
-    this.isShorthand = isShorthand;
     this._inherited = inherited;
     this._overloaded = overloaded;
 
     // Pass an empty title, the title gets made later in onattach.
-    TreeElement.call(this, "", null, isShorthand);
+    TreeElement.call(this, "", null, hasChildren);
 
     this.selectable = false;
 }
 
-WebInspector.StylePropertyTreeElement.prototype = {
+WebInspector.StylePropertyTreeElementBase.prototype = {
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    node: function()
+    {
+        return null;  // Overridden by ancestors.
+    },
+
+    /**
+     * @return {?WebInspector.StylesSidebarPane}
+     */
+    editablePane: function()
+    {
+        return null;  // Overridden by ancestors.
+    },
+
     get inherited()
     {
         return this._inherited;
@@ -1652,27 +1660,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
     onattach: function()
     {
         this.updateTitle();
-        this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
-        this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
-        this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
-    },
-
-    _mouseDown: function(event)
-    {
-        if (this._parentPane) {
-            this._parentPane._mouseDownTreeElement = this;
-            this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
-            this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
-        }
-    },
-
-    _resetMouseDownElement: function()
-    {
-        if (this._parentPane) {
-            delete this._parentPane._mouseDownTreeElement;
-            delete this._parentPane._mouseDownTreeElementIsName;
-            delete this._parentPane._mouseDownTreeElementIsValue;
-        }
     },
 
     updateTitle: function()
@@ -1681,15 +1668,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         this.updateState();
 
-        var enabledCheckboxElement;
-        if (this.parsedOk) {
-            enabledCheckboxElement = document.createElement("input");
-            enabledCheckboxElement.className = "enabled-button";
-            enabledCheckboxElement.type = "checkbox";
-            enabledCheckboxElement.checked = !this.disabled;
-            enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
-        }
-
         var nameElement = document.createElement("span");
         nameElement.className = "webkit-css-property";
         nameElement.textContent = this.name;
@@ -1739,8 +1717,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 container.appendChild(document.createTextNode("url("));
                 if (self._styleRule.sourceURL)
                     hrefUrl = WebInspector.ParsedURL.completeURL(self._styleRule.sourceURL, hrefUrl);
-                else if (self._parentPane.node)
-                    hrefUrl = self._parentPane.node.resolveURL(hrefUrl);
+                else if (self.node())
+                    hrefUrl = self.node().resolveURL(hrefUrl);
                 var hasResource = !!WebInspector.resourceForURL(hrefUrl);
                 // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
                 container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl, url, undefined, !hasResource));
@@ -1752,13 +1730,12 @@ WebInspector.StylePropertyTreeElement.prototype = {
             {
                 var color = WebInspector.Color.parse(text);
 
-                // We can be called with valid non-color values of |text| (like 'none' from border style) 
-                if (!color) 
+                // We can be called with valid non-color values of |text| (like 'none' from border style)
+                if (!color)
                     return document.createTextNode(text);
-                
+
                 var format = getFormat();
-                var hasSpectrum = self._parentPane;
-                var spectrumHelper = hasSpectrum ? self._parentPane._spectrumHelper : null;
+                var spectrumHelper = self.editablePane() && self.editablePane()._spectrumHelper;
                 var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null;
 
                 var colorSwatch = new WebInspector.ColorSwatch();
@@ -1787,7 +1764,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                     spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
                     spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
 
-                    delete self._parentPane._isEditingStyle;
+                    delete self.editablePane()._isEditingStyle;
                     delete self.originalPropertyText;
                 }
 
@@ -1808,7 +1785,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                         if (visible) {
                             spectrum.displayText = color.toString(format);
                             self.originalPropertyText = self.property.propertyText;
-                            self._parentPane._isEditingStyle = true;
+                            self.editablePane()._isEditingStyle = true;
                             spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
                             spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
 
@@ -1917,9 +1894,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!this.treeOutline)
             return;
 
-        // Append the checkbox for root elements of an editable section.
-        if (enabledCheckboxElement && this.treeOutline.section && this.parent.root && !this.section.computedStyle)
-            this.listItemElement.appendChild(enabledCheckboxElement);
         this.listItemElement.appendChild(nameElement);
         this.listItemElement.appendChild(document.createTextNode(": "));
         this.listItemElement.appendChild(this._expandElement);
@@ -1938,10 +1912,118 @@ WebInspector.StylePropertyTreeElement.prototype = {
             this.listItemElement.addStyleClass("inactive");
     },
 
+    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");
+    },
+
+    __proto__: TreeElement.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StylePropertyTreeElementBase}
+ * @param {WebInspector.StylesSidebarPane} stylesPane
+ * @param {Object} styleRule
+ * @param {WebInspector.CSSStyleDeclaration} style
+ * @param {WebInspector.CSSProperty} property
+ * @param {boolean} inherited
+ */
+WebInspector.ComputedStylePropertyTreeElement = function(stylesPane, styleRule, style, property, inherited)
+{
+    WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, false, false);
+    this._stylesPane = stylesPane;
+}
+
+WebInspector.ComputedStylePropertyTreeElement.prototype = {
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    node: function()
+    {
+        return this._stylesPane.node;
+    },
+
+    /**
+     * @return {?WebInspector.StylesSidebarPane}
+     */
+    editablePane: function()
+    {
+        return null;
+    },
+
+    __proto__: WebInspector.StylePropertyTreeElementBase.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StylePropertyTreeElementBase}
+ * @param {?WebInspector.StylesSidebarPane} stylesPane
+ * @param {Object} styleRule
+ * @param {WebInspector.CSSStyleDeclaration} style
+ * @param {WebInspector.CSSProperty} property
+ * @param {boolean} isShorthand
+ * @param {boolean} inherited
+ * @param {boolean} overloaded
+ */
+WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, style, property, isShorthand, inherited, overloaded)
+{
+    WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, overloaded, isShorthand);
+    this._parentPane = stylesPane;
+    this.isShorthand = isShorthand;
+}
+
+WebInspector.StylePropertyTreeElement.prototype = {
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    node: function()
+    {
+        return this._parentPane.node;
+    },
+
+    /**
+     * @return {?WebInspector.StylesSidebarPane}
+     */
+    editablePane: function()
+    {
+        return this._parentPane;
+    },
+
+    /**
+     * @return {WebInspector.StylePropertiesSection}
+     */
+    section: function()
+    {
+        return this.treeOutline && this.treeOutline.section;
+    },
+
     _updatePane: function(userCallback)
     {
-        if (this.treeOutline && this.treeOutline.section && this.treeOutline.section.pane)
-            this.treeOutline.section.pane._refreshUpdate(this.treeOutline.section, false, userCallback);
+        var section = this.section();
+        if (section && section.pane)
+            section.pane._refreshUpdate(section, false, userCallback);
         else  {
             if (userCallback)
                 userCallback();
@@ -1960,8 +2042,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
             this.style = newStyle;
             this._styleRule.style = newStyle;
 
-            if (this.treeOutline.section && this.treeOutline.section.pane)
-                this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
+            var section = this.section();
+            if (section && section.pane)
+                section.pane.dispatchEventToListeners("style property toggled");
 
             this._updatePane();
 
@@ -1973,32 +2056,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
         event.consume();
     },
 
-    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.
@@ -2009,16 +2066,17 @@ WebInspector.StylePropertyTreeElement.prototype = {
         for (var i = 0; i < longhandProperties.length; ++i) {
             var name = longhandProperties[i].name;
 
-            if (this.treeOutline.section) {
-                var inherited = this.treeOutline.section.isPropertyInherited(name);
-                var overloaded = this.treeOutline.section.isPropertyOverloaded(name);
+            var section = this.section();
+            if (section) {
+                var inherited = section.isPropertyInherited(name);
+                var overloaded = section.isPropertyOverloaded(name);
             }
 
             var liveProperty = this.style.getLiveProperty(name);
             if (!liveProperty)
                 continue;
 
-            var item = new WebInspector.StylePropertyTreeElement(this.section, this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded);
+            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded);
             this.appendChild(item);
         }
     },
@@ -2035,6 +2093,47 @@ WebInspector.StylePropertyTreeElement.prototype = {
         this.listItemElement.insertBefore(this.nameElement, this.listItemElement.firstChild);
     },
 
+    onattach: function()
+    {
+        WebInspector.StylePropertyTreeElementBase.prototype.onattach.call(this);
+
+        this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
+        this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
+        this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
+    },
+
+    _mouseDown: function(event)
+    {
+        if (this._parentPane) {
+            this._parentPane._mouseDownTreeElement = this;
+            this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
+            this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
+        }
+    },
+
+    _resetMouseDownElement: function()
+    {
+        if (this._parentPane) {
+            delete this._parentPane._mouseDownTreeElement;
+            delete this._parentPane._mouseDownTreeElementIsName;
+            delete this._parentPane._mouseDownTreeElementIsValue;
+        }
+    },
+
+    updateTitle: function()
+    {
+        WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this);
+
+        if (this.parsedOk && this.section() && this.parent.root) {
+            var enabledCheckboxElement = document.createElement("input");
+            enabledCheckboxElement.className = "enabled-button";
+            enabledCheckboxElement.type = "checkbox";
+            enabledCheckboxElement.checked = !this.disabled;
+            enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
+            this.listItemElement.appendChild(enabledCheckboxElement);
+        }
+    },
+
     _mouseClick: function(event)
     {
         if (!window.getSelection().isCollapsed)
@@ -2043,12 +2142,13 @@ WebInspector.StylePropertyTreeElement.prototype = {
         event.consume(true);
 
         if (event.target === this.listItemElement) {
-            if (!this.section.editable) 
+            var section = this.section();
+            if (!section || !section.editable)
                 return;
 
-            if (this.section._checkWillCancelEditing())
+            if (section._checkWillCancelEditing())
                 return;
-            this.section.addNewBlankProperty(this.property.index + 1).startEditing();
+            section.addNewBlankProperty(this.property.index + 1).startEditing();
             return;
         }
 
@@ -2074,7 +2174,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (selectElement === this._expandElement)
             return;
 
-        if (this.treeOutline.section && !this.treeOutline.section.editable)
+        var section = this.section();
+        if (section && !section.editable)
             return;
 
         if (!selectElement)
@@ -2330,8 +2431,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
         var isDataPasted = "originalName" in context;
         var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue);
         var shouldCommitNewProperty = this._newProperty && (moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
+        var section = this.section();
         if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
-            this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, this.treeOutline.section);
+            section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section);
             var propertyText;
             if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent)))
                 propertyText = "";
@@ -2345,7 +2447,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         } else {
             if (!isDataPasted && !this._newProperty)
                 this.updateTitle();
-            moveToNextCallback.call(this, this._newProperty, false, this.treeOutline.section);
+            moveToNextCallback.call(this, this._newProperty, false, section);
         }
 
         // The Callback to start editing the next/previous property/selector.
@@ -2445,7 +2547,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!this.treeOutline)
             return;
 
-        var section = this.treeOutline.section;
+        var section = this.section();
         styleText = styleText.replace(/\s/g, " ").trim(); // Replace &nbsp; with whitespace.
         var styleTextLength = styleText.length;
         if (!styleTextLength && updateInterface && !isRevert && this._newProperty && !this._hasBeenModifiedIncrementally()) {
@@ -2479,7 +2581,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
             if (section && section.pane)
                 section.pane.dispatchEventToListeners("style edited");
 
-            if (updateInterface && currentNode === section.pane.node) {
+            if (updateInterface && currentNode === this.node()) {
                 this._updatePane(userCallback);
                 return;
             }
@@ -2502,12 +2604,10 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
     isEventWithinDisclosureTriangle: function(event)
     {
-        if (!this.section.computedStyle)
-            return event.target === this._expandElement;
-        return TreeElement.prototype.isEventWithinDisclosureTriangle.call(this, event);
+        return event.target === this._expandElement;
     },
 
-    __proto__: TreeElement.prototype
+    __proto__: WebInspector.StylePropertyTreeElementBase.prototype
 }
 
 /**