DevTools: represent ComputedStyle with simple Map

Source/devtools/front_end/elements/MetricsSidebarPane.js

 /*
  * Copyright (C) 2007 Apple 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 39 matching lines @@
 
         // FIXME: avoid updates of a collapsed pane.
         var node = this.node();
         var cssModel = this.cssModel();
         if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
             this.element.removeChildren();
             return Promise.resolve();
         }
 
         /**
-         * @param {?WebInspector.CSSStyleDeclaration} style
+         * @param {?Map.<string, string>} style
          * @this {WebInspector.MetricsSidebarPane}
          */
         function callback(style)
         {
             if (!style || this.node() !== node)
                 return;
             this._updateMetrics(style);
         }
         /**
          * @param {?WebInspector.CSSStyleModel.InlineStyleResult} inlineStyleResult
@@ skipping 29 matching lines @@
     },
 
     /**
      * @override
      */
     onFrameResizedThrottled: function()
     {
         this.update();
     },
 
+    /**
+     * @param {!Map.<string, string>} style
+     * @param {string} propertyName
+     * @return {number}
+     */
     _getPropertyValueAsPx: function(style, propertyName)
     {
-        return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
+        return Number(style.get(propertyName).replace(/px$/, "") || 0);
     },
 
+    /**
+     * @param {!Map.<string, string>} computedStyle
+     * @param {string} componentName
+     */
     _getBox: function(computedStyle, componentName)
     {
         var suffix = componentName === "border" ? "-width" : "";
         var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
         var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
         var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
         var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
         return { left: left, top: top, right: right, bottom: bottom };
     },
 
@@ skipping 18 matching lines @@
         for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
             var element = this._boxElements[i];
             if (!this.node() || mode === "all" || element._name === mode)
                 element.style.backgroundColor = element._backgroundColor;
             else
                 element.style.backgroundColor = "";
         }
     },
 
     /**
-     * @param {!WebInspector.CSSStyleDeclaration} style
+     * @param {!Map.<string, string>} style
      */
     _updateMetrics: function(style)
     {
         // Updating with computed style.
         var metricsElement = createElement("div");
         metricsElement.className = "metrics";
         var self = this;
 
         /**
-         * @param {!WebInspector.CSSStyleDeclaration} style
+         * @param {!Map.<string, string>} style
          * @param {string} name
          * @param {string} side
          * @param {string} suffix
          * @this {WebInspector.MetricsSidebarPane}
          */
         function createBoxPartElement(style, name, side, suffix)
         {
             var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
-            var value = style.getPropertyValue(propertyName);
+            var value = style.get(propertyName);
             if (value === "" || (name !== "position" && value === "0px"))
                 value = "\u2012";
             else if (name === "position" && value === "auto")
                 value = "\u2012";
             value = value.replace(/px$/, "");
             value = Number.toFixedIfFloating(value);
 
             var element = createElement("div");
             element.className = side;
             element.textContent = value;
             element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName, style), false);
             return element;
         }
 
+        /**
+         * @param {!Map.<string, string>} style
+         * @return {string}
+         */
         function getContentAreaWidthPx(style)
         {
-            var width = style.getPropertyValue("width").replace(/px$/, "");
-            if (!isNaN(width) && style.getPropertyValue("box-sizing") === "border-box") {
+            var width = style.get("width").replace(/px$/, "");
+            if (!isNaN(width) && style.get("box-sizing") === "border-box") {
                 var borderBox = self._getBox(style, "border");
                 var paddingBox = self._getBox(style, "padding");
 
                 width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
             }
 
-            return Number.toFixedIfFloating(width);
+            return Number.toFixedIfFloating(width.toString());
         }
 
+        /**
+         * @param {!Map.<string, string>} style
+         * @return {string}
+         */
         function getContentAreaHeightPx(style)
         {
-            var height = style.getPropertyValue("height").replace(/px$/, "");
-            if (!isNaN(height) && style.getPropertyValue("box-sizing") === "border-box") {
+            var height = style.get("height").replace(/px$/, "");
+            if (!isNaN(height) && style.get("box-sizing") === "border-box") {
                 var borderBox = self._getBox(style, "border");
                 var paddingBox = self._getBox(style, "padding");
 
                 height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
             }
 
-            return Number.toFixedIfFloating(height);
+            return Number.toFixedIfFloating(height.toString());
         }
 
         // Display types for which margin is ignored.
         var noMarginDisplayType = {
             "table-cell": true,
             "table-column": true,
             "table-column-group": true,
             "table-footer-group": true,
             "table-header-group": true,
             "table-row": true,
@@ skipping 22 matching lines @@
             WebInspector.Color.PageHighlight.Border,
             WebInspector.Color.PageHighlight.Margin,
             WebInspector.Color.fromRGBA([0, 0, 0, 0])
         ];
         var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), WebInspector.UIString("position")];
         var previousBox = null;
         this._boxElements = [];
         for (var i = 0; i < boxes.length; ++i) {
             var name = boxes[i];
 
-            if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
+            if (name === "margin" && noMarginDisplayType[style.get("display")])
                 continue;
-            if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
+            if (name === "padding" && noPaddingDisplayType[style.get("display")])
                 continue;
-            if (name === "position" && noPositionType[style.getPropertyValue("position")])
+            if (name === "position" && noPositionType[style.get("position")])
                 continue;
 
             var boxElement = createElement("div");
             boxElement.className = name;
             boxElement._backgroundColor = boxColors[i].asString(WebInspector.Color.Format.RGBA);
             boxElement._name = name;
             boxElement.style.backgroundColor = boxElement._backgroundColor;
             boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
             this._boxElements.push(boxElement);
 
@@ skipping 31 matching lines @@
 
             previousBox = boxElement;
         }
 
         metricsElement.appendChild(previousBox);
         metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, "all"), false);
         this.element.removeChildren();
         this.element.appendChild(metricsElement);
     },
 
+    /**
+     * @param {!Element} targetElement
+     * @param {string} box
+     * @param {string} styleProperty
+     * @param {!Map.<string, string>} computedStyle
+     */
     startEditing: function(targetElement, box, styleProperty, computedStyle)
     {
         if (WebInspector.isBeingEdited(targetElement))
             return;
 
         var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle };
         var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
         context.keyDownHandler = boundKeyDown;
         targetElement.addEventListener("keydown", boundKeyDown, false);
 
@@ skipping 74 matching lines @@
             userInput = "auto";
 
         userInput = userInput.toLowerCase();
         // Append a "px" unit if the user input was just a number.
         if (/^\d+$/.test(userInput))
             userInput += "px";
 
         var styleProperty = context.styleProperty;
         var computedStyle = context.computedStyle;
 
-        if (computedStyle.getPropertyValue("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
+        if (computedStyle.get("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
             if (!userInput.match(/px$/)) {
                 WebInspector.console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
                 return;
             }
 
             var borderBox = this._getBox(computedStyle, "border");
             var paddingBox = this._getBox(computedStyle, "padding");
             var userValuePx = Number(userInput.replace(/px$/, ""));
             if (isNaN(userValuePx))
                 return;
@@ skipping 41 matching lines @@
     },
 
     editingCommitted: function(element, userInput, previousContent, context)
     {
         this.editingEnded(element, context);
         this._applyUserInput(element, userInput, previousContent, context, true);
     },
 
     __proto__: WebInspector.ElementsSidebarPane.prototype
 }