| <!-- |
| 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; |
| |
| dispatch(["setPlatform", "mac"]); |
| dispatch(["setOverlay", "highlight"]); |
| dispatch(["reset", { |
| viewportSize: { |
| width: viewportWidth, |
| height: viewportHeight, |
| }, |
| deviceScaleFactor: 1, |
| pageScaleFactor: 1, |
| pageZoomFactor: 1, |
| emulationScaleFactor: 1, |
| scrollX: 0, |
| scrollY: 0, |
| }]); |
| |
| let response = { |
| "highlight": { |
| "paths": [{ |
| "path": ["M", 32, 86.66667175292969, "L", 282, 86.66667175292969, "L", 282, 336.66668701171875, "L", 32, 336.66668701171875, "Z"], |
| "fillColor": "rgba(255, 0, 0, 0)", |
| "outlineColor": "rgba(128, 0, 0, 0)", |
| "name": "content" |
| }], |
| "flexInfo": [{ |
| "containerBorder": ["M", 32, 86.66667175292969, "L", 282, 86.66667175292969, "L", 282, 336.66668701171875, "L", 32, 336.66668701171875, "Z"], |
| "lines": [ |
| [{ |
| "itemBorder": ["M", 36, 111.66667175292969, "L", 86, 111.66667175292969, "L", 86, 141.6666717529297, "L", 36, 141.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 100, 111.66667175292969, "L", 150, 111.66667175292969, "L", 150, 141.6666717529297, "L", 100, 141.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 164, 111.66667175292969, "L", 214, 111.66667175292969, "L", 214, 141.6666717529297, "L", 164, 141.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 228, 111.66667175292969, "L", 278, 111.66667175292969, "L", 278, 141.6666717529297, "L", 228, 141.6666717529297, "Z"], |
| "baseline": 19 |
| }], |
| [{ |
| "itemBorder": ["M", 36, 196.6666717529297, "L", 86, 196.6666717529297, "L", 86, 226.6666717529297, "L", 36, 226.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 100, 196.6666717529297, "L", 150, 196.6666717529297, "L", 150, 226.6666717529297, "L", 100, 226.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 164, 196.6666717529297, "L", 214, 196.6666717529297, "L", 214, 226.6666717529297, "L", 164, 226.6666717529297, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 228, 196.6666717529297, "L", 278, 196.6666717529297, "L", 278, 226.6666717529297, "L", 228, 226.6666717529297, "Z"], |
| "baseline": 19 |
| }], |
| [{ |
| "itemBorder": ["M", 52, 281.66668701171875, "L", 102, 281.66668701171875, "L", 102, 311.66668701171875, "L", 52, 311.66668701171875, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 132, 281.66668701171875, "L", 182, 281.66668701171875, "L", 182, 311.66668701171875, "L", 132, 311.66668701171875, "Z"], |
| "baseline": 19 |
| }, { |
| "itemBorder": ["M", 212, 281.66668701171875, "L", 262, 281.66668701171875, "L", 262, 311.66668701171875, "L", 212, 311.66668701171875, "Z"], |
| "baseline": 19 |
| }] |
| ], |
| "isHorizontalFlow": true, |
| "alignItemsStyle": "normal", |
| "mainGap": 10, |
| "crossGap": 10, |
| "writingMode": "horizontal-tb", |
| "flexContainerHighlightConfig": { |
| "containerBorder": { |
| "color": "rgba(200, 0, 50, 1)", |
| "pattern": "dashed" |
| }, |
| "lineSeparator": { |
| "color": "rgba(200, 0, 50, 0)", |
| "pattern": "dashed" |
| }, |
| "itemSeparator": { |
| "color": "rgba(200, 0, 50, 0)", |
| "pattern": "dashed" |
| }, |
| "columnGapSpace": { |
| "hatchColor": "rgba(200, 0, 50, 1)", |
| "fillColor": "rgba(200, 0, 50, .3)" |
| }, |
| "rowGapSpace": { |
| "hatchColor": "rgba(200, 0, 50, 1)", |
| "fillColor": "rgba(200, 0, 50, .3)" |
| } |
| } |
| }] |
| } |
| }; |
| |
| response = { |
| "highlight": { |
| "paths": [ |
| { "path": [ "M", 302, 96.66667175292969, "L", 402, 96.66667175292969, "L", 402, 196.6666717529297, "L", 302, 196.6666717529297, "Z" ], "fillColor": "rgba(255, 0, 0, 0)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, |
| ], |
| "flexInfo": [{ |
| "containerBorder": [ "M", 302, 96.66667175292969, "L", 402, 96.66667175292969, "L", 402, 196.6666717529297, "L", 302, 196.6666717529297, "Z" ], |
| "lines": [ |
| [ |
| { "itemBorder": [ "M", 312, 176.6666717529297, "L", 332, 176.6666717529297, "L", 332, 196.6666717529297, "L", 312, 196.6666717529297, "Z" ], "baseline": 20 }, |
| { "itemBorder": [ "M", 342, 96.66667175292969, "L", 362, 96.66667175292969, "L", 362, 116.66667175292969, "L", 342, 116.66667175292969, "Z" ], "baseline": 20 }, |
| { "itemBorder": [ "M", 372, 176.6666717529297, "L", 392, 176.6666717529297, "L", 392, 196.6666717529297, "L", 372, 196.6666717529297, "Z" ], "baseline": 20 } |
| ] |
| ], |
| "isHorizontalFlow": true, |
| "writingMode": "horizontal-tb", |
| "alignItemsStyle": "flex-end", |
| "mainGap": 10, |
| "crossGap": 10, |
| "flexContainerHighlightConfig": { |
| "containerBorder": { |
| "color": "rgba(200, 0, 50, 1)", |
| "pattern": "dashed" |
| }, |
| "lineSeparator": { |
| "color": "rgba(200, 0, 50, 0)", |
| "pattern": "dashed" |
| }, |
| "itemSeparator": { |
| "color": "rgba(200, 0, 50, 0)", |
| "pattern": "dashed" |
| }, |
| "columnGapSpace": { |
| "hatchColor": "rgba(200, 0, 50, 1)", |
| "fillColor": "rgba(200, 0, 50, .3)" |
| }, |
| "rowGapSpace": { |
| "hatchColor": "rgba(200, 0, 50, 1)", |
| "fillColor": "rgba(200, 0, 50, .3)" |
| } |
| } |
| }] |
| } |
| }; |
| |
| // Massage the data a bit so we can see a nice flex overlay. |
| response = response.highlight; |
| |
| dispatch(["drawHighlight", response]); |
| </script> |
| </body> |
| </html> |
