DevTools: simplify WI.CSSProperty and WI.CSSStyleDeclaration interfaces

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 619 matching lines @@
         return this._cssModel;
     },
 
     __proto__: WebInspector.SDKObject.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSStyle} payload
+ * @param {boolean=} isComputedStyle
  */
-WebInspector.CSSStyleDeclaration = function(cssModel, payload)
+WebInspector.CSSStyleDeclaration = function(cssModel, payload, isComputedStyle)
 {
     this._cssModel = cssModel;
     this.styleSheetId = payload.styleSheetId;
     this.range = payload.range ? WebInspector.TextRange.fromObject(payload.range) : null;
 
     var shorthandEntries = payload.shorthandEntries;
     /** @type {!Map.<string, string>} */
     this._shorthandValues = new Map();
     /** @type {!Set.<string>} */
     this._shorthandIsImportant = new Set();
     for (var i = 0; i < shorthandEntries.length; ++i) {
         this._shorthandValues.set(shorthandEntries[i].name, shorthandEntries[i].value);
         if (shorthandEntries[i].important)
             this._shorthandIsImportant.add(shorthandEntries[i].name);
     }
 
-    this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty }
-    this._allProperties = []; // ALL properties: [ CSSProperty ]
-    this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty }
-    var payloadPropertyCount = payload.cssProperties.length;
-
-    for (var i = 0; i < payloadPropertyCount; ++i) {
+    this._allProperties = [];
+    for (var i = 0; i < payload.cssProperties.length; ++i) {
         var property = WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]);
         this._allProperties.push(property);
     }
 
-    this._computeActiveProperties();
+    if (!isComputedStyle) {
+        this._generateSyntheticPropertiesIfNeeded();
+        this._computeInactiveProperties();
+    }
 
