chrome-devtools-frontend
Version:
Chrome DevTools UI
59 lines (55 loc) • 5.94 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">
function test() {
dispatch(["setOverlay", "paused"]);
dispatch(["setPlatform", "mac"]);
dispatch(["reset"]);
dispatch(["drawPausedInDebuggerMessage", "test text"]);
dispatch(["setOverlay", "viewportSize"]);
dispatch(["reset"]);
dispatch(["drawViewSize"]);
dispatch(["setOverlay", "screenshot"]);
dispatch(["setOverlay", "sourceOrder"]);
dispatch(["reset"]);
dispatch(["drawSourceOrder", {"paths":[{"path":["M",122,133.796875,"L",750,133.796875,"L",750,208.796875,"L",122,208.796875,"Z"], "outlineColor":"rgba(244, 90, 183, 1)","name":"content"},],
"sourceOrder": 0, colorFormat: "hsl"}]);
dispatch(["drawSourceOrder", {"paths":[{"path":["M",300,133.796875,"L",600,133.796875,"L",600,208.796875,"L",300,208.796875,"Z"], "outlineColor":"rgba(0, 120, 212, 1)","name":"content"},],
"sourceOrder": 1, colorFormat: "hsl"}]);
dispatch(["setOverlay", "highlight"]);
dispatch(["reset"]);
dispatch(["drawHighlight", {"paths":[{"path":["M",122,133.796875,"L",822,133.796875,"L",822,208.796875,"L",122,208.796875,"Z"], "fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},
{"path":["M",122,113.796875,"L",822,113.796875,"L",822,228.796875,"L",122,228.796875,"Z"],"fillColor":"rgba(246, 178, 107, 0.66)","name":"margin"}],"showRulers":false,"showExtensionLines":false,
"elementInfo":{"tagName":"button","className":"class.name", "idValue":"download-hero","nodeWidth":"700","nodeHeight":"75","style":{"color":"#FFFFFFFF","font-family":"\"Product Sans\", \"Open Sans\", Roboto, Arial, \"Product Sans\", \"Open Sans\", Roboto, Arial","font-size":"20px","line-height":"25px","padding":"0px","margin":"20px 0px","background-color":"#00000000"},"contrast":{"fontSize":"20px","fontWeight":"400","backgroundColor":"#F9B826BF"},"isKeyboardFocusable":false,"accessibleName":"name","accessibleRole":"role","showAccessibilityInfo":true}, showExtensionLines: true, showRulers: true, colorFormat: "hsl"}]);
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
dispatch(["reset", {
viewportSize: {
width: viewportWidth,
height: viewportHeight,
},
deviceScaleFactor: 1,
pageScaleFactor: 1,
pageZoomFactor: 1,
emulationScaleFactor: 1,
scrollX: 0,
scrollY: 0,
}]);
dispatch(["drawHighlight", { "paths": [ { "path": [ "M", 40, 314, "L", 182, 314, "L", 182, 564, "L", 40, 564, "Z" ], "fillColor": "rgba(255, 0, 0, 0)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, { "path": [ "M", 40, 314, "L", 182, 314, "L", 182, 564, "L", 40, 564, "Z" ], "fillColor": "rgba(0, 255, 0, 0)", "name": "padding" }, { "path": [ "M", 40, 314, "L", 182, 314, "L", 182, 564, "L", 40, 564, "Z" ], "fillColor": "rgba(0, 0, 255, 0)", "name": "border" }, { "path": [ "M", 8, 282, "L", 1679.3333740234375, 282, "L", 1679.3333740234375, 596, "L", 8, 596, "Z" ], "fillColor": "rgba(255, 255, 255, 0)", "name": "margin" } ], "gridInfo": [ { "rotationAngle": 0, "writingMode": "vertical-rl", "columnTrackSizes": [ { "x": 118, "y": 314, "computedSize": 104, "authoredSize": "2fr" }, { "x": 251, "y": 314, "computedSize": 52, "authoredSize": "1fr" } ], "rowTrackSizes": [ { "x": 40, "y": 351.65625, "computedSize": 50.222225189208984 }, { "x": 40, "y": 430.65625, "computedSize": 33.77777862548828 } ], "rows": [ "M", 40, 314, "L", 290, 314, "M", 290, 389.3333435058594, "L", 40, 389.3333435058594, "M", 40, 405.3333435058594, "L", 290, 405.3333435058594, "M", 290, 456, "L", 40, 456 ], "rowGaps": [ "M", 40, 389.3333435058594, "L", 290, 389.3333435058594, "L", 290, 405.3333435058594, "L", 40, 405.3333435058594, "Z" ], "columns": [ "M", 40, 314, "L", 40, 456, "M", 196, 456, "L", 196, 314, "M", 212, 314, "L", 212, 456, "M", 290, 456, "L", 290, 314 ], "columnGaps": [ "M", 196, 314, "L", 212, 314, "L", 212, 456, "L", 196, 456, "Z" ], "positiveRowLineNumberPositions": [ { "x": 40, "y": 314 }, { "x": 40, "y": 397.328125 }, { "x": 40, "y": 456 } ], "positiveColumnLineNumberPositions": [ { "x": 40, "y": 314 }, { "x": 204, "y": 314 }, { "x": 290, "y": 314 } ], "negativeRowLineNumberPositions": [ { "x": 290, "y": 314 }, { "x": 290, "y": 397.328125 } ], "negativeColumnLineNumberPositions": [ { "x": 40, "y": 456 }, { "x": 204, "y": 456 }, { "x": 290, "y": 456 } ], "areaNames": { "foo": [ "M", 40, 314, "L", 290, 314, "L", 290, 389.3333435058594, "L", 40, 389.3333435058594, "Z" ] }, "rowLineNameOffsets": [], "columnLineNameOffsets": [ { "x": 204, "y": 314, "name": "middle" }, { "x": 204, "y": 314, "name": "center" }, { "x": 290, "y": 314, "name": "what" } ], "gridBorder": [ "M", 40, 314, "L", 290, 314, "L", 290, 456, "L", 40, 456, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": true, "columnLineDash": true, "showGridExtensionLines": true, "showPositiveLineNumbers": true, "showNegativeLineNumbers": true, "showAreaNames": true, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0.4)", "rowLineColor": "rgba(128, 0, 0, 0.4)", "columnLineColor": "rgba(128, 0, 0, 0.4)", "rowGapColor": "rgba(0, 255, 0, 0.4)", "columnGapColor": "rgba(0, 0, 255, 0.4)", "rowHatchColor": "rgba(255, 255, 255, 0.4)", "columnHatchColor": "rgba(128, 128, 128, 0.4)", "areaBorderColor": "rgba(255, 0, 0, 0.4)" }, "isPrimaryGrid": true } ] }]);
}
test();
</script>
</body>
</html>