Changeset 248328 in webkit
- Timestamp:
- Aug 6, 2019 4:46:22 PM (5 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 4 edited
-
ChangeLog (modified) (1 diff)
-
UserInterface/Models/CSSProperty.js (modified) (1 diff)
-
UserInterface/Views/BoxModelDetailsSectionRow.css (modified) (5 diffs)
-
UserInterface/Views/BoxModelDetailsSectionRow.js (modified) (11 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r248327 r248328 1 2019-08-06 Devin Rousso <drousso@apple.com> 2 3 Web Inspector: Show radius values in box model metrics view 4 https://bugs.webkit.org/show_bug.cgi?id=160993 5 <rdar://problem/27919035> 6 7 Reviewed by Brian Burg. 8 9 * UserInterface/Views/BoxModelDetailsSectionRow.js: 10 (WI.BoxModelDetailsSectionRow.prototype._getPropertyValue): Added. 11 (WI.BoxModelDetailsSectionRow.prototype._getPropertyValueAsPx): 12 (WI.BoxModelDetailsSectionRow.prototype._getBox): 13 (WI.BoxModelDetailsSectionRow.prototype._getComponentPrefix): Added. 14 (WI.BoxModelDetailsSectionRow.prototype._getComponentSuffix): 15 (WI.BoxModelDetailsSectionRow.prototype._updateMetrics): 16 (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement): 17 (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement): 18 (WI.BoxModelDetailsSectionRow.prototype._applyUserInput): 19 (WI.BoxModelDetailsSectionRow.prototype._applyUserInput.inspectedPage_node_toggleInlineStyleProperty): 20 * UserInterface/Views/BoxModelDetailsSectionRow.css: 21 (.details-section .row.box-model .box): Added. 22 (.details-section .row.box-model .box > .label): Added. 23 (.details-section .row.box-model .box.position): Added. 24 (.details-section .row.box-model .box.margin): Added. 25 (.details-section .row.box-model:not(.hovered) .box.margin, .details-section .row.box-model .box.margin.active): Added. 26 (.details-section .row.box-model .box.border): Added. 27 (.details-section .row.box-model:not(.hovered) .box.border, .details-section .row.box-model .box.border.active): Added. 28 (.details-section .row.box-model .box.border > .label): Added. 29 (.details-section .row.box-model .box.border.has-top-left-radius, .details-section .row.box-model .box.border.has-top-left-radius .box): Added. 30 (.details-section .row.box-model .box.border.has-top-right-radius, .details-section .row.box-model .box.border.has-top-right-radius .box): Added. 31 (.details-section .row.box-model .box.border.has-bottom-right-radius, .details-section .row.box-model .box.border.has-bottom-right-radius .box): Added. 32 (.details-section .row.box-model .box.border.has-bottom-left-radius, .details-section .row.box-model .box.border.has-bottom-left-radius .box): Added. 33 (.details-section .row.box-model .box.padding): Added. 34 (.details-section .row.box-model:not(.hovered) .box.padding, .details-section .row.box-model .box.padding.active): Added. 35 (.details-section .row.box-model .box.content): Added. 36 (.details-section .row.box-model:not(.hovered) .box.content, .details-section .row.box-model .box.content.active): Added. 37 (.details-section .row.box-model :matches(.top, .right, .bottom, .left)): Added. 38 (.details-section .row.box-model :matches(.top, .right, .bottom, .left):not(.editing), .details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)): Added. 39 (.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)): Added. 40 (.details-section .row.box-model :matches(.top-left, .top-right)): Added. 41 (.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing)): Added. 42 (.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing): Added. 43 (.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing)): Added. 44 (.details-section .row.box-model :matches(.top-left, .bottom-left).editing): Added. 45 (.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing)): Added. 46 (.details-section .row.box-model :matches(.top-right, .bottom-right).editing): Added. 47 (@media (prefers-color-scheme: dark) .details-section .row.box-model .box): Added. 48 (@media (prefers-color-scheme: dark) .details-section .row.box-model:not(.hovered) .box:matches(.margin, .border, .padding, .content), .details-section .row.box-model .box.active:matches(.margin, .border, .padding, .content)): Added. 49 (@media (prefers-color-scheme: dark) .details-section .row.box-model .box.margin): Added. 50 (@media (prefers-color-scheme: dark) .details-section .row.box-model .box.border): Added. 51 (.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)): Deleted. 52 (.details-section .row.box-model .position): Deleted. 53 (.details-section .row.box-model .margin): Deleted. 54 (.details-section .row.box-model:not(.hovered) .margin, .details-section .row.box-model .margin.active): Deleted. 55 (.details-section .row.box-model .border): Deleted. 56 (.details-section .row.box-model:not(.hovered) .border, .details-section .row.box-model .border.active): Deleted. 57 (.details-section .row.box-model .padding): Deleted. 58 (.details-section .row.box-model:not(.hovered) .padding, .details-section .row.box-model .padding.active): Deleted. 59 (.details-section .row.box-model .content): Deleted. 60 (.details-section .row.box-model:not(.hovered) .content, .details-section .row.box-model .content.active): Deleted. 61 (.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)): Deleted. 62 (.details-section .row.box-model :matches(.right, .left)): Deleted. 63 (.details-section .row.box-model:not(.hovered) :matches(.margin, .border, .padding, .content), .details-section .row.box-model .active:matches(.margin, .border, .padding, .content)): Deleted. 64 65 * UserInterface/Models/CSSProperty.js: 66 (WI.CSSProperty.prototype.update): 67 Ensure that the `_value` is updated whenever the `_rawValue` is updated. 68 1 69 2019-08-06 Commit Queue <commit-queue@webkit.org> 2 70 -
trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
r247406 r248328 109 109 this._name = name; 110 110 this._rawValue = value; 111 this._value = undefined; 111 112 this._priority = priority; 112 113 this._enabled = enabled; -
trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
r242768 r248328 30 30 } 31 31 32 .details-section .row.box-model .label { 32 .details-section .row.box-model .box { 33 display: inline-block; 34 position: relative; 35 margin: 3px; 36 padding: 3px; 37 text-align: center; 38 vertical-align: middle; 39 background-color: white; 40 border: 1px solid grey; 41 } 42 43 .details-section .row.box-model .box > .label { 33 44 position: absolute; 34 color: black;35 45 padding: 0 2px; 36 46 } 37 47 38 .details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) { 39 border: 1px solid grey; 40 background-color: white; 41 display: inline-block; 42 text-align: center; 43 vertical-align: middle; 44 padding: 3px; 45 margin: 3px; 46 } 47 48 .details-section .row.box-model .position { 48 .details-section .row.box-model .box.position { 49 49 border-style: dotted; 50 50 } 51 51 52 .details-section .row.box-model . margin {52 .details-section .row.box-model .box.margin { 53 53 border-style: dashed; 54 54 border-color: black; 55 55 } 56 56 57 .details-section .row.box-model:not(.hovered) . margin,58 .details-section .row.box-model . margin.active {57 .details-section .row.box-model:not(.hovered) .box.margin, 58 .details-section .row.box-model .box.margin.active { 59 59 background-color: hsla(30, 88%, 69%, 0.66); 60 60 } 61 61 62 .details-section .row.box-model .bo rder {62 .details-section .row.box-model .box.border { 63 63 border-color: black; 64 65 --has-border-radius-border-radius: 10px; 64 66 } 65 67 66 .details-section .row.box-model:not(.hovered) .bo rder,67 .details-section .row.box-model .bo rder.active {68 .details-section .row.box-model:not(.hovered) .box.border, 69 .details-section .row.box-model .box.border.active { 68 70 background-color: hsla(44, 100%, 80%, 0.66); 69 71 } 70 72 71 .details-section .row.box-model .padding { 73 .details-section .row.box-model .box.border > .label { 74 -webkit-margin-start: 20px; 75 } 76 77 .details-section .row.box-model .box.border.has-top-left-radius, 78 .details-section .row.box-model .box.border.has-top-left-radius .box { 79 border-top-left-radius: var(--has-border-radius-border-radius); 80 } 81 82 .details-section .row.box-model .box.border.has-top-right-radius, 83 .details-section .row.box-model .box.border.has-top-right-radius .box { 84 border-top-right-radius: var(--has-border-radius-border-radius); 85 } 86 87 .details-section .row.box-model .box.border.has-bottom-right-radius, 88 .details-section .row.box-model .box.border.has-bottom-right-radius .box { 89 border-bottom-right-radius: var(--has-border-radius-border-radius); 90 } 91 92 .details-section .row.box-model .box.border.has-bottom-left-radius, 93 .details-section .row.box-model .box.border.has-bottom-left-radius .box { 94 border-bottom-left-radius: var(--has-border-radius-border-radius); 95 } 96 97 .details-section .row.box-model .box.padding { 72 98 border-style: dashed; 73 99 } 74 100 75 .details-section .row.box-model:not(.hovered) . padding,76 .details-section .row.box-model . padding.active {101 .details-section .row.box-model:not(.hovered) .box.padding, 102 .details-section .row.box-model .box.padding.active { 77 103 background-color: hsla(101, 37%, 62%, 0.55); 78 104 } 79 105 80 .details-section .row.box-model . content {106 .details-section .row.box-model .box.content { 81 107 position: static; 82 108 min-width: 80px; … … 84 110 } 85 111 86 .details-section .row.box-model:not(.hovered) . content,87 .details-section .row.box-model . content.active {112 .details-section .row.box-model:not(.hovered) .box.content, 113 .details-section .row.box-model .box.content.active { 88 114 background-color: hsla(208, 60%, 64%, 0.66); 89 115 } … … 94 120 } 95 121 96 .details-section .row.box-model :matches(. content span, .top, .right, .bottom, .left) {122 .details-section .row.box-model :matches(.top, .right, .bottom, .left) { 97 123 display: inline-block; 124 vertical-align: middle; 98 125 } 99 126 100 .details-section .row.box-model :matches(.right, .left) { 101 vertical-align: middle; 127 .details-section .row.box-model :matches(.top, .right, .bottom, .left):not(.editing), 128 .details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left) { 129 margin: 0 0.25em; 130 } 131 132 .details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left) { 133 position: absolute; 134 } 135 136 .details-section .row.box-model :matches(.top-left, .top-right) { 137 top: 4px; 138 } 139 140 .details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing) { 141 bottom: 3px; 142 } 143 144 .details-section .row.box-model :matches(.bottom-left, .bottom-right).editing { 145 bottom: 2px; 146 } 147 148 .details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing) { 149 left: 3px; 150 } 151 152 .details-section .row.box-model :matches(.top-left, .bottom-left).editing { 153 left: 1px; 154 } 155 156 .details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing) { 157 right: 3px; 158 } 159 160 .details-section .row.box-model :matches(.top-right, .bottom-right).editing { 161 right: 1px; 102 162 } 103 163 … … 111 171 } 112 172 113 .details-section .row.box-model :matches(.position, .margin, .border, .padding, .content){173 .details-section .row.box-model .box { 114 174 border-color: var(--text-color-quaternary); 115 175 background-color: var(--background-color); … … 117 177 } 118 178 119 .details-section .row.box-model:not(.hovered) :matches(.margin, .border, .padding, .content),120 .details-section .row.box-model . active:matches(.margin, .border, .padding, .content) {179 .details-section .row.box-model:not(.hovered) .box:matches(.margin, .border, .padding, .content), 180 .details-section .row.box-model .box.active:matches(.margin, .border, .padding, .content) { 121 181 color: black; 122 182 } 123 183 124 .details-section .row.box-model . margin {184 .details-section .row.box-model .box.margin { 125 185 border-color: var(--text-color-quaternary); 126 186 } 127 187 128 .details-section .row.box-model .bo rder {188 .details-section .row.box-model .box.border { 129 189 border-color: var(--text-color-quaternary); 130 190 } 131 191 } 192 -
trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js
r240314 r248328 66 66 } 67 67 68 _getPropertyValue(style, propertyName) 69 { 70 const dontCreateIfMissing = true; 71 let property = style.propertyForName(propertyName, dontCreateIfMissing); 72 if (!property) 73 return null; 74 return property.value; 75 } 76 68 77 _getPropertyValueAsPx(style, propertyName) 69 78 { 70 return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0); 79 let value = this._getPropertyValue(style, propertyName); 80 if (!value) 81 return 0; 82 return Number(value.replace(/px$/, "") || 0); 71 83 } 72 84 73 85 _getBox(computedStyle, componentName) 74 86 { 75 var suffix = this._getComponentSuffix(componentName); 76 var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix); 77 var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix); 78 var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix); 79 var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix); 87 let prefix = this._getComponentPrefix(componentName); 88 let suffix = this._getComponentSuffix(componentName); 89 let left = this._getPropertyValueAsPx(computedStyle, prefix + "-left" + suffix); 90 let top = this._getPropertyValueAsPx(computedStyle, prefix + "-top" + suffix); 91 let right = this._getPropertyValueAsPx(computedStyle, prefix + "-right" + suffix); 92 let bottom = this._getPropertyValueAsPx(computedStyle, prefix + "-bottom" + suffix); 80 93 return {left, top, right, bottom}; 81 94 } 82 95 96 _getComponentPrefix(componentName) 97 { 98 return componentName === "border-radius" ? "border" : componentName; 99 } 100 83 101 _getComponentSuffix(componentName) 84 102 { 85 return componentName === "border" ? "-width" : ""; 103 switch (componentName) { 104 case "border": 105 return "-width"; 106 107 case "border-radius": 108 return "-radius"; 109 } 110 return ""; 86 111 } 87 112 … … 136 161 function createBoxPartElement(name, side) 137 162 { 163 let prefix = this._getComponentPrefix(name); 138 164 let suffix = this._getComponentSuffix(name); 139 let propertyName = (name !== "position" ? name + "-" : "") + side + suffix; 140 let property = style.propertyForName(propertyName); 141 if (!property) 142 return null; 143 144 let value = property.value; 145 if (value === "" || (name !== "position" && value === "0px") || (name === "position" && value === "auto")) 165 let propertyName = (prefix !== "position" ? prefix + "-" : "") + side + suffix; 166 let value = this._getPropertyValue(style, propertyName); 167 if (value) { 168 if (prefix === "position" && value === "auto") 169 value = ""; 170 else if (prefix !== "position" && value === "0px") 171 value = ""; 172 else 173 value = value.replace(/px$/, ""); 174 } else 146 175 value = ""; 147 else148 value = value.replace(/px$/, "");149 176 150 177 let element = createValueElement.call(this, "div", value, name, propertyName); … … 157 184 console.assert(name === "width" || name === "height"); 158 185 159 let property = style.propertyForName(name); 160 if (!property) 161 return null; 162 163 let size = property.value.replace(/px$/, ""); 164 if (style.propertyForName("box-sizing").value === "border-box") { 186 let size = this._getPropertyValueAsPx(style, name); 187 if (this._getPropertyValue(style, "box-sizing") === "border-box") { 165 188 let borderBox = this._getBox(style, "border"); 166 189 let paddingBox = this._getBox(style, "padding"); … … 206 229 } 207 230 208 let displayProperty = style.propertyForName("display");209 let positionProperty = style.propertyForName("position");231 let displayProperty = this._getPropertyValue(style, "display"); 232 let positionProperty = this._getPropertyValue(style, "position"); 210 233 if (!displayProperty || !positionProperty) { 211 234 this.showEmptyMessage(); … … 224 247 225 248 let boxElement = document.createElement("div"); 226 boxElement.class Name = name;249 boxElement.classList.add("box", name); 227 250 boxElement._name = name; 228 251 boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false); … … 239 262 boxElement.append(widthElement, " \u00D7 ", heightElement); 240 263 } else { 264 let borderTopLeftRadiusElement = null; 265 let borderTopRightRadiusElement = null; 266 let borderBottomRightRadiusElement = null; 267 let borderBottomLeftRadiusElement = null; 268 if (name === "border") { 269 for (let corner of ["top-left", "top-right", "bottom-right", "bottom-left"]) { 270 let cornerValue = this._getPropertyValue(style, "border-" + corner + "-radius"); 271 if (cornerValue && cornerValue !== "0px") 272 boxElement.classList.add("has-" + corner + "-radius"); 273 } 274 275 borderTopLeftRadiusElement = createBoxPartElement.call(this, "border-radius", "top-left"); 276 borderTopRightRadiusElement = createBoxPartElement.call(this, "border-radius", "top-right"); 277 borderBottomRightRadiusElement = createBoxPartElement.call(this, "border-radius", "bottom-right"); 278 borderBottomLeftRadiusElement = createBoxPartElement.call(this, "border-radius", "bottom-left"); 279 } 280 241 281 let topElement = createBoxPartElement.call(this, name, "top"); 242 282 let leftElement = createBoxPartElement.call(this, name, "left"); … … 253 293 boxElement.appendChild(labelElement); 254 294 295 if (borderTopLeftRadiusElement) 296 boxElement.appendChild(borderTopLeftRadiusElement); 297 255 298 boxElement.appendChild(topElement); 299 300 if (borderTopRightRadiusElement) 301 boxElement.appendChild(borderTopRightRadiusElement); 302 256 303 boxElement.appendChild(document.createElement("br")); 257 304 boxElement.appendChild(leftElement); … … 262 309 boxElement.appendChild(rightElement); 263 310 boxElement.appendChild(document.createElement("br")); 311 312 if (borderBottomLeftRadiusElement) 313 boxElement.appendChild(borderBottomLeftRadiusElement); 314 264 315 boxElement.appendChild(bottomElement); 316 317 if (borderBottomRightRadiusElement) 318 boxElement.appendChild(borderBottomRightRadiusElement); 265 319 } 266 320 … … 417 471 var computedStyle = this._nodeStyles.computedStyle; 418 472 419 if ( computedStyle.propertyForName("box-sizing").value=== "border-box" && (styleProperty === "width" || styleProperty === "height")) {473 if (this._getPropertyValue(computedStyle, "box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) { 420 474 if (!userInput.match(/px$/)) { 421 475 console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied"); … … 436 490 } 437 491 492 let setBorderStyleProperty = null; 493 if (context.box === "border") { 494 let borderStyleProperty = styleProperty.replace("-width", "-style"); 495 if (this._getPropertyValue(computedStyle, borderStyleProperty) === "none") 496 setBorderStyleProperty = borderStyleProperty; 497 } 498 438 499 WI.RemoteObject.resolveNode(this._nodeStyles.node).then((object) => { 439 function inspectedPage_node_toggleInlineStyleProperty(property, value) { 440 this.style.setProperty(property, value, "important"); 500 function inspectedPage_node_toggleInlineStyleProperty(styleProperty, userInput, setBorderStyleProperty) { 501 if (setBorderStyleProperty) 502 this.style.setProperty(setBorderStyleProperty, "solid", "important"); 503 this.style.setProperty(styleProperty, userInput, "important"); 441 504 } 442 505 … … 445 508 }; 446 509 447 object.callFunction(inspectedPage_node_toggleInlineStyleProperty, [styleProperty, userInput ], false, didToggle);510 object.callFunction(inspectedPage_node_toggleInlineStyleProperty, [styleProperty, userInput, setBorderStyleProperty], false, didToggle); 448 511 object.release(); 449 512 });
Note: See TracChangeset
for help on using the changeset viewer.
