DevTools: kill WebInspector.StylesSectionModel class

Class WI.StylesSectionModel was a presentation model used by
StyleSidebarPane to render its sections.

The patch removes WI.StylesSectionModel class and starts
using plain WI.CSSStyleDeclaration objects in WI.StylePropertiesSection
for its rendering.

BUG=537827
R=pfeldman, dgozman

Review URL: https://codereview.chromium.org/1434613002

Cr-Commit-Position: refs/heads/master@{#358515}

9 files changed, 261 insertions, 357 deletions

diff --git a/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js b/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js
index b173fd2..ba2b2f1 100644
--- a/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js
+++ b/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js
@@ -355,7 +355,7 @@ InspectorTest.dumpSelectedElementStyles = function(excludeComputed, excludeMatch
         InspectorTest.dumpComputedStyle();
     for (var block of sectionBlocks) {
         for (var section of block.sections) {
-            if (section.rule() && excludeMatched)
+            if (section.style().parentRule && excludeMatched)
                 continue;
             if (section.element.previousSibling && section.element.previousSibling.className === "sidebar-separator") {
                 var nodeDescription = "";
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/add-new-rule-inline-style-csp.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/add-new-rule-inline-style-csp.html
index 3d449cd..8cc12df 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/add-new-rule-inline-style-csp.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/add-new-rule-inline-style-csp.html
@@ -28,7 +28,7 @@ function test()
 
             function successCallback(section)
             {
-                rule = section.styleRule.rule();
+                rule = section.style().parentRule;
                 InspectorTest.addResult("=== Rule added ===");
                 InspectorTest.addResult(rule.selectorText() + " {" + rule.style.cssText + "}");
                 InspectorTest.addResult("Selectors matching the (#inspected) node: " + InspectorTest.matchingSelectors(rule));
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links.html
index d478a50..95c6fd8 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links.html
@@ -121,7 +121,7 @@ function test()
         var rules = [];
         for (var block of WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks) {
             for (var section of block.sections) {
-                var rule = section.rule();
+                var rule = section.style().parentRule;
                 if (rule)
                     rules.push(rule);
             }
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule.html
index 61643ad..e88e06a 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule.html
@@ -71,7 +71,7 @@ function test()
     function printStyleSheetAndCall(next)
     {
         var section = InspectorTest.firstMatchedStyleSection();
-        var id = section.styleRule.style().styleSheetId;
+        var id = section.style().styleSheetId;
         InspectorTest.CSSAgent.getStyleSheetText(id, callback);
         function callback(error, styleSheetText)
         {
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
index 942e9ba..aa83b1fa 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
@@ -256,9 +256,9 @@ WebInspector.ComputedStyleWidget.prototype = {
     _computePropertyTraces: function(matchedCascade)
     {
         var result = new Map();
-        var models = matchedCascade.sectionModels();
-        for (var model of models) {
-            var allProperties = model.style().allProperties;
+        var styles = matchedCascade.styles();
+        for (var style of styles) {
+            var allProperties = style.allProperties;
             for (var property of allProperties) {
                 if (!property.activeInStyle() || !matchedCascade.propertyState(property))
                     continue;
@@ -277,8 +277,8 @@ WebInspector.ComputedStyleWidget.prototype = {
     _computeInheritedProperties: function(matchedCascade)
     {
         var result = new Set();
-        for (var model of matchedCascade.sectionModels()) {
-            for (var property of model.style().allProperties) {
+        for (var style of matchedCascade.styles()) {
+            for (var property of style.allProperties) {
                 if (!matchedCascade.propertyState(property))
                     continue;
                 result.add(WebInspector.CSSMetadata.canonicalPropertyName(property.name));
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js b/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js
index de57722..3657439 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js
@@ -46,7 +46,7 @@ WebInspector.PropertyChangeHighlighter.prototype = {
         var foundSection = null;
         for (var block of sectionBlocks) {
             for (var section of block.sections) {
-                var declaration = section.styleRule.style();
+                var declaration = section.style();
                 if (declaration.styleSheetId !== this._styleSheetId)
                     continue;
 
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js
index 3389f71..186fcff 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js
@@ -4,45 +4,56 @@
 
 /**
  * @constructor
- * @param {!WebInspector.SectionCascade} cascade
- * @param {?WebInspector.CSSRule} rule
- * @param {!WebInspector.CSSStyleDeclaration} style
- * @param {string} customSelectorText
- * @param {?WebInspector.DOMNode=} inheritedFromNode
+ * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+ * @param {!Array<!WebInspector.CSSStyleDeclaration>} styles
  */
-WebInspector.StylesSectionModel = function(cascade, rule, style, customSelectorText, inheritedFromNode)
+WebInspector.SectionCascade = function(matchedStyles, styles)
 {
-    this._cascade = cascade;
-    this._rule = rule;
-    this._style = style;
-    this._customSelectorText = customSelectorText;
-    this._editable = !!(this._style && this._style.styleSheetId);
-    this._inheritedFromNode = inheritedFromNode || null;
+    this._matchedStyles = matchedStyles;
+    this._styles = styles;
+    this.resetActiveProperties();
 }
 
-WebInspector.StylesSectionModel.prototype = {
-    /**
-     * @return {!WebInspector.SectionCascade}
-     */
-    cascade: function()
-    {
-        return this._cascade;
-    },
+/**
+ * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+ * @return {!{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}}
+ */
+WebInspector.SectionCascade.fromMatchedStyles = function(matchedStyles)
+{
+    var matched = new WebInspector.SectionCascade(matchedStyles, matchedStyles.nodeStyles());
+    var pseudo = new Map();
+
+    var pseudoStyles = matchedStyles.pseudoStyles();
+    var pseudoElements = pseudoStyles.keysArray();
+    for (var i = 0; i < pseudoElements.length; ++i) {
+        var pseudoElement = pseudoElements[i];
+        var pseudoCascade = new WebInspector.SectionCascade(matchedStyles, /** @type {!Array<!WebInspector.CSSStyleDeclaration>} */(pseudoStyles.get(pseudoElement)));
+        pseudo.set(pseudoElement, pseudoCascade);
+    }
+
+    return {
+        matched: matched,
+        pseudo: pseudo
+    };
+}
 
+WebInspector.SectionCascade.prototype = {
     /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
-    hasMatchingSelectors: function()
+    hasMatchingSelectors: function(style)
     {
-        return this.rule() ? this.rule().matchingSelectors.length > 0 && this.mediaMatches() : true;
+        return style.parentRule ? style.parentRule.matchingSelectors && style.parentRule.matchingSelectors.length > 0 && this.mediaMatches(style) : true;
     },
 
     /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
-    mediaMatches: function()
+    mediaMatches: function(style)
     {
-        var media = this.media();
+        var media = style.parentRule ? style.parentRule.media : [];
         for (var i = 0; media && i < media.length; ++i) {
             if (!media[i].active())
                 return false;
@@ -51,132 +62,45 @@ WebInspector.StylesSectionModel.prototype = {
     },
 
     /**
-     * @return {boolean}
-     */
-    inherited: function()
-    {
-        return !!this._inheritedFromNode;
-    },
-
-    /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {?WebInspector.DOMNode}
      */
-    parentNode: function()
+    nodeForStyle: function(style)
     {
-        return this._inheritedFromNode;
-    },
-
-    /**
-     * @return {string}
-     */
-    selectorText: function()
-    {
-        if (this._customSelectorText)
-            return this._customSelectorText;
-        return this.rule() ? this.rule().selectorText() : "";
+        return this._matchedStyles.nodeForStyle(style);
     },
 
     /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
-    editable: function()
+    isInherited: function(style)
     {
-        return this._editable;
+        return this._matchedStyles.isInherited(style);
     },
 
     /**
-     * @param {boolean} editable
+     * @return {!Array.<!WebInspector.CSSStyleDeclaration>}
      */
-    setEditable: function(editable)
+    styles: function()
     {
-        this._editable = editable;
-    },
-
-    /**
-     * @return {!WebInspector.CSSStyleDeclaration}
-     */
-    style: function()
-    {
-        return this._style;
-    },
-
-    /**
-     * @return {?WebInspector.CSSRule}
-     */
-    rule: function()
-    {
-        return this._rule;
-    },
-
-    /**
-     * @return {?Array.<!WebInspector.CSSMedia>}
-     */
-    media: function()
-    {
-        return this.rule() ? this.rule().media : null;
-    },
-
-    resetCachedData: function()
-    {
-        this._cascade._resetUsedProperties();
-    }
-}
-
-/**
- * @constructor
- */
-WebInspector.SectionCascade = function()
-{
-    this._models = [];
-    this._resetUsedProperties();
-}
-
-WebInspector.SectionCascade.prototype = {
-    /**
-     * @return {!Array.<!WebInspector.StylesSectionModel>}
-     */
-    sectionModels: function()
-    {
-        return this._models;
-    },
-
-    /**
-     * @param {!WebInspector.CSSRule} rule
-     * @param {!WebInspector.StylesSectionModel} insertAfterStyleRule
-     * @return {!WebInspector.StylesSectionModel}
-     */
-    insertModelFromRule: function(rule, insertAfterStyleRule)
-    {
-        return this._insertModel(new WebInspector.StylesSectionModel(this, rule, rule.style, "", null), insertAfterStyleRule);
+        return this._styles;
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
-     * @param {string} selectorText
-     * @param {?WebInspector.DOMNode=} inheritedFromNode
-     * @return {!WebInspector.StylesSectionModel}
-     */
-    appendModelFromStyle: function(style, selectorText, inheritedFromNode)
-    {
-        return this._insertModel(new WebInspector.StylesSectionModel(this, style.parentRule, style, selectorText, inheritedFromNode));
-    },
-
-    /**
-     * @param {!WebInspector.StylesSectionModel} model
-     * @param {!WebInspector.StylesSectionModel=} insertAfter
-     * @return {!WebInspector.StylesSectionModel}
+     * @param {!WebInspector.CSSStyleDeclaration=} insertAfter
      */
-    _insertModel: function(model, insertAfter)
+    insertStyle: function(style, insertAfter)
     {
         if (insertAfter) {
-            var index = this._models.indexOf(insertAfter);
+            var index = this._styles.indexOf(insertAfter);
             console.assert(index !== -1, "The insertAfter anchor could not be found in cascade");
-            this._models.splice(index + 1, 0, model);
+            this._styles.splice(index + 1, 0, style);
         } else {
-            this._models.push(model);
+            this._styles.push(style);
         }
-        this._resetUsedProperties();
-        return model;
+        this.resetActiveProperties();
     },
 
     /**
@@ -186,110 +110,109 @@ WebInspector.SectionCascade.prototype = {
     propertyState: function(property)
     {
         if (this._propertiesState.size === 0)
-            this._propertiesState = WebInspector.SectionCascade._computeUsedProperties(this._models);
+            this._propertiesState = this._computeActiveProperties();
         return this._propertiesState.get(property) || null;
     },
 
-    _resetUsedProperties: function()
+    resetActiveProperties: function()
     {
         /** @type {!Map<!WebInspector.CSSProperty, !WebInspector.SectionCascade.PropertyState>} */
         this._propertiesState = new Map();
-    }
-}
-
-/**
- * @param {!Array.<!WebInspector.StylesSectionModel>} styleRules
- * @return {!Map<!WebInspector.CSSProperty, !WebInspector.SectionCascade.PropertyState>}
- */
-WebInspector.SectionCascade._computeUsedProperties = function(styleRules)
-{
-    /** @type {!Set.<string>} */
-    var foundImportantProperties = new Set();
-    /** @type {!Map.<string, !Map<string, !WebInspector.CSSProperty>>} */
-    var propertyToEffectiveRule = new Map();
-    /** @type {!Map.<string, !WebInspector.DOMNode>} */
-    var inheritedPropertyToNode = new Map();
-    /** @type {!Set<string>} */
-    var allUsedProperties = new Set();
-    var result = new Map();
-    for (var i = 0; i < styleRules.length; ++i) {
-        var styleRule = styleRules[i];
-        if (!styleRule.hasMatchingSelectors())
-            continue;
-
-        /** @type {!Map<string, !WebInspector.CSSProperty>} */
-        var styleActiveProperties = new Map();
-        var style = styleRule.style();
-        var allProperties = style.allProperties;
-        for (var j = 0; j < allProperties.length; ++j) {
-            var property = allProperties[j];
+    },
 
-            // Do not pick non-inherited properties from inherited styles.
-            if (styleRule.inherited() && !WebInspector.CSSMetadata.isPropertyInherited(property.name))
+    /**
+     * @return {!Map<!WebInspector.CSSProperty, !WebInspector.SectionCascade.PropertyState>}
+     */
+    _computeActiveProperties: function()
+    {
+        /** @type {!Set.<string>} */
+        var foundImportantProperties = new Set();
+        /** @type {!Map.<string, !Map<string, !WebInspector.CSSProperty>>} */
+        var propertyToEffectiveRule = new Map();
+        /** @type {!Map.<string, !WebInspector.DOMNode>} */
+        var inheritedPropertyToNode = new Map();
+        /** @type {!Set<string>} */
+        var allUsedProperties = new Set();
+        var result = new Map();
+        for (var i = 0; i < this._styles.length; ++i) {
+            var style = this._styles[i];
+            if (!this.hasMatchingSelectors(style))
                 continue;
 
-            if (!property.activeInStyle()) {
-                result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
-                continue;
-            }
+            /** @type {!Map<string, !WebInspector.CSSProperty>} */
+            var styleActiveProperties = new Map();
+            var allProperties = style.allProperties;
+            for (var j = 0; j < allProperties.length; ++j) {
+                var property = allProperties[j];
 
-            var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
-            if (foundImportantProperties.has(canonicalName)) {
-                result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
-                continue;
-            }
+                // Do not pick non-inherited properties from inherited styles.
+                var inherited = this._matchedStyles.isInherited(style);
+                if (inherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name))
+                    continue;
 
-            if (!property.important && allUsedProperties.has(canonicalName)) {
-                result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
-                continue;
-            }
+                if (!property.activeInStyle()) {
+                    result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
+                    continue;
+                }
 
-            var isKnownProperty = propertyToEffectiveRule.has(canonicalName);
-            var parentNode = styleRule.parentNode();
-            if (!isKnownProperty && parentNode && !inheritedPropertyToNode.has(canonicalName))
-                inheritedPropertyToNode.set(canonicalName, parentNode);
+                var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
+                if (foundImportantProperties.has(canonicalName)) {
+                    result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
+                    continue;
+                }
 
-            if (property.important) {
-                if (styleRule.inherited() && isKnownProperty && styleRule.parentNode() !== inheritedPropertyToNode.get(canonicalName)) {
+                if (!property.important && allUsedProperties.has(canonicalName)) {
                     result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
                     continue;
                 }
 
-                foundImportantProperties.add(canonicalName);
-                if (isKnownProperty) {
-                    var overloaded = propertyToEffectiveRule.get(canonicalName).get(canonicalName);
-                    result.set(overloaded, WebInspector.SectionCascade.PropertyState.Overloaded);
-                    propertyToEffectiveRule.get(canonicalName).delete(canonicalName);
+                var isKnownProperty = propertyToEffectiveRule.has(canonicalName);
+                var inheritedFromNode = inherited ? this._matchedStyles.nodeForStyle(style) : null;
+                if (!isKnownProperty && inheritedFromNode && !inheritedPropertyToNode.has(canonicalName))
+                    inheritedPropertyToNode.set(canonicalName, inheritedFromNode);
+
+                if (property.important) {
+                    if (inherited && isKnownProperty && inheritedFromNode !== inheritedPropertyToNode.get(canonicalName)) {
+                        result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
+                        continue;
+                    }
+
+                    foundImportantProperties.add(canonicalName);
+                    if (isKnownProperty) {
+                        var overloaded = propertyToEffectiveRule.get(canonicalName).get(canonicalName);
+                        result.set(overloaded, WebInspector.SectionCascade.PropertyState.Overloaded);
+                        propertyToEffectiveRule.get(canonicalName).delete(canonicalName);
+                    }
                 }
-            }
 
-            styleActiveProperties.set(canonicalName, property);
-            allUsedProperties.add(canonicalName);
-            propertyToEffectiveRule.set(canonicalName, styleActiveProperties);
-            result.set(property, WebInspector.SectionCascade.PropertyState.Active);
-        }
+                styleActiveProperties.set(canonicalName, property);
+                allUsedProperties.add(canonicalName);
+                propertyToEffectiveRule.set(canonicalName, styleActiveProperties);
+                result.set(property, WebInspector.SectionCascade.PropertyState.Active);
+            }
 
-        // If every longhand of the shorthand is not active, then the shorthand is not active too.
-        for (var property of style.leadingProperties()) {
-            var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
-            if (!styleActiveProperties.has(canonicalName))
-                continue;
-            var longhands = style.longhandProperties(property.name);
-            if (!longhands.length)
-                continue;
-            var notUsed = true;
-            for (var longhand of longhands) {
-                var longhandCanonicalName = WebInspector.CSSMetadata.canonicalPropertyName(longhand.name);
-                notUsed = notUsed && !styleActiveProperties.has(longhandCanonicalName);
+            // If every longhand of the shorthand is not active, then the shorthand is not active too.
+            for (var property of style.leadingProperties()) {
+                var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
+                if (!styleActiveProperties.has(canonicalName))
+                    continue;
+                var longhands = style.longhandProperties(property.name);
+                if (!longhands.length)
+                    continue;
+                var notUsed = true;
+                for (var longhand of longhands) {
+                    var longhandCanonicalName = WebInspector.CSSMetadata.canonicalPropertyName(longhand.name);
+                    notUsed = notUsed && !styleActiveProperties.has(longhandCanonicalName);
+                }
+                if (!notUsed)
+                    continue;
+                styleActiveProperties.delete(canonicalName);
+                allUsedProperties.delete(canonicalName);
+                result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
             }
-            if (!notUsed)
-                continue;
-            styleActiveProperties.delete(canonicalName);
-            allUsedProperties.delete(canonicalName);
-            result.set(property, WebInspector.SectionCascade.PropertyState.Overloaded);
         }
+        return result;
     }
-    return result;
 }
 
 /** @enum {string} */
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 ac172ff..0a8fd48 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())
diff --git a/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js b/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
index 7c6b009..71296d7 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
@@ -657,19 +657,6 @@ WebInspector.CSSStyleDeclaration.Type = {
     Attributes: "Attributes"
 }
 
-/**
- * @param {!WebInspector.CSSStyleModel} cssModel
- * @return {!WebInspector.CSSStyleDeclaration}
- */
-WebInspector.CSSStyleDeclaration.createDummyStyle = function(cssModel)
-{
-    var dummyPayload = {
-        shorthandEntries: [],
-        cssProperties: []
-    };
-    return new WebInspector.CSSStyleDeclaration(cssModel, null, dummyPayload, WebInspector.CSSStyleDeclaration.Type.Regular);
-}
-
 WebInspector.CSSStyleDeclaration.prototype = {
     /**
      * @param {!CSSAgent.CSSStyle} payload
@@ -1043,6 +1030,27 @@ WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
         this.media = WebInspector.CSSMedia.parseMediaArrayPayload(cssModel, payload.media);
 }
 
+/**
+ * @param {!WebInspector.CSSStyleModel} cssModel
+ * @param {string} selectorText
+ * @return {!WebInspector.CSSRule}
+ */
+WebInspector.CSSRule.createDummyRule = function(cssModel, selectorText)
+{
+    var dummyPayload = {
+        selectorList: {
+            selectors: [{ value: selectorText}],
+        },
+        style: {
+            styleSheetId: "0",
+            range: new WebInspector.TextRange(0, 0, 0, 0),
+            shorthandEntries: [],
+            cssProperties: []
+        }
+    };
+    return new WebInspector.CSSRule(cssModel, /** @type {!CSSAgent.CSSRule} */(dummyPayload));
+}
+
 WebInspector.CSSRule.prototype = {
     /**
      * @param {!DOMAgent.NodeId} nodeId
@@ -1243,7 +1251,7 @@ WebInspector.CSSRule.prototype = {
 
 /**
  * @constructor
- * @param {?WebInspector.CSSStyleDeclaration} ownerStyle
+ * @param {!WebInspector.CSSStyleDeclaration} ownerStyle
  * @param {number} index
  * @param {string} name
  * @param {string} value
@@ -1270,7 +1278,7 @@ WebInspector.CSSProperty = function(ownerStyle, index, name, value, important, d
 }
 
 /**
- * @param {?WebInspector.CSSStyleDeclaration} ownerStyle
+ * @param {!WebInspector.CSSStyleDeclaration} ownerStyle
  * @param {number} index
  * @param {!CSSAgent.CSSProperty} payload
  * @return {!WebInspector.CSSProperty}
@@ -2060,6 +2068,7 @@ WebInspector.CSSStyleModel.MatchedStyleResult = function(cssModel, nodeId, inlin
 
     this._nodeStyles = [];
     this._nodeForStyle = new Map();
+    this._inheritedStyles = new Set();
 
     /**
      * @this {WebInspector.CSSStyleModel.MatchedStyleResult}
@@ -2106,6 +2115,7 @@ WebInspector.CSSStyleModel.MatchedStyleResult = function(cssModel, nodeId, inlin
         if (inheritedInlineStyle && this._containsInherited(inheritedInlineStyle)) {
             this._nodeForStyle.set(inheritedInlineStyle, parentNode);
             this._nodeStyles.push(inheritedInlineStyle);
+            this._inheritedStyles.add(inheritedInlineStyle);
         }
 
         for (var j = inheritedMatchedCSSRules.length - 1; j >= 0; --j) {
@@ -2114,6 +2124,7 @@ WebInspector.CSSStyleModel.MatchedStyleResult = function(cssModel, nodeId, inlin
                 continue;
             this._nodeForStyle.set(inheritedRule.style, parentNode);
             this._nodeStyles.push(inheritedRule.style);
+            this._inheritedStyles.add(inheritedRule.style);
         }
         parentNode = parentNode.parentNode;
     }
@@ -2184,7 +2195,7 @@ WebInspector.CSSStyleModel.MatchedStyleResult.prototype = {
      */
     isInherited: function(style)
     {
-        return this.nodeForStyle(style) !== this._node;
+        return this._inheritedStyles.has(style);
     }
 }