DevTools: kill WebInspector.StylesSectionModel class

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 316 matching lines @@
          * @param {!WebInspector.DOMNode} node
          * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
          * @return {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}}
          * @this {WebInspector.StylesSidebarPane}
          */
         function buildMatchedCascades(node, matchedStyles)
         {
             if (!matchedStyles || node !== this.node())
                 return null;
 
-            return {
-                matched: this._buildMatchedRulesSectionCascade(matchedStyles),
-                pseudo: this._buildPseudoCascades(matchedStyles)
-            };
+            return WebInspector.SectionCascade.fromMatchedStyles(matchedStyles);
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>}
      */
     _matchedStylesForNode: function(node)
     {
         var cssModel = this.cssModel();
@@ skipping 75 matching lines @@
 
         this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(cascades.matched);
         var pseudoTypes = [];
         var keys = new Set(cascades.pseudo.keys());
         if (keys.delete(DOMAgent.PseudoType.Before))
             pseudoTypes.push(DOMAgent.PseudoType.Before);
         pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort());
         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);
         }
 
         for (var block of this._sectionBlocks) {
             var titleElement = block.titleElement();
             if (titleElement)
                 this._sectionsContainer.appendChild(titleElement);
             for (var section of block.sections)
                 this._sectionsContainer.appendChild(section.element);
         }
 
         if (this._filterRegex)
             this._updateFilter();
 
         this._nodeStylesUpdatedForTest(node, true);
     },
 
     /**
-     * @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
      */
     _nodeStylesUpdatedForTest: function(node, rebuild)
     {
         // For sniffing in tests.
     },
 
     /**
-     * @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>}
      */
     _rebuildSectionsForMatchedStyleRules: function(matchedCascade)
     {
         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;
     },
 
     _createNewRuleInViaInspectorStyleSheet: function()
     {
         var cssModel = this.cssModel();
         var node = this.node();
         if (!cssModel || !node)
@@ skipping 36 matching lines @@
 
     /**
      * @param {!WebInspector.StylePropertiesSection} insertAfterSection
      * @param {string} styleSheetId
      * @param {!WebInspector.TextRange} ruleLocation
      */
     _addBlankSection: function(insertAfterSection, styleSheetId, ruleLocation)
     {
         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);
 
         for (var block of this._sectionBlocks) {
             var index = block.sections.indexOf(insertAfterSection);
             if (index === -1)
                 continue;
             block.sections.splice(index + 1, 0, blankSection);
             blankSection.startEditingSelector();
         }
@@ skipping 201 matching lines @@
      */
     titleElement: function()
     {
         return this._titleElement;
     }
 }
 
 /**
  * @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;
 
     this._titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
 
     this.propertiesTreeOutline = new TreeOutline();
     this.propertiesTreeOutline.element.classList.add("style-properties", "monospace");
     this.propertiesTreeOutline.section = this;
     this.element.appendChild(this.propertiesTreeOutline.element);
 
     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);
 
     var openBrace = createElement("span");
     openBrace.textContent = " {";
     selectorContainer.appendChild(openBrace);
     selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
 
@@ skipping 70 matching lines @@
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
 
     this._markSelectorMatches();
     this.onpopulate();
 }
 
 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)
             clearTimeout(this._hoverTimer);
         WebInspector.DOMModel.hideDOMNodeHighlight()
     },
 
     _onMouseEnterSelector: function()
     {
         if (this._hoverTimer)
             clearTimeout(this._hoverTimer);
         this._hoverTimer = setTimeout(this._highlight.bind(this), 300);
     },
 
     _highlight: function()
     {
         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;
     },
 
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */
     firstSibling: function()
     {
         var parent = this.element.parentElement;
@@ skipping 49 matching lines @@
     {
         var curElement = this.element;
         do {
             curElement = curElement.previousSibling;
         } while (curElement && !curElement._section);
 
         return curElement ? curElement._section : null;
     },
 
     /**
-     * @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);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onInsertColorPropertyClick: function(event)
     {
         event.consume(true);
@@ skipping 21 matching lines @@
             colorSwatch.showPopover();
     },
 
     /**
      * @param {!WebInspector.CSSRule} editedRule
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
      */
     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
     {
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         if (!rule || !rule.styleSheetId)
             return;
         if (rule !== editedRule)
             rule.sourceStyleSheetEdited(/** @type {string} */(editedRule.styleSheetId), oldRange, newRange);
         this._updateMediaList();
         this._updateRuleOrigin();
     },
 
     /**
      * @param {!WebInspector.CSSMedia} oldMedia
      * @param {!WebInspector.CSSMedia} newMedia
      */
     _styleSheetMediaEdited: function(oldMedia, newMedia)
     {
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         if (!rule || !rule.styleSheetId)
             return;
         rule.mediaEdited(oldMedia, newMedia);
         this._updateMediaList();
     },
 
     /**
      * @param {?Array.<!WebInspector.CSSMedia>} mediaRules
      */
     _createMediaList: function(mediaRules)
@@ skipping 31 matching lines @@
             case WebInspector.CSSMedia.Source.IMPORT_RULE:
                 mediaTextElement.textContent = "@import " + media.text;
                 break;
             }
         }
     },
 
     _updateMediaList: function()
     {
         this._mediaListElement.removeChildren();
-        this._createMediaList(this.styleRule.media());
+        this._createMediaList(this._style.parentRule ? this._style.parentRule.media : null);
     },
 
     /**
      * @param {string} propertyName
      * @return {boolean}
      */
     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);
         }
         return false;
     },
 
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */
@@ skipping 30 matching lines @@
         }
 
         return (curSection && curSection.editable) ? curSection : null;
     },
 
     /**
      * @param {boolean} full
      */
     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();
             this.onpopulate();
         } 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);
             }
         }
         this.afterUpdate();
     },
 
     afterUpdate: function()
     {
         if (this._afterUpdate) {
             this._afterUpdate(this);
             delete this._afterUpdate;
             this._afterUpdateFinishedForTest();
         }
     },
 
     _afterUpdateFinishedForTest: function()
     {
     },
 
     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);
         }
     },
 
     /**
      * @return {boolean}
      */
     _updateFilter: function()
     {
         var hasMatchingChild = false;
         for (var child of this.propertiesTreeOutline.rootElement().children())
             hasMatchingChild |= child._updateFilter();
 
         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;
         var fragment = createDocumentFragment();
         var currentMatch = 0;
         var matchingSelectors = rule.matchingSelectors;
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.createTextChild(", ");
             var isSelectorMatching = matchingSelectors[currentMatch] === i;
@@ skipping 46 matching lines @@
             event.consume(true);
         }
     },
 
     /**
      * @param {number=} index
      * @return {!WebInspector.StylePropertyTreeElement}
      */
     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 = "";
         item._newProperty = true;
         item.updateTitle();
         return item;
     },
 
     _handleEmptySpaceMouseDown: function()
     {
@@ skipping 116 matching lines @@
     _editingMediaTextCommittedForTest: function() { },
 
     /**
      * @param {!Event} event
      */
     _handleSelectorClick: function(event)
     {
         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)
                 WebInspector.Revealer.reveal(uiLocation);
             event.consume(true);
             return;
         }
         this._startEditingOnMouseEvent();
         event.consume(true);
     },
 
     _startEditingOnMouseEvent: function()
     {
         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();
     },
 
     startEditingSelector: function()
     {
         var element = this._selectorElement;
         if (WebInspector.isBeingEdited(element))
             return;
@@ skipping 72 matching lines @@
     {
         this._editingSelectorEnded();
         if (newContent)
             newContent = newContent.trim();
         if (newContent === oldContent) {
             // Revert to a trimmed version of the selector if need be.
             this._selectorElement.textContent = newContent;
             this._moveEditorFromSelector(moveDirection);
             return;
         }
-        var rule = this.rule();
+        var rule = this._style.parentRule;
         var oldSelectorRange = rule.selectorRange();
         if (!rule || !oldSelectorRange)
             return;
 
         /**
          * @param {!WebInspector.CSSRule} rule
          * @param {!WebInspector.TextRange} oldSelectorRange
          * @param {boolean} success
          * @this {WebInspector.StylePropertiesSection}
          */
         function finishCallback(rule, oldSelectorRange, success)
         {
             if (success) {
                 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);
                 this._parentPane._refreshUpdate(this);
             }
 
             delete this._parentPane._userOperation;
             this._moveEditorFromSelector(moveDirection);
             this._editingSelectorCommittedForTest();
         }
 
         // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
         this._parentPane._userOperation = true;
         var selectedNode = this._parentPane.node();
         rule.setSelectorText(selectedNode ? selectedNode.id : 0, newContent, finishCallback.bind(this, rule, oldSelectorRange));
     },
 
     _editingSelectorCommittedForTest: function() { },
 
     _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()
     {
         this._parentPane.setEditingStyle(false);
         this._parentPane._finishEditingSelector();
     },
 
     editingSelectorCancelled: function()
     {
@@ skipping 53 matching lines @@
     var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
     var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
     var matchingSelectorLocation = new WebInspector.CSSLocation(cssModel, styleSheetId, sourceURL, lineNumber, columnNumber);
     return linkifier.linkifyCSSLocation(matchingSelectorLocation);
 }
 
 /**
  * @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");
 }
 
 WebInspector.BlankStylePropertiesSection.prototype = {
     /**
      * @return {!WebInspector.TextRange}
      */
     _actualRuleLocation: function()
     {
         var prefix = this._rulePrefix();
@@ skipping 87 matching lines @@
         this._editingSelectorEnded();
         this._parentPane.removeSection(this);
     },
 
     /**
      * @param {!WebInspector.CSSRule} newRule
      */
     _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;
     },
 
     __proto__: WebInspector.StylePropertiesSection.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;
     this.selectable = false;
     this._parentPane = stylesPane;
     this.isShorthand = isShorthand;
     this._applyStyleThrottler = new WebInspector.Throttler(0);
 }
 
 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
 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;
     },
 
     /**
      * @return {boolean}
      */
     inherited: function()
     {
         return this._inherited;
     },
 
@@ skipping 58 matching lines @@
      * @param {string} text
      * @return {!Node}
      */
     _processColor: function(text)
     {
         // We can be called with valid non-color values of |text| (like 'none' from border style)
         var color = WebInspector.Color.parse(text);
         if (!color)
             return createTextNode(text);
 
-        if (!this._styleRule.editable()) {
+        if (!this._editable()) {
             var swatch = WebInspector.ColorSwatch.create();
             swatch.setColorText(text);
             return swatch;
         }
 
         var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
         var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, stylesPopoverHelper, text);
 
         /**
          * @param {?Map.<string, string>} styles
@@ skipping 26 matching lines @@
         return this.nameElement.textContent + ": " + this.valueElement.textContent;
     },
 
     /**
      * @param {string} text
      * @return {!Node}
      */
     _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();
     },
 
     _updateState: function()
     {
         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");
 
         var hasIgnorableError = !this.property.parsedOk && WebInspector.StylesSidebarPane.ignoreErrorsForProperty(this.property);
         if (hasIgnorableError)
             this.listItemElement.classList.add("has-ignorable-error");
         else
             this.listItemElement.classList.remove("has-ignorable-error");
 
@@ skipping 42 matching lines @@
         var section = this.section();
         if (section && section._parentPane)
             section._parentPane._refreshUpdate(section);
     },
 
     /**
      * @param {!WebInspector.TextRange} oldStyleRange
      */
     _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);
     },
 
     /**
      * @param {!Event} event
      */
     _toggleEnabled: function(event)
     {
         var disabled = !event.target.checked;
-        var oldStyleRange = this.style().range;
+        var oldStyleRange = this._style.range;
         if (!oldStyleRange)
             return;
 
         /**
          * @param {boolean} success
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function callback(success)
         {
             delete this._parentPane._userOperation;
@@ skipping 13 matching lines @@
 
     /**
      * @override
      */
     onpopulate: function()
     {
         // Only populate once and if this property is a shorthand.
         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;
             var overloaded = false;
 
             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);
         }
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         this.updateTitle();
@@ skipping 23 matching lines @@
             delete this._parentPane._mouseDownTreeElementIsValue;
         }
     },
 
     updateTitle: function()
     {
         this._updateState();
         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));
         }
 
         this.listItemElement.removeChildren();
         this.nameElement = propertyRenderer.renderName();
         this.valueElement = propertyRenderer.renderValue();
         if (!this.treeOutline)
             return;
@@ skipping 468 matching lines @@
                     return;
 
                 section.addNewBlankProperty().startEditing();
                 return;
             }
 
             if (abandonNewProperty) {
                 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);
                 }
                 return;
             }
 
             if (moveToSelector) {
-                if (section.rule())
+                if (section.style().parentRule)
                     section.startEditingSelector();
                 else
                     section._moveEditorFromSelector(moveDirection);
             }
         }
     },
 
     _removePrompt: function()
     {
         // BUG 53242. This cannot go into editingEnded(), as it should always happen first for any editing outcome.
@@ skipping 17 matching lines @@
     /**
      * @param {string} styleText
      * @param {boolean} majorChange
      * @return {!Promise.<undefined>}
      */
     _innerApplyStyleText: function(styleText, majorChange)
     {
         if (!this.treeOutline)
             return Promise.resolve();
 
-        var oldStyleRange = this.style().range;
+        var oldStyleRange = this._style.range;
         if (!oldStyleRange)
             return Promise.resolve();
 
         styleText = styleText.replace(/\s/g, " ").trim(); // Replace &nbsp; with whitespace.
         if (!styleText.length && majorChange && this._newProperty && !this._propertyHasBeenEditedIncrementally) {
             // The user deleted everything and never applied a new property value via Up/Down scrolling/live editing, so remove the tree element and update.
             var section = this.section();
             this.parent.removeChild(this);
             section.afterUpdate();
             return Promise.resolve();
@@ skipping 14 matching lines @@
                 if (majorChange) {
                     // It did not apply, cancel editing.
                     this._revertStyleUponEditingCanceled();
                 }
                 this.styleTextAppliedForTest();
                 return;
             }
             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())
                 this._updatePane();
 
             this.styleTextAppliedForTest();
         }
 
         // Append a ";" if the new text does not end in ";".
         // FIXME: this does not handle trailing comments.
@@ skipping 301 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }