Skip to content

Commit

Permalink
DevTools: [CSS] move matching selectors from WI.CSSStyleRule to WI.Ma…
Browse files Browse the repository at this point in the history 
…tchedStyleResult

The patch moves information of matching selectors from WI.CSSStyleRule
to WI.MatchedStyleResult object.

The reasoning behind the change is that CSSStyleRule should have no notion of
its matching selectors; its just a mirror of CSSOM CSSStyleRule object.

The WI.MatchedStyleResult object is the one which binds CSSStyleRules with
DOMNodes and thus holds information about selectors matching node.

BUG=none
R=dgozman, pfeldman

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

Cr-Commit-Position: refs/heads/master@{#378357}
  • Loading branch information
@aslushnikov
aslushnikov authored and Commit bot committed Mar 1, 2016
1 parent ed69af4 commit 73af080
Show file tree
Hide file tree
Showing 3 changed files with 229 additions and 213 deletions.
2 changes: 1 addition & 1 deletion front_end/elements/ComputedStyleWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ WebInspector.ComputedStyleWidget.prototype = {
var rule = property.ownerStyle.parentRule;
if (rule) {
var linkSpan = trace.createChild("span", "trace-link");
linkSpan.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(cssModel, this._linkifier, rule));
linkSpan.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(matchedStyles, this._linkifier, rule));
}

var selectorElement = trace.createChild("span", "property-trace-selector");
Expand Down
116 changes: 68 additions & 48 deletions front_end/elements/StylesSidebarPane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1203,13 +1203,13 @@ WebInspector.StylePropertiesSection.prototype = {

this._mediaListElement.classList.toggle("media-matches", this._matchedStyles.mediaMatches(this._style));

if (!this._matchedStyles.hasMatchingSelectors(this._style))
if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
return;

var selectors = rule.selectors;
var fragment = createDocumentFragment();
var currentMatch = 0;
var matchingSelectors = rule.matchingSelectors;
var matchingSelectors = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
for (var i = 0; i < selectors.length ; ++i) {
if (i)
fragment.createTextChild(", ");
Expand Down Expand Up @@ -1521,10 +1521,9 @@ WebInspector.StylePropertiesSection.prototype = {
return;

/**
* @param {boolean} success
* @this {WebInspector.StylePropertiesSection}
*/
function headerTextCommitted(success)
function headerTextCommitted()
{
delete this._parentPane._userOperation;
this._moveEditorFromSelector(moveDirection);
Expand All @@ -1539,47 +1538,57 @@ WebInspector.StylePropertiesSection.prototype = {
/**
* @param {!WebInspector.CSSRule} rule
* @param {string} newContent
* @return {!Promise.<boolean>}
* @return {!Promise}
*/
_setHeaderText: function(rule, newContent)
{
/**
* @param {!WebInspector.CSSRule} rule
* @param {!WebInspector.CSSStyleRule} rule
* @param {!WebInspector.TextRange} oldSelectorRange
* @param {boolean} success
* @return {boolean}
* @return {!Promise}
* @this {WebInspector.StylePropertiesSection}
*/
function updateSourceRanges(rule, oldSelectorRange, success)
function onSelectorsUpdated(rule, oldSelectorRange, success)
{
if (success) {
var doesAffectSelectedNode = rule.matchingSelectors.length > 0;
this.element.classList.toggle("no-affect", !doesAffectSelectedNode);

this._matchedStyles.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);
}
return true;
if (!success)
return Promise.resolve();
return this._matchedStyles.recomputeMatchingSelectors(rule)
.then(updateSourceRanges.bind(this, rule, oldSelectorRange));
}

if (!(rule instanceof WebInspector.CSSStyleRule))
return Promise.resolve(false);
/**
* @param {!WebInspector.CSSStyleRule} rule
* @param {!WebInspector.TextRange} oldSelectorRange
* @this {WebInspector.StylePropertiesSection}
*/
function updateSourceRanges(rule, oldSelectorRange)
{
var doesAffectSelectedNode = this._matchedStyles.matchingSelectors(rule).length > 0;
this.element.classList.toggle("no-affect", !doesAffectSelectedNode);

this._matchedStyles.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);
}

console.assert(rule instanceof WebInspector.CSSStyleRule);
var oldSelectorRange = rule.selectorRange();
if (!oldSelectorRange)
return Promise.resolve(false);
return Promise.resolve();
var selectedNode = this._parentPane.node();
return rule.setSelectorText(selectedNode ? selectedNode.id : 0, newContent).then(updateSourceRanges.bind(this, rule, oldSelectorRange));
return rule.setSelectorText(newContent)
.then(onSelectorsUpdated.bind(this, /** @type {!WebInspector.CSSStyleRule} */(rule), oldSelectorRange));
},

_editingSelectorCommittedForTest: function() { },

_updateRuleOrigin: function()
{
this._selectorRefElement.removeChildren();
this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._parentPane._cssModel, this._parentPane._linkifier, this._style.parentRule));
this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._matchedStyles, this._parentPane._linkifier, this._style.parentRule));
},

_editingSelectorEnded: function()
Expand All @@ -1598,26 +1607,28 @@ WebInspector.StylePropertiesSection.prototype = {
}

/**
* @param {!WebInspector.CSSStyleModel} cssModel
* @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
* @param {!WebInspector.Linkifier} linkifier
* @param {?WebInspector.CSSRule} rule
* @return {!Node}
*/
WebInspector.StylePropertiesSection.createRuleOriginNode = function(cssModel, linkifier, rule)
WebInspector.StylePropertiesSection.createRuleOriginNode = function(matchedStyles, linkifier, rule)
{
if (!rule)
return createTextNode("");

var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
var ruleLocation;
if (rule instanceof WebInspector.CSSStyleRule)
if (rule instanceof WebInspector.CSSStyleRule) {
var matchingSelectors = matchedStyles.matchingSelectors(rule);
var firstMatchingIndex = matchingSelectors.length ? matchingSelectors[0] : 0;
ruleLocation = rule.selectors[firstMatchingIndex].range;
else if (rule instanceof WebInspector.CSSKeyframeRule)
} else if (rule instanceof WebInspector.CSSKeyframeRule) {
ruleLocation = rule.key().range;
}

var header = rule.styleSheetId ? cssModel.styleSheetHeaderForId(rule.styleSheetId) : null;
var header = rule.styleSheetId ? matchedStyles.cssModel().styleSheetHeaderForId(rule.styleSheetId) : null;
if (ruleLocation && rule.styleSheetId && header && header.resourceURL())
return WebInspector.StylePropertiesSection._linkifyRuleLocation(cssModel, linkifier, rule.styleSheetId, ruleLocation);
return WebInspector.StylePropertiesSection._linkifyRuleLocation(matchedStyles.cssModel(), linkifier, rule.styleSheetId, ruleLocation);

if (rule.isUserAgent())
return createTextNode(WebInspector.UIString("user agent stylesheet"));
Expand Down Expand Up @@ -1718,17 +1729,28 @@ WebInspector.BlankStylePropertiesSection.prototype = {
}

/**
* @param {?WebInspector.CSSRule} newRule
* @param {?WebInspector.CSSStyleRule} newRule
* @return {!Promise}
* @this {WebInspector.StylePropertiesSection}
*/
function userCallback(newRule)
function onRuleAdded(newRule)
{
if (!newRule) {
this.editingSelectorCancelled();
this._editingSelectorCommittedForTest();
return;
return Promise.resolve();
}
var doesSelectorAffectSelectedNode = newRule.matchingSelectors.length > 0;
return this._matchedStyles.addNewRule(newRule, this._matchedStyles.node())
.then(onAddedToCascade.bind(this, newRule));
}

/**
* @param {!WebInspector.CSSStyleRule} newRule
* @this {WebInspector.StylePropertiesSection}
*/
function onAddedToCascade(newRule)
{
var doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors(newRule).length > 0;
this._makeNormal(newRule);

if (!doesSelectorAffectSelectedNode)
Expand Down Expand Up @@ -1757,7 +1779,8 @@ WebInspector.BlankStylePropertiesSection.prototype = {

var cssModel = this._parentPane._cssModel;
var ruleText = this._rulePrefix() + newContent + " {}";
cssModel.addRule(this._styleSheetId, this._parentPane.node(), ruleText, this._ruleLocation, userCallback.bind(this));
cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation)
.then(onRuleAdded.bind(this));
},

editingSelectorCancelled: function()
Expand Down Expand Up @@ -1813,33 +1836,30 @@ WebInspector.KeyframePropertiesSection.prototype = {
* @override
* @param {!WebInspector.CSSRule} rule
* @param {string} newContent
* @return {!Promise.<boolean>}
* @return {!Promise}
*/
_setHeaderText: function(rule, newContent)
{
/**
* @param {!WebInspector.CSSRule} rule
* @param {!WebInspector.TextRange} oldRange
* @param {boolean} success
* @return {boolean}
* @this {WebInspector.KeyframePropertiesSection}
*/
function updateSourceRanges(rule, oldRange, success)
{
if (success) {
var newRange = /** @type {!WebInspector.TextRange} */(rule.key().range);
rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.styleSheetId), oldRange, newRange);
this._parentPane._styleSheetRuleEdited(rule, oldRange, newRange);
this._parentPane._refreshUpdate(this);
}
return true;
if (!success)
return;
var newRange = /** @type {!WebInspector.TextRange} */(rule.key().range);
rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.styleSheetId), oldRange, newRange);
this._parentPane._styleSheetRuleEdited(rule, oldRange, newRange);
this._parentPane._refreshUpdate(this);
}

if (!(rule instanceof WebInspector.CSSKeyframeRule))
return Promise.resolve(false);
console.assert(rule instanceof WebInspector.CSSKeyframeRule);
var oldRange = rule.key().range;
if (!oldRange)
return Promise.resolve(false);
return Promise.resolve();
var selectedNode = this._parentPane.node();
return rule.setKeyText(newContent).then(updateSourceRanges.bind(this, rule, oldRange));
},
Expand Down
Loading

0 comments on commit 73af080

Please sign in to comment.