DevTools: represent ComputedStyle with simple Map

Source/devtools/front_end/elements/ComputedStyleWidget.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 118 matching lines @@
         var color = WebInspector.Color.parse(text);
         if (!color)
             return createTextNode(text);
         var swatch = WebInspector.ColorSwatch.create();
         swatch.setColorText(text);
         return swatch;
     },
 
     /**
      * @param {?WebInspector.SharedSidebarModel.ComputedStyle} nodeStyle
-       @param {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} cascades
+     * @param {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} cascades
      */
     _innerRebuildUpdate: function(nodeStyle, cascades)
     {
         this._propertiesContainer.removeChildren();
         if (!nodeStyle || !cascades)
             return;
 
-        var uniqueProperties = nodeStyle.computedStyle.allProperties.slice();
+        var uniqueProperties = nodeStyle.computedStyle.keysArray();
         uniqueProperties.sort(propertySorter);
 
         var showInherited = this._showInheritedComputedStylePropertiesSetting.get();
         for (var i = 0; i < uniqueProperties.length; ++i) {
-            var property = uniqueProperties[i];
-            var inherited = this._isPropertyInherited(cascades.matched, property.name);
-            if (!showInherited && inherited && !(property.name in this._alwaysShowComputedProperties))
+            var propertyName = uniqueProperties[i];
+            var propertyValue = nodeStyle.computedStyle.get(propertyName);
+            var inherited = this._isPropertyInherited(cascades.matched, propertyName);
+            if (!showInherited && inherited && !(propertyName in this._alwaysShowComputedProperties))
                 continue;
-            var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name);
-            if (property.name !== canonicalName && property.value === nodeStyle.computedStyle.getPropertyValue(canonicalName))
+            var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName);
+            if (propertyName !== canonicalName && propertyValue === nodeStyle.computedStyle.get(canonicalName))
                 continue;
             var item = this._propertiesContainer.createChild("div", "computed-style-property");
-            item[WebInspector.ComputedStyleWidget._propertySymbol] = property;
+            item[WebInspector.ComputedStyleWidget._propertySymbol] = {
+                name: propertyName,
+                value: propertyValue
+            };
             item.classList.toggle("computed-style-property-inherited", inherited);
-            var renderer = new WebInspector.StylesSidebarPropertyRenderer(null, nodeStyle.node, property.name, property.value);
+            var renderer = new WebInspector.StylesSidebarPropertyRenderer(null, nodeStyle.node, propertyName, /** @type {string} */(propertyValue));
             renderer.setColorHandler(this._processColor.bind(this));
 
             if (!inherited) {
                 var traceButton = item.createChild("div", "computed-style-trace-button");
                 traceButton.createChild("div", "glyph");
                 traceButton.addEventListener("click", this._onTracePropertyBound, false);
             }
             item.appendChild(renderer.renderName());
             item.appendChild(createTextNode(": "));
             item.appendChild(renderer.renderValue());
             item.appendChild(createTextNode(";"));
             this._propertiesContainer.appendChild(item);
         }
 
         this._updateFilter(this._filterRegex);
 
         /**
-         * @param {!WebInspector.CSSProperty} a
-         * @param {!WebInspector.CSSProperty} b
+         * @param {string} a
+         * @param {string} b
          */
         function propertySorter(a, b)
         {
             var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName;
-            return canonicalName(a.name).compareTo(canonicalName(b.name));
+            return canonicalName(a).compareTo(canonicalName(b));
         }
     },
 
     /**
      * @param {!WebInspector.SectionCascade} matchedCascade
      * @param {string} propertyName
      */
     _isPropertyInherited: function(matchedCascade, propertyName)
     {
         var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName);
         return !matchedCascade.allUsedProperties().has(canonicalName);
     },
 
     /**
      * @param {?RegExp} regex
      */
     _updateFilter: function(regex)
     {
         for (var i = 0; i < this._propertiesContainer.children.length; ++i) {
             var item = this._propertiesContainer.children[i];
             var property = item[WebInspector.ComputedStyleWidget._propertySymbol];
             var matched = !regex || regex.test(property.name) || regex.test(property.value);
             item.classList.toggle("hidden", !matched);
         }
     },
 
     __proto__: WebInspector.ThrottledWidget.prototype
 }