Web Inspector: [Styles] !important priority not honored inside the same declaration
authorapavlov@chromium.org <apavlov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Oct 2012 15:18:23 +0000 (15:18 +0000)
committerapavlov@chromium.org <apavlov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Oct 2012 15:18:23 +0000 (15:18 +0000)
https://bugs.webkit.org/show_bug.cgi?id=99170

Reviewed by Yury Semikhatsky.

Source/WebCore:

Property priorities were not considered inside the same CSS rule. !important properties should stay active
even if followed by non-!important properties with the same name.

* inspector/InspectorStyleSheet.cpp:
(WebCore::InspectorStyle::styleWithProperties):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection.prototype.onpopulate):
(WebInspector.ComputedStylePropertiesSection.prototype.rebuildComputedTrace):

LayoutTests:

* inspector/elements/elements-panel-styles-expected.txt:
* inspector/elements/resources/elements-panel-styles.css:
(.foo):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@131187 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/inspector/elements/elements-panel-styles-expected.txt
LayoutTests/inspector/elements/resources/elements-panel-styles.css
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorStyleSheet.cpp
Source/WebCore/inspector/front-end/StylesSidebarPane.js

index 70e7223..db6a6d6 100644 (file)
@@ -1,3 +1,14 @@
+2012-10-12  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: [Styles] !important priority not honored inside the same declaration
+        https://bugs.webkit.org/show_bug.cgi?id=99170
+
+        Reviewed by Yury Semikhatsky.
+
+        * inspector/elements/elements-panel-styles-expected.txt:
+        * inspector/elements/resources/elements-panel-styles.css:
+        (.foo):
+
 2012-10-12  Sudarsana Nagineni  <sudarsana.nagineni@intel.com>
 
         [EFL] Gardening to make the bots green
index bff1265..950b175 100644 (file)
@@ -13,11 +13,11 @@ border-top-left-radius: 5px;
 border-top-right-radius: 5px;
     .foo - 5px elements-panel-styles.css:14
 color: rgb(0, 0, 255);
-    .foo, .foo::before - blue elements-panel-styles.css:22
+    .foo, .foo::before - blue elements-panel-styles.css:24
     /-- overloaded --/ .foo - black elements-panel-styles.css:14
 display: block;
     /-- overloaded --/ element.style - none 
-    .foo, .foo::before - block !important elements-panel-styles.css:22
+    .foo, .foo::before - block !important elements-panel-styles.css:24
     /-- overloaded --/ div - block user agent stylesheet
 font-family: serif;
     #container - serif elements-panel-styles.css:5
@@ -27,6 +27,9 @@ font-size: 14px;
 font-style: italic;
     #container .foo - italic !important elements-panel-styles.css:10
     /-- overloaded --/ .foo - normal !important elements-panel-styles.css:14
+font-weight: normal;
+    .foo - normal !important elements-panel-styles.css:14
+    /-- overloaded --/ .foo - bold elements-panel-styles.css:14
 margin-bottom: 2px;
     .foo - 2px elements-panel-styles.css:14
 margin-left: 0px;
@@ -49,10 +52,10 @@ element.style  { ()
 font-style: italic !important;
 
 [expanded] 
-.foo  { (elements-panel-styles.css:41)
+.foo  { (elements-panel-styles.css:43)
 
 [expanded] 
-.foo, .foo::before  { (elements-panel-styles.css:22)
+.foo, .foo::before  { (elements-panel-styles.css:24)
 content: "[before Foo]";
 color: blue;
 display: block !important;
@@ -72,6 +75,8 @@ border-radius: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
 /-- overloaded --/ font-style: normal !important;
+font-weight: normal !important;
+/-- overloaded --/ font-weight: bold;
 
 [expanded] 
 div[Attributes Style]  { ()
@@ -95,14 +100,14 @@ body  { (elements-panel-styles.css:1)
 
 ======== Pseudo ::before element ========
 [expanded] 
-.foo::before  { (elements-panel-styles.css:45)
+.foo::before  { (elements-panel-styles.css:47)
 
 [expanded] 
-.foo::before  { (elements-panel-styles.css:28)
+.foo::before  { (elements-panel-styles.css:30)
 color: red;
 
 [expanded] 
-.foo, .foo::before  { (elements-panel-styles.css:22)
+.foo, .foo::before  { (elements-panel-styles.css:24)
 content: "[before Foo]";
 /-- overloaded --/ color: blue;
 display: block !important;
@@ -110,12 +115,12 @@ display: block !important;
 
 ======== Pseudo ::after element ========
 [expanded] 
-.foo::after  { (elements-panel-styles.css:36)
+.foo::after  { (elements-panel-styles.css:38)
 font-family: courier;
 content: "[after Foo 2]";
 
 [expanded] 
-.foo::after  { (elements-panel-styles.css:32)
+.foo::after  { (elements-panel-styles.css:34)
 /-- overloaded --/ content: "[after Foo]";
 color: green;
 
index 868d8a7..c7cbde8 100644 (file)
@@ -17,6 +17,8 @@ body {
     margin: 10px 0 2px;
     border-radius: 5px;
     font-style: normal !important;
+    font-weight: normal !important;
+    font-weight: bold;
 }
 
 .foo, .foo::before {
index 570a84a..1bc5383 100644 (file)
@@ -1,3 +1,19 @@
+2012-10-12  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: [Styles] !important priority not honored inside the same declaration
+        https://bugs.webkit.org/show_bug.cgi?id=99170
+
+        Reviewed by Yury Semikhatsky.
+
+        Property priorities were not considered inside the same CSS rule. !important properties should stay active
+        even if followed by non-!important properties with the same name.
+
+        * inspector/InspectorStyleSheet.cpp:
+        (WebCore::InspectorStyle::styleWithProperties):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertiesSection.prototype.onpopulate):
+        (WebInspector.ComputedStylePropertiesSection.prototype.rebuildComputedTrace):
+
 2012-10-12  Pavel Feldman  <pfeldman@chromium.org>
 
         Web Inspector: use hard-coded zoom factors instead of 1.2 powers.
index 2130501..cc3ccf8 100644 (file)
@@ -497,6 +497,8 @@ PassRefPtr<TypeBuilder::CSS::CSSStyle> InspectorStyle::styleWithProperties() con
     RefPtr<Array<TypeBuilder::CSS::ShorthandEntry> > shorthandEntries = Array<TypeBuilder::CSS::ShorthandEntry>::create();
     HashMap<String, RefPtr<TypeBuilder::CSS::CSSProperty> > propertyNameToPreviousActiveProperty;
     HashSet<String> foundShorthands;
+    String previousPriority;
+    String previousStatus;
 
     for (Vector<InspectorStyleProperty>::iterator it = properties.begin(), itEnd = properties.end(); it != itEnd; ++it) {
         const CSSPropertySourceData& propertyEntry = it->sourceData;
@@ -532,9 +534,18 @@ PassRefPtr<TypeBuilder::CSS::CSSStyle> InspectorStyle::styleWithProperties() con
                 String canonicalPropertyName = propertyId ? getPropertyNameString(propertyId) : name;
                 HashMap<String, RefPtr<TypeBuilder::CSS::CSSProperty> >::iterator activeIt = propertyNameToPreviousActiveProperty.find(canonicalPropertyName);
                 if (activeIt != propertyNameToPreviousActiveProperty.end()) {
-                    if (propertyEntry.parsedOk)
-                        shouldInactivate = true;
-                    else {
+                    if (propertyEntry.parsedOk) {
+                        bool successPriority = activeIt->value->getString(TypeBuilder::CSS::CSSProperty::Priority, &previousPriority);
+                        bool successStatus = activeIt->value->getString(TypeBuilder::CSS::CSSProperty::Status, &previousStatus);
+                        if (successStatus && previousStatus != "inactive") {
+                            if (propertyEntry.important || !successPriority) // Priority not set == "not important".
+                                shouldInactivate = true;
+                            else if (status == TypeBuilder::CSS::CSSProperty::Status::Active) {
+                                // Inactivate a non-important property following the same-named important property.
+                                status = TypeBuilder::CSS::CSSProperty::Status::Inactive;
+                            }
+                        }
+                    } else {
                         bool previousParsedOk;
                         bool success = activeIt->value->getBoolean(TypeBuilder::CSS::CSSProperty::ParsedOk, &previousParsedOk);
                         if (success && !previousParsedOk)
index 84f9094..af07068 100644 (file)
@@ -1045,7 +1045,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
                 var isShorthand = !!WebInspector.CSSCompletions.cssPropertiesMetainfo.longhands(property.name);
                 var inherited = this.isPropertyInherited(property.name);
-                var overloaded = this.isPropertyOverloaded(property.name);
+                var overloaded = property.inactive || this.isPropertyOverloaded(property.name);
                 var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
                 this.propertiesTreeOutline.appendChild(item);
             }
@@ -1079,7 +1079,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
                 // Generate synthetic shorthand we have a value for.
                 var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), "", "style", true, true, undefined);
-                var overloaded = this.isPropertyOverloaded(property.name, true);
+                var overloaded = property.inactive || this.isPropertyOverloaded(property.name, true);
                 var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, shorthandProperty,  /* isShorthand */ true, /* inherited */ false, overloaded);
                 this.propertiesTreeOutline.appendChild(item);
                 generatedShorthands[shorthand] = shorthandProperty;
@@ -1089,7 +1089,7 @@ WebInspector.StylePropertiesSection.prototype = {
                 continue;  // Shorthand for the property found.
 
             var inherited = this.isPropertyInherited(property.name);
-            var overloaded = this.isPropertyOverloaded(property.name, isShorthand);
+            var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand);
             var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
@@ -1450,7 +1450,7 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
                     subtitle.appendChild(section._createRuleOriginNode());
                     var childElement = new TreeElement(fragment, null, false);
                     treeElement.appendChild(childElement);
-                    if (section.isPropertyOverloaded(property.name))
+                    if (property.inactive || section.isPropertyOverloaded(property.name))
                         childElement.listItemElement.addStyleClass("overloaded");
                     if (!property.parsedOk)
                         childElement.listItemElement.addStyleClass("not-parsed-ok");