Modified: trunk/Source/WebInspectorUI/ChangeLog (239458 => 239459)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-12-20 19:48:35 UTC (rev 239458)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-12-20 20:05:34 UTC (rev 239459)
@@ -1,3 +1,19 @@
+2018-12-20 Joseph Pecoraro <[email protected]>
+
+ ITMLKit Inspector: Computed Style Box Model section throws exceptions
+ https://bugs.webkit.org/show_bug.cgi?id=192911
+ <rdar://problem/46861112>
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaElement):
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics):
+ ITMLKit doesn't always provide a display/position/width/height etc properties.
+ Protect against this, and just show an empty message in the box model section
+ if those properties do not exist.
+
2018-12-20 Devin Rousso <[email protected]>
Web Inspector: UIString should take an optional key and description to aid localization
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (239458 => 239459)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2018-12-20 19:48:35 UTC (rev 239458)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2018-12-20 20:05:34 UTC (rev 239459)
@@ -137,7 +137,11 @@
{
let suffix = this._getComponentSuffix(name);
let propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
- let value = style.propertyForName(propertyName).value;
+ let property = style.propertyForName(propertyName);
+ if (!property)
+ return null;
+
+ let value = property.value;
if (value === "" || (name !== "position" && value === "0px") || (name === "position" && value === "auto"))
value = "";
else
@@ -152,7 +156,11 @@
{
console.assert(name === "width" || name === "height");
- let size = style.propertyForName(name).value.replace(/px$/, "");
+ let property = style.propertyForName(name);
+ if (!property)
+ return null;
+
+ let size = property.value.replace(/px$/, "");
if (style.propertyForName("box-sizing").value === "border-box") {
let borderBox = this._getBox(style, "border");
let paddingBox = this._getBox(style, "padding");
@@ -197,16 +205,24 @@
return;
}
+ let displayProperty = style.propertyForName("display");
+ let positionProperty = style.propertyForName("position");
+ if (!displayProperty || !positionProperty) {
+ this.showEmptyMessage();
+ return;
+ }
+
var previousBox = null;
for (let name of ["content", "padding", "border", "margin", "position"]) {
- if (name === "margin" && noMarginDisplayType[style.propertyForName("display").value])
+
+ if (name === "margin" && noMarginDisplayType[displayProperty.value])
continue;
- if (name === "padding" && noPaddingDisplayType[style.propertyForName("display").value])
+ if (name === "padding" && noPaddingDisplayType[displayProperty.value])
continue;
- if (name === "position" && noPositionType[style.propertyForName("position").value])
+ if (name === "position" && noPositionType[positionProperty.value])
continue;
- var boxElement = document.createElement("div");
+ let boxElement = document.createElement("div");
boxElement.className = name;
boxElement._name = name;
boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
@@ -215,23 +231,37 @@
if (name === "content") {
let widthElement = createContentAreaElement.call(this, "width");
let heightElement = createContentAreaElement.call(this, "height");
+ if (!widthElement || !heightElement) {
+ this.showEmptyMessage();
+ return;
+ }
+
boxElement.append(widthElement, " \u00D7 ", heightElement);
} else {
- var labelElement = document.createElement("div");
+ let topElement = createBoxPartElement.call(this, name, "top");
+ let leftElement = createBoxPartElement.call(this, name, "left");
+ let rightElement = createBoxPartElement.call(this, name, "right");
+ let bottomElement = createBoxPartElement.call(this, name, "bottom");
+ if (!topElement || !leftElement || !rightElement || !bottomElement) {
+ this.showEmptyMessage();
+ return;
+ }
+
+ let labelElement = document.createElement("div");
labelElement.className = "label";
labelElement.textContent = name;
boxElement.appendChild(labelElement);
- boxElement.appendChild(createBoxPartElement.call(this, name, "top"));
+ boxElement.appendChild(topElement);
boxElement.appendChild(document.createElement("br"));
- boxElement.appendChild(createBoxPartElement.call(this, name, "left"));
+ boxElement.appendChild(leftElement);
if (previousBox)
boxElement.appendChild(previousBox);
- boxElement.appendChild(createBoxPartElement.call(this, name, "right"));
+ boxElement.appendChild(rightElement);
boxElement.appendChild(document.createElement("br"));
- boxElement.appendChild(createBoxPartElement.call(this, name, "bottom"));
+ boxElement.appendChild(bottomElement);
}
previousBox = boxElement;
