DevTools: kill WebInspector.StylesSectionModel class

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
index ac172ffb331bdec1b9fd1d248ca3eccf1a605c3d..0a8fd48bad9491018d01196441de7c649f23b11a 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -334,10 +334,7 @@ WebInspector.StylesSidebarPane.prototype = {
             if (!matchedStyles || node !== this.node())
                 return null;
 
-            return {
-                matched: this._buildMatchedRulesSectionCascade(matchedStyles),
-                pseudo: this._buildPseudoCascades(matchedStyles)
-            };
+            return WebInspector.SectionCascade.fromMatchedStyles(matchedStyles);
         }
     },
 
@@ -433,8 +430,8 @@ WebInspector.StylesSidebarPane.prototype = {
         for (var pseudoType of pseudoTypes) {
             var block = WebInspector.SectionBlock.createPseudoTypeBlock(pseudoType);
             var cascade = cascades.pseudo.get(pseudoType);
-            for (var sectionModel of cascade.sectionModels()) {
-                var section = new WebInspector.StylePropertiesSection(this, sectionModel);
+            for (var style of cascade.styles()) {
+                var section = new WebInspector.StylePropertiesSection(this, cascade, style);
                 block.sections.push(section);
             }
             this._sectionBlocks.push(block);
@@ -455,25 +452,6 @@ WebInspector.StylesSidebarPane.prototype = {
     },
 
     /**
-     * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedResult
-     * @return {!Map<number, !WebInspector.SectionCascade>}
-     */
-    _buildPseudoCascades: function(matchedResult)
-    {
-        var pseudoCascades = new Map();
-        var pseudoStyles = matchedResult.pseudoStyles();
-        for (var pseudoType of pseudoStyles.keys()) {
-            var styles = pseudoStyles.get(pseudoType);
-            // Add rules in reverse order to match the cascade order.
-            var pseudoElementCascade = new WebInspector.SectionCascade();
-            for (var i = 0; i < styles.length; ++i)
-                pseudoElementCascade.appendModelFromStyle(styles[i], "");
-            pseudoCascades.set(pseudoType, pseudoElementCascade);
-        }
-        return pseudoCascades;
-    },
-
-    /**
      * @param {!WebInspector.DOMNode} node
      * @param {boolean} rebuild
      */
@@ -483,29 +461,6 @@ WebInspector.StylesSidebarPane.prototype = {
     },
 
     /**
-     * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedResult
-     * @return {!WebInspector.SectionCascade}
-     */
-    _buildMatchedRulesSectionCascade: function(matchedResult)
-    {
-        var cascade = new WebInspector.SectionCascade();
-
-        var nodeStyles = matchedResult.nodeStyles();
-        for (var i = 0; i < nodeStyles.length; ++i) {
-            var style = nodeStyles[i];
-            var node = matchedResult.nodeForStyle(style);
-            var inherited = matchedResult.isInherited(style);
-            var customSelectorText = "";
-            if (style.type === WebInspector.CSSStyleDeclaration.Type.Inline)
-                customSelectorText = inherited ? WebInspector.UIString("Style Attribute") : "element.style";
-            else if (style.type === WebInspector.CSSStyleDeclaration.Type.Attributes)
-                customSelectorText = node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("Attributes Style") + "]";
-            cascade.appendModelFromStyle(style, customSelectorText, inherited ? node : null);
-        }
-        return cascade;
-    },
-
-    /**
      * @param {!WebInspector.SectionCascade} matchedCascade
      * @return {!Array.<!WebInspector.SectionBlock>}
      */
@@ -513,15 +468,15 @@ WebInspector.StylesSidebarPane.prototype = {
     {
         var blocks = [new WebInspector.SectionBlock(null)];
         var lastParentNode = null;
-        for (var sectionModel of matchedCascade.sectionModels()) {
-            var parentNode = sectionModel.parentNode();
+        for (var style of matchedCascade.styles()) {
+            var parentNode = matchedCascade.isInherited(style) ? matchedCascade.nodeForStyle(style) : null;
             if (parentNode && parentNode !== lastParentNode) {
                 lastParentNode = parentNode;
                 var block = WebInspector.SectionBlock.createInheritedNodeBlock(lastParentNode);
                 blocks.push(block);
             }
 
-            var section = new WebInspector.StylePropertiesSection(this, sectionModel);
+            var section = new WebInspector.StylePropertiesSection(this, matchedCascade, style);
             blocks.peekLast().sections.push(section);
         }
         return blocks;
@@ -578,7 +533,7 @@ WebInspector.StylesSidebarPane.prototype = {
     {
         this.expand();
         var node = this.node();
-        var blankSection = new WebInspector.BlankStylePropertiesSection(this, node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "", styleSheetId, ruleLocation, insertAfterSection.styleRule);
+        var blankSection = new WebInspector.BlankStylePropertiesSection(this, insertAfterSection._cascade, node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "", styleSheetId, ruleLocation, insertAfterSection._style);
 
         this._sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
@@ -800,15 +755,17 @@ WebInspector.SectionBlock.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.StylesSidebarPane} parentPane
- * @param {!WebInspector.StylesSectionModel} styleRule
+ * @param {!WebInspector.SectionCascade} cascade
+ * @param {!WebInspector.CSSStyleDeclaration} style
  */
-WebInspector.StylePropertiesSection = function(parentPane, styleRule)
+WebInspector.StylePropertiesSection = function(parentPane, cascade, style)
 {
     this._parentPane = parentPane;
-    this.styleRule = styleRule;
-    this.editable = styleRule.editable();
+    this._style = style;
+    this._cascade = cascade;
+    this.editable = !!(style.styleSheetId && style.range);
 
-    var rule = styleRule.rule();
+    var rule = style.parentRule;
     this.element = createElementWithClass("div", "styles-section matched-styles monospace");
     this.element._section = this;
 
@@ -821,7 +778,7 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule)
 
     var selectorContainer = createElement("div");
     this._selectorElement = createElementWithClass("span", "selector");
-    this._selectorElement.textContent = styleRule.selectorText();
+    this._selectorElement.textContent = this._selectorText();
     selectorContainer.appendChild(this._selectorElement);
     selectorContainer.addEventListener("mouseenter", this._onMouseEnterSelector.bind(this), false);
     selectorContainer.addEventListener("mouseleave", this._onMouseOutSelector.bind(this), false);
@@ -912,6 +869,27 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule)
 }
 
 WebInspector.StylePropertiesSection.prototype = {
+    /**
+     * @return {!WebInspector.CSSStyleDeclaration}
+     */
+    style: function()
+    {
+        return this._style;
+    },
+
+    /**
+     * @return {string}
+     */
+    _selectorText: function()
+    {
+        var node = this._cascade.nodeForStyle(this._style);
+        if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline)
+            return this._cascade.isInherited(this._style) ? WebInspector.UIString("Style Attribute") : "element.style";
+        if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Attributes)
+            return node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("Attributes Style") + "]";
+        return this._style.parentRule.selectorText();
+    },
+
     _onMouseOutSelector: function()
     {
         if (this._hoverTimer)
@@ -931,7 +909,7 @@ WebInspector.StylePropertiesSection.prototype = {
         WebInspector.DOMModel.hideDOMNodeHighlight()
         var node = this._parentPane.node();
         var domModel = node.domModel();
-        var selectors = this.styleRule.rule()? this.styleRule.rule().selectorText() : undefined;
+        var selectors = this._style.parentRule ? this._style.parentRule.selectorText() : undefined;
         domModel.highlightDOMNodeWithConfig(node.id, { mode: "all", showInfo: undefined, selectors: selectors });
         this._activeHighlightDOMModel = domModel;
     },
@@ -1001,20 +979,12 @@ WebInspector.StylePropertiesSection.prototype = {
     },
 
     /**
-     * @return {?WebInspector.CSSRule}
-     */
-    rule: function()
-    {
-        return this.styleRule.rule();
-    },
-
-    /**
      * @param {!WebInspector.Event} event
      */
     _onNewRuleClick: function(event)
     {
         event.consume();
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         var range = WebInspector.TextRange.createFromLocation(rule.style.range.endLine, rule.style.range.endColumn + 1);
         this._parentPane._addBlankSection(this, /** @type {string} */(rule.styleSheetId), range);
     },
@@ -1056,7 +1026,7 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
     {
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         if (!rule || !rule.styleSheetId)
             return;
         if (rule !== editedRule)
@@ -1071,7 +1041,7 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     _styleSheetMediaEdited: function(oldMedia, newMedia)
     {
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         if (!rule || !rule.styleSheetId)
             return;
         rule.mediaEdited(oldMedia, newMedia);
@@ -1123,7 +1093,7 @@ WebInspector.StylePropertiesSection.prototype = {
     _updateMediaList: function()
     {
         this._mediaListElement.removeChildren();
-        this._createMediaList(this.styleRule.media());
+        this._createMediaList(this._style.parentRule ? this._style.parentRule.media : null);
     },
 
     /**
@@ -1132,7 +1102,7 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     isPropertyInherited: function(propertyName)
     {
-        if (this.styleRule.inherited()) {
+        if (this._cascade.isInherited(this._style)) {
             // While rendering inherited stylesheet, reverse meaning of this property.
             // Render truly inherited properties with black, i.e. return them as non-inherited.
             return !WebInspector.CSSMetadata.isPropertyInherited(propertyName);
@@ -1183,8 +1153,7 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     update: function(full)
     {
-        if (this.styleRule.selectorText())
-            this._selectorElement.textContent = this.styleRule.selectorText();
+        this._selectorElement.textContent = this._selectorText();
         this._markSelectorMatches();
         if (full) {
             this.propertiesTreeOutline.removeChildren();
@@ -1192,7 +1161,7 @@ WebInspector.StylePropertiesSection.prototype = {
         } else {
             var child = this.propertiesTreeOutline.firstChild();
             while (child) {
-                var overloaded = this.styleRule.cascade().propertyState(child.property) === WebInspector.SectionCascade.PropertyState.Overloaded;
+                var overloaded = this._cascade.propertyState(child.property) === WebInspector.SectionCascade.PropertyState.Overloaded;
                 child.setOverloaded(overloaded);
                 child = child.traverseNextTreeElement(false, null, true);
             }
@@ -1215,12 +1184,12 @@ WebInspector.StylePropertiesSection.prototype = {
 
     onpopulate: function()
     {
-        var style = this.styleRule.style();
+        var style = this._style;
         for (var property of style.leadingProperties()) {
             var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
             var inherited = this.isPropertyInherited(property.name);
-            var overloaded = this.styleRule.cascade().propertyState(property) === WebInspector.SectionCascade.PropertyState.Overloaded;
-            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded);
+            var overloaded = this._cascade.propertyState(property) === WebInspector.SectionCascade.PropertyState.Overloaded;
+            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._cascade, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
     },
@@ -1237,20 +1206,20 @@ WebInspector.StylePropertiesSection.prototype = {
         var regex = this._parentPane.filterRegex();
         var hideRule = !hasMatchingChild && regex && !regex.test(this.element.textContent);
         this.element.classList.toggle("hidden", hideRule);
-        if (!hideRule && this.styleRule.rule())
+        if (!hideRule && this._style.parentRule)
             this._markSelectorHighlights();
         return !hideRule;
     },
 
     _markSelectorMatches: function()
     {
-        var rule = this.styleRule.rule();
+        var rule = this._style.parentRule;
         if (!rule)
             return;
 
-        this._mediaListElement.classList.toggle("media-matches", this.styleRule.mediaMatches());
+        this._mediaListElement.classList.toggle("media-matches", this._cascade.mediaMatches(this._style));
 
-        if (!this.styleRule.hasMatchingSelectors())
+        if (!this._cascade.hasMatchingSelectors(this._style))
             return;
 
         var selectors = rule.selectors;
@@ -1317,8 +1286,8 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     addNewBlankProperty: function(index)
     {
-        var property = this.styleRule.style().newBlankProperty(index);
-        var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, false, false, false);
+        var property = this._style.newBlankProperty(index);
+        var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._cascade, property, false, false, false);
         index = property.index;
         this.propertiesTreeOutline.insertChild(item, index);
         item.listItemElement.textContent = "";
@@ -1455,7 +1424,7 @@ WebInspector.StylePropertiesSection.prototype = {
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)) && this.navigable && event.target.classList.contains("simple-selector")) {
             var index = event.target._selectorIndex;
             var cssModel = this._parentPane._cssModel;
-            var rule = this.rule();
+            var rule = this._style.parentRule;
             var rawLocation = new WebInspector.CSSLocation(cssModel, /** @type {string} */(rule.styleSheetId), rule.sourceURL, rule.lineNumberInSource(index), rule.columnNumberInSource(index));
             var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
             if (uiLocation)
@@ -1472,12 +1441,13 @@ WebInspector.StylePropertiesSection.prototype = {
         if (!this.editable)
             return;
 
-        if (!this.rule() && !this.propertiesTreeOutline.rootElement().childCount()) {
+        var rule = this._style.parentRule;
+        if (!rule && !this.propertiesTreeOutline.rootElement().childCount()) {
             this.addNewBlankProperty().startEditing();
             return;
         }
 
-        if (!this.rule())
+        if (!rule)
             return;
 
         this.startEditingSelector();
@@ -1570,7 +1540,7 @@ WebInspector.StylePropertiesSection.prototype = {
             this._moveEditorFromSelector(moveDirection);
             return;
         }
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         var oldSelectorRange = rule.selectorRange();
         if (!rule || !oldSelectorRange)
             return;
@@ -1587,7 +1557,7 @@ WebInspector.StylePropertiesSection.prototype = {
                 var doesAffectSelectedNode = rule.matchingSelectors.length > 0;
                 this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
 
-                this.styleRule.resetCachedData();
+                this._cascade.resetActiveProperties();
                 var newSelectorRange = /** @type {!WebInspector.TextRange} */(rule.selectorRange());
                 rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.styleSheetId), oldSelectorRange, newSelectorRange);
                 this._parentPane._styleSheetRuleEdited(rule, oldSelectorRange, newSelectorRange);
@@ -1610,7 +1580,7 @@ WebInspector.StylePropertiesSection.prototype = {
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
-        this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._parentPane._cssModel, this._parentPane._linkifier, this.rule()));
+        this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._parentPane._cssModel, this._parentPane._linkifier, this._style.parentRule));
     },
 
     _editingSelectorEnded: function()
@@ -1684,24 +1654,23 @@ WebInspector.StylePropertiesSection._linkifyRuleLocation = function(cssModel, li
  * @constructor
  * @extends {WebInspector.StylePropertiesSection}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
+ * @param {!WebInspector.SectionCascade} cascade
  * @param {string} defaultSelectorText
  * @param {string} styleSheetId
  * @param {!WebInspector.TextRange} ruleLocation
- * @param {!WebInspector.StylesSectionModel} insertAfterStyleRule
+ * @param {!WebInspector.CSSStyleDeclaration} insertAfterStyle
  */
-WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyleRule)
+WebInspector.BlankStylePropertiesSection = function(stylesPane, cascade, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle)
 {
-    var dummyCascade = new WebInspector.SectionCascade();
-    var blankSectionModel = dummyCascade.appendModelFromStyle(WebInspector.CSSStyleDeclaration.createDummyStyle(stylesPane._cssModel), defaultSelectorText);
-    blankSectionModel.setEditable(true);
-    WebInspector.StylePropertiesSection.call(this, stylesPane, blankSectionModel);
+    var rule = WebInspector.CSSRule.createDummyRule(stylesPane._cssModel, defaultSelectorText);
+    WebInspector.StylePropertiesSection.call(this, stylesPane, cascade, rule.style);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     this._selectorRefElement.removeChildren();
     this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
-    if (insertAfterStyleRule)
-        this._createMediaList(insertAfterStyleRule.media());
-    this._insertAfterStyleRule = insertAfterStyleRule;
+    if (insertAfterStyle && insertAfterStyle.parentRule)
+        this._createMediaList(insertAfterStyle.parentRule.media);
+    this._insertAfterStyle = insertAfterStyle;
     this.element.classList.add("blank-section");
 }
 
@@ -1809,8 +1778,8 @@ WebInspector.BlankStylePropertiesSection.prototype = {
     _makeNormal: function(newRule)
     {
         this.element.classList.remove("blank-section");
-        var model = this._insertAfterStyleRule.cascade().insertModelFromRule(newRule, this._insertAfterStyleRule);
-        this.styleRule = model;
+        this._cascade.insertStyle(newRule.style, this._insertAfterStyle);
+        this._style = newRule.style;
 
         // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
         this._normal = true;
@@ -1823,17 +1792,18 @@ WebInspector.BlankStylePropertiesSection.prototype = {
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
- * @param {!WebInspector.StylesSectionModel} styleRule
+ * @param {!WebInspector.SectionCascade} cascade
  * @param {!WebInspector.CSSProperty} property
  * @param {boolean} isShorthand
  * @param {boolean} inherited
  * @param {boolean} overloaded
  */
-WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, property, isShorthand, inherited, overloaded)
+WebInspector.StylePropertyTreeElement = function(stylesPane, cascade, property, isShorthand, inherited, overloaded)
 {
     // Pass an empty title, the title gets made later in onattach.
     TreeElement.call(this, "", isShorthand);
-    this._styleRule = styleRule;
+    this._style = property.ownerStyle;
+    this._cascade = cascade;
     this.property = property;
     this._inherited = inherited;
     this._overloaded = overloaded;
@@ -1847,12 +1817,12 @@ WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, property
 WebInspector.StylePropertyTreeElement.Context;
 
 WebInspector.StylePropertyTreeElement.prototype = {
-/**
-     * @return {!WebInspector.CSSStyleDeclaration}
+    /**
+     * @return {boolean}
      */
-    style: function()
+    _editable: function()
     {
-        return this._styleRule.style();
+        return this._style.styleSheetId && this._style.range;
     },
 
     /**
@@ -1931,7 +1901,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!color)
             return createTextNode(text);
 
-        if (!this._styleRule.editable()) {
+        if (!this._editable()) {
             var swatch = WebInspector.ColorSwatch.create();
             swatch.setColorText(text);
             return swatch;
@@ -1978,7 +1948,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
     _processBezier: function(text)
     {
         var geometry = WebInspector.Geometry.CubicBezier.parse(text);
-        if (!geometry || !this._styleRule.editable())
+        if (!geometry || !this._editable())
             return createTextNode(text);
         var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
         return new WebInspector.BezierPopoverIcon(this, stylesPopoverHelper, text).element();
@@ -1989,7 +1959,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!this.listItemElement)
             return;
 
-        if (this.style().isPropertyImplicit(this.name))
+        if (this._style.isPropertyImplicit(this.name))
             this.listItemElement.classList.add("implicit");
         else
             this.listItemElement.classList.remove("implicit");
@@ -2052,10 +2022,10 @@ WebInspector.StylePropertyTreeElement.prototype = {
      */
     _styleTextEdited: function(oldStyleRange)
     {
-        var newStyleRange = /** @type {!WebInspector.TextRange} */ (this.style().range);
-        this._styleRule.resetCachedData();
-        if (this._styleRule.rule())
-            this._parentPane._styleSheetRuleEdited(/** @type {!WebInspector.CSSRule} */(this._styleRule.rule()), oldStyleRange, newStyleRange);
+        var newStyleRange = /** @type {!WebInspector.TextRange} */ (this._style.range);
+        this._cascade.resetActiveProperties();
+        if (this._style.parentRule)
+            this._parentPane._styleSheetRuleEdited(this._style.parentRule, oldStyleRange, newStyleRange);
     },
 
     /**
@@ -2064,7 +2034,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
     _toggleEnabled: function(event)
     {
         var disabled = !event.target.checked;
-        var oldStyleRange = this.style().range;
+        var oldStyleRange = this._style.range;
         if (!oldStyleRange)
             return;
 
@@ -2098,7 +2068,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (this.childCount() || !this.isShorthand)
             return;
 
-        var longhandProperties = this.style().longhandProperties(this.name);
+        var longhandProperties = this._style.longhandProperties(this.name);
         for (var i = 0; i < longhandProperties.length; ++i) {
             var name = longhandProperties[i].name;
             var inherited = false;
@@ -2107,10 +2077,10 @@ WebInspector.StylePropertyTreeElement.prototype = {
             var section = this.section();
             if (section) {
                 inherited = section.isPropertyInherited(name);
-                overloaded = section.styleRule.cascade().propertyState(longhandProperties[i]) === WebInspector.SectionCascade.PropertyState.Overloaded;
+                overloaded = this._cascade.propertyState(longhandProperties[i]) === WebInspector.SectionCascade.PropertyState.Overloaded;
             }
 
-            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, longhandProperties[i], false, inherited, overloaded);
+            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._cascade, longhandProperties[i], false, inherited, overloaded);
             this.appendChild(item);
         }
     },
@@ -2154,7 +2124,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         this._expandElement = createElement("span");
         this._expandElement.className = "expand-element";
 
-        var propertyRenderer = new WebInspector.StylesSidebarPropertyRenderer(this._styleRule.rule(), this.node(), this.name, this.value);
+        var propertyRenderer = new WebInspector.StylesSidebarPropertyRenderer(this._style.parentRule, this.node(), this.name, this.value);
         if (this.property.parsedOk) {
             propertyRenderer.setColorHandler(this._processColor.bind(this));
             propertyRenderer.setBezierHandler(this._processBezier.bind(this));
@@ -2643,7 +2613,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 moveTo = this._findSibling(moveDirection);
                 var sectionToEdit = (moveTo || moveDirection === "backward") ? section : section.nextEditableSibling();
                 if (sectionToEdit) {
-                    if (sectionToEdit.rule())
+                    if (sectionToEdit.style().parentRule)
                         sectionToEdit.startEditingSelector();
                     else
                         sectionToEdit._moveEditorFromSelector(moveDirection);
@@ -2652,7 +2622,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
             }
 
             if (moveToSelector) {
-                if (section.rule())
+                if (section.style().parentRule)
                     section.startEditingSelector();
                 else
                     section._moveEditorFromSelector(moveDirection);
@@ -2690,7 +2660,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!this.treeOutline)
             return Promise.resolve();
 
-        var oldStyleRange = this.style().range;
+        var oldStyleRange = this._style.range;
         if (!oldStyleRange)
             return Promise.resolve();
 
@@ -2725,7 +2695,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
             this._styleTextEdited(oldStyleRange);
 
             this._propertyHasBeenEditedIncrementally = true;
-            this.property = this.style().propertyAt(this.property.index);
+            this.property = this._style.propertyAt(this.property.index);
 
             // We are happy to update UI if user is not editing.
             if (!this._parentPane._isEditingStyle && currentNode === this.node())