chrome-devtools-frontend
Version:
Chrome DevTools UI
131 lines (127 loc) • 9.97 kB
HTML
<!--
Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Debug</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="module" src="/out/Default/resources/inspector_overlay/main.js"></script>
</head>
<body>
<script type="module">
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
const gridInfos = [
// Simple 2x3 grid, with explicit lines.
{
"gridInfo":
{
"rows":["M",100,60,"L",420,60,"M",420,127,"L",100,127,"M",100,137,"L",420,137,"M",420,204,"L",100,204],
"rowGaps":["M",100,127,"L",420,127,"L",420,137,"L",100,137,"Z"],
"positiveRowLineNumberOffsets":[0,72,144],
"negativeRowLineNumberOffsets":[0,72,144],
"columns":["M",100,60,"L",100,204,"M",200,204,"L",200,60,"M",210,60,"L",210,204,"M",310,204,"L",310,60,"M",320,60,"L",320,204,"M",420,204,"L",420,60],
"columnGaps":["M",200,60,"L",210,60,"L",210,204,"L",200,204,"Z","M",310,60,"L",320,60,"L",320,204,"L",310,204,"Z"],
"positiveColumnLineNumberOffsets":[0,105,215,320],
"negativeColumnLineNumberOffsets":[0,105,215,320],
"gridBorder":["M",100,60,"L",420,60,"L",420,204,"L",100,204,"Z"],
"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)","rowHatchColor":"rgba(127, 32, 210, .8)","columnHatchColor":"rgba(127, 32, 210, .8)","gridBorderColor":"rgba(127, 32, 210, 1)"},
"isPrimaryGrid":true,
"nodeId": 1
}
},
// 3x3 grid with a leading implicit row and a leading implicit column.
{
"gridInfo":
{
"rows":["M",200,400,"L",800,400,"M",800,495,"L",200,495,"M",200,505,"L",800,505,"M",800,595,"L",200,595,"M",200,605,"L",800,605,"M",800,695,"L",200,695,"M",200,705,"L",800,705,"M",800,800,"L",200,800],
"rowGaps":["M",200,495,"L",800,495,"L",800,505,"L",200,505,"Z","M",200,595,"L",800,595,"L",800,605,"L",200,605,"Z","M",200,695,"L",800,695,"L",800,705,"L",200,705,"Z"],
"positiveRowLineNumberOffsets":[100,200,300,400],
"negativeRowLineNumberOffsets":[0,100,200,300],
"columns":["M",200,400,"L",200,800,"M",400,800,"L",400,400,"M",600,800,"L",600,400,"M",800,800,"L",800,400],
"columnGaps":[],
"positiveColumnLineNumberOffsets":[200,400,600],
"negativeColumnLineNumberOffsets":[0,200,400],
"gridBorder":["M",200,400,"L",800,400,"L",800,800,"L",200,800,"Z"],
"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)","rowHatchColor":"rgba(127, 32, 210, .8)","columnHatchColor":"rgba(127, 32, 210, .8)"},
"isPrimaryGrid":true,
"nodeId": 2
},
},
// 1x1 full-page grid to test when labels are inside the grid
{
"gridInfo":
{
"rows":["M",0,0,"L",viewportWidth,0,"M",viewportWidth,viewportHeight,"L",0,viewportHeight],
"positiveRowLineNumberOffsets":[0,viewportHeight],
"negativeRowLineNumberOffsets":[0,viewportHeight],
"columns":["M",0,0,"L",0,viewportHeight,"M",viewportWidth,viewportHeight,"L",viewportWidth,0],
"positiveColumnLineNumberOffsets":[0,viewportWidth],
"negativeColumnLineNumberOffsets":[0,viewportWidth],
"gridBorder":["M",0,0,"L",viewportWidth,0,"L",viewportWidth,viewportHeight,"L",0,viewportHeight,"Z"],
"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)"},
"isPrimaryGrid":true,
"nodeId": 3
}
},
// // 10x10 grid with narrow tracks to test when labels are close to each other
{
"gridInfo":
{
"rows":["M",600,100,"L",700,100,"M",700,110,"L",600,110,"M",600,120,"L",700,120,"M",700,130,"L",600,130,"M",600,140,"L",700,140,"M",700,150,"L",600,150,"M",600,160,"L",700,160,"M",700,170,"L",600,170,"M",600,180,"L",700,180,"M",700,190,"L",600,190,"M",600,200,"L",700,200],
"rowGaps":[],
"positiveRowLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
"negativeRowLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
"columns":["M",600,100,"L",600,200,"M",610,200,"L",610,100,"M",620,100,"L",620,200,"M",630,200,"L",630,100,"M",640,100,"L",640,200,"M",650,200,"L",650,100,"M",660,100,"L",660,200,"M",670,200,"L",670,100,"M",680,100,"L",680,200,"M",690,200,"L",690,100,"M",700,100,"L",700,200],
"columnGaps":[],
"positiveColumnLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
"negativeColumnLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
"gridBorder":["M",600,100,"L",700,100,"L",700,200,"L",600,200,"Z"],
"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)"},
"isPrimaryGrid":true,
"nodeId": 4
}
},
// Grid with sub-pixel paths.
{
"gridInfo":
{
"rows":["M",543.4285888671875,263.00006103515625,"L",639.4285888671875,263.00006103515625,"M",543.4285888671875,271.00006103515625,"L",639.4285888671875,271.00006103515625,"M",543.4285888671875,279.00006103515625,"L",639.4285888671875,279.00006103515625,"M",543.4285888671875,287.00006103515625,"L",639.4285888671875,287.00006103515625,"M",543.4285888671875,295.00006103515625,"L",639.4285888671875,295.00006103515625,"M",543.4285888671875,303.00006103515625,"L",639.4285888671875,303.00006103515625,"M",543.4285888671875,311.00006103515625,"L",639.4285888671875,311.00006103515625,"M",543.4285888671875,319.00006103515625,"L",639.4285888671875,319.00006103515625,"M",543.4285888671875,327.00006103515625,"L",639.4285888671875,327.00006103515625,"M",543.4285888671875,335.00006103515625,"L",639.4285888671875,335.00006103515625,"M",543.4285888671875,343.00006103515625,"L",639.4285888671875,343.00006103515625,"M",543.4285888671875,351.00006103515625,"L",639.4285888671875,351.00006103515625,"M",639.4285888671875,359.00006103515625,"L",543.4285888671875,359.00006103515625],
"rowGaps":[],
"columns":["M",543.4285888671875,263.00006103515625,"L",543.4285888671875,359.00006103515625,"M",551.4285888671875,263.00006103515625,"L",551.4285888671875,359.00006103515625,"M",559.4285888671875,263.00006103515625,"L",559.4285888671875,359.00006103515625,"M",567.4285888671875,263.00006103515625,"L",567.4285888671875,359.00006103515625,"M",575.4285888671875,263.00006103515625,"L",575.4285888671875,359.00006103515625,"M",583.4285888671875,263.00006103515625,"L",583.4285888671875,359.00006103515625,"M",591.4285888671875,263.00006103515625,"L",591.4285888671875,359.00006103515625,"M",599.4285888671875,263.00006103515625,"L",599.4285888671875,359.00006103515625,"M",607.4285888671875,263.00006103515625,"L",607.4285888671875,359.00006103515625,"M",615.4285888671875,263.00006103515625,"L",615.4285888671875,359.00006103515625,"M",623.4285888671875,263.00006103515625,"L",623.4285888671875,359.00006103515625,"M",631.4285888671875,263.00006103515625,"L",631.4285888671875,359.00006103515625,"M",639.4285888671875,359.00006103515625,"L",639.4285888671875,263.00006103515625],
"columnGaps":[],
"positiveRowLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
"positiveColumnLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
"negativeRowLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
"negativeColumnLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
"gridBorder":["M",543.4285888671875,263.00006103515625,"L",639.4285888671875,263.00006103515625,"L",639.4285888671875,359.00006103515625,"L",543.4285888671875,359.00006103515625,"Z"],
"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(255, 0, 0, 1)","columnLineColor":"rgba(255, 0, 0, 1)"},
"isPrimaryGrid":true,
"nodeId": 5
}
}
];
dispatch(["setPlatform", "mac"]);
dispatch(["setOverlay", "persistent"]);
dispatch(["reset", {
viewportSize: {
width: viewportWidth,
height: viewportHeight,
},
deviceScaleFactor: 1,
pageScaleFactor: 1,
pageZoomFactor: 1,
emulationScaleFactor: 1,
scrollX: 0,
scrollY: 0,
}]);
for (const {gridInfo} of gridInfos) {
dispatch(["drawGridHighlight", gridInfo]);
}
</script>
</body>
</html>