Changeset 206406 in webkit

Timestamp:

Sep 26, 2016, 5:06:55 PM (9 years ago)

Author:

Matt Baker

Message:

Web Inspector: Box Model values not updated when DOM node styles change
​https://bugs.webkit.org/show_bug.cgi?id=162525

Reviewed by Brian Burg.

The Box Model section should refresh itself when the selected node's
computed style changes. This is necessary since the Styles sidebar
doesn't always refresh its sections on node changes.

• UserInterface/Views/BoxModelDetailsSectionRow.js:

(WebInspector.BoxModelDetailsSectionRow.prototype.set nodeStyles):
Refresh metrics whenever the computed style changes.

(WebInspector.BoxModelDetailsSectionRow.prototype._getBox):
(WebInspector.BoxModelDetailsSectionRow.prototype._getComponentSuffix):
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createValueElement):
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement):
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
Drive-by cleanup to make this large function easier to read.
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createElement): Deleted.
Renamed createValueElement.
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaWidthElement): Deleted.
(WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaHeightElement): Deleted.
Combined these into a single function taking a property name (width or height).

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/BoxModelDetailsSectionRow.js (modified) (9 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-09-26  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Box Model values not updated when DOM node styles change
+        https://bugs.webkit.org/show_bug.cgi?id=162525
+
+        Reviewed by Brian Burg.
+
+        The Box Model section should refresh itself when the selected node's
+        computed style changes. This is necessary since the Styles sidebar
+        doesn't always refresh its sections on node changes.
+
+        * UserInterface/Views/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype.set nodeStyles):
+        Refresh metrics whenever the computed style changes.
+
+        (WebInspector.BoxModelDetailsSectionRow.prototype._getBox):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._getComponentSuffix):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createValueElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
+        Drive-by cleanup to make this large function easier to read.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createElement): Deleted.
+        Renamed createValueElement.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaWidthElement): Deleted.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaHeightElement): Deleted.
+        Combined these into a single function taking a property name (width or height).
+
 == Rolled over to ChangeLog-2016-09-26 ==

trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js

@@ -44 +44 @@
     set nodeStyles(nodeStyles)
     {
+        if (this._nodeStyles && this._nodeStyles.computedStyle)
+            this._nodeStyles.computedStyle.removeEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._refresh, this);
+
         this._nodeStyles = nodeStyles;
+        if (this._nodeStyles && this._nodeStyles.computedStyle)
+            this._nodeStyles.computedStyle.addEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._refresh, this);
 
         this._refresh();
@@ -68 +73 @@
     _getBox(computedStyle, componentName)
     {
-        var suffix = componentName === "border" ? "-width" : "";
+        var suffix = this._getComponentSuffix(componentName);
         var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
         var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
@@ -74 +79 @@
         var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
         return {left, top, right, bottom};
+    }
+
+    _getComponentSuffix(componentName)
+    {
+        return componentName === "border" ? "-width" : "";
     }
 
@@ -104 +114 @@
     _updateMetrics()
     {
-        // Updating with computed style.
         var metricsElement = document.createElement("div");
-
-        var self = this;
         var style = this._nodeStyles.computedStyle;
 
-        function createElement(type, value, name, propertyName, style)
+        function createValueElement(type, value, name, propertyName)
         {
             // Check if the value is a float and whether it should be rounded.
@@ -127 +134 @@
         }
 
-        function createBoxPartElement(style, name, side, suffix)
+        function createBoxPartElement(name, side)
         {
+            let suffix = this._getComponentSuffix(name);
             let propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
             let value = style.propertyForName(propertyName).value;
@@ -136 +144 @@
                 value = value.replace(/px$/, "");
 
-            let element = createElement.call(this, "div", value, name, propertyName, style);
+            let element = createValueElement.call(this, "div", value, name, propertyName);
             element.className = side;
             return element;
         }
 
-        function createContentAreaWidthElement(style)
+        function createContentAreaElement(name)
         {
-            var width = style.propertyForName("width").value.replace(/px$/, "");
+            console.assert(name === "width" || name === "height");
+
+            let size = style.propertyForName(name).value.replace(/px$/, "");
             if (style.propertyForName("box-sizing").value === "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 createElement.call(this, "span", width, "width", "width", style);
-        }
-
-        function createContentAreaHeightElement(style)
-        {
-            var height = style.propertyForName("height").value.replace(/px$/, "");
-            if (style.propertyForName("box-sizing").value === "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 createElement.call(this, "span", height, "height", "height", style);
+                let borderBox = this._getBox(style, "border");
+                let paddingBox = this._getBox(style, "padding");
+
+                let [side, oppositeSide] = name === "width" ? ["left", "right"] : ["top", "bottom"];
+                size = size - borderBox[side] - borderBox[oppositeSide] - paddingBox[side] - paddingBox[oppositeSide];
+            }
+
+            return createValueElement.call(this, "span", size, name, name);
         }
 
@@ -194 +192 @@
 
         this._boxElements = [];
-        var boxes = ["content", "padding", "border", "margin", "position"];
 
         if (!style.hasProperties()) {
@@ -202 +199 @@
 
         var previousBox = null;
-        for (var i = 0; i < boxes.length; ++i) {
-            var name = boxes[i];
-
+        for (let name of ["content", "padding", "border", "margin", "position"]) {
             if (name === "margin" && noMarginDisplayType[style.propertyForName("display").value])
                 continue;
@@ -219 +214 @@
 
             if (name === "content") {
-                var widthElement = createContentAreaWidthElement.call(this, style);
-                var heightElement = createContentAreaHeightElement.call(this, style);
+                let widthElement = createContentAreaElement.call(this, "width");
+                let heightElement = createContentAreaElement.call(this, "height");
                 boxElement.append(widthElement, " \u00D7 ", heightElement);
             } else {
-                var suffix = name === "border" ? "-width" : "";
-
                 var labelElement = document.createElement("div");
                 labelElement.className = "label";
-                labelElement.textContent = boxes[i];
+                labelElement.textContent = name;
                 boxElement.appendChild(labelElement);
 
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "top"));
                 boxElement.appendChild(document.createElement("br"));
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "left"));
 
                 if (previousBox)
                     boxElement.appendChild(previousBox);
 
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "right"));
                 boxElement.appendChild(document.createElement("br"));
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "bottom"));
             }