MetricsSidebarPane.js [plain text]
WebInspector.MetricsSidebarPane = function()
{
WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics"));
}
WebInspector.MetricsSidebarPane.prototype = {
update: function(node)
{
var body = this.bodyElement;
body.removeChildren();
if (!node)
return;
var style;
if (node.nodeType === Node.ELEMENT_NODE)
style = node.ownerDocument.defaultView.getComputedStyle(node);
if (!style)
return;
var metricsElement = document.createElement("div");
metricsElement.className = "metrics";
function boxPartValue(style, name, suffix)
{
var value = style.getPropertyValue(name + suffix);
if (value === "" || value === "0px")
value = "\u2012";
return value.replace(/px$/, "");
}
var noMarginDisplayType = {
"table-cell": true,
"table-column": true,
"table-column-group": true,
"table-footer-group": true,
"table-header-group": true,
"table-row": true,
"table-row-group": true
};
var noPaddingDisplayType = {
"table-column": true,
"table-column-group": true,
"table-footer-group": true,
"table-header-group": true,
"table-row": true,
"table-row-group": true
};
var boxes = ["content", "padding", "border", "margin"];
var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin")];
var previousBox;
for (var i = 0; i < boxes.length; ++i) {
var name = boxes[i];
if (name === "margin" && noMarginDisplayType[style.display])
continue;
if (name === "padding" && noPaddingDisplayType[style.display])
continue;
var boxElement = document.createElement("div");
boxElement.className = name;
if (name === "content") {
var width = style.width.replace(/px$/, "");
var height = style.height.replace(/px$/, "");
boxElement.textContent = width + " \u00D7 " + height;
} else {
var suffix = (name === "border" ? "-width" : "");
var labelElement = document.createElement("div");
labelElement.className = "label";
labelElement.textContent = boxLabels[i];
boxElement.appendChild(labelElement);
var topElement = document.createElement("div");
topElement.className = "top";
topElement.textContent = boxPartValue(style, name + "-top", suffix);
boxElement.appendChild(topElement);
var leftElement = document.createElement("div");
leftElement.className = "left";
leftElement.textContent = boxPartValue(style, name + "-left", suffix);
boxElement.appendChild(leftElement);
if (previousBox)
boxElement.appendChild(previousBox);
var rightElement = document.createElement("div");
rightElement.className = "right";
rightElement.textContent = boxPartValue(style, name + "-right", suffix);
boxElement.appendChild(rightElement);
var bottomElement = document.createElement("div");
bottomElement.className = "bottom";
bottomElement.textContent = boxPartValue(style, name + "-bottom", suffix);
boxElement.appendChild(bottomElement);
}
previousBox = boxElement;
}
metricsElement.appendChild(previousBox);
body.appendChild(metricsElement);
}
}
WebInspector.MetricsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;