- Revision
- 248328
- Author
- drou...@apple.com
- Date
- 2019-08-06 16:46:22 -0700 (Tue, 06 Aug 2019)
Log Message
Web Inspector: Show radius values in box model metrics view
https://bugs.webkit.org/show_bug.cgi?id=160993
<rdar://problem/27919035>
Reviewed by Brian Burg.
* UserInterface/Views/BoxModelDetailsSectionRow.js:
(WI.BoxModelDetailsSectionRow.prototype._getPropertyValue): Added.
(WI.BoxModelDetailsSectionRow.prototype._getPropertyValueAsPx):
(WI.BoxModelDetailsSectionRow.prototype._getBox):
(WI.BoxModelDetailsSectionRow.prototype._getComponentPrefix): Added.
(WI.BoxModelDetailsSectionRow.prototype._getComponentSuffix):
(WI.BoxModelDetailsSectionRow.prototype._updateMetrics):
(WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
(WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement):
(WI.BoxModelDetailsSectionRow.prototype._applyUserInput):
(WI.BoxModelDetailsSectionRow.prototype._applyUserInput.inspectedPage_node_toggleInlineStyleProperty):
* UserInterface/Views/BoxModelDetailsSectionRow.css:
(.details-section .row.box-model .box): Added.
(.details-section .row.box-model .box > .label): Added.
(.details-section .row.box-model .box.position): Added.
(.details-section .row.box-model .box.margin): Added.
(.details-section .row.box-model:not(.hovered) .box.margin, .details-section .row.box-model .box.margin.active): Added.
(.details-section .row.box-model .box.border): Added.
(.details-section .row.box-model:not(.hovered) .box.border, .details-section .row.box-model .box.border.active): Added.
(.details-section .row.box-model .box.border > .label): Added.
(.details-section .row.box-model .box.border.has-top-left-radius, .details-section .row.box-model .box.border.has-top-left-radius .box): Added.
(.details-section .row.box-model .box.border.has-top-right-radius, .details-section .row.box-model .box.border.has-top-right-radius .box): Added.
(.details-section .row.box-model .box.border.has-bottom-right-radius, .details-section .row.box-model .box.border.has-bottom-right-radius .box): Added.
(.details-section .row.box-model .box.border.has-bottom-left-radius, .details-section .row.box-model .box.border.has-bottom-left-radius .box): Added.
(.details-section .row.box-model .box.padding): Added.
(.details-section .row.box-model:not(.hovered) .box.padding, .details-section .row.box-model .box.padding.active): Added.
(.details-section .row.box-model .box.content): Added.
(.details-section .row.box-model:not(.hovered) .box.content, .details-section .row.box-model .box.content.active): Added.
(.details-section .row.box-model :matches(.top, .right, .bottom, .left)): Added.
(.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.
(.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)): Added.
(.details-section .row.box-model :matches(.top-left, .top-right)): Added.
(.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing)): Added.
(.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing): Added.
(.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing)): Added.
(.details-section .row.box-model :matches(.top-left, .bottom-left).editing): Added.
(.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing)): Added.
(.details-section .row.box-model :matches(.top-right, .bottom-right).editing): Added.
(@media (prefers-color-scheme: dark) .details-section .row.box-model .box): Added.
(@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.
(@media (prefers-color-scheme: dark) .details-section .row.box-model .box.margin): Added.
(@media (prefers-color-scheme: dark) .details-section .row.box-model .box.border): Added.
(.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)): Deleted.
(.details-section .row.box-model .position): Deleted.
(.details-section .row.box-model .margin): Deleted.
(.details-section .row.box-model:not(.hovered) .margin, .details-section .row.box-model .margin.active): Deleted.
(.details-section .row.box-model .border): Deleted.
(.details-section .row.box-model:not(.hovered) .border, .details-section .row.box-model .border.active): Deleted.
(.details-section .row.box-model .padding): Deleted.
(.details-section .row.box-model:not(.hovered) .padding, .details-section .row.box-model .padding.active): Deleted.
(.details-section .row.box-model .content): Deleted.
(.details-section .row.box-model:not(.hovered) .content, .details-section .row.box-model .content.active): Deleted.
(.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)): Deleted.
(.details-section .row.box-model :matches(.right, .left)): Deleted.
(.details-section .row.box-model:not(.hovered) :matches(.margin, .border, .padding, .content), .details-section .row.box-model .active:matches(.margin, .border, .padding, .content)): Deleted.
* UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.prototype.update):
Ensure that the `_value` is updated whenever the `_rawValue` is updated.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (248327 => 248328)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-08-06 23:38:03 UTC (rev 248327)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-08-06 23:46:22 UTC (rev 248328)
@@ -1,3 +1,71 @@
+2019-08-06 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Show radius values in box model metrics view
+ https://bugs.webkit.org/show_bug.cgi?id=160993
+ <rdar://problem/27919035>
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WI.BoxModelDetailsSectionRow.prototype._getPropertyValue): Added.
+ (WI.BoxModelDetailsSectionRow.prototype._getPropertyValueAsPx):
+ (WI.BoxModelDetailsSectionRow.prototype._getBox):
+ (WI.BoxModelDetailsSectionRow.prototype._getComponentPrefix): Added.
+ (WI.BoxModelDetailsSectionRow.prototype._getComponentSuffix):
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics):
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement):
+ (WI.BoxModelDetailsSectionRow.prototype._applyUserInput):
+ (WI.BoxModelDetailsSectionRow.prototype._applyUserInput.inspectedPage_node_toggleInlineStyleProperty):
+ * UserInterface/Views/BoxModelDetailsSectionRow.css:
+ (.details-section .row.box-model .box): Added.
+ (.details-section .row.box-model .box > .label): Added.
+ (.details-section .row.box-model .box.position): Added.
+ (.details-section .row.box-model .box.margin): Added.
+ (.details-section .row.box-model:not(.hovered) .box.margin, .details-section .row.box-model .box.margin.active): Added.
+ (.details-section .row.box-model .box.border): Added.
+ (.details-section .row.box-model:not(.hovered) .box.border, .details-section .row.box-model .box.border.active): Added.
+ (.details-section .row.box-model .box.border > .label): Added.
+ (.details-section .row.box-model .box.border.has-top-left-radius, .details-section .row.box-model .box.border.has-top-left-radius .box): Added.
+ (.details-section .row.box-model .box.border.has-top-right-radius, .details-section .row.box-model .box.border.has-top-right-radius .box): Added.
+ (.details-section .row.box-model .box.border.has-bottom-right-radius, .details-section .row.box-model .box.border.has-bottom-right-radius .box): Added.
+ (.details-section .row.box-model .box.border.has-bottom-left-radius, .details-section .row.box-model .box.border.has-bottom-left-radius .box): Added.
+ (.details-section .row.box-model .box.padding): Added.
+ (.details-section .row.box-model:not(.hovered) .box.padding, .details-section .row.box-model .box.padding.active): Added.
+ (.details-section .row.box-model .box.content): Added.
+ (.details-section .row.box-model:not(.hovered) .box.content, .details-section .row.box-model .box.content.active): Added.
+ (.details-section .row.box-model :matches(.top, .right, .bottom, .left)): Added.
+ (.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.
+ (.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)): Added.
+ (.details-section .row.box-model :matches(.top-left, .top-right)): Added.
+ (.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing)): Added.
+ (.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing): Added.
+ (.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing)): Added.
+ (.details-section .row.box-model :matches(.top-left, .bottom-left).editing): Added.
+ (.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing)): Added.
+ (.details-section .row.box-model :matches(.top-right, .bottom-right).editing): Added.
+ (@media (prefers-color-scheme: dark) .details-section .row.box-model .box): Added.
+ (@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.
+ (@media (prefers-color-scheme: dark) .details-section .row.box-model .box.margin): Added.
+ (@media (prefers-color-scheme: dark) .details-section .row.box-model .box.border): Added.
+ (.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)): Deleted.
+ (.details-section .row.box-model .position): Deleted.
+ (.details-section .row.box-model .margin): Deleted.
+ (.details-section .row.box-model:not(.hovered) .margin, .details-section .row.box-model .margin.active): Deleted.
+ (.details-section .row.box-model .border): Deleted.
+ (.details-section .row.box-model:not(.hovered) .border, .details-section .row.box-model .border.active): Deleted.
+ (.details-section .row.box-model .padding): Deleted.
+ (.details-section .row.box-model:not(.hovered) .padding, .details-section .row.box-model .padding.active): Deleted.
+ (.details-section .row.box-model .content): Deleted.
+ (.details-section .row.box-model:not(.hovered) .content, .details-section .row.box-model .content.active): Deleted.
+ (.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)): Deleted.
+ (.details-section .row.box-model :matches(.right, .left)): Deleted.
+ (.details-section .row.box-model:not(.hovered) :matches(.margin, .border, .padding, .content), .details-section .row.box-model .active:matches(.margin, .border, .padding, .content)): Deleted.
+
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype.update):
+ Ensure that the `_value` is updated whenever the `_rawValue` is updated.
+
2019-08-06 Commit Queue <commit-qu...@webkit.org>
Unreviewed, rolling out r248289.
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (248327 => 248328)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2019-08-06 23:38:03 UTC (rev 248327)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2019-08-06 23:46:22 UTC (rev 248328)
@@ -108,6 +108,7 @@
this._text = text;
this._name = name;
this._rawValue = value;
+ this._value = undefined;
this._priority = priority;
this._enabled = enabled;
this._implicit = implicit;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (248327 => 248328)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2019-08-06 23:38:03 UTC (rev 248327)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2019-08-06 23:46:22 UTC (rev 248328)
@@ -29,62 +29,88 @@
white-space: nowrap;
}
-.details-section .row.box-model .label {
- position: absolute;
- color: black;
- padding: 0 2px;
-}
-
-.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
- border: 1px solid grey;
- background-color: white;
+.details-section .row.box-model .box {
display: inline-block;
+ position: relative;
+ margin: 3px;
+ padding: 3px;
text-align: center;
vertical-align: middle;
- padding: 3px;
- margin: 3px;
+ background-color: white;
+ border: 1px solid grey;
}
-.details-section .row.box-model .position {
+.details-section .row.box-model .box > .label {
+ position: absolute;
+ padding: 0 2px;
+}
+
+.details-section .row.box-model .box.position {
border-style: dotted;
}
-.details-section .row.box-model .margin {
+.details-section .row.box-model .box.margin {
border-style: dashed;
border-color: black;
}
-.details-section .row.box-model:not(.hovered) .margin,
-.details-section .row.box-model .margin.active {
+.details-section .row.box-model:not(.hovered) .box.margin,
+.details-section .row.box-model .box.margin.active {
background-color: hsla(30, 88%, 69%, 0.66);
}
-.details-section .row.box-model .border {
+.details-section .row.box-model .box.border {
border-color: black;
+
+ --has-border-radius-border-radius: 10px;
}
-.details-section .row.box-model:not(.hovered) .border,
-.details-section .row.box-model .border.active {
+.details-section .row.box-model:not(.hovered) .box.border,
+.details-section .row.box-model .box.border.active {
background-color: hsla(44, 100%, 80%, 0.66);
}
-.details-section .row.box-model .padding {
+.details-section .row.box-model .box.border > .label {
+ -webkit-margin-start: 20px;
+}
+
+.details-section .row.box-model .box.border.has-top-left-radius,
+.details-section .row.box-model .box.border.has-top-left-radius .box {
+ border-top-left-radius: var(--has-border-radius-border-radius);
+}
+
+.details-section .row.box-model .box.border.has-top-right-radius,
+.details-section .row.box-model .box.border.has-top-right-radius .box {
+ border-top-right-radius: var(--has-border-radius-border-radius);
+}
+
+.details-section .row.box-model .box.border.has-bottom-right-radius,
+.details-section .row.box-model .box.border.has-bottom-right-radius .box {
+ border-bottom-right-radius: var(--has-border-radius-border-radius);
+}
+
+.details-section .row.box-model .box.border.has-bottom-left-radius,
+.details-section .row.box-model .box.border.has-bottom-left-radius .box {
+ border-bottom-left-radius: var(--has-border-radius-border-radius);
+}
+
+.details-section .row.box-model .box.padding {
border-style: dashed;
}
-.details-section .row.box-model:not(.hovered) .padding,
-.details-section .row.box-model .padding.active {
+.details-section .row.box-model:not(.hovered) .box.padding,
+.details-section .row.box-model .box.padding.active {
background-color: hsla(101, 37%, 62%, 0.55);
}
-.details-section .row.box-model .content {
+.details-section .row.box-model .box.content {
position: static;
min-width: 80px;
overflow: visible;
}
-.details-section .row.box-model:not(.hovered) .content,
-.details-section .row.box-model .content.active {
+.details-section .row.box-model:not(.hovered) .box.content,
+.details-section .row.box-model .box.content.active {
background-color: hsla(208, 60%, 64%, 0.66);
}
@@ -93,14 +119,48 @@
z-index: 2;
}
-.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
+.details-section .row.box-model :matches(.top, .right, .bottom, .left) {
display: inline-block;
+ vertical-align: middle;
}
-.details-section .row.box-model :matches(.right, .left) {
- vertical-align: middle;
+.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) {
+ margin: 0 0.25em;
}
+.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left) {
+ position: absolute;
+}
+
+.details-section .row.box-model :matches(.top-left, .top-right) {
+ top: 4px;
+}
+
+.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing) {
+ bottom: 3px;
+}
+
+.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing {
+ bottom: 2px;
+}
+
+.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing) {
+ left: 3px;
+}
+
+.details-section .row.box-model :matches(.top-left, .bottom-left).editing {
+ left: 1px;
+}
+
+.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing) {
+ right: 3px;
+}
+
+.details-section .row.box-model :matches(.top-right, .bottom-right).editing {
+ right: 1px;
+}
+
@media (prefers-color-scheme: dark) {
.details-section .row.box-model {
color: var(--text-color);
@@ -110,22 +170,23 @@
color: inherit;
}
- .details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
+ .details-section .row.box-model .box {
border-color: var(--text-color-quaternary);
background-color: var(--background-color);
color: var(--text-color);
}
- .details-section .row.box-model:not(.hovered) :matches(.margin, .border, .padding, .content),
- .details-section .row.box-model .active:matches(.margin, .border, .padding, .content) {
+ .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) {
color: black;
}
- .details-section .row.box-model .margin {
+ .details-section .row.box-model .box.margin {
border-color: var(--text-color-quaternary);
}
- .details-section .row.box-model .border {
+ .details-section .row.box-model .box.border {
border-color: var(--text-color-quaternary);
}
}
+
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (248327 => 248328)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2019-08-06 23:38:03 UTC (rev 248327)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2019-08-06 23:46:22 UTC (rev 248328)
@@ -65,24 +65,49 @@
this._updateMetrics();
}
+ _getPropertyValue(style, propertyName)
+ {
+ const dontCreateIfMissing = true;
+ let property = style.propertyForName(propertyName, dontCreateIfMissing);
+ if (!property)
+ return null;
+ return property.value;
+ }
+
_getPropertyValueAsPx(style, propertyName)
{
- return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
+ let value = this._getPropertyValue(style, propertyName);
+ if (!value)
+ return 0;
+ return Number(value.replace(/px$/, "") || 0);
}
_getBox(computedStyle, componentName)
{
- var suffix = this._getComponentSuffix(componentName);
- 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);
+ let prefix = this._getComponentPrefix(componentName);
+ let suffix = this._getComponentSuffix(componentName);
+ let left = this._getPropertyValueAsPx(computedStyle, prefix + "-left" + suffix);
+ let top = this._getPropertyValueAsPx(computedStyle, prefix + "-top" + suffix);
+ let right = this._getPropertyValueAsPx(computedStyle, prefix + "-right" + suffix);
+ let bottom = this._getPropertyValueAsPx(computedStyle, prefix + "-bottom" + suffix);
return {left, top, right, bottom};
}
+ _getComponentPrefix(componentName)
+ {
+ return componentName === "border-radius" ? "border" : componentName;
+ }
+
_getComponentSuffix(componentName)
{
- return componentName === "border" ? "-width" : "";
+ switch (componentName) {
+ case "border":
+ return "-width";
+
+ case "border-radius":
+ return "-radius";
+ }
+ return "";
}
_highlightDOMNode(showHighlight, mode, event)
@@ -135,17 +160,19 @@
function createBoxPartElement(name, side)
{
+ let prefix = this._getComponentPrefix(name);
let suffix = this._getComponentSuffix(name);
- let propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
- let property = style.propertyForName(propertyName);
- if (!property)
- return null;
-
- let value = property.value;
- if (value === "" || (name !== "position" && value === "0px") || (name === "position" && value === "auto"))
+ let propertyName = (prefix !== "position" ? prefix + "-" : "") + side + suffix;
+ let value = this._getPropertyValue(style, propertyName);
+ if (value) {
+ if (prefix === "position" && value === "auto")
+ value = "";
+ else if (prefix !== "position" && value === "0px")
+ value = "";
+ else
+ value = value.replace(/px$/, "");
+ } else
value = "";
- else
- value = value.replace(/px$/, "");
let element = createValueElement.call(this, "div", value, name, propertyName);
element.className = side;
@@ -156,12 +183,8 @@
{
console.assert(name === "width" || name === "height");
- let property = style.propertyForName(name);
- if (!property)
- return null;
-
- let size = property.value.replace(/px$/, "");
- if (style.propertyForName("box-sizing").value === "border-box") {
+ let size = this._getPropertyValueAsPx(style, name);
+ if (this._getPropertyValue(style, "box-sizing") === "border-box") {
let borderBox = this._getBox(style, "border");
let paddingBox = this._getBox(style, "padding");
@@ -205,8 +228,8 @@
return;
}
- let displayProperty = style.propertyForName("display");
- let positionProperty = style.propertyForName("position");
+ let displayProperty = this._getPropertyValue(style, "display");
+ let positionProperty = this._getPropertyValue(style, "position");
if (!displayProperty || !positionProperty) {
this.showEmptyMessage();
return;
@@ -223,7 +246,7 @@
continue;
let boxElement = document.createElement("div");
- boxElement.className = name;
+ boxElement.classList.add("box", name);
boxElement._name = name;
boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
this._boxElements.push(boxElement);
@@ -238,6 +261,23 @@
boxElement.append(widthElement, " \u00D7 ", heightElement);
} else {
+ let borderTopLeftRadiusElement = null;
+ let borderTopRightRadiusElement = null;
+ let borderBottomRightRadiusElement = null;
+ let borderBottomLeftRadiusElement = null;
+ if (name === "border") {
+ for (let corner of ["top-left", "top-right", "bottom-right", "bottom-left"]) {
+ let cornerValue = this._getPropertyValue(style, "border-" + corner + "-radius");
+ if (cornerValue && cornerValue !== "0px")
+ boxElement.classList.add("has-" + corner + "-radius");
+ }
+
+ borderTopLeftRadiusElement = createBoxPartElement.call(this, "border-radius", "top-left");
+ borderTopRightRadiusElement = createBoxPartElement.call(this, "border-radius", "top-right");
+ borderBottomRightRadiusElement = createBoxPartElement.call(this, "border-radius", "bottom-right");
+ borderBottomLeftRadiusElement = createBoxPartElement.call(this, "border-radius", "bottom-left");
+ }
+
let topElement = createBoxPartElement.call(this, name, "top");
let leftElement = createBoxPartElement.call(this, name, "left");
let rightElement = createBoxPartElement.call(this, name, "right");
@@ -252,7 +292,14 @@
labelElement.textContent = name;
boxElement.appendChild(labelElement);
+ if (borderTopLeftRadiusElement)
+ boxElement.appendChild(borderTopLeftRadiusElement);
+
boxElement.appendChild(topElement);
+
+ if (borderTopRightRadiusElement)
+ boxElement.appendChild(borderTopRightRadiusElement);
+
boxElement.appendChild(document.createElement("br"));
boxElement.appendChild(leftElement);
@@ -261,7 +308,14 @@
boxElement.appendChild(rightElement);
boxElement.appendChild(document.createElement("br"));
+
+ if (borderBottomLeftRadiusElement)
+ boxElement.appendChild(borderBottomLeftRadiusElement);
+
boxElement.appendChild(bottomElement);
+
+ if (borderBottomRightRadiusElement)
+ boxElement.appendChild(borderBottomRightRadiusElement);
}
previousBox = boxElement;
@@ -416,7 +470,7 @@
var styleProperty = context.styleProperty;
var computedStyle = this._nodeStyles.computedStyle;
- if (computedStyle.propertyForName("box-sizing").value === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
+ if (this._getPropertyValue(computedStyle, "box-sizing") === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
if (!userInput.match(/px$/)) {
console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
return;
@@ -435,9 +489,18 @@
userInput = userValuePx + "px";
}
+ let setBorderStyleProperty = null;
+ if (context.box === "border") {
+ let borderStyleProperty = styleProperty.replace("-width", "-style");
+ if (this._getPropertyValue(computedStyle, borderStyleProperty) === "none")
+ setBorderStyleProperty = borderStyleProperty;
+ }
+
WI.RemoteObject.resolveNode(this._nodeStyles.node).then((object) => {
- function inspectedPage_node_toggleInlineStyleProperty(property, value) {
- this.style.setProperty(property, value, "important");
+ function inspectedPage_node_toggleInlineStyleProperty(styleProperty, userInput, setBorderStyleProperty) {
+ if (setBorderStyleProperty)
+ this.style.setProperty(setBorderStyleProperty, "solid", "important");
+ this.style.setProperty(styleProperty, userInput, "important");
}
let didToggle = () => {
@@ -444,7 +507,7 @@
this._nodeStyles.refresh();
};
- object.callFunction(inspectedPage_node_toggleInlineStyleProperty, [styleProperty, userInput], false, didToggle);
+ object.callFunction(inspectedPage_node_toggleInlineStyleProperty, [styleProperty, userInput, setBorderStyleProperty], false, didToggle);
object.release();
});
}
