DevTools: kill WebInspector.SectionCascade class

third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 122 matching lines @@
          * @param {!Array.<!CSSAgent.PseudoElementMatches>=} pseudoPayload
          * @param {!Array.<!CSSAgent.InheritedStyleEntry>=} inheritedPayload
          * @return {?WebInspector.CSSStyleModel.MatchedStyleResult}
          * @this {WebInspector.CSSStyleModel}
          */
         function callback(error, inlinePayload, attributesPayload, matchedPayload, pseudoPayload, inheritedPayload)
         {
             if (error)
                 return null;
 
-            return new WebInspector.CSSStyleModel.MatchedStyleResult(this, nodeId, inlinePayload, attributesPayload, matchedPayload, pseudoPayload, inheritedPayload);
+             var node = this._domModel.nodeForId(nodeId);
+             if (!node)
+                return null;
+
+            return new WebInspector.CSSStyleModel.MatchedStyleResult(this, node, inlinePayload, attributesPayload, matchedPayload, pseudoPayload, inheritedPayload);
         }
 
         return this._agent.getMatchedStylesForNode(nodeId, callback.bind(this));
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @return {!Promise.<?Map.<string, string>>}
      */
     computedStylePromise: function(nodeId)
@@ skipping 1885 matching lines @@
  * @return {!WebInspector.CSSStyleModel}
  */
 WebInspector.CSSStyleModel.fromNode = function(node)
 {
     return /** @type {!WebInspector.CSSStyleModel} */ (WebInspector.CSSStyleModel.fromTarget(node.target()));
 }
 
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
- * @param {!DOMAgent.NodeId} nodeId
+ * @param {!WebInspector.DOMNode} node
  * @param {?CSSAgent.CSSStyle=} inlinePayload
  * @param {?CSSAgent.CSSStyle=} attributesPayload
  * @param {!Array.<!CSSAgent.RuleMatch>=} matchedPayload
  * @param {!Array.<!CSSAgent.PseudoElementMatches>=} pseudoPayload
  * @param {!Array.<!CSSAgent.InheritedStyleEntry>=} inheritedPayload
  */
-WebInspector.CSSStyleModel.MatchedStyleResult = function(cssModel, nodeId, inlinePayload, attributesPayload, matchedPayload, pseudoPayload, inheritedPayload)
+WebInspector.CSSStyleModel.MatchedStyleResult = function(cssModel, node, inlinePayload, attributesPayload, matchedPayload, pseudoPayload, inheritedPayload)
 {
     this._cssModel = cssModel;
-    this._node = this._cssModel._domModel.nodeForId(nodeId);
-
+    this._node = node;
     this._nodeStyles = [];
     this._nodeForStyle = new Map();
     this._inheritedStyles = new Set();
 
     /**
      * @this {WebInspector.CSSStyleModel.MatchedStyleResult}
      */
     function addAttributesStyle()
     {
         if (!attributesPayload)
@@ skipping 59 matching lines @@
             var pseudoStyles = [];
             var rules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(cssModel, entryPayload.matches);
             for (var j = rules.length - 1; j >= 0; --j) {
                 var pseudoRule = rules[j];
                 pseudoStyles.push(pseudoRule.style);
                 this._nodeForStyle.set(pseudoRule.style, pseudoElement);
             }
             this._pseudoStyles.set(entryPayload.pseudoType, pseudoStyles);
         }
     }
+
+    this.resetActiveProperties();
 }
 
 WebInspector.CSSStyleModel.MatchedStyleResult.prototype = {
     /**
+     * @return {!WebInspector.DOMNode}
+     */
+    node: function()
+    {
+        return this._node;
+    },
+
+    /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
+     * @return {boolean}
+     */
+    hasMatchingSelectors: function(style)
+    {
+        return style.parentRule ? style.parentRule.matchingSelectors && style.parentRule.matchingSelectors.length > 0 && this.mediaMatches(style) : true;

[dgozman, 2015/11/09 20:36:42]

I'm surprised that CSSRule has matchingSelectors property. Will you remove it?

[lushnikov, 2015/11/09 21:42:57]

Yes, I'm on my way there.

+    },
+
+    /**
+     * @param {!WebInspector.CSSStyleDeclaration} style
+     * @return {boolean}
+     */
+    mediaMatches: function(style)

[dgozman, 2015/11/09 20:36:42]

This method should be a part of CSSRule.

[lushnikov, 2015/11/09 21:42:57]

Rule does not have any medias, MatchedStyles object is responsible for binding
medias to rule. Thus this is a part of MatchedStyles object

[dgozman, 2015/11/09 21:48:29]

But you get media from parentRule. Isn't that a CSSRule? I'm also not so sure
why this method should be public.

[lushnikov, 2015/11/09 21:54:01]

This is a CSSRule, but it will not contain medias as much as it will not contain
matching selectors.

The reason for that is that CSSRule will be shared between MatchedStyles
objects. Medias/matching selectors
is a natural part of MatchedStyles.

The matchingMedias() method is currently used in StylesSidebarPane for its
rendering.
The patch just merges SectionCascade and MatchedStyles, it doesn't aim to change
any logic. 

[dgozman, 2015/11/09 22:03:36]

Thanks for explanation.
So, it's similar to proposed selectorMatches with a difference that active()
information doesn't ever change. Looks like it's better suited for SSP, isn't
it?
I cannot review a patch in the vacuum, not looking at relationship with current
and proposed design. That's why I have to ask all these questions.

[lushnikov, 2015/11/09 22:11:12]

Well, it is used for both rendering in SSP and computing cascade in the
MatchedStyles (a rule matches if there's a matching selector and if rule's
medias match)
Sure, gotya!

+    {
+        var media = style.parentRule ? style.parentRule.media : [];
+        for (var i = 0; media && i < media.length; ++i) {
+            if (!media[i].active())
+                return false;
+        }
+        return true;
+    },
+
+    /**
      * @return {!Array<!WebInspector.CSSStyleDeclaration>}
      */
     nodeStyles: function()
     {
         return this._nodeStyles;
     },
 
     /**
      * @return {!Map.<!DOMAgent.PseudoType, !Array<!WebInspector.CSSStyleDeclaration>>}
      */
@@ skipping 27 matching lines @@
         return this._nodeForStyle.get(style) || null;
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
     isInherited: function(style)
     {
         return this._inheritedStyles.has(style);
+    },
+
+    /**
+     * @param {!WebInspector.CSSProperty} property
+     * @return {?WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState}
+     */
+    propertyState: function(property)
+    {
+        if (this._propertiesState.size === 0) {

[dgozman, 2015/11/09 20:36:42]

Could it be that size is zero even after calculation? Maybe reset map to null?

[lushnikov, 2015/11/09 21:42:57]

You might recreate this situation if you'd like: you should change every rule's
selector to something non-matching. However, this doesn't change much.

One more thing: as per design doc, this state will be removed from MatchedStyles
object. 

+            this._computeActiveProperties(this._nodeStyles, this._propertiesState);
+            for (var pseudoElementStyles of this._pseudoStyles.valuesArray())
+                this._computeActiveProperties(pseudoElementStyles, this._propertiesState);
+        }
+        return this._propertiesState.get(property) || null;
+    },
+
+    resetActiveProperties: function()
+    {
+        /** @type {!Map<!WebInspector.CSSProperty, !WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState>} */
+        this._propertiesState = new Map();

[dgozman, 2015/11/09 20:36:42]

.clear()

[lushnikov, 2015/11/09 21:42:57]

The resetActiveProperties() is used in the constructor to create the map.

+    },
+
+    /**
+     * @param {!Array<!WebInspector.CSSStyleDeclaration>} styles
+     * @param {!Map<!WebInspector.CSSProperty, !WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState>} result
+     */
+    _computeActiveProperties: function(styles, result)
+    {
+        /** @type {!Set.<string>} */
+        var foundImportantProperties = new Set();
+        /** @type {!Map.<string, !Map<string, !WebInspector.CSSProperty>>} */
+        var propertyToEffectiveRule = new Map();
+        /** @type {!Map.<string, !WebInspector.DOMNode>} */
+        var inheritedPropertyToNode = new Map();
+        /** @type {!Set<string>} */
+        var allUsedProperties = new Set();
+        for (var i = 0; i < styles.length; ++i) {
+            var style = styles[i];
+            if (!this.hasMatchingSelectors(style))
+                continue;
+
+            /** @type {!Map<string, !WebInspector.CSSProperty>} */
+            var styleActiveProperties = new Map();
+            var allProperties = style.allProperties;
+            for (var j = 0; j < allProperties.length; ++j) {
+                var property = allProperties[j];
+
+                // Do not pick non-inherited properties from inherited styles.
+                var inherited = this.isInherited(style);
+                if (inherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name))
+                    continue;
+
+                if (!property.activeInStyle()) {
+                    result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+                    continue;
+                }
+
+                var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
+                if (foundImportantProperties.has(canonicalName)) {
+                    result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+                    continue;
+                }
+
+                if (!property.important && allUsedProperties.has(canonicalName)) {
+                    result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+                    continue;
+                }
+
+                var isKnownProperty = propertyToEffectiveRule.has(canonicalName);
+                var inheritedFromNode = inherited ? this.nodeForStyle(style) : null;
+                if (!isKnownProperty && inheritedFromNode && !inheritedPropertyToNode.has(canonicalName))
+                    inheritedPropertyToNode.set(canonicalName, inheritedFromNode);
+
+                if (property.important) {
+                    if (inherited && isKnownProperty && inheritedFromNode !== inheritedPropertyToNode.get(canonicalName)) {
+                        result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+                        continue;
+                    }
+
+                    foundImportantProperties.add(canonicalName);
+                    if (isKnownProperty) {
+                        var overloaded = /** @type {!WebInspector.CSSProperty} */(propertyToEffectiveRule.get(canonicalName).get(canonicalName));
+                        result.set(overloaded, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+                        propertyToEffectiveRule.get(canonicalName).delete(canonicalName);
+                    }
+                }
+
+                styleActiveProperties.set(canonicalName, property);
+                allUsedProperties.add(canonicalName);
+                propertyToEffectiveRule.set(canonicalName, styleActiveProperties);
+                result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Active);
+            }
+
+            // 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 (!styleActiveProperties.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 && !styleActiveProperties.has(longhandCanonicalName);
+                }
+                if (!notUsed)
+                    continue;
+                styleActiveProperties.delete(canonicalName);
+                allUsedProperties.delete(canonicalName);
+                result.set(property, WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded);
+            }
+        }
     }
 }
 
+/** @enum {string} */
+WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState = {
+    Active: "Active",
+    Overloaded: "Overloaded"
+}
+
 /**
  * @constructor
  * @param {?WebInspector.CSSStyleDeclaration} inlineStyle
  * @param {?WebInspector.CSSStyleDeclaration} attributesStyle
  */
 WebInspector.CSSStyleModel.InlineStyleResult = function(inlineStyle, attributesStyle)
 {
     this.inlineStyle = inlineStyle;
     this.attributesStyle = attributesStyle;
 }