DevTools: simplify WI.CSSProperty and WI.CSSStyleDeclaration interfaces

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 303 matching lines @@
 
     /**
      * @override
      * @return {!Promise.<?>}
      */
     doUpdate: function()
     {
         this._discardElementUnderMouse();
 
         return this.fetchMatchedCascade()
-            .then(this._innerRebuildUpdate.bind(this))
+            .then(this._innerRebuildUpdate.bind(this));
     },
 
     _resetCache: function()
     {
         delete this._matchedCascadePromise;
     },
 
     /**
      * @return {!Promise.<?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}>}
      */
@@ skipping 284 matching lines @@
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
     _containsInherited: function(style)
     {
         var properties = style.allProperties;
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
             // Does this style contain non-overridden inherited property?
-            if (property.isLive && WebInspector.CSSMetadata.isPropertyInherited(property.name))
+            if (property.activeInStyle() && WebInspector.CSSMetadata.isPropertyInherited(property.name))
                 return true;
         }
         return false;
     },
 
     _createNewRuleInViaInspectorStyleSheet: function()
     {
         var cssModel = this.cssModel();
         var node = this.node();
         if (!cssModel || !node)
@@ skipping 645 matching lines @@
         }
     },
 
     _afterUpdateFinishedForTest: function()
     {
     },
 
     onpopulate: function()
     {
         var style = this.styleRule.style();
-        var allProperties = style.allProperties;
-
-        var styleHasEditableSource = this.editable && !!style.range;
-        if (styleHasEditableSource) {
-            for (var i = 0; i < allProperties.length; ++i) {
-                var property = allProperties[i];
-                if (property.styleBased)
-                    continue;
-
-                var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
-                var inherited = this.isPropertyInherited(property.name);
-                var overloaded = property.inactive || this.styleRule.isPropertyOverloaded(property.name);
-                var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded);
-                this.propertiesTreeOutline.appendChild(item);
-            }
-            return;
-        }
-
-        var generatedShorthands = {};
-        // For style-based properties, generate shorthands with values when possible.
-        for (var i = 0; i < allProperties.length; ++i) {
-            var property = allProperties[i];
+        for (var property of style.leadingProperties()) {
             var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
-
-            // For style-based properties, try generating shorthands.
-            var shorthands = isShorthand ? null : WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name);
-            var shorthandPropertyAvailable = false;
-            for (var j = 0; shorthands && !shorthandPropertyAvailable && j < shorthands.length; ++j) {
-                var shorthand = shorthands[j];
-                if (shorthand in generatedShorthands) {
-                    shorthandPropertyAvailable = true;
-                    continue;  // There already is a shorthand this longhands falls under.
-                }
-                if (style.getLiveProperty(shorthand)) {
-                    shorthandPropertyAvailable = true;
-                    continue;  // There is an explict shorthand property this longhands falls under.
-                }
-                if (!style.shorthandValue(shorthand)) {
-                    shorthandPropertyAvailable = false;
-                    continue;  // Never generate synthetic shorthands when no value is available.
-                }
-
-                // Generate synthetic shorthand we have a value for.
-                var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), style.shorthandIsImportant(shorthand), false, true, true);
-                var overloaded = property.inactive || this.styleRule.isPropertyOverloaded(property.name, true);
-                var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, shorthandProperty,  /* isShorthand */ true, /* inherited */ false, overloaded);
-                this.propertiesTreeOutline.appendChild(item);
-                generatedShorthands[shorthand] = shorthandProperty;
-                shorthandPropertyAvailable = true;
-            }
-            if (shorthandPropertyAvailable)
-                continue;  // Shorthand for the property found.
-
             var inherited = this.isPropertyInherited(property.name);
-            var overloaded = property.inactive || this.styleRule.isPropertyOverloaded(property.name, isShorthand);
+            var overloaded = this.styleRule.isPropertyOverloaded(property.name, isShorthand);
             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
     },
 
     /**
      * @return {boolean}
      */
     _updateFilter: function()
     {
@@ skipping 866 matching lines @@
             var name = longhandProperties[i].name;
             var inherited = false;
             var overloaded = false;
 
             var section = this.section();
             if (section) {
                 inherited = section.isPropertyInherited(name);
                 overloaded = section.styleRule.isPropertyOverloaded(name);
             }
 
-            var liveProperty = this.style().getLiveProperty(name);
-            if (!liveProperty)
-                continue;
-
-            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, liveProperty, false, inherited, overloaded);
+            var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, longhandProperties[i], false, inherited, overloaded);
             this.appendChild(item);
         }
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         this.updateTitle();
@@ skipping 53 matching lines @@
         if (this.property.disabled)
             this.listItemElement.createChild("span", "styles-clipboard-only").createTextChild(" */");
 
         if (!this.property.parsedOk) {
             // Avoid having longhands under an invalid shorthand.
             this.listItemElement.classList.add("not-parsed-ok");
 
             // Add a separate exclamation mark IMG element with a tooltip.
             this.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild);
         }
-        if (this.property.inactive)
+        if (!this.property.activeInStyle())
             this.listItemElement.classList.add("inactive");
         this._updateFilter();
 
         if (this.property.parsedOk && this.section() && this.parent.root) {
             var enabledCheckboxElement = createElement("input");
             enabledCheckboxElement.className = "enabled-button";
             enabledCheckboxElement.type = "checkbox";
             enabledCheckboxElement.checked = !this.property.disabled;
             enabledCheckboxElement.addEventListener("click", this._toggleEnabled.bind(this), false);
             this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
@@ skipping 925 matching lines @@
 
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }