Skip to content

GitLab

T
tangled
Commit bb09c78a authored by lushnikov@chromium.org's avatar lushnikov@chromium.org
Browse files
Options

DevTools: simplify & fix property overload logic 

- Simplify StyleSectionModel.isPropertyOverloaded method. It does not
  require a second parameter any more.
- As a side effect of previous bullet, fix a bug and add a test.
- Centralize all logic of computing used properties in a single place.

BUG=496263
R=pfeldman

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

git-svn-id: svn://svn.chromium.org/blink/trunk@201190 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent b27b77e8
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 32 deletions
third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-properties-overload-expected.txt 0 → 100644
View file @ bb09c78a
Verifies that inspector figures out overloaded properties correctly.
Text.
[expanded]
element.style { ()
[expanded]
#inspect { (styles-properti…erload.html:11 -> styles-properties-overload.html:11:1)
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 1px;
font: 10px Arial;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: 10px;
line-height: normal;
font-family: Arial;
[expanded]
div { (styles-properti…verload.html:6 -> styles-properties-overload.html:6:1)
/-- overloaded --/ margin: 1px;
/-- overloaded --/ margin-top: 1px;
/-- overloaded --/ margin-right: 1px;
/-- overloaded --/ margin-bottom: 1px;
/-- overloaded --/ margin-left: 1px;
border: 1px solid black;
border-top-color: black;
border-top-style: solid;
border-top-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
[expanded]
div { (user agent stylesheet)
display: block;
======== Inherited from div.container ========
[expanded]
.container { (styles-properti…erload.html:19 -> styles-properties-overload.html:19:1)
/-- overloaded --/ font-size: 10px;
third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-properties-overload.html 0 → 100644
View file @ bb09c78a
<html>
<head>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
<style>
div {
margin: 1px;
border: 1px solid black;
}
#inspect {
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 1px;
font: 10px Arial;
}
.container {
font-size: 10px;
border: 0;
}
</style>
<script>
function test()
{
InspectorTest.selectNodeAndWaitForStyles("inspect", step2);
function step2()
{
InspectorTest.dumpSelectedElementStyles(true, false, false);
InspectorTest.completeTest();
}
}
</script>
</head>
<body onload="runTest()">
<p>Verifies that inspector figures out overloaded properties correctly.</p>
<div class="container">
<div id="inspect">Text.</div>
</div>
</body>
</html>
third_party/WebKit/Source/devtools/front_end/elements/StylesSectionModel.js
View file @ bb09c78a
...@@ -156,45 +156,20 @@ WebInspector.StylesSectionModel.prototype = { ...@@ -156,45 +156,20 @@ WebInspector.StylesSectionModel.prototype = {
this._cascade._resetUsedProperties(); this._cascade._resetUsedProperties();
}, },
/**
* @return {!Set.<string>}
*/
usedProperties: function()
{
return this._cascade._usedPropertiesForModel(this);
},
/** /**
* @param {string} propertyName * @param {string} propertyName
* @param {boolean=} isShorthand
* @return {boolean} * @return {boolean}
*/ */
isPropertyOverloaded: function(propertyName, isShorthand) isPropertyOverloaded: function(propertyName)
{ {
if (!this.hasMatchingSelectors()) if (!this.hasMatchingSelectors())
return false; return false;
if (this.inherited() && !WebInspector.CSSMetadata.isPropertyInherited(propertyName))
if (this.inherited() && !WebInspector.CSSMetadata.isPropertyInherited(propertyName)) {
// In the inherited sections, only show overrides for the potentially inherited properties.
return false; return false;
}
var usedProperties = this._cascade._usedPropertiesForModel(this);
var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName); var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName);
var used = this.usedProperties().has(canonicalName); return !usedProperties.has(canonicalName);
if (used || !isShorthand)
return !used;
// Find out if any of the individual longhand properties of the shorthand
// are used, if none are then the shorthand is overloaded too.
var longhandProperties = this.style().longhandProperties(propertyName);
for (var j = 0; j < longhandProperties.length; ++j) {
var individualProperty = longhandProperties[j];
var canonicalPropertyName = WebInspector.CSSMetadata.canonicalPropertyName(individualProperty.name);
if (this.usedProperties().has(canonicalPropertyName))
return false;
}
return true;
} }
} }
...@@ -360,6 +335,25 @@ WebInspector.SectionCascade._computeUsedProperties = function(styleRules, allUse ...@@ -360,6 +335,25 @@ WebInspector.SectionCascade._computeUsedProperties = function(styleRules, allUse
allUsedProperties.add(canonicalName); allUsedProperties.add(canonicalName);
propertyToEffectiveRule.set(canonicalName, styleRuleUsedProperties); propertyToEffectiveRule.set(canonicalName, styleRuleUsedProperties);
} }
// 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 (!styleRuleUsedProperties.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 && !styleRuleUsedProperties.has(longhandCanonicalName);
}
if (!notUsed)
continue;
styleRuleUsedProperties.delete(canonicalName);
allUsedProperties.delete(canonicalName);
}
} }
return stylesUsedProperties; return stylesUsedProperties;
} }
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
View file @ bb09c78a
...@@ -1269,7 +1269,7 @@ WebInspector.StylePropertiesSection.prototype = { ...@@ -1269,7 +1269,7 @@ WebInspector.StylePropertiesSection.prototype = {
} else { } else {
var child = this.propertiesTreeOutline.firstChild(); var child = this.propertiesTreeOutline.firstChild();
while (child) { while (child) {
child.setOverloaded(this.styleRule.isPropertyOverloaded(child.name, child.isShorthand)); child.setOverloaded(this.styleRule.isPropertyOverloaded(child.name));
child = child.traverseNextTreeElement(false, null, true); child = child.traverseNextTreeElement(false, null, true);
} }
} }
...@@ -1295,7 +1295,7 @@ WebInspector.StylePropertiesSection.prototype = { ...@@ -1295,7 +1295,7 @@ WebInspector.StylePropertiesSection.prototype = {
for (var property of style.leadingProperties()) { for (var property of style.leadingProperties()) {
var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name); var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
var inherited = this.isPropertyInherited(property.name); var inherited = this.isPropertyInherited(property.name);
var overloaded = this.styleRule.isPropertyOverloaded(property.name, isShorthand); var overloaded = this.styleRule.isPropertyOverloaded(property.name);
var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded); var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded);
this.propertiesTreeOutline.appendChild(item); this.propertiesTreeOutline.appendChild(item);
} }
......
third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
View file @ bb09c78a
...@@ -745,7 +745,7 @@ WebInspector.CSSStyleDeclaration.prototype = { ...@@ -745,7 +745,7 @@ WebInspector.CSSStyleDeclaration.prototype = {
/** /**
* @return {!Array.<!WebInspector.CSSProperty>} * @return {!Array.<!WebInspector.CSSProperty>}
*/ */
leadingProperties: function() _computeLeadingProperties: function()
{ {
/** /**
* @param {!WebInspector.CSSProperty} property * @param {!WebInspector.CSSProperty} property
...@@ -776,6 +776,16 @@ WebInspector.CSSStyleDeclaration.prototype = { ...@@ -776,6 +776,16 @@ WebInspector.CSSStyleDeclaration.prototype = {
return leadingProperties; return leadingProperties;
}, },
/**
* @return {!Array.<!WebInspector.CSSProperty>}
*/
leadingProperties: function()
{
if (!this._leadingProperties)
this._leadingProperties = this._computeLeadingProperties();
return this._leadingProperties;
},
/** /**
* @return {!WebInspector.Target} * @return {!WebInspector.Target}
*/ */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment