Changeset 84135 in webkit


Ignore:
Timestamp:
Apr 18, 2011 6:32:58 AM (13 years ago)
Author:
apavlov@chromium.org
Message:

2011-04-18 Alexander Pavlov <apavlov@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: Incorrect content area dimensions in Metrics pane for box-sizing: border-box
https://bugs.webkit.org/show_bug.cgi?id=58551

  • inspector/styles/metrics-box-sizing-expected.txt: Added.
  • inspector/styles/metrics-box-sizing.html: Added.

2011-04-18 Alexander Pavlov <apavlov@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: Incorrect content area dimensions in Metrics pane for box-sizing: border-box
https://bugs.webkit.org/show_bug.cgi?id=58551

Test: inspector/styles/metrics-box-sizing.html

  • inspector/front-end/MetricsSidebarPane.js: (WebInspector.MetricsSidebarPane.prototype._getPropertyValueAsPx): (WebInspector.MetricsSidebarPane.prototype._getBox): (WebInspector.MetricsSidebarPane.prototype._update.getContentAreaWidthPx): (WebInspector.MetricsSidebarPane.prototype._update.getContentAreaHeightPx): (WebInspector.MetricsSidebarPane.prototype._update): (WebInspector.MetricsSidebarPane.prototype.startEditing): (WebInspector.MetricsSidebarPane.prototype.editingCommitted.setEnabledValueCallback): (WebInspector.MetricsSidebarPane.prototype.editingCommitted):
Location:
trunk
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r84133 r84135  
     12011-04-18  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: Incorrect content area dimensions in Metrics pane for box-sizing: border-box
     6        https://bugs.webkit.org/show_bug.cgi?id=58551
     7
     8        * inspector/styles/metrics-box-sizing-expected.txt: Added.
     9        * inspector/styles/metrics-box-sizing.html: Added.
     10
    1112011-04-18  Andrey Kosyakov  <caseq@chromium.org>
    212
  • trunk/Source/WebCore/ChangeLog

    r84134 r84135  
     12011-04-18  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: Incorrect content area dimensions in Metrics pane for box-sizing: border-box
     6        https://bugs.webkit.org/show_bug.cgi?id=58551
     7
     8        Test: inspector/styles/metrics-box-sizing.html
     9
     10        * inspector/front-end/MetricsSidebarPane.js:
     11        (WebInspector.MetricsSidebarPane.prototype._getPropertyValueAsPx):
     12        (WebInspector.MetricsSidebarPane.prototype._getBox):
     13        (WebInspector.MetricsSidebarPane.prototype._update.getContentAreaWidthPx):
     14        (WebInspector.MetricsSidebarPane.prototype._update.getContentAreaHeightPx):
     15        (WebInspector.MetricsSidebarPane.prototype._update):
     16        (WebInspector.MetricsSidebarPane.prototype.startEditing):
     17        (WebInspector.MetricsSidebarPane.prototype.editingCommitted.setEnabledValueCallback):
     18        (WebInspector.MetricsSidebarPane.prototype.editingCommitted):
     19
    1202011-04-18  Ilya Tikhonovsky  <loislo@chromium.org>
    221
  • trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js

    r80713 r84135  
    6262    },
    6363
     64    _getPropertyValueAsPx: function(style, propertyName)
     65    {
     66        return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
     67    },
     68
     69    _getBox: function(computedStyle, componentName)
     70    {
     71        var suffix = componentName === "border" ? "-width" : "";
     72        var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
     73        var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
     74        var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
     75        var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
     76        return { left: left, top: top, right: right, bottom: bottom };
     77    },
     78
    6479    _update: function(style)
    6580    {
     
    6782        var metricsElement = document.createElement("div");
    6883        metricsElement.className = "metrics";
     84        var self = this;
    6985
    7086        function createBoxPartElement(style, name, side, suffix)
     
    85101        }
    86102
     103        function getContentAreaWidthPx(style)
     104        {
     105            var width = style.getPropertyValue("width").replace(/px$/, "");
     106            if (style.getPropertyValue("box-sizing") === "border-box") {
     107                var borderBox = self._getBox(style, "border");
     108                var paddingBox = self._getBox(style, "padding");
     109
     110                width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
     111            }
     112
     113            return width;
     114        }
     115
     116        function getContentAreaHeightPx(style)
     117        {
     118            var height = style.getPropertyValue("height").replace(/px$/, "");
     119            if (style.getPropertyValue("box-sizing") === "border-box") {
     120                var borderBox = self._getBox(style, "border");
     121                var paddingBox = self._getBox(style, "padding");
     122
     123                height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
     124            }
     125
     126            return height;
     127        }
     128
    87129        // Display types for which margin is ignored.
    88130        var noMarginDisplayType = {
     
    128170
    129171            if (name === "content") {
    130                 var width = style.getPropertyValue("width").replace(/px$/, "");
    131172                var widthElement = document.createElement("span");
    132                 widthElement.textContent = width;
    133                 widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width"), false);
    134 
    135                 var height = style.getPropertyValue("height").replace(/px$/, "");
     173                widthElement.textContent = getContentAreaWidthPx(style);
     174                widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width", style), false);
     175
    136176                var heightElement = document.createElement("span");
    137                 heightElement.textContent = height;
    138                 heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height"), false);
     177                heightElement.textContent = getContentAreaHeightPx(style);
     178                heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height", style), false);
    139179
    140180                boxElement.appendChild(widthElement);
     
    169209    },
    170210
    171     startEditing: function(targetElement, box, styleProperty)
     211    startEditing: function(targetElement, box, styleProperty, computedStyle)
    172212    {
    173213        if (WebInspector.isBeingEdited(targetElement))
    174214            return;
    175215
    176         var context = { box: box, styleProperty: styleProperty };
     216        var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle };
    177217
    178218        WebInspector.startEditing(targetElement, {
     
    203243            userInput = "auto";
    204244
     245        userInput = userInput.toLowerCase();
    205246        // Append a "px" unit if the user input was just a number.
    206247        if (/^\d+$/.test(userInput))
    207248            userInput += "px";
    208249
     250        var styleProperty = context.styleProperty;
     251        var computedStyle = context.computedStyle;
     252
     253        if (computedStyle.getPropertyValue("box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
     254            if (!userInput.match(/px$/)) {
     255                WebInspector.log("For elements with box-sizing: border-box, only absolute content area dimensions can be applied", WebInspector.ConsoleMessage.MessageLevel.Error);
     256                WebInspector.showConsole();
     257                return;
     258            }
     259
     260            var borderBox = this._getBox(computedStyle, "border");
     261            var paddingBox = this._getBox(computedStyle, "padding");
     262            var userValuePx = Number(userInput.replace(/px$/, ""));
     263            if (isNaN(userValuePx))
     264                return;
     265            if (styleProperty === "width")
     266                userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
     267            else
     268                userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
     269
     270            userInput = userValuePx + "px";
     271        }
     272
    209273        var self = this;
    210274        var callback = function(style) {
     
    218282        function setEnabledValueCallback(context, style)
    219283        {
    220             var property = style.getLiveProperty(context.styleProperty);
     284            var property = style.getLiveProperty(styleProperty);
    221285            if (!property)
    222286                style.appendProperty(context.styleProperty, userInput, callback);
Note: See TracChangeset for help on using the changeset viewer.