Skip to content

GitLab

T
tangled
Commit 5a3d61f3 authored by lushnikov's avatar lushnikov Committed by Commit bot
Browse files
Options

DevTools: [CSS] do not treat random css comments as disabled properties 

The patch starts treating css comments as CSS properties if the parsed
property name resembles a valid property name.

BUG=568017
R=pfeldman

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

Cr-Commit-Position: refs/heads/master@{#369365}
parent 33043125
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 107 deletions
third_party/WebKit/LayoutTests/inspector/elements/styles-2/parse-comments-expected.txt
View file @ 5a3d61f3
......@@ -6,15 +6,15 @@ element.style { ()
[expanded]
#main { (parse-comments.html:25 -> parse-comments.html:25:1)
/-- overloaded --/ /-- disabled --/ /* Comment: value; */
color/* Comment: value */:/* Comment: value */ green/* Comment: value */;
/-- overloaded --/ /-- disabled --/ /* Comment: value; */
/-- overloaded --/ /-- disabled --/ /* color: red; */
color/* color: red */:/* color: red */ green/* color: red */;
/-- overloaded --/ /-- disabled --/ /* color: red; */
[expanded]
#main { (parse-comments.html:9 -> parse-comments.html:9:25)
/-- overloaded --/ /-- disabled --/ /* Comment: value; */
background /* Comment: value */ :/* Comment: value */blue/* Comment: value */;
/-- overloaded --/ /-- disabled --/ /* Comment: value; */
#main { (parse-comments.html:9 -> parse-comments.html:9:21)
/-- overloaded --/ /-- disabled --/ /* color: red; */
background /* color: red */ :/* color: red */blue/* color: red */;
/-- overloaded --/ /-- disabled --/ /* color: red; */
[expanded]
div { (user agent stylesheet)
......
third_party/WebKit/LayoutTests/inspector/elements/styles-2/parse-comments.html
View file @ 5a3d61f3
......@@ -2,34 +2,34 @@
<head>
<style type="text/css">
/* Comment: value */
/* color: red */
@media /* Comment: value */ not /* Comment: value */print /* Comment: value */ {
/* Comment: value */
/* Comment: value */#main/* Comment: value */{/* Comment: value */ background /* Comment: value */ :/* Comment: value */blue/* Comment: value */;/* Comment: value */ }
/* Comment: value */
@media /* color: red */ not /* color: red */print /* color: red */ {
/* color: red */
/* color: red */#main/* color: red */{/* color: red */ background /* color: red */ :/* color: red */blue/* color: red */;/* color: red */ }
/* color: red */
}
/* Comment: value */
/* color: red */
@font-face {
/* Comment: value */
/* Comment: value */font-family/* Comment: value */:/* Comment: value */ Example/* Comment: value */;/* Comment: value */
/* Comment: value */
/* Comment: value */src/* Comment: value */:/* Comment: value */ url(bogus-example-url)/* Comment: value */;/* Comment: value */
/* Comment: value */
/* color: red */
/* color: red */font-family/* color: red */:/* color: red */ Example/* color: red */;/* color: red */
/* color: red */
/* color: red */src/* color: red */:/* color: red */ url(bogus-example-url)/* color: red */;/* color: red */
/* color: red */
}
/* Comment: value */
/* color: red */
#main /* Comment: value */{
/* Comment: value */color/* Comment: value */:/* Comment: value */ green/* Comment: value */;/* Comment: value */
#main /* color: red */{
/* color: red */color/* color: red */:/* color: red */ green/* color: red */;/* color: red */
}
/* Comment: value */
@page /* Comment: value */:right /* Comment: value */{/* Comment: value */
/* Comment: value */margin-left/* Comment: value */:/* Comment: value */ 3cm/* Comment: value */;/* Comment: value */
/* Comment: value */margin-right /* Comment: value */: /* Comment: value */4cm /* Comment: value */
}/*Comment: value*/
/* color: red */
@page /* color: red */:right /* color: red */{/* color: red */
/* color: red */margin-left/* color: red */:/* color: red */ 3cm/* color: red */;/* color: red */
/* color: red */margin-right /* color: red */: /* color: red */4cm /* color: red */
}/*color: red*/
</style>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
......
third_party/WebKit/LayoutTests/inspector/elements/styles-4/disable-last-property-without-semicolon-expected.txt
View file @ 5a3d61f3
......@@ -7,23 +7,23 @@ Running: initFormattedStyle
Running: testFormattedDisableLast
raw cssText:
{
property1: value1;
/* property2: value2 */
color: red;
/* margin: 0 */
}
Running: testFormattedInsertEnd
raw cssText:
{
property1: value1;
/* property2: value2 */
color: red;
/* margin: 0 */
endProperty: endValue;
}
Running: testFormattedEnable
raw cssText:
{
property1: value1;
property2: value2;
color: red;
margin: 0;
endProperty: endValue;
}
third_party/WebKit/LayoutTests/inspector/elements/styles-4/disable-last-property-without-semicolon.html
View file @ 5a3d61f3
......@@ -77,8 +77,8 @@ function test()
<style>
#formatted {
property1: value1;
property2: value2
color: red;
margin: 0
}
</style>
......
third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-formatting-expected.txt
View file @ 5a3d61f3
......@@ -10,46 +10,46 @@ raw cssText:
{
/* leading comment */
firstProperty: rgba(1, 2, 3, 0);
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3;
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedRemoveStart
raw cssText:
{
/* leading comment */
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3;
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedInsertMiddle
raw cssText:
{
/* leading comment */
property1: value1; /* comment1 */
color: red; /* comment1 */
middleProperty: middleValue /* comment */;
property2: value2;/* comment2 */
property3: value3;
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedRemoveMiddle
raw cssText:
{
/* leading comment */
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3;
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedInsertEnd
raw cssText:
{
/* leading comment */
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3;
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
endProperty: endValue;
}
......@@ -57,36 +57,36 @@ Running: testFormattedRemoveEnd
raw cssText:
{
/* leading comment */
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3;
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedDisableStart
raw cssText:
{
/* leading comment */
/* property1: value1; */ /* comment1 */
property2: value2;/* comment2 */
property3: value3;
/* color: red; */ /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0;
}
Running: testFormattedDisableEnd
raw cssText:
{
/* leading comment */
/* property1: value1; */ /* comment1 */
property2: value2;/* comment2 */
/* property3: value3; */
/* color: red; */ /* comment1 */
margin: 0;/* comment2 */ /* like: property */
/* padding: 0; */
}
Running: testFormattedDisableMiddle
raw cssText:
{
/* leading comment */
/* property1: value1; */ /* comment1 */
/* property2: value2; *//* comment2 */
/* property3: value3; */
/* color: red; */ /* comment1 */
/* margin: 0; *//* comment2 */ /* like: property */
/* padding: 0; */
}
Running: testFormattedInsert1
......@@ -94,9 +94,9 @@ raw cssText:
{
/* leading comment */
propA: valA;
/* property1: value1; */ /* comment1 */
/* property2: value2; *//* comment2 */
/* property3: value3; */
/* color: red; */ /* comment1 */
/* margin: 0; *//* comment2 */ /* like: property */
/* padding: 0; */
}
Running: testFormattedInsert2
......@@ -104,10 +104,10 @@ raw cssText:
{
/* leading comment */
propA: valA;
/* property1: value1; */ /* comment1 */
/* color: red; */ /* comment1 */
propB: valB;
/* property2: value2; *//* comment2 */
/* property3: value3; */
/* margin: 0; *//* comment2 */ /* like: property */
/* padding: 0; */
}
Running: testFormattedInsert3
......@@ -115,10 +115,10 @@ raw cssText:
{
/* leading comment */
propA: valA;
/* property1: value1; */ /* comment1 */
/* color: red; */ /* comment1 */
propB: valB;
/* property2: value2; *//* comment2 */
/* property3: value3; */
/* margin: 0; *//* comment2 */ /* like: property */
/* padding: 0; */
propC: valC;
}
......@@ -127,10 +127,10 @@ raw cssText:
{
/* leading comment */
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
/* property2: value2; *//* comment2 */
/* property3: value3; */
/* margin: 0; *//* comment2 */ /* like: property */
/* padding: 0; */
propC: valC;
}
......@@ -139,10 +139,10 @@ raw cssText:
{
/* leading comment */
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
/* property2: value2; *//* comment2 */
property3: value3;
/* margin: 0; *//* comment2 */ /* like: property */
padding: 0;
propC: valC;
}
......@@ -151,10 +151,10 @@ raw cssText:
{
/* leading comment */
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
property2: value2;/* comment2 */
property3: value3;
margin: 0;/* comment2 */ /* like: property */
padding: 0;
propC: valC;
}
......@@ -164,10 +164,10 @@ raw cssText:
/* leading comment */
-webkit-animation: linear;
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
property2: value2;/* comment2 */
property3: value3;
margin: 0;/* comment2 */ /* like: property */
padding: 0;
propC: valC;
}
......@@ -178,10 +178,10 @@ raw cssText:
-webkit-animation: linear;
unicode-bidi: webkit-isolate;
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
property2: value2;/* comment2 */
property3: value3;
margin: 0;/* comment2 */ /* like: property */
padding: 0;
propC: valC;
}
......@@ -193,10 +193,10 @@ raw cssText:
-webkit-animation: linear;
unicode-bidi: webkit-isolate;
propA: valA;
property1: value1; /* comment1 */
color: red; /* comment1 */
propB: valB;
property2: value2;/* comment2 */
property3: value3;
margin: 0;/* comment2 */ /* like: property */
padding: 0;
propC: valC;
}
......@@ -204,49 +204,49 @@ Running: initUnformattedStyle
Running: testUnformattedInsertStart
raw cssText:
{/*leading comment*/firstProperty: firstValue;property1:value1;property2:value2;property3:value3;}
{/*leading comment*/firstProperty: firstValue;color:red;margin:0;padding:0;}
Running: testUnformattedRemoveStart
raw cssText:
{/*leading comment*/property1:value1;property2:value2;property3:value3;}
{/*leading comment*/color:red;margin:0;padding:0;}
Running: testUnformattedInsertMiddle
raw cssText:
{/*leading comment*/property1:value1;middleProperty: middleValue;property2:value2;property3:value3;}
{/*leading comment*/color:red;middleProperty: middleValue;margin:0;padding:0;}
Running: testUnformattedRemoveMiddle
raw cssText:
{/*leading comment*/property1:value1;property2:value2;property3:value3;}
{/*leading comment*/color:red;margin:0;padding:0;}
Running: testUnformattedInsertEnd
raw cssText:
{/*leading comment*/property1:value1;property2:value2;property3:value3;endProperty: endValue;}
{/*leading comment*/color:red;margin:0;padding:0;endProperty: endValue;}
Running: testUnformattedRemoveEnd
raw cssText:
{/*leading comment*/property1:value1;property2:value2;property3:value3;}
{/*leading comment*/color:red;margin:0;padding:0;}
Running: testUnformattedDisableStart
raw cssText:
{/*leading comment*//* property1:value1; */property2:value2;property3:value3;}
{/*leading comment*//* color:red; */margin:0;padding:0;}
Running: testUnformattedDisableEnd
raw cssText:
{/*leading comment*//* property1:value1; */property2:value2;/* property3:value3; */}
{/*leading comment*//* color:red; */margin:0;/* padding:0; */}
Running: testUnformattedDisableMiddle
raw cssText:
{/*leading comment*//* property1:value1; *//* property2:value2; *//* property3:value3; */}
{/*leading comment*//* color:red; *//* margin:0; *//* padding:0; */}
Running: testUnformattedEnableStart
raw cssText:
{/*leading comment*/property1:value1;/* property2:value2; *//* property3:value3; */}
{/*leading comment*/color:red;/* margin:0; *//* padding:0; */}
Running: testUnformattedEnableEnd
raw cssText:
{/*leading comment*/property1:value1;/* property2:value2; */property3:value3;}
{/*leading comment*/color:red;/* margin:0; */padding:0;}
Running: testUnformattedEnableMiddle
raw cssText:
{/*leading comment*/property1:value1;property2:value2;property3:value3;}
{/*leading comment*/color:red;margin:0;padding:0;}
third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-formatting.html
View file @ 5a3d61f3
......@@ -264,12 +264,12 @@ function test()
#formatted {
/* leading comment */
property1: value1; /* comment1 */
property2: value2;/* comment2 */
property3: value3
color: red; /* comment1 */
margin: 0;/* comment2 */ /* like: property */
padding: 0
}
#unformatted {/*leading comment*/property1:value1;property2:value2;property3:value3;}
#unformatted {/*leading comment*/color:red;margin:0;padding:0;}
</style>
</head>
......
third_party/WebKit/Source/core/inspector/InspectorStyleSheet.cpp
View file @ 5a3d61f3
......@@ -296,7 +296,8 @@ void StyleSheetHandler::observeComment(unsigned startOffset, unsigned endOffset)
if (commentPropertyData.size() != 1)
return;
CSSPropertySourceData& propertyData = commentPropertyData.at(0);
if (propertyData.range.length() != commentText.length())
bool parsedOk = propertyData.parsedOk || propertyData.name.startsWith("-moz-") || propertyData.name.startsWith("-o-") || propertyData.name.startsWith("-webkit-") || propertyData.name.startsWith("-ms-");
if (!parsedOk || propertyData.range.length() != commentText.length())
return;
m_currentRuleDataStack.last()->styleSourceData->propertyData.append(
......
third_party/WebKit/Source/devtools/front_end/sdk/CSSMetadata.js
View file @ 5a3d61f3
......@@ -134,6 +134,18 @@ WebInspector.CSSMetadata.canonicalPropertyName = function(name)
return match[1].toLowerCase();
}
/**
* @param {string} propertyName
* @return {boolean}
*/
WebInspector.CSSMetadata.isCSSPropertyName = function(propertyName)
{
if (propertyName.startsWith("-moz-") || propertyName.startsWith("-o-") || propertyName.startsWith("-webkit-") || propertyName.startsWith("-ms-"))
return true;
var hasSupportedProperties = WebInspector.CSSMetadata.cssPropertiesMetainfo._values.length > 0;
return !hasSupportedProperties || WebInspector.CSSMetadata.cssPropertiesMetainfoKeySet().hasOwnProperty(propertyName);
}
/**
* @param {string} propertyName
* @return {boolean}
......
third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
View file @ 5a3d61f3
......@@ -1439,9 +1439,9 @@ WebInspector.CSSProperty.prototype = {
function processToken(token, tokenType, column, newColumn)
{
if (!insideProperty) {
var isDisabledProperty = tokenType && tokenType.includes("css-comment") && token.includes(":");
var disabledProperty = tokenType && tokenType.includes("css-comment") && isDisabledProperty(token);
var isPropertyStart = tokenType && (tokenType.includes("css-meta") || tokenType.includes("css-property") || tokenType.includes("css-variable-2"));
if (isDisabledProperty) {
if (disabledProperty) {
result = result.trimRight() + indentation + token;
} else if (isPropertyStart) {
insideProperty = true;
......@@ -1461,6 +1461,19 @@ WebInspector.CSSProperty.prototype = {
propertyText += token;
}
}
/**
* @param {string} text
* @return {boolean}
*/
function isDisabledProperty(text)
{
var colon = text.indexOf(":");
if (colon === -1)
return false;
var propertyName = text.substring(2, colon).trim();
return WebInspector.CSSMetadata.isCSSPropertyName(propertyName);
}
},
/**
......
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