chrome-devtools-frontend
Version:
Chrome DevTools UI
165 lines (159 loc) • 7.27 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;
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>