| <!-- |
| 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. |
| --> |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Debug</title> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <link rel="stylesheet" href="/out/Default/resources/inspector_overlay/common.css"> |
| <script type="module" src="/out/Default/resources/inspector_overlay/tool_highlight_grid.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":false,"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": 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":false,"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":false,"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":false,"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":false,"columnLineDash":false,"showGridExtensionLines":false,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(255, 0, 0, 1)","columnLineColor":"rgba(255, 0, 0, 1)"}, |
| "isPrimaryGrid":true, |
| "nodeId": 5 |
| } |
| } |
| ]; |
| |
| dispatch(["setPlatform", "mac"]); |
| 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> |