mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-06 20:11:38 +08:00
Patrick Brosset
a1da2af9a6
The grid and flex overlays use a function (hatchFillPath) to draw a background pattern made of dashed lines where there are gaps. 1. This pattern is made by creating each line individually, using a path and drawing a line. 2. On top of this, these lines are drawn in a way that they fill the entire area that needs to be filled. This change improves both of these things: 1. We now use a fillStyle with a repeated CanvasPattern that's made in an offscreen canvas. Drawing the pattern in one go is much faster than drawing each line one by one. 2. We now don't draw outside of the boundaries of the canvas, even if the area we are told to draw extends beyond those limits. These before/after GIFs should show how perceivably faster the grid overlay appears on hover of a very tall grid container element: https://imgur.com/a/ORjpuiv Bug: 1159870 Change-Id: I076c55caebc46979519f29e3f3beeb7f66f91845 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2598378 Reviewed-by: Brandon Goddard <brgoddar@microsoft.com> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org> Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
41 lines
7.8 KiB
HTML
41 lines
7.8 KiB
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.
|
|
-->
|
|
<!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">
|
|
function getRGBA() {
|
|
const rc = () => Math.floor(Math.random() * 255);
|
|
return `rgba(${rc()}, ${rc()}, ${rc()}, 0.5)`;
|
|
}
|
|
const response = { "highlight": { "paths": [ { "path": [ "M", 0, 0, "L", 1433.3333740234375, 0, "L", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875, "Z" ], "fillColor": "rgba(255, 0, 0, 0)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, { "path": [ "M", 0, 0, "L", 1433.3333740234375, 0, "L", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875, "Z" ], "fillColor": "rgba(0, 255, 0, 0)", "name": "padding" }, { "path": [ "M", 0, 0, "L", 1433.3333740234375, 0, "L", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875, "Z" ], "fillColor": "rgba(0, 0, 255, 0)", "name": "border" }, { "path": [ "M", 0, 0, "L", 1433.3333740234375, 0, "L", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875, "Z" ], "fillColor": "rgba(255, 255, 255, 0)", "name": "margin" } ], "gridInfo": [ { "rotationAngle": 0, "writingMode": "horizontal-tb", "columnTrackSizes": [ { "x": 52, "y": 0, "computedSize": 69.33333587646484, "authoredSize": "5em" }, { "x": 291.1875, "y": 0, "computedSize": 138.6666717529297, "authoredSize": "10em" }, { "x": 846.71875, "y": 0, "computedSize": 491.1111145019531, "authoredSize": "minmax(55ch, 65ch)" }, { "x": 1311.21875, "y": 0, "computedSize": 17.29166603088379, "authoredSize": "auto" }, { "x": 1420.359375, "y": 0, "computedSize": 17.29166603088379 } ], "rowTrackSizes": [ { "x": 0, "y": 19.875, "computedSize": 26.52083396911621 }, { "x": 0, "y": 138.5625, "computedSize": 76.25695037841797 }, { "x": 0, "y": 305.34375, "computedSize": 90.66666412353516 }, { "x": 0, "y": 3417.640625, "computedSize": 4003.604248046875 }, { "x": 0, "y": 6523.140625, "computedSize": 81.59722137451172 }, { "x": 0, "y": 13982.390625, "computedSize": 9808.611328125 }, { "x": 0, "y": 21641.5625, "computedSize": 348.1528015136719 }, { "x": 0, "y": 22120, "computedSize": 234.30555725097656 }, { "x": 0, "y": 22373.4375, "computedSize": 48.16666793823242 } ], "rows": [ "M", 0, 0, "L", 1433.3333740234375, 0, "M", 1433.3333740234375, 39.78125, "L", 0, 39.78125, "M", 0, 81.375, "L", 1433.3333740234375, 81.375, "M", 1433.3333740234375, 195.7604217529297, "L", 0, 195.7604217529297, "M", 0, 237.3541717529297, "L", 1433.3333740234375, 237.3541717529297, "M", 1433.3333740234375, 373.35418701171875, "L", 0, 373.35418701171875, "M", 0, 414.94793701171875, "L", 1433.3333740234375, 414.94793701171875, "M", 1433.3333740234375, 6420.3544921875, "L", 0, 6420.3544921875, "M", 0, 6461.9482421875, "L", 1433.3333740234375, 6461.9482421875, "M", 1433.3333740234375, 6584.34375, "L", 0, 6584.34375, "M", 0, 6625.9375, "L", 1433.3333740234375, 6625.9375, "M", 1433.3333740234375, 21338.85546875, "L", 0, 21338.85546875, "M", 0, 21380.44921875, "L", 1433.3333740234375, 21380.44921875, "M", 1433.3333740234375, 21902.677734375, "L", 0, 21902.677734375, "M", 0, 21944.271484375, "L", 1433.3333740234375, 21944.271484375, "M", 1433.3333740234375, 22295.73046875, "L", 0, 22295.73046875, "M", 0, 22337.32421875, "L", 1433.3333740234375, 22337.32421875, "M", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875 ], "rowGaps": [ "M", 0, 39.78125, "L", 1433.3333740234375, 39.78125, "L", 1433.3333740234375, 81.375, "L", 0, 81.375, "Z", "M", 0, 195.7604217529297, "L", 1433.3333740234375, 195.7604217529297, "L", 1433.3333740234375, 237.3541717529297, "L", 0, 237.3541717529297, "Z", "M", 0, 373.35418701171875, "L", 1433.3333740234375, 373.35418701171875, "L", 1433.3333740234375, 414.94793701171875, "L", 0, 414.94793701171875, "Z", "M", 0, 6420.3544921875, "L", 1433.3333740234375, 6420.3544921875, "L", 1433.3333740234375, 6461.9482421875, "L", 0, 6461.9482421875, "Z", "M", 0, 6584.34375, "L", 1433.3333740234375, 6584.34375, "L", 1433.3333740234375, 6625.9375, "L", 0, 6625.9375, "Z", "M", 0, 21338.85546875, "L", 1433.3333740234375, 21338.85546875, "L", 1433.3333740234375, 21380.44921875, "L", 0, 21380.44921875, "Z", "M", 0, 21902.677734375, "L", 1433.3333740234375, 21902.677734375, "L", 1433.3333740234375, 21944.271484375, "L", 0, 21944.271484375, "Z", "M", 0, 22295.73046875, "L", 1433.3333740234375, 22295.73046875, "L", 1433.3333740234375, 22337.32421875, "L", 0, 22337.32421875, "Z" ], "columns": [ "M", 0, 0, "L", 0, 22409.57421875, "M", 104, 22409.57421875, "L", 104, 0, "M", 187.1979217529297, 0, "L", 187.1979217529297, 22409.57421875, "M", 395.19793701171875, 22409.57421875, "L", 395.19793701171875, 0, "M", 478.3958435058594, 0, "L", 478.3958435058594, 22409.57421875, "M", 1215.0625, 22409.57421875, "L", 1215.0625, 0, "M", 1298.260498046875, 0, "L", 1298.260498046875, 22409.57421875, "M", 1324.197998046875, 22409.57421875, "L", 1324.197998046875, 0, "M", 1407.3958740234375, 0, "L", 1407.3958740234375, 22409.57421875, "M", 1433.3333740234375, 22409.57421875, "L", 1433.3333740234375, 0 ], "columnGaps": [ "M", 104, 0, "L", 187.1979217529297, 0, "L", 187.1979217529297, 22409.57421875, "L", 104, 22409.57421875, "Z", "M", 395.19793701171875, 0, "L", 478.3958435058594, 0, "L", 478.3958435058594, 22409.57421875, "L", 395.19793701171875, 22409.57421875, "Z", "M", 1215.0625, 0, "L", 1298.260498046875, 0, "L", 1298.260498046875, 22409.57421875, "L", 1215.0625, 22409.57421875, "Z", "M", 1324.197998046875, 0, "L", 1407.3958740234375, 0, "L", 1407.3958740234375, 22409.57421875, "L", 1324.197998046875, 22409.57421875, "Z" ], "positiveRowLineNumberPositions": [ { "x": 0, "y": 0 }, { "x": 0, "y": 60.578125 }, { "x": 0, "y": 216.5625 }, { "x": 0, "y": 394.15625 }, { "x": 0, "y": 6441.15625 }, { "x": 0, "y": 6605.140625 }, { "x": 0, "y": 21359.65625 }, { "x": 0, "y": 21923.46875 }, { "x": 0, "y": 22316.53125 }, { "x": 0, "y": 22409.5625 } ], "positiveColumnLineNumberPositions": [ { "x": 0, "y": 0 }, { "x": 145.59375, "y": 0 }, { "x": 436.796875, "y": 0 }, { "x": 1256.65625, "y": 0 }, { "x": 1365.796875, "y": 0 }, { "x": 1433.328125, "y": 0 } ], "negativeRowLineNumberPositions": [ { "x": 1433.328125, "y": 0 } ], "negativeColumnLineNumberPositions": [ { "x": 0, "y": 22409.5625 }, { "x": 145.59375, "y": 22409.5625 }, { "x": 436.796875, "y": 22409.5625 }, { "x": 1256.65625, "y": 22409.5625 }, { "x": 1365.796875, "y": 22409.5625 } ], "areaNames": {}, "rowLineNameOffsets": [], "columnLineNameOffsets": [ { "x": 436.796875, "y": 0, "name": "main-content-start" }, { "x": 1256.65625, "y": 0, "name": "main-content-end" } ], "gridBorder": [ "M", 0, 0, "L", 1433.3333740234375, 0, "L", 1433.3333740234375, 22409.57421875, "L", 0, 22409.57421875, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": true, "columnLineDash": true, "showGridExtensionLines": true, "showPositiveLineNumbers": true, "showNegativeLineNumbers": true, "showAreaNames": true, "showLineNames": true, "gridBorderColor": getRGBA(), "rowLineColor": getRGBA(), "columnLineColor": getRGBA(), "rowGapColor": getRGBA(), "columnGapColor": getRGBA(), "rowHatchColor": getRGBA(), "columnHatchColor": getRGBA(), "areaBorderColor": getRGBA(), "gridBackgroundColor": getRGBA() }, "isPrimaryGrid": true } ] } }
|
|
|
|
dispatch(["setPlatform", "mac"]);
|
|
dispatch(["setOverlay", "highlight"]);
|
|
dispatch(["reset", {
|
|
viewportSize: {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
},
|
|
deviceScaleFactor: 1,
|
|
pageScaleFactor: 1,
|
|
pageZoomFactor: 1,
|
|
emulationScaleFactor: 1,
|
|
scrollX: 0,
|
|
scrollY: 0,
|
|
}]);
|
|
|
|
dispatch(["drawHighlight", response.highlight]);
|
|
</script>
|
|
</body>
|
|
</html>
|