| <!-- | |
| Copyright 2020 The Chromium Authors | |
| Use of this source code is governed by a BSD-style license that can be | |
| found in the LICENSE file. | |
| --> | |
| <!DOCTYPE html> | |
| <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> |