-    var propertyIndex = 0;
-    for (var i = 0; i < this._allProperties.length; ++i) {
-        var property = this._allProperties[i];
-        if (property.disabled)
-            this.__disabledProperties[i] = property;
-        if (!property.active && !property.styleBased)
+    this._activePropertyMap = new Map();
+    for (var property of this._allProperties) {
+        if (!property.activeInStyle())
             continue;
-        var name = property.name;
-        this[propertyIndex] = name;
-        this._livePropertyMap[name] = property;
-        ++propertyIndex;
+        this._activePropertyMap.set(property.name, property);
     }
-    this.length = propertyIndex;
+
     if ("cssText" in payload)
         this.cssText = payload.cssText;
 }
 
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @return {!WebInspector.CSSStyleDeclaration}
  */
 WebInspector.CSSStyleDeclaration.createDummyStyle = function(cssModel)
 {
@@ skipping 18 matching lines @@
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!Array.<!CSSAgent.CSSComputedStyleProperty>} payload
  * @return {!WebInspector.CSSStyleDeclaration}
  */
 WebInspector.CSSStyleDeclaration.parseComputedStylePayload = function(cssModel, payload)
 {
     var newPayload = /** @type {!CSSAgent.CSSStyle} */ ({ cssProperties: [], shorthandEntries: [], width: "", height: "" });
     if (payload)
         newPayload.cssProperties = /** @type {!Array.<!CSSAgent.CSSProperty>} */ (payload);
 
-    return new WebInspector.CSSStyleDeclaration(cssModel, newPayload);
+    return new WebInspector.CSSStyleDeclaration(cssModel, newPayload, true);
 }
 
 WebInspector.CSSStyleDeclaration.prototype = {
+    _generateSyntheticPropertiesIfNeeded: function()
+    {
+        if (this.range)
+            return;
+
+        if (!this._shorthandValues.size)
+            return;
+
+        var propertiesSet = new Set();
+        for (var property of this._allProperties)
+            propertiesSet.add(property.name);
+
+        var generatedProperties = [];
+        // For style-based properties, generate shorthands with values when possible.
+        for (var property of this._allProperties) {
+            // For style-based properties, try generating shorthands.
+            var shorthands = WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name) || [];
+            for (var shorthand of shorthands) {
+                if (propertiesSet.has(shorthand))
+                    continue;  // There already is a shorthand this longhands falls under.
+                var shorthandValue = this._shorthandValues.get(shorthand);
+                if (!shorthandValue)
+                    continue;  // Never generate synthetic shorthands when no value is available.
+
+                // Generate synthetic shorthand we have a value for.
+                var shorthandImportance = !!this._shorthandIsImportant.has(shorthand);
+                var shorthandProperty = new WebInspector.CSSProperty(this, this.allProperties.length, shorthand, shorthandValue, shorthandImportance, false, true, false);
+                generatedProperties.push(shorthandProperty);
+                propertiesSet.add(shorthand);
+            }
+        }
+        this._allProperties = this._allProperties.concat(generatedProperties);
+    },
+
+    /**
+     * @return {!Array.<!WebInspector.CSSProperty>}
+     */
+    leadingProperties: function()
+    {
+        /**
+         * @param {!WebInspector.CSSProperty} property
+         * @return {boolean}
+         */
+        function propertyHasRange(property)
+        {
+            return !!property.range;
+        }
+
+        if (this.range)
+            return this._allProperties.filter(propertyHasRange);
+
+        var leadingProperties = [];
+        for (var property of this._allProperties) {
+            var shorthands = WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name) || [];
+            var belongToAnyShorthand = false;
+            for (var shorthand of shorthands) {
+                if (this._shorthandValues.get(shorthand)) {
+                    belongToAnyShorthand = true;
+                    break;
+                }
+            }
+            if (!belongToAnyShorthand)
+                leadingProperties.push(property);
+        }
+
+        return leadingProperties;
+    },
+
     /**
      * @return {!WebInspector.Target}
      */
     target: function()
     {
         return this._cssModel.target();
     },
 
     /**
      * @return {!WebInspector.CSSStyleModel}
@@ skipping 11 matching lines @@
     sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
     {
         if (this.styleSheetId !== styleSheetId)
             return;
         if (this.range)
             this.range = this.range.rebaseAfterTextEdit(oldRange, newRange);
         for (var i = 0; i < this._allProperties.length; ++i)
             this._allProperties[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
     },
 
-    _computeActiveProperties: function()
+    _computeInactiveProperties: function()
     {
         var activeProperties = {};
-        for (var i = this._allProperties.length - 1; i >= 0; --i) {
+        for (var i = 0; i < this._allProperties.length; ++i) {
             var property = this._allProperties[i];
-            if (property.styleBased || property.disabled)
+            if (property.disabled || !property.parsedOk) {
+                property._setActive(false);
                 continue;
-            property._setActive(false);
-            if (!property.parsedOk)
-                continue;
+            }
             var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
             var activeProperty = activeProperties[canonicalName];
-            if (!activeProperty || (!activeProperty.important && property.important))
+            if (!activeProperty) {
                 activeProperties[canonicalName] = property;
-        }
-        for (var propertyName in activeProperties) {
-            var property = activeProperties[propertyName];
-            property._setActive(true);
+            } else if (!activeProperty.important || property.important) {
+                activeProperty._setActive(false);
+                activeProperties[canonicalName] = property;
+            } else {
+                property._setActive(false);
+            }
         }
     },
 
     get allProperties()
     {
         return this._allProperties;
     },
 
     /**
      * @param {string} name
-     * @return {?WebInspector.CSSProperty}
-     */
-    getLiveProperty: function(name)
-    {
-        return this._livePropertyMap[name] || null;
-    },
-
-    /**
-     * @param {string} name
      * @return {string}
      */
     getPropertyValue: function(name)
     {
-        var property = this._livePropertyMap[name];
+        var property = this._activePropertyMap.get(name);
         return property ? property.value : "";
     },
 
     /**
      * @param {string} name
      * @return {boolean}
      */
     isPropertyImplicit: function(name)
     {
-        var property = this._livePropertyMap[name];
+        var property = this._activePropertyMap.get(name);
         return property ? property.implicit : "";
     },
 
     /**
      * @param {string} name
      * @return {!Array.<!WebInspector.CSSProperty>}
      */
     longhandProperties: function(name)
     {
         var longhands = WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(name);
         var result = [];
         for (var i = 0; longhands && i < longhands.length; ++i) {
-            var property = this._livePropertyMap[longhands[i]];
+            var property = this._activePropertyMap.get(longhands[i]);
             if (property)
                 result.push(property);
         }
         return result;
     },
 
     /**
-     * @param {string} shorthandProperty
-     * @return {string}
-     */
-    shorthandValue: function(shorthandProperty)
-    {
-        return this._shorthandValues.get(shorthandProperty) || "";
-    },
-
-    /**
-     * @param {string} shorthandProperty
-     * @return {boolean}
-     */
-    shorthandIsImportant: function(shorthandProperty)
-    {
-        return this._shorthandIsImportant.has(shorthandProperty);
-    },
-
-    /**
      * @param {number} index
      * @return {?WebInspector.CSSProperty}
      */
     propertyAt: function(index)
     {
         return (index < this.allProperties.length) ? this.allProperties[index] : null;
     },
 
     /**
      * @return {number}
@@ skipping 18 matching lines @@
     },
 
     /**
      * @param {number=} index
      * @return {!WebInspector.CSSProperty}
      */
     newBlankProperty: function(index)
     {
         index = (typeof index === "undefined") ? this.pastLastSourcePropertyIndex() : index;
         var property = new WebInspector.CSSProperty(this, index, "", "", false, false, true, false, "", this._insertionRange(index));
-        property._setActive(true);
         return property;
     },
 
     /**
      * @param {string} text
      * @param {boolean} majorChange
      * @return {!Promise.<?WebInspector.CSSStyleDeclaration>}
      */
     setText: function(text, majorChange)
     {
@@ skipping 254 matching lines @@
  */
 WebInspector.CSSProperty = function(ownerStyle, index, name, value, important, disabled, parsedOk, implicit, text, range)
 {
     this.ownerStyle = ownerStyle;
     this.index = index;
     this.name = name;
     this.value = value;
     this.important = important;
     this.disabled = disabled;
     this.parsedOk = parsedOk;
-    this.implicit = implicit;
+    this.implicit = implicit; // A longhand, implicitly set by missing values of shorthand.
     this.text = text;
     this.range = range ? WebInspector.TextRange.fromObject(range) : null;
+    this._active = true;

[pfeldman, 2015/08/21 17:40:42]

Why is active default?

[lushnikov, 2015/08/21 21:25:03]

We set all properties active by default, and then inactivate a handful of them.

 }
 
 /**
  * @param {?WebInspector.CSSStyleDeclaration} ownerStyle
  * @param {number} index
  * @param {!CSSAgent.CSSProperty} payload
  * @return {!WebInspector.CSSProperty}
  */
 WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload)
 {
@@ skipping 32 matching lines @@
     get propertyText()
     {
         if (this.text !== undefined)
             return this.text;
 
         if (this.name === "")
             return "";
         return this.name + ": " + this.value + (this.important ? " !important" : "") + ";";
     },
 
-    get isLive()
+    /**
+     * @return {boolean}
+     */
+    activeInStyle: function()
     {
-        return this.active || this.styleBased;
-    },
-
-    get active()
-    {
-        return typeof this._active === "boolean" && this._active;
-    },
-
-    get styleBased()
-    {
-        return !this.range;
-    },
-
-    get inactive()
-    {
-        return typeof this._active === "boolean" && !this._active;
+        return this._active;
     },
 
     /**
      * @param {string} propertyText
      * @param {boolean} majorChange
      * @param {boolean} overwrite
      * @return {!Promise.<?WebInspector.CSSStyleDeclaration>}
      */
     setText: function(propertyText, majorChange, overwrite)
     {
@@ skipping 722 matching lines @@
  * @constructor
  * @param {?WebInspector.CSSStyleDeclaration} inlineStyle
  * @param {?WebInspector.CSSStyleDeclaration} attributesStyle
  */
 WebInspector.CSSStyleModel.InlineStyleResult = function(inlineStyle, attributesStyle)
 {
     this.inlineStyle = inlineStyle;
     this.attributesStyle = attributesStyle;
 }