InspectorOverlayPage.js [plain text]
const boundsColor = "rgba(255,0,0,0.6)";
const lightGridColor = "rgba(0,0,0,0.2)";
const darkGridColor = "rgba(0,0,0,0.5)";
const transparentColor = "rgba(0, 0, 0, 0)";
const gridBackgroundColor = "rgba(255, 255, 255, 0.6)";
const shapeHighlightColor = "rgba(96, 82, 127, 0.8)";
const shapeMarginHighlightColor = "rgba(96, 82, 127, 0.6)";
const paintRectFillColor = "rgba(255, 0, 0, 0.5)";
const elementTitleFillColor = "rgb(255, 255, 194)";
const elementTitleStrokeColor = "rgb(128, 128, 128)";
let DATA = {};
class Bounds {
constructor()
{
this._minX = Number.MAX_VALUE;
this._minY = Number.MAX_VALUE;
this._maxX = Number.MIN_VALUE;
this._maxY = Number.MIN_VALUE;
this._offsetX = 0;
this._offsetY = 0;
}
get minX() { return this._minX + this._offsetX; }
get minY() { return this._minY + this._offsetY; }
get maxX() { return this._maxX + this._offsetX; }
get maxY() { return this._maxY + this._offsetY; }
update(x, y)
{
this._minX = Math.min(this._minX, x);
this._minY = Math.min(this._minY, y);
this._maxX = Math.max(this._maxX, x);
this._maxY = Math.max(this._maxY, y);
}
offset(x, y)
{
this._offsetX = x || 0;
this._offsetY = y || 0;
}
}
function drawPausedInDebuggerMessage(message)
{
var pausedInDebugger = document.getElementById("paused-in-debugger");
pausedInDebugger.textContent = message;
pausedInDebugger.style.visibility = "visible";
document.body.classList.add("dimmed");
}
function drawNodeHighlight(allHighlights)
{
for (let highlight of allHighlights) {
let bounds = new Bounds;
bounds.offset(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
_isolateActions(() => {
context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
for (let fragment of highlight.fragments)
_drawFragmentHighlight(fragment, bounds);
if (highlight.elementData && highlight.elementData.shapeOutsideData)
_drawShapeHighlight(highlight.elementData.shapeOutsideData, bounds);
});
if (DATA.showRulers)
_drawBounds(bounds);
}
if (allHighlights.length === 1) {
for (let fragment of allHighlights[0].fragments)
_drawElementTitle(allHighlights[0].elementData, fragment, allHighlights[0].scrollOffset);
}
}
function drawQuadHighlight(highlight)
{
let bounds = new Bounds;
_isolateActions(() => {
_drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
});
if (DATA.showRulers)
_drawBounds(bounds);
}
function quadEquals(quad1, quad2)
{
return quad1[0].x === quad2[0].x && quad1[0].y === quad2[0].y &&
quad1[1].x === quad2[1].x && quad1[1].y === quad2[1].y &&
quad1[2].x === quad2[2].x && quad1[2].y === quad2[2].y &&
quad1[3].x === quad2[3].x && quad1[3].y === quad2[3].y;
}
function updatePaintRects(paintRectList)
{
var context = paintRectsCanvas.getContext("2d");
context.save();
context.scale(window.devicePixelRatio, window.devicePixelRatio);
context.clearRect(0, 0, paintRectsCanvas.width, paintRectsCanvas.height);
context.fillStyle = paintRectFillColor;
for (var rectObject of paintRectList)
context.fillRect(rectObject.x, rectObject.y, rectObject.width, rectObject.height);
context.restore();
}
function drawRulers()
{
const gridLabelSize = 13;
const gridSize = 15;
const gridStepIncrement = 50;
const gridStepLength = 8;
const gridSubStepIncrement = 5;
const gridSubStepLength = 5;
let pageFactor = DATA.pageZoomFactor * DATA.pageScaleFactor;
let scrollX = DATA.scrollOffset.x * DATA.pageScaleFactor;
let scrollY = DATA.scrollOffset.y * DATA.pageScaleFactor;
function zoom(value) {
return value * pageFactor;
}
function unzoom(value) {
return value / pageFactor;
}
function multipleBelow(value, step) {
return value - (value % step);
}
let width = DATA.viewportSize.width / pageFactor;
let height = DATA.viewportSize.height / pageFactor;
let minX = unzoom(scrollX);
let minY = unzoom(scrollY);
let maxX = minX + width;
let maxY = minY + height;
// Draw backgrounds
_isolateActions(() => {
let offsetX = DATA.contentInset.width + gridSize;
let offsetY = DATA.contentInset.height + gridSize;
context.fillStyle = gridBackgroundColor;
context.fillRect(DATA.contentInset.width, DATA.contentInset.height, gridSize, gridSize);
context.fillRect(offsetX, DATA.contentInset.height, zoom(width) - offsetX, gridSize);
context.fillRect(DATA.contentInset.width, offsetY, gridSize, zoom(height) - offsetY);
});
// Ruler styles
_isolateActions(() => {
context.lineWidth = 1;
context.fillStyle = darkGridColor;
// Draw labels
_isolateActions(() => {
context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY);
for (let x = multipleBelow(minX, gridStepIncrement * 2); x < maxX; x += gridStepIncrement * 2) {
if (!x && !scrollX)
continue;
_isolateActions(() => {
context.translate(zoom(x) + 0.5, scrollY);
context.fillText(x, 2, gridLabelSize);
});
}
for (let y = multipleBelow(minY, gridStepIncrement * 2); y < maxY; y += gridStepIncrement * 2) {
if (!y && !scrollY)
continue;
_isolateActions(() => {
context.translate(scrollX, zoom(y) + 0.5);
context.rotate(-Math.PI / 2);
context.fillText(y, 2, gridLabelSize);
});
}
});
_isolateActions(() => {
context.translate(DATA.contentInset.width - scrollX + 0.5, DATA.contentInset.height - scrollY);
for (let x = multipleBelow(minX, gridSubStepIncrement); x < maxX; x += gridSubStepIncrement) {
if (!x && !scrollX)
continue;
context.beginPath();
context.moveTo(zoom(x), scrollY);
if (x % gridStepIncrement) {
context.strokeStyle = lightGridColor;
context.lineTo(zoom(x), scrollY + gridSubStepLength);
} else {
context.strokeStyle = darkGridColor;
context.lineTo(zoom(x), scrollY + ((x % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength));
}
context.stroke();
}
});
_isolateActions(() => {
context.translate(DATA.contentInset.width - scrollX, DATA.contentInset.height - scrollY + 0.5);
for (let y = multipleBelow(minY, gridSubStepIncrement); y < maxY; y += gridSubStepIncrement) {
if (!y && !scrollY)
continue;
context.beginPath();
context.moveTo(scrollX, zoom(y));
if (y % gridStepIncrement) {
context.strokeStyle = lightGridColor;
context.lineTo(scrollX + gridSubStepLength, zoom(y));
} else {
context.strokeStyle = darkGridColor;
context.lineTo(scrollX + ((y % (gridStepIncrement * 2)) ? gridSubStepLength : gridStepLength), zoom(y));
}
context.stroke();
}
});
});
}
function reset(payload)
{
DATA.viewportSize = payload.viewportSize;
DATA.deviceScaleFactor = payload.deviceScaleFactor;
DATA.pageScaleFactor = payload.pageScaleFactor;
DATA.pageZoomFactor = payload.pageZoomFactor;
DATA.scrollOffset = payload.scrollOffset;
DATA.contentInset = payload.contentInset;
DATA.showRulers = payload.showRulers;
window.canvas = document.getElementById("canvas");
window.paintRectsCanvas = document.getElementById("paintrects-canvas");
window.context = canvas.getContext("2d");
canvas.width = DATA.deviceScaleFactor * DATA.viewportSize.width;
canvas.height = DATA.deviceScaleFactor * DATA.viewportSize.height;
canvas.style.width = DATA.viewportSize.width + "px";
canvas.style.height = DATA.viewportSize.height + "px";
context.scale(DATA.deviceScaleFactor, DATA.deviceScaleFactor);
context.clearRect(0, 0, canvas.width, canvas.height);
paintRectsCanvas.width = DATA.deviceScaleFactor * DATA.viewportSize.width;
paintRectsCanvas.height = DATA.deviceScaleFactor * DATA.viewportSize.height;
paintRectsCanvas.style.width = DATA.viewportSize.width + "px";
paintRectsCanvas.style.height = DATA.viewportSize.height + "px";
document.getElementById("paused-in-debugger").style.visibility = "hidden";
document.getElementById("element-title-container").textContent = "";
document.body.classList.remove("dimmed");
document.getElementById("log").style.setProperty("top", DATA.contentInset.height + "px");
}
function DOMBuilder(tagName, className)
{
this.element = document.createElement(tagName);
this.element.className = className;
}
DOMBuilder.prototype.appendTextNode = function(content)
{
let node = document.createTextNode(content);
this.element.appendChild(node);
return node;
}
DOMBuilder.prototype.appendSpan = function(className, value)
{
var span = document.createElement("span");
span.className = className;
span.textContent = value;
this.element.appendChild(span);
return span;
}
DOMBuilder.prototype.appendSpanIfNotNull = function(className, value, prefix)
{
return value ? this.appendSpan(className, (prefix ? prefix : "") + value) : null;
}
DOMBuilder.prototype.appendProperty = function(className, propertyName, value)
{
var builder = new DOMBuilder("div", className);
builder.appendSpan("css-property", propertyName);
builder.appendTextNode(" ");
builder.appendSpan("value", value);
this.element.appendChild(builder.element);
return builder.element;
}
DOMBuilder.prototype.appendPropertyIfNotNull = function(className, propertyName, value)
{
return value ? this.appendProperty(className, propertyName, value) : null;
}
function _truncateString(value, maxLength)
{
return value && value.length > maxLength ? value.substring(0, 50) + "\u2026" : value;
}
function _isolateActions(func) {
context.save();
func();
context.restore();
}
function _quadToPath(quad, bounds)
{
function parseQuadPoint(point) {
bounds.update(point.x, point.y);
return [point.x, point.y];
}
context.beginPath();
context.moveTo(...parseQuadPoint(quad[0]));
context.lineTo(...parseQuadPoint(quad[1]));
context.lineTo(...parseQuadPoint(quad[2]));
context.lineTo(...parseQuadPoint(quad[3]));
context.closePath();
return context;
}
function _drawOutlinedQuad(quad, fillColor, outlineColor, bounds)
{
_isolateActions(() => {
context.lineWidth = 2;
_quadToPath(quad, bounds);
context.clip();
context.fillStyle = fillColor;
context.fill();
if (outlineColor) {
context.strokeStyle = outlineColor;
context.stroke();
}
});
}
function _drawPath(context, commands, fillColor, bounds)
{
let commandsIndex = 0;
function parsePoints(count) {
let parsed = [];
for (let i = 0; i < count; ++i) {
let x = commands[commandsIndex++];
parsed.push(x);
let y = commands[commandsIndex++];
parsed.push(y);
bounds.update(x, y);
}
return parsed;
}
_isolateActions(() => {
context.beginPath();
while (commandsIndex < commands.length) {
switch (commands[commandsIndex++]) {
case 'M':
context.moveTo(...parsePoints(1));
break;
case 'L':
context.lineTo(...parsePoints(1));
break;
case 'C':
context.bezierCurveTo(...parsePoints(3));
break;
case 'Q':
context.quadraticCurveTo(...parsePoints(2));
break;
case 'Z':
context.closePath();
break;
}
}
context.closePath();
context.fillStyle = fillColor;
context.fill();
});
}
function _drawOutlinedQuadWithClip(quad, clipQuad, fillColor, bounds)
{
_isolateActions(() => {
context.fillStyle = fillColor;
context.lineWidth = 0;
_quadToPath(quad, bounds);
context.fill();
context.globalCompositeOperation = "destination-out";
context.fillStyle = "red";
_quadToPath(clipQuad, bounds);
context.fill();
});
}
function _drawBounds(bounds)
{
_isolateActions(() => {
let startX = DATA.contentInset.width;
let startY = DATA.contentInset.height;
context.beginPath();
if (bounds.minY - startY > 0) {
context.moveTo(bounds.minX, bounds.minY);
context.lineTo(bounds.minX, startY);
context.moveTo(bounds.maxX, bounds.minY);
context.lineTo(bounds.maxX, startY);
}
if (bounds.minX - startX > 0) {
context.moveTo(bounds.minX, bounds.minY);
context.lineTo(startX, bounds.minY);
context.moveTo(bounds.minX, bounds.maxY);
context.lineTo(startX, bounds.maxY);
}
context.lineWidth = 1;
context.strokeStyle = boundsColor;
context.stroke();
});
}
function _createElementTitle(elementData)
{
let builder = new DOMBuilder("div", "element-title");
builder.appendSpanIfNotNull("tag-name", elementData.tagName);
builder.appendSpanIfNotNull("node-id", CSS.escape(elementData.idValue), "#");
let classes = elementData.classes;
if (classes && classes.length)
builder.appendSpan("class-name", _truncateString(classes.map((className) => "." + CSS.escape(className)).join(""), 50));
builder.appendSpanIfNotNull("pseudo-type", elementData.pseudoElement, "::");
builder.appendTextNode(" ");
builder.appendSpan("node-width", elementData.size.width);
builder.appendSpan("px", "px \xd7 ");
builder.appendSpan("node-height", elementData.size.height);
builder.appendSpan("px", "px");
builder.appendPropertyIfNotNull("role-name", "Role", elementData.role);
document.getElementById("element-title-container").appendChild(builder.element);
return builder.element;
}
function _drawElementTitle(elementData, fragmentHighlight, scroll)
{
if (!elementData || !fragmentHighlight.quads.length)
return;
var elementTitle = _createElementTitle(elementData);
var marginQuad = fragmentHighlight.quads[0];
var titleWidth = elementTitle.offsetWidth + 6;
var titleHeight = elementTitle.offsetHeight + 4;
var anchorTop = marginQuad[0].y;
var anchorBottom = marginQuad[3].y;
const arrowHeight = 7;
var renderArrowUp = false;
var renderArrowDown = false;
var boxX = marginQuad[0].x;
boxX = Math.max(2, boxX - scroll.x);
anchorTop -= scroll.y;
anchorBottom -= scroll.y;
var viewportWidth = DATA.viewportSize.width;
if (boxX + titleWidth > viewportWidth)
boxX = viewportWidth - titleWidth - 2;
var viewportHeight = DATA.viewportSize.height;
var viewportTop = DATA.contentInset.height;
var boxY;
if (anchorTop > viewportHeight) {
boxY = canvas.height - titleHeight - arrowHeight;
renderArrowDown = true;
} else if (anchorBottom < viewportTop) {
boxY = arrowHeight;
renderArrowUp = true;
} else if (anchorBottom + titleHeight + arrowHeight < viewportHeight) {
boxY = anchorBottom + arrowHeight - 4;
renderArrowUp = true;
} else if (anchorTop - titleHeight - arrowHeight > viewportTop) {
boxY = anchorTop - titleHeight - arrowHeight + 3;
renderArrowDown = true;
} else
boxY = arrowHeight;
_isolateActions(() => {
context.translate(0.5, 0.5);
context.beginPath();
context.moveTo(boxX, boxY);
if (renderArrowUp) {
context.lineTo(boxX + (2 * arrowHeight), boxY);
context.lineTo(boxX + (3 * arrowHeight), boxY - arrowHeight);
context.lineTo(boxX + (4 * arrowHeight), boxY);
}
context.lineTo(boxX + titleWidth, boxY);
context.lineTo(boxX + titleWidth, boxY + titleHeight);
if (renderArrowDown) {
context.lineTo(boxX + (4 * arrowHeight), boxY + titleHeight);
context.lineTo(boxX + (3 * arrowHeight), boxY + titleHeight + arrowHeight);
context.lineTo(boxX + (2 * arrowHeight), boxY + titleHeight);
}
context.lineTo(boxX, boxY + titleHeight);
context.closePath();
context.fillStyle = elementTitleFillColor;
context.fill();
context.strokeStyle = elementTitleStrokeColor;
context.stroke();
});
elementTitle.style.top = (boxY + 3) + "px";
elementTitle.style.left = (boxX + 3) + "px";
}
function _drawShapeHighlight(shapeInfo, bounds)
{
if (shapeInfo.marginShape)
_drawPath(context, shapeInfo.marginShape, shapeMarginHighlightColor, bounds);
if (shapeInfo.shape)
_drawPath(context, shapeInfo.shape, shapeHighlightColor, bounds);
if (!(shapeInfo.shape || shapeInfo.marginShape))
_drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor, bounds);
}
function _drawFragmentHighlight(highlight, bounds)
{
if (!highlight.quads.length)
return;
_isolateActions(() => {
let quads = highlight.quads.slice();
let contentQuad = quads.pop();
let paddingQuad = quads.pop();
let borderQuad = quads.pop();
let marginQuad = quads.pop();
let hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor;
let hasPadding = paddingQuad && highlight.paddingColor !== transparentColor;
let hasBorder = borderQuad && highlight.borderColor !== transparentColor;
let hasMargin = marginQuad && highlight.marginColor !== transparentColor;
if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad)))
_drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor, bounds);
if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad)))
_drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor, bounds);
if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad)))
_drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor, bounds);
if (hasContent)
_drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor, bounds);
});
}
function showPageIndication()
{
document.body.classList.add("indicate");
}
function hidePageIndication()
{
document.body.classList.remove("indicate");
}
function setPlatform(platform)
{
document.body.classList.add("platform-" + platform);
}
function dispatch(message)
{
var functionName = message.shift();
window[functionName].apply(null, message);
}
function log(text)
{
var logEntry = document.createElement("div");
logEntry.textContent = text;
document.getElementById("log").appendChild(logEntry);
}