third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js - Issue 1434613002: DevTools: kill WebInspector.StylesSectionModel class

Unified Diff: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Issue 1434613002: DevTools: kill WebInspector.StylesSectionModel class (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 1 month ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule.html ('K') | « third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js ('k') | third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

index ac172ffb331bdec1b9fd1d248ca3eccf1a605c3d..85e1c913daa3ca0788f19e07db9d45ce7ee8c9de 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;

dgozman 2015/11/07 03:00:54 Should we kill isInherited?

lushnikov 2015/11/07 03:09:25 Nope!

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;

dgozman 2015/11/07 03:00:53 !!(expression)

lushnikov 2015/11/07 03:09:25 Done.

- 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

dgozman 2015/11/07 03:00:54 semicolon

lushnikov 2015/11/07 03:09:25 Done.

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

dgozman 2015/11/07 03:00:54 semicolon

lushnikov 2015/11/07 03:09:25 Done.

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;

dgozman 2015/11/07 03:00:53 Remove this.

lushnikov 2015/11/07 03:09:25 Done.

+ 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.property.ownerStyle.styleSheetId && this.property.ownerStyle.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())