Changeset 84135 in webkit
- Timestamp:
- Apr 18, 2011 6:32:58 AM (13 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r84133 r84135 1 2011-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 1 11 2011-04-18 Andrey Kosyakov <caseq@chromium.org> 2 12 -
trunk/Source/WebCore/ChangeLog
r84134 r84135 1 2011-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 1 20 2011-04-18 Ilya Tikhonovsky <loislo@chromium.org> 2 21 -
trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js
r80713 r84135 62 62 }, 63 63 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 64 79 _update: function(style) 65 80 { … … 67 82 var metricsElement = document.createElement("div"); 68 83 metricsElement.className = "metrics"; 84 var self = this; 69 85 70 86 function createBoxPartElement(style, name, side, suffix) … … 85 101 } 86 102 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 87 129 // Display types for which margin is ignored. 88 130 var noMarginDisplayType = { … … 128 170 129 171 if (name === "content") { 130 var width = style.getPropertyValue("width").replace(/px$/, "");131 172 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 136 176 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); 139 179 140 180 boxElement.appendChild(widthElement); … … 169 209 }, 170 210 171 startEditing: function(targetElement, box, styleProperty )211 startEditing: function(targetElement, box, styleProperty, computedStyle) 172 212 { 173 213 if (WebInspector.isBeingEdited(targetElement)) 174 214 return; 175 215 176 var context = { box: box, styleProperty: styleProperty };216 var context = { box: box, styleProperty: styleProperty, computedStyle: computedStyle }; 177 217 178 218 WebInspector.startEditing(targetElement, { … … 203 243 userInput = "auto"; 204 244 245 userInput = userInput.toLowerCase(); 205 246 // Append a "px" unit if the user input was just a number. 206 247 if (/^\d+$/.test(userInput)) 207 248 userInput += "px"; 208 249 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 209 273 var self = this; 210 274 var callback = function(style) { … … 218 282 function setEnabledValueCallback(context, style) 219 283 { 220 var property = style.getLiveProperty( context.styleProperty);284 var property = style.getLiveProperty(styleProperty); 221 285 if (!property) 222 286 style.appendProperty(context.styleProperty, userInput, callback);
Note: See TracChangeset
for help on using the changeset viewer.