Refactor highlight and grid tools
Refactors overlay to avoid using global variables. Note: the grid
label helpers still rely on a few global variables.
Bug: 1131801
Change-Id: Idb862c340cbc6c155549f2dfc0bdafdcadaee1ab
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2429775
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
diff --git a/inspector_overlay/common.js b/inspector_overlay/common.js
index 4ba825d..bb5c0a9 100644
--- a/inspector_overlay/common.js
+++ b/inspector_overlay/common.js
@@ -18,7 +18,7 @@
// access to globals via the window object it receives in the constructor.
// Old logic is kept temporarily while the tools are being migrated.
export class Overlay {
- constructor(window, style) {
+ constructor(window, style = []) {
this.viewportSize = {width: 800, height: 600};
this.deviceScaleFactor = 1;
this.emulationScaleFactor = 1;
@@ -28,6 +28,8 @@
this.scrollY = 0;
this.window = window;
this.document = window.document;
+ if (!Array.isArray(style))
+ style = [style];
this.style = style;
}
@@ -66,8 +68,8 @@
}
setPlatform(platform) {
- if (this.style) {
- adoptStyleSheet(this.style);
+ for (const style of this.style) {
+ adoptStyleSheet(style);
}
this.platform = platform;
this.document.body.classList.add('platform-' + platform);
diff --git a/inspector_overlay/debug/tool_highlight_bottom_arrow.html b/inspector_overlay/debug/tool_highlight_bottom_arrow.html
index 56c691c..2ef21aa 100644
--- a/inspector_overlay/debug/tool_highlight_bottom_arrow.html
+++ b/inspector_overlay/debug/tool_highlight_bottom_arrow.html
@@ -14,9 +14,9 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
- drawHighlight({"paths":[{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"logo-default","className":".show-logo","nodeWidth":"272","nodeHeight":"92","showAccessibilityInfo":true,"isKeyboardFocusable":false,"accessibleName":"Google","accessibleRole":"generic","style":{"padding":"0px","margin":"0px","background-color":"#00000000"}}})
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset"]);
+ dispatch(["drawHighlight", {"paths":[{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",321.5,164,"L",593.5,164,"L",593.5,256,"L",321.5,256,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"logo-default","className":".show-logo","nodeWidth":"272","nodeHeight":"92","showAccessibilityInfo":true,"isKeyboardFocusable":false,"accessibleName":"Google","accessibleRole":"generic","style":{"padding":"0px","margin":"0px","background-color":"#00000000"}}}])
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_explicit_grid.html b/inspector_overlay/debug/tool_highlight_explicit_grid.html
index 17893f0..cad673e 100644
--- a/inspector_overlay/debug/tool_highlight_explicit_grid.html
+++ b/inspector_overlay/debug/tool_highlight_explicit_grid.html
@@ -14,10 +14,10 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset"]);
- drawHighlight({
+ dispatch(["drawHighlight", {
"paths":[
{"path":["M",100,60,"L",420,60,"L",420,204,"L",100,204,"Z"],"fillColor":"rgba(111, 168, 220, .66)","name":"content"},
{"path":["M",90,50,"L",430,50,"L",430,214,"L",90,214,"Z"],"fillColor":"rgba(147, 196, 125, .55)","name":"padding"},
@@ -39,7 +39,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_fullpage_grid.html b/inspector_overlay/debug/tool_highlight_fullpage_grid.html
index 1e0b8fb..edbbeea 100644
--- a/inspector_overlay/debug/tool_highlight_fullpage_grid.html
+++ b/inspector_overlay/debug/tool_highlight_fullpage_grid.html
@@ -17,15 +17,21 @@
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
- window.viewportSize = {
- width: viewportWidth,
- height: viewportHeight
- };
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- setPlatform("mac");
- reset(window);
-
- drawHighlight({
+ dispatch(["drawHighlight", {
"paths":[],
"gridInfo":[
{
@@ -40,7 +46,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_grid.html b/inspector_overlay/debug/tool_highlight_grid.html
index f575051..69658cf 100644
--- a/inspector_overlay/debug/tool_highlight_grid.html
+++ b/inspector_overlay/debug/tool_highlight_grid.html
@@ -108,16 +108,22 @@
}
];
- setPlatform("mac");
-
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
- reset(window);
+ 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) {
- drawGridHighlight(gridInfo);
+ dispatch(["drawGridHighlight", gridInfo]);
}
</script>
</body>
diff --git a/inspector_overlay/debug/tool_highlight_grid_rtl.html b/inspector_overlay/debug/tool_highlight_grid_rtl.html
index 8602a5e..dedbc0a 100644
--- a/inspector_overlay/debug/tool_highlight_grid_rtl.html
+++ b/inspector_overlay/debug/tool_highlight_grid_rtl.html
@@ -17,17 +17,21 @@
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
- setPlatform("mac");
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 2,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
- window.deviceScaleFactor = 2;
-
- reset(window);
-
- drawHighlight({ "paths": [ { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(255, 0, 0, 0.5)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(0, 255, 0, 0.5)", "name": "padding" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(0, 0, 255, 0.5)", "name": "border" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(255, 255, 255, 0.5)", "name": "margin" } ], "gridInfo": [ { "rotationAngle": 0, "writingMode": "horizontal-tb", "rows": [ "M", 8.010416984558105, 8, "L", 905.3333740234375, 8, "M", 905.3333740234375, 48, "L", 8.010416984558105, 48, "M", 8.010416984558105, 58, "L", 905.3333740234375, 58, "M", 905.3333740234375, 128, "L", 8.010416984558105, 128, "M", 8.010416984558105, 138, "L", 905.3333740234375, 138, "M", 905.3333740234375, 178, "L", 8.010416984558105, 178 ], "rowGaps": [ "M", 8.010416984558105, 48, "L", 905.3333740234375, 48, "L", 905.3333740234375, 58, "L", 8.010416984558105, 58, "Z", "M", 8.010416984558105, 128, "L", 905.3333740234375, 128, "L", 905.3333740234375, 138, "L", 8.010416984558105, 138, "Z" ], "columns": [ "M", 759.1146240234375, 8, "L", 759.1146240234375, 178, "M", 905.3333740234375, 178, "L", 905.3333740234375, 8, "M", 456.6770935058594, 8, "L", 456.6770935058594, 178, "M", 749.1146240234375, 178, "L", 749.1146240234375, 8, "M", 8.010416984558105, 8, "L", 8.010416984558105, 178, "M", 446.6770935058594, 178, "L", 446.6770935058594, 8 ], "columnGaps": [ "M", 749.1146240234375, 8, "L", 759.1146240234375, 8, "L", 759.1146240234375, 178, "L", 749.1146240234375, 178, "Z", "M", 446.6770935058594, 8, "L", 456.6770935058594, 8, "L", 456.6770935058594, 178, "L", 446.6770935058594, 178, "Z" ], "positiveRowLineNumberPositions": [ { "x": 905.328125, "y": 8 }, { "x": 905.328125, "y": 53 }, { "x": 905.328125, "y": 133 }, { "x": 905.328125, "y": 178 } ], "positiveColumnLineNumberPositions": [ { "x": 905.328125, "y": 8 }, { "x": 754.109375, "y": 8 }, { "x": 451.671875, "y": 8 }, { "x": 8, "y": 8 } ], "negativeRowLineNumberPositions": [ { "x": 8, "y": 8 }, { "x": 8, "y": 53 }, { "x": 8, "y": 133 }, { "x": 8, "y": 178 } ], "negativeColumnLineNumberPositions": [ { "x": 905.328125, "y": 178 }, { "x": 754.109375, "y": 178 }, { "x": 451.671875, "y": 178 }, { "x": 8, "y": 178 } ], "areaNames": { "foo": [ "M", 905.3333740234375, 8, "L", 456.6770935058594, 8, "L", 456.6770935058594, 48, "L", 905.3333740234375, 48, "Z" ], "baz": [ "M", 749.1146240234375, 58, "L", 456.6770935058594, 58, "L", 456.6770935058594, 178, "L", 749.1146240234375, 178, "Z" ], "t": [ "M", 446.6770935058594, 8, "L", 8.010416984558105, 8, "L", 8.010416984558105, 178, "L", 446.6770935058594, 178, "Z" ], "bar": [ "M", 905.3333740234375, 58, "L", 759.1146240234375, 58, "L", 759.1146240234375, 178, "L", 905.3333740234375, 178, "Z" ] }, "rowLineNameOffsets": [ { "x": 905.328125, "y": 8, "name": "header" }, { "x": 905.328125, "y": 133, "name": "footer" }, { "x": 905.328125, "y": 53, "name": "main" } ], "columnLineNameOffsets": [ { "x": 451.671875, "y": 8, "name": "end" }, { "x": 905.328125, "y": 8, "name": "start" }, { "x": 754.109375, "y": 8, "name": "mid" } ], "gridBorder": [ "M", 8.010416984558105, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8.010416984558105, 178, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": true, "columnLineDash": true, "showGridExtensionLines": true, "showPositiveLineNumbers": false, "showNegativeLineNumbers": false, "showAreaNames": true, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0.8)", "rowLineColor": "rgba(128, 0, 0, 0.8)", "columnLineColor": "rgba(128, 0, 0, 0.8)", "rowGapColor": "rgba(0, 255, 0, 0.8)", "columnGapColor": "rgba(0, 0, 255, 0.8)", "rowHatchColor": "rgba(255, 255, 255, 0.8)", "columnHatchColor": "rgba(128, 128, 128, 0.8)", "areaBorderColor": "rgba(255, 0, 0, 0.8)" }, "isPrimaryGrid": true } ] });
+ dispatch(["drawHighlight", { "paths": [ { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(255, 0, 0, 0.5)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(0, 255, 0, 0.5)", "name": "padding" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(0, 0, 255, 0.5)", "name": "border" }, { "path": [ "M", 8, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8, 178, "Z" ], "fillColor": "rgba(255, 255, 255, 0.5)", "name": "margin" } ], "gridInfo": [ { "rotationAngle": 0, "writingMode": "horizontal-tb", "rows": [ "M", 8.010416984558105, 8, "L", 905.3333740234375, 8, "M", 905.3333740234375, 48, "L", 8.010416984558105, 48, "M", 8.010416984558105, 58, "L", 905.3333740234375, 58, "M", 905.3333740234375, 128, "L", 8.010416984558105, 128, "M", 8.010416984558105, 138, "L", 905.3333740234375, 138, "M", 905.3333740234375, 178, "L", 8.010416984558105, 178 ], "rowGaps": [ "M", 8.010416984558105, 48, "L", 905.3333740234375, 48, "L", 905.3333740234375, 58, "L", 8.010416984558105, 58, "Z", "M", 8.010416984558105, 128, "L", 905.3333740234375, 128, "L", 905.3333740234375, 138, "L", 8.010416984558105, 138, "Z" ], "columns": [ "M", 759.1146240234375, 8, "L", 759.1146240234375, 178, "M", 905.3333740234375, 178, "L", 905.3333740234375, 8, "M", 456.6770935058594, 8, "L", 456.6770935058594, 178, "M", 749.1146240234375, 178, "L", 749.1146240234375, 8, "M", 8.010416984558105, 8, "L", 8.010416984558105, 178, "M", 446.6770935058594, 178, "L", 446.6770935058594, 8 ], "columnGaps": [ "M", 749.1146240234375, 8, "L", 759.1146240234375, 8, "L", 759.1146240234375, 178, "L", 749.1146240234375, 178, "Z", "M", 446.6770935058594, 8, "L", 456.6770935058594, 8, "L", 456.6770935058594, 178, "L", 446.6770935058594, 178, "Z" ], "positiveRowLineNumberPositions": [ { "x": 905.328125, "y": 8 }, { "x": 905.328125, "y": 53 }, { "x": 905.328125, "y": 133 }, { "x": 905.328125, "y": 178 } ], "positiveColumnLineNumberPositions": [ { "x": 905.328125, "y": 8 }, { "x": 754.109375, "y": 8 }, { "x": 451.671875, "y": 8 }, { "x": 8, "y": 8 } ], "negativeRowLineNumberPositions": [ { "x": 8, "y": 8 }, { "x": 8, "y": 53 }, { "x": 8, "y": 133 }, { "x": 8, "y": 178 } ], "negativeColumnLineNumberPositions": [ { "x": 905.328125, "y": 178 }, { "x": 754.109375, "y": 178 }, { "x": 451.671875, "y": 178 }, { "x": 8, "y": 178 } ], "areaNames": { "foo": [ "M", 905.3333740234375, 8, "L", 456.6770935058594, 8, "L", 456.6770935058594, 48, "L", 905.3333740234375, 48, "Z" ], "baz": [ "M", 749.1146240234375, 58, "L", 456.6770935058594, 58, "L", 456.6770935058594, 178, "L", 749.1146240234375, 178, "Z" ], "t": [ "M", 446.6770935058594, 8, "L", 8.010416984558105, 8, "L", 8.010416984558105, 178, "L", 446.6770935058594, 178, "Z" ], "bar": [ "M", 905.3333740234375, 58, "L", 759.1146240234375, 58, "L", 759.1146240234375, 178, "L", 905.3333740234375, 178, "Z" ] }, "rowLineNameOffsets": [ { "x": 905.328125, "y": 8, "name": "header" }, { "x": 905.328125, "y": 133, "name": "footer" }, { "x": 905.328125, "y": 53, "name": "main" } ], "columnLineNameOffsets": [ { "x": 451.671875, "y": 8, "name": "end" }, { "x": 905.328125, "y": 8, "name": "start" }, { "x": 754.109375, "y": 8, "name": "mid" } ], "gridBorder": [ "M", 8.010416984558105, 8, "L", 905.3333740234375, 8, "L", 905.3333740234375, 178, "L", 8.010416984558105, 178, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": true, "columnLineDash": true, "showGridExtensionLines": true, "showPositiveLineNumbers": false, "showNegativeLineNumbers": false, "showAreaNames": true, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0.8)", "rowLineColor": "rgba(128, 0, 0, 0.8)", "columnLineColor": "rgba(128, 0, 0, 0.8)", "rowGapColor": "rgba(0, 255, 0, 0.8)", "columnGapColor": "rgba(0, 0, 255, 0.8)", "rowHatchColor": "rgba(255, 255, 255, 0.8)", "columnHatchColor": "rgba(128, 128, 128, 0.8)", "areaBorderColor": "rgba(255, 0, 0, 0.8)" }, "isPrimaryGrid": true } ] }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_grid_sizes.html b/inspector_overlay/debug/tool_highlight_grid_sizes.html
index fe86761..05b7473 100644
--- a/inspector_overlay/debug/tool_highlight_grid_sizes.html
+++ b/inspector_overlay/debug/tool_highlight_grid_sizes.html
@@ -17,6 +17,20 @@
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
+
const info = [
// rotated
{"paths":[{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"664.68","nodeHeight":"664.68","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"computedSize":100,"x":242.83853149414062,"y":97.85786437988281},{"computedSize":100,"x":320.6202697753906,"y":175.63961791992188},{"computedSize":100,"x":398.4020080566406,"y":253.42135620117188}],"rowTrackSizes":[{"computedSize":67,"x":183.79510498046875,"y":86.19060516357422},{"computedSize":67,"x":129.34788513183594,"y":140.6378173828125}],"rows":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"M",386.3811950683594,336.1528625488281,"L",160.10704040527344,109.87867736816406,"M",153.0359649658203,116.94974517822266,"L",379.3101501464844,343.2239074707031,"M",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688],"rowGaps":["M",160.10704040527344,109.87867736816406,"L",386.3811950683594,336.1528625488281,"L",379.3101501464844,343.2239074707031,"L",153.0359649658203,116.94974517822266,"Z"],"columns":["M",207.48318481445312,62.502525329589844,"L",105.6598129272461,164.32589721679688,"M",176.3704833984375,235.0365753173828,"L",278.1938781738281,133.2132110595703,"M",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"M",254.15223693847656,312.8183288574219,"L",355.9756164550781,210.9949493408203,"M",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"M",331.9339904785156,390.6000671386719,"L",433.7573547363281,288.7767028808594],"columnGaps":["M",278.1938781738281,133.2132110595703,"L",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"L",176.3704833984375,235.0365753173828,"Z","M",355.9756164550781,210.9949493408203,"L",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"L",254.15223693847656,312.8183288574219,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"gridBorder":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"L",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":false,"showTrackSizes":true,"rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
@@ -28,15 +42,7 @@
{"paths":[{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"706.4","nodeHeight":"706.4","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"x":451.484375,"y":194.15625},{"x":529.265625,"y":271.9375},{"x":607.046875,"y":349.71875}],"rowTrackSizes":[{"x":392.4375,"y":182.484375},{"x":337.984375,"y":236.9375}],"rows":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"M",595.0215454101562,432.45050048828125,"L",368.74737548828125,206.1763153076172,"M",361.67633056640625,213.2473907470703,"L",587.9505004882812,439.52154541015625,"M",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625],"rowGaps":["M",368.74737548828125,206.1763153076172,"L",595.0215454101562,432.45050048828125,"L",587.9505004882812,439.52154541015625,"L",361.67633056640625,213.2473907470703,"Z"],"columns":["M",416.12353515625,158.8001708984375,"L",314.3001708984375,260.62353515625,"M",385.0108337402344,331.334228515625,"L",486.834228515625,229.51083374023438,"M",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"M",462.7925720214844,409.115966796875,"L",564.615966796875,307.2925720214844,"M",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"M",540.5743408203125,486.897705078125,"L",642.397705078125,385.0743408203125],"columnGaps":["M",486.834228515625,229.51083374023438,"L",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"L",385.0108337402344,331.334228515625,"Z","M",564.615966796875,307.2925720214844,"L",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"L",462.7925720214844,409.115966796875,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"positiveRowLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":365.21875,"y":209.71875},{"x":314.296875,"y":260.625}],"positiveColumnLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":490.375,"y":233.046875},{"x":568.15625,"y":310.828125},{"x":642.390625,"y":385.078125}],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberPositions":[{"x":642.390625,"y":385.078125}],"negativeColumnLineNumberPositions":[{"x":314.296875,"y":260.625},{"x":388.546875,"y":334.875},{"x":466.328125,"y":412.65625},{"x":540.578125,"y":486.890625}],"areaNames":{},"gridBorder":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"L",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":true,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]}
];
- setPlatform("mac");
-
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
- reset(window);
-
- drawHighlight(info[0]);
+ dispatch(["drawHighlight", info[0]]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_grid_transformed.html b/inspector_overlay/debug/tool_highlight_grid_transformed.html
index 442d184..70a73cf 100644
--- a/inspector_overlay/debug/tool_highlight_grid_transformed.html
+++ b/inspector_overlay/debug/tool_highlight_grid_transformed.html
@@ -17,15 +17,21 @@
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
- setPlatform("mac");
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
- reset(window);
-
- drawHighlight({ "paths": [ { "path": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "L", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875, "Z" ], "fillColor": "rgba(255, 0, 0, .3)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" } ], "colorFormat": "hex", "gridInfo": [ { "rotationAngle": -28, "rows": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "M", 232.86346435546875, 295.30706787109375, "L", 634.2433471679688, 68.3117904663086, "M", 270.4945373535156, 348.7674255371094, "L", 671.8743896484375, 121.77217864990234, "M", 308.1256103515625, 402.22784423828125, "L", 709.5054931640625, 175.2325897216797, "M", 345.7566833496094, 455.688232421875, "L", 747.1365966796875, 228.69296264648438, "M", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875 ], "rowGaps": [ "M", 232.86346435546875, 295.30706787109375, "L", 634.2433471679688, 68.3117904663086, "L", 634.2433471679688, 68.3117904663086, "L", 232.86346435546875, 295.30706787109375, "Z", "M", 270.4945373535156, 348.7674255371094, "L", 671.8743896484375, 121.77217864990234, "L", 671.8743896484375, 121.77217864990234, "L", 270.4945373535156, 348.7674255371094, "Z", "M", 308.1256103515625, 402.22784423828125, "L", 709.5054931640625, 175.2325897216797, "L", 709.5054931640625, 175.2325897216797, "L", 308.1256103515625, 402.22784423828125, "Z", "M", 345.7566833496094, 455.688232421875, "L", 747.1365966796875, 228.69296264648438, "L", 747.1365966796875, 228.69296264648438, "L", 345.7566833496094, 455.688232421875, "Z" ], "columns": [ "M", 195.23239135742188, 241.84664916992188, "L", 383.3877868652344, 509.14862060546875, "M", 275.50836181640625, 196.44760131835938, "L", 463.66375732421875, 463.74957275390625, "M", 355.7843017578125, 151.04855346679688, "L", 543.939697265625, 418.35052490234375, "M", 436.060302734375, 105.64949798583984, "L", 624.2156982421875, 372.95147705078125, "M", 516.3363037109375, 60.250450134277344, "L", 704.4916381835938, 327.55242919921875, "M", 784.7677001953125, 282.15338134765625, "L", 596.6122436523438, 14.851396560668945 ], "columnGaps": [ "M", 275.50836181640625, 196.44760131835938, "L", 275.50836181640625, 196.44760131835938, "L", 463.66375732421875, 463.74957275390625, "L", 463.66375732421875, 463.74957275390625, "Z", "M", 355.7843017578125, 151.04855346679688, "L", 355.7843017578125, 151.04855346679688, "L", 543.939697265625, 418.35052490234375, "L", 543.939697265625, 418.35052490234375, "Z", "M", 436.060302734375, 105.64949798583984, "L", 436.060302734375, 105.64949798583984, "L", 624.2156982421875, 372.95147705078125, "L", 624.2156982421875, 372.95147705078125, "Z", "M", 516.3363037109375, 60.250450134277344, "L", 516.3363037109375, 60.250450134277344, "L", 704.4916381835938, 327.55242919921875, "L", 704.4916381835938, 327.55242919921875, "Z" ], "gridBorder": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "L", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": false, "columnLineDash": false, "showGridExtensionLines": true, "showPositiveLineNumbers": false, "showNegativeLineNumbers": false, "showAreaNames": false, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0)", "rowLineColor": "#f06", "columnLineColor": "#f06" }, "isPrimaryGrid": true } ] });
+ dispatch(["drawHighlight", { "paths": [ { "path": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "L", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875, "Z" ], "fillColor": "rgba(255, 0, 0, .3)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" } ], "colorFormat": "hex", "gridInfo": [ { "rotationAngle": -28, "rows": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "M", 232.86346435546875, 295.30706787109375, "L", 634.2433471679688, 68.3117904663086, "M", 270.4945373535156, 348.7674255371094, "L", 671.8743896484375, 121.77217864990234, "M", 308.1256103515625, 402.22784423828125, "L", 709.5054931640625, 175.2325897216797, "M", 345.7566833496094, 455.688232421875, "L", 747.1365966796875, 228.69296264648438, "M", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875 ], "rowGaps": [ "M", 232.86346435546875, 295.30706787109375, "L", 634.2433471679688, 68.3117904663086, "L", 634.2433471679688, 68.3117904663086, "L", 232.86346435546875, 295.30706787109375, "Z", "M", 270.4945373535156, 348.7674255371094, "L", 671.8743896484375, 121.77217864990234, "L", 671.8743896484375, 121.77217864990234, "L", 270.4945373535156, 348.7674255371094, "Z", "M", 308.1256103515625, 402.22784423828125, "L", 709.5054931640625, 175.2325897216797, "L", 709.5054931640625, 175.2325897216797, "L", 308.1256103515625, 402.22784423828125, "Z", "M", 345.7566833496094, 455.688232421875, "L", 747.1365966796875, 228.69296264648438, "L", 747.1365966796875, 228.69296264648438, "L", 345.7566833496094, 455.688232421875, "Z" ], "columns": [ "M", 195.23239135742188, 241.84664916992188, "L", 383.3877868652344, 509.14862060546875, "M", 275.50836181640625, 196.44760131835938, "L", 463.66375732421875, 463.74957275390625, "M", 355.7843017578125, 151.04855346679688, "L", 543.939697265625, 418.35052490234375, "M", 436.060302734375, 105.64949798583984, "L", 624.2156982421875, 372.95147705078125, "M", 516.3363037109375, 60.250450134277344, "L", 704.4916381835938, 327.55242919921875, "M", 784.7677001953125, 282.15338134765625, "L", 596.6122436523438, 14.851396560668945 ], "columnGaps": [ "M", 275.50836181640625, 196.44760131835938, "L", 275.50836181640625, 196.44760131835938, "L", 463.66375732421875, 463.74957275390625, "L", 463.66375732421875, 463.74957275390625, "Z", "M", 355.7843017578125, 151.04855346679688, "L", 355.7843017578125, 151.04855346679688, "L", 543.939697265625, 418.35052490234375, "L", 543.939697265625, 418.35052490234375, "Z", "M", 436.060302734375, 105.64949798583984, "L", 436.060302734375, 105.64949798583984, "L", 624.2156982421875, 372.95147705078125, "L", 624.2156982421875, 372.95147705078125, "Z", "M", 516.3363037109375, 60.250450134277344, "L", 516.3363037109375, 60.250450134277344, "L", 704.4916381835938, 327.55242919921875, "L", 704.4916381835938, 327.55242919921875, "Z" ], "gridBorder": [ "M", 195.23239135742188, 241.84664916992188, "L", 596.6122436523438, 14.851396560668945, "L", 784.7677001953125, 282.15338134765625, "L", 383.3877868652344, 509.14862060546875, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": false, "columnLineDash": false, "showGridExtensionLines": true, "showPositiveLineNumbers": false, "showNegativeLineNumbers": false, "showAreaNames": false, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0)", "rowLineColor": "#f06", "columnLineColor": "#f06" }, "isPrimaryGrid": true } ] }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_grid_vertical.html b/inspector_overlay/debug/tool_highlight_grid_vertical.html
index 028e8c9..8ab4383 100644
--- a/inspector_overlay/debug/tool_highlight_grid_vertical.html
+++ b/inspector_overlay/debug/tool_highlight_grid_vertical.html
@@ -17,17 +17,21 @@
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
- setPlatform("mac");
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
- reset(window);
-
- // drawHighlight({ "paths": [ { "path": [ "M", 40, 32, "L", 182, 32, "L", 182, 282, "L", 40, 282, "Z" ], "fillColor": "rgba(255, 0, 0, 0.3)", "outlineColor": "rgba(128, 0, 0, 0)", "name": "content" }, { "path": [ "M", 40, 32, "L", 182, 32, "L", 182, 282, "L", 40, 282, "Z" ], "fillColor": "rgba(0, 255, 0, 0.3)", "name": "padding" }, { "path": [ "M", 40, 32, "L", 182, 32, "L", 182, 282, "L", 40, 282, "Z" ], "fillColor": "rgba(0, 0, 255, 0.3)", "name": "border" }, { "path": [ "M", 8, 0, "L", 1581.3333740234375, 0, "L", 1581.3333740234375, 314, "L", 8, 314, "Z" ], "fillColor": "rgba(255, 255, 255, 0.3)", "name": "margin" } ], "gridInfo": [ { "rotationAngle": 0, writingMode: "vertical-lr", "columnTrackSizes": [ { "x": 118, "y": 32, "computedSize": 104, "authoredSize": "2fr" }, { "x": 251, "y": 32, "computedSize": 52, "authoredSize": "1fr" } ], "rowTrackSizes": [ { "x": 40, "y": 69.65625, "computedSize": 50.222225189208984 }, { "x": 40, "y": 148.65625, "computedSize": 33.77777862548828 } ], "rows": [ "M", 40, 32, "L", 290, 32, "M", 290, 107.33333587646484, "L", 40, 107.33333587646484, "M", 40, 123.33333587646484, "L", 290, 123.33333587646484, "M", 290, 174, "L", 40, 174 ], "rowGaps": [ "M", 40, 107.33333587646484, "L", 290, 107.33333587646484, "L", 290, 123.33333587646484, "L", 40, 123.33333587646484, "Z" ], "columns": [ "M", 40, 32, "L", 40, 174, "M", 196, 174, "L", 196, 32, "M", 212, 32, "L", 212, 174, "M", 290, 174, "L", 290, 32 ], "columnGaps": [ "M", 196, 32, "L", 212, 32, "L", 212, 174, "L", 196, 174, "Z" ], "positiveRowLineNumberPositions": [ { "x": 40, "y": 32 }, { "x": 40, "y": 115.328125 }, { "x": 40, "y": 174 } ], "positiveColumnLineNumberPositions": [ { "x": 40, "y": 32 }, { "x": 204, "y": 32 }, { "x": 290, "y": 32 } ], "negativeRowLineNumberPositions": [ { "x": 290, "y": 32 } ], "negativeColumnLineNumberPositions": [ { "x": 40, "y": 174 }, { "x": 204, "y": 174 }, { "x": 290, "y": 174 } ], "areaNames": { "foo": ["M", 40, 32, "L", 290, 32, "L", 290, 107.33333587646484, "L", 40, 107.33333587646484, "L", 40, 32] }, "rowLineNameOffsets": [], "columnLineNameOffsets": [ { "x": 204, "y": 32, "name": "foo" }, { "x": 40, "y": 32, "name": "col1" }, { "x": 204, "y": 32, "name": "something" }, { "x": 290, "y": 32, "name": "end-line" } ], "gridBorder": [ "M", 40, 32, "L", 290, 32, "L", 290, 174, "L", 40, 174, "Z" ], "gridHighlightConfig": { "gridBorderDash": false, "rowLineDash": true, "columnLineDash": true, "showGridExtensionLines": true, "showPositiveLineNumbers": true, "showNegativeLineNumbers": true, "showAreaNames": true, "showLineNames": false, "gridBorderColor": "rgba(255, 0, 0, 0)", "rowLineColor": "rgba(128, 0, 0, 0.9)", "columnLineColor": "rgba(128, 0, 0, .9)", "rowGapColor": "rgba(0, 255, 0, 0.2)", "columnGapColor": "rgba(0, 0, 255, 0.2)", "rowHatchColor": "rgba(255, 255, 255, 0.9)", "columnHatchColor": "rgba(128, 128, 128, 0.9)", "areaBorderColor": "rgba(255, 0, 0, 0.7)" }, "isPrimaryGrid": true } ] });
-
- 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 } ] });
+ 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 } ] }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_implicit_grid.html b/inspector_overlay/debug/tool_highlight_implicit_grid.html
index 324774f..d1d0f07 100644
--- a/inspector_overlay/debug/tool_highlight_implicit_grid.html
+++ b/inspector_overlay/debug/tool_highlight_implicit_grid.html
@@ -17,15 +17,24 @@
</head>
<body>
<script type="module">
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
+ const viewportWidth = document.documentElement.clientWidth;
+ const viewportHeight = document.documentElement.clientHeight;
- setPlatform("mac");
- reset(window);
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- drawHighlight({
+ dispatch(["drawHighlight", {
"paths":[
],
"gridInfo":[
@@ -43,7 +52,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_named_areas_grid.html b/inspector_overlay/debug/tool_highlight_named_areas_grid.html
index 7bda3fe..c524de4 100644
--- a/inspector_overlay/debug/tool_highlight_named_areas_grid.html
+++ b/inspector_overlay/debug/tool_highlight_named_areas_grid.html
@@ -14,15 +14,24 @@
</head>
<body>
<script type="module">
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
+ const viewportWidth = document.documentElement.clientWidth;
+ const viewportHeight = document.documentElement.clientHeight;
- setPlatform("mac");
- reset(window);
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- drawHighlight({
+ dispatch(["drawHighlight", {
"paths":[],
"gridInfo":[
{
@@ -43,7 +52,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_named_lines_grid.html b/inspector_overlay/debug/tool_highlight_named_lines_grid.html
index 53bbca2..b11bd6b 100644
--- a/inspector_overlay/debug/tool_highlight_named_lines_grid.html
+++ b/inspector_overlay/debug/tool_highlight_named_lines_grid.html
@@ -14,10 +14,24 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
+ const viewportWidth = document.documentElement.clientWidth;
+ const viewportHeight = document.documentElement.clientHeight;
- drawHighlight({
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
+
+ dispatch(["drawHighlight", {
"paths":[],
"gridInfo":[
{
@@ -46,7 +60,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_narrow_tracks_grid.html b/inspector_overlay/debug/tool_highlight_narrow_tracks_grid.html
index beaaa24..eb477db 100644
--- a/inspector_overlay/debug/tool_highlight_narrow_tracks_grid.html
+++ b/inspector_overlay/debug/tool_highlight_narrow_tracks_grid.html
@@ -14,10 +14,24 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
+ const viewportWidth = document.documentElement.clientWidth;
+ const viewportHeight = document.documentElement.clientHeight;
- drawHighlight({
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: viewportWidth,
+ height: viewportHeight,
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
+
+ dispatch(["drawHighlight", {
"paths":[],
"gridInfo":[
{
@@ -34,7 +48,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_subpixel_grid.html b/inspector_overlay/debug/tool_highlight_subpixel_grid.html
index 69d9943..afc77ee 100644
--- a/inspector_overlay/debug/tool_highlight_subpixel_grid.html
+++ b/inspector_overlay/debug/tool_highlight_subpixel_grid.html
@@ -14,15 +14,21 @@
</head>
<body>
<script type="module">
- window.viewportSize = {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight
- };
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset", {
+ viewportSize: {
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight
+ },
+ deviceScaleFactor: 1,
+ pageScaleFactor: 1,
+ pageZoomFactor: 1,
+ emulationScaleFactor: 1,
+ scrollX: 0,
+ scrollY: 0,
+ }]);
- setPlatform("mac");
- reset(window);
-
- drawHighlight({
+ dispatch(["drawHighlight", {
"paths": [],
"gridInfo": [
{
@@ -39,7 +45,7 @@
"isPrimaryGrid":true
}
]
- });
+ }]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_top_arrow.html b/inspector_overlay/debug/tool_highlight_top_arrow.html
index d6bb8da..505fd5f 100644
--- a/inspector_overlay/debug/tool_highlight_top_arrow.html
+++ b/inspector_overlay/debug/tool_highlight_top_arrow.html
@@ -14,11 +14,11 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
- 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"},
+ dispatch(["setPlatform", "mac"]);
+ 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"});
+ "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"}]);
</script>
</body>
</html>
diff --git a/inspector_overlay/debug/tool_highlight_with_persistent_grid.html b/inspector_overlay/debug/tool_highlight_with_persistent_grid.html
index fcbbc40..461180c 100644
--- a/inspector_overlay/debug/tool_highlight_with_persistent_grid.html
+++ b/inspector_overlay/debug/tool_highlight_with_persistent_grid.html
@@ -14,11 +14,10 @@
</head>
<body>
<script type="module">
- setPlatform("mac");
- reset(window);
- drawHighlight({"paths":[{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"html","idValue":"","nodeWidth":"617.273","nodeHeight":"226.364","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutNGBlockFlow","style":{"color":"#000000FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#00000000"},"showAccessibilityInfo":true}});
- drawGridHighlight({"rotationAngle":0,"writingMode":"horizontal-tb","columnTrackSizes":[{"x":110,"y":44,"computedSize":120,"authoredSize":"120px"},{"x":253,"y":44,"computedSize":120,"authoredSize":"120px"},{"x":396,"y":44,"computedSize":120,"authoredSize":"120px"}],"rowTrackSizes":[{"x":44,"y":81.5,"computedSize":68.18181610107422},{"x":44,"y":167.5,"computedSize":68.18181610107422}],"rows":["M",44,44,"L",462,44,"M",462,119,"L",44,119,"M",44,130,"L",462,130,"M",462,205,"L",44,205],"rowGaps":["M",44,119,"L",462,119,"L",462,130,"L",44,130,"Z"],"columns":["M",44,44,"L",44,205,"M",176,205,"L",176,44,"M",187,44,"L",187,205,"M",319,205,"L",319,44,"M",330,44,"L",330,205,"M",462,205,"L",462,44],"columnGaps":["M",176,44,"L",187,44,"L",187,205,"L",176,205,"Z","M",319,44,"L",330,44,"L",330,205,"L",319,205,"Z"],"positiveRowLineNumberPositions":[{"x":44,"y":44},{"x":44,"y":124.5},{"x":44,"y":205}],"positiveColumnLineNumberPositions":[{"x":44,"y":44},{"x":181.5,"y":44},{"x":324.5,"y":44},{"x":462,"y":44}],"negativeRowLineNumberPositions":[{"x":462,"y":44},{"x":462,"y":124.5},{"x":462,"y":205}],"negativeColumnLineNumberPositions":[{"x":44,"y":205},{"x":181.5,"y":205},{"x":324.5,"y":205},{"x":462,"y":205}],"areaNames":{"header":["M",187,44,"L",462,44,"L",462,119,"L",187,119,"Z"],"sidebar":["M",44,130,"L",176,130,"L",176,205,"L",44,205,"Z"],"content":["M",187,130,"L",462,130,"L",462,205,"L",187,205,"Z"]},"gridBorder":["M",44,44,"L",462,44,"L",462,205,"L",44,205,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":true,"showLineNames":false,"rowLineColor":"#b32424","columnLineColor":"#b32424","rowGapColor":"rgba(179, 36, 36, 0.298039215686275)","columnGapColor":"rgba(179, 36, 36, 0.298039215686275)","rowHatchColor":"rgba(179, 36, 36, 0.8)","columnHatchColor":"rgba(179, 36, 36, 0.8)","areaBorderColor":"#b32424"},"isPrimaryGrid":true});
-
+ dispatch(["setPlatform", "mac"]);
+ dispatch(["reset"]);
+ dispatch(["drawHighlight", {"paths":[{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",0,0,"L",679,0,"L",679,249,"L",0,249,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"html","idValue":"","nodeWidth":"617.273","nodeHeight":"226.364","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutNGBlockFlow","style":{"color":"#000000FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#00000000"},"showAccessibilityInfo":true}}]);
+ dispatch(["drawGridHighlight", {"rotationAngle":0,"writingMode":"horizontal-tb","columnTrackSizes":[{"x":110,"y":44,"computedSize":120,"authoredSize":"120px"},{"x":253,"y":44,"computedSize":120,"authoredSize":"120px"},{"x":396,"y":44,"computedSize":120,"authoredSize":"120px"}],"rowTrackSizes":[{"x":44,"y":81.5,"computedSize":68.18181610107422},{"x":44,"y":167.5,"computedSize":68.18181610107422}],"rows":["M",44,44,"L",462,44,"M",462,119,"L",44,119,"M",44,130,"L",462,130,"M",462,205,"L",44,205],"rowGaps":["M",44,119,"L",462,119,"L",462,130,"L",44,130,"Z"],"columns":["M",44,44,"L",44,205,"M",176,205,"L",176,44,"M",187,44,"L",187,205,"M",319,205,"L",319,44,"M",330,44,"L",330,205,"M",462,205,"L",462,44],"columnGaps":["M",176,44,"L",187,44,"L",187,205,"L",176,205,"Z","M",319,44,"L",330,44,"L",330,205,"L",319,205,"Z"],"positiveRowLineNumberPositions":[{"x":44,"y":44},{"x":44,"y":124.5},{"x":44,"y":205}],"positiveColumnLineNumberPositions":[{"x":44,"y":44},{"x":181.5,"y":44},{"x":324.5,"y":44},{"x":462,"y":44}],"negativeRowLineNumberPositions":[{"x":462,"y":44},{"x":462,"y":124.5},{"x":462,"y":205}],"negativeColumnLineNumberPositions":[{"x":44,"y":205},{"x":181.5,"y":205},{"x":324.5,"y":205},{"x":462,"y":205}],"areaNames":{"header":["M",187,44,"L",462,44,"L",462,119,"L",187,119,"Z"],"sidebar":["M",44,130,"L",176,130,"L",176,205,"L",44,205,"Z"],"content":["M",187,130,"L",462,130,"L",462,205,"L",187,205,"Z"]},"gridBorder":["M",44,44,"L",462,44,"L",462,205,"L",44,205,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":true,"showLineNames":false,"rowLineColor":"#b32424","columnLineColor":"#b32424","rowGapColor":"rgba(179, 36, 36, 0.298039215686275)","columnGapColor":"rgba(179, 36, 36, 0.298039215686275)","rowHatchColor":"rgba(179, 36, 36, 0.8)","columnHatchColor":"rgba(179, 36, 36, 0.8)","areaBorderColor":"#b32424"},"isPrimaryGrid":true}]);
</script>
</body>
</html>
diff --git a/inspector_overlay/highlight_common.js b/inspector_overlay/highlight_common.js
index fc7b15f..ae3a86a 100644
--- a/inspector_overlay/highlight_common.js
+++ b/inspector_overlay/highlight_common.js
@@ -32,54 +32,6 @@
// @ts-nocheck
// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-const DEFAULT_RULER_COLOR = 'rgba(128, 128, 128, 0.3)';
-
-export function drawRulers(context, bounds, rulerAtRight, rulerAtBottom, color, dash) {
- context.save();
- const width = canvasWidth;
- const height = canvasHeight;
- context.strokeStyle = color || DEFAULT_RULER_COLOR;
- context.lineWidth = 1;
- context.translate(0.5, 0.5);
- if (dash) {
- context.setLineDash([3, 3]);
- }
-
- if (rulerAtRight) {
- for (const y in bounds.rightmostXForY) {
- context.beginPath();
- context.moveTo(width, y);
- context.lineTo(bounds.rightmostXForY[y], y);
- context.stroke();
- }
- } else {
- for (const y in bounds.leftmostXForY) {
- context.beginPath();
- context.moveTo(0, y);
- context.lineTo(bounds.leftmostXForY[y], y);
- context.stroke();
- }
- }
-
- if (rulerAtBottom) {
- for (const x in bounds.bottommostYForX) {
- context.beginPath();
- context.moveTo(x, height);
- context.lineTo(x, bounds.topmostYForX[x]);
- context.stroke();
- }
- } else {
- for (const x in bounds.topmostYForX) {
- context.beginPath();
- context.moveTo(x, 0);
- context.lineTo(x, bounds.topmostYForX[x]);
- context.stroke();
- }
- }
-
- context.restore();
-}
-
export function buildPath(commands, bounds) {
let commandsIndex = 0;
diff --git a/inspector_overlay/highlight_grid_common.js b/inspector_overlay/highlight_grid_common.js
index 02bdf41..3df061b 100644
--- a/inspector_overlay/highlight_grid_common.js
+++ b/inspector_overlay/highlight_grid_common.js
@@ -216,7 +216,7 @@
}
}`;
-export function drawLayoutGridHighlight(highlight, context) {
+export function drawLayoutGridHighlight(highlight, context, deviceScaleFactor, canvasWidth, canvasHeight) {
const gridBounds = emptyBounds();
const gridPath = buildPath(highlight.gridBorder, gridBounds);
@@ -260,15 +260,18 @@
// The rest of the overlay is drawn without the writing-mode transformation, but we keep the matrix to transform relevant points.
const writingModeMatrix = context.getTransform();
- writingModeMatrix.scaleSelf(1 / window.deviceScaleFactor);
+ writingModeMatrix.scaleSelf(1 / deviceScaleFactor);
context.restore();
if (highlight.gridHighlightConfig.showGridExtensionLines) {
if (rowBounds) {
- _drawExtendedGridLines(context, rowBounds, highlight.gridHighlightConfig.rowLineDash, writingModeMatrix);
+ _drawExtendedGridLines(
+ context, rowBounds, highlight.gridHighlightConfig.rowLineDash, writingModeMatrix, canvasWidth, canvasHeight);
}
if (columnBounds) {
- _drawExtendedGridLines(context, columnBounds, highlight.gridHighlightConfig.columnLineDash, writingModeMatrix);
+ _drawExtendedGridLines(
+ context, columnBounds, highlight.gridHighlightConfig.columnLineDash, writingModeMatrix, canvasWidth,
+ canvasHeight);
}
}
@@ -330,7 +333,7 @@
return bounds;
}
-function _drawExtendedGridLines(context, bounds, dash, writingModeMatrix) {
+function _drawExtendedGridLines(context, bounds, dash, writingModeMatrix, canvasWidth, canvasHeight) {
context.save();
context.strokeStyle = DEFAULT_EXTENDED_LINE_COLOR;
context.lineWidth = 1;
diff --git a/inspector_overlay/tool_highlight.js b/inspector_overlay/tool_highlight.js
index f869c7a..2add52e 100644
--- a/inspector_overlay/tool_highlight.js
+++ b/inspector_overlay/tool_highlight.js
@@ -5,41 +5,15 @@
// @ts-nocheck
// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-import {adoptStyleSheet, dispatch, reset, setPlatform} from './common.js';
import {gridStyle} from './highlight_grid_common.js';
import style from './tool_highlight.css';
-import {doReset as doGridReset, drawGridHighlight} from './tool_highlight_grid_impl.js';
-import {doReset as doHighlightReset, drawHighlight} from './tool_highlight_impl.js';
+import {HighlightOverlay} from './tool_highlight_impl.js';
-window.setPlatform = function(platform) {
- adoptStyleSheet(style);
- const gridStyleSheet = new CSSStyleSheet();
- gridStyleSheet.replaceSync(gridStyle);
- adoptStyleSheet(gridStyleSheet);
+const gridStyleSheet = new CSSStyleSheet();
+gridStyleSheet.replaceSync(gridStyle);
- document.body.classList.add('fill');
+const overlay = new HighlightOverlay(window, [style, gridStyleSheet]);
- const canvas = document.createElement('canvas');
- canvas.id = 'canvas';
- canvas.classList.add('fill');
- document.body.append(canvas);
-
- const tooltip = document.createElement('div');
- tooltip.id = 'tooltip-container';
- document.body.append(tooltip);
-
- const gridLabels = document.createElement('div');
- gridLabels.id = 'grid-label-container';
- document.body.append(gridLabels);
-
- setPlatform(platform);
+window.dispatch = message => {
+ overlay.dispatch(message);
};
-
-window.reset = function(data) {
- reset(data);
- doHighlightReset(data);
- doGridReset(data);
-};
-window.drawHighlight = drawHighlight;
-window.drawGridHighlight = drawGridHighlight;
-window.dispatch = dispatch;
diff --git a/inspector_overlay/tool_highlight_grid.js b/inspector_overlay/tool_highlight_grid.js
index b9787dc..aa28c7f 100644
--- a/inspector_overlay/tool_highlight_grid.js
+++ b/inspector_overlay/tool_highlight_grid.js
@@ -5,34 +5,15 @@
// @ts-nocheck
// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-import {adoptStyleSheet, dispatch, reset, setPlatform} from './common.js';
import {gridStyle} from './highlight_grid_common.js';
import style from './tool_highlight_grid.css';
-import {doReset, drawGridHighlight} from './tool_highlight_grid_impl.js';
+import {HighlightGridOverlay} from './tool_highlight_grid_impl.js';
-window.setPlatform = function(platform) {
- adoptStyleSheet(style);
- const gridStyleSheet = new CSSStyleSheet();
- gridStyleSheet.replaceSync(gridStyle);
- adoptStyleSheet(gridStyleSheet);
+const gridStyleSheet = new CSSStyleSheet();
+gridStyleSheet.replaceSync(gridStyle);
- document.body.classList.add('fill');
+const overlay = new HighlightGridOverlay(window, [style, gridStyleSheet]);
- const canvas = document.createElement('canvas');
- canvas.id = 'canvas';
- canvas.classList.add('fill');
- document.body.append(canvas);
-
- const gridLabels = document.createElement('div');
- gridLabels.id = 'grid-label-container';
- document.body.append(gridLabels);
-
- setPlatform(platform);
+window.dispatch = message => {
+ overlay.dispatch(message);
};
-
-window.reset = function(data) {
- reset(data);
- doReset(data);
-};
-window.drawGridHighlight = drawGridHighlight;
-window.dispatch = dispatch;
diff --git a/inspector_overlay/tool_highlight_grid_impl.js b/inspector_overlay/tool_highlight_grid_impl.js
index f35680b..3a604fd 100644
--- a/inspector_overlay/tool_highlight_grid_impl.js
+++ b/inspector_overlay/tool_highlight_grid_impl.js
@@ -32,21 +32,49 @@
// @ts-nocheck
// TODO(crbug.com/1011811): Enable TypeScript compiler checks
+import {Overlay} from './common.js';
import {drawLayoutGridHighlight} from './highlight_grid_common.js';
-export function doReset() {
- document.getElementById('grid-label-container').removeChildren();
- window._gridLayerCounter = 1;
- window._gridPainted = false;
-}
+export class HighlightGridOverlay extends Overlay {
+ reset(resetData) {
+ super.reset(resetData);
+ this.gridLabels.removeChildren();
+ this.window._gridLayerCounter = 1;
+ this.window._gridPainted = false;
+ // TODO(alexrudenko): Temporarily expose canvas params globally.
+ window.canvasWidth = this.canvasWidth;
+ window.canvasHeight = this.canvasHeight;
+ }
-export function drawGridHighlight(highlight, context) {
- context = context || window.context;
- context.save();
+ setPlatform(platform) {
+ super.setPlatform(platform);
- drawLayoutGridHighlight(highlight, context);
+ this.document.body.classList.add('fill');
- context.restore();
+ const canvas = this.document.createElement('canvas');
+ canvas.id = 'canvas';
+ canvas.classList.add('fill');
+ this.document.body.append(canvas);
- return;
+ this.renderGridMarkup();
+
+ this.setCanvas(canvas);
+ }
+
+ renderGridMarkup() {
+ const gridLabels = this.document.createElement('div');
+ gridLabels.id = 'grid-label-container';
+ this.document.body.append(gridLabels);
+ this.gridLabels = gridLabels;
+ }
+
+ drawGridHighlight(highlight) {
+ const context = this.context;
+
+ context.save();
+
+ drawLayoutGridHighlight(highlight, context, this.deviceScaleFactor, this.canvasWidth, this.canvasHeight);
+
+ context.restore();
+ }
}
diff --git a/inspector_overlay/tool_highlight_impl.js b/inspector_overlay/tool_highlight_impl.js
index 7501836..0d4bf0b 100644
--- a/inspector_overlay/tool_highlight_impl.js
+++ b/inspector_overlay/tool_highlight_impl.js
@@ -33,9 +33,237 @@
import {contrastRatio, rgbaToHsla} from '../front_end/common/ColorUtils.js';
+import {Overlay} from './common.js';
import {Bounds, createElement} from './common.js'; // eslint-disable-line no-unused-vars
-import {buildPath, drawRulers, emptyBounds} from './highlight_common.js';
+import {buildPath, emptyBounds} from './highlight_common.js';
import {drawLayoutGridHighlight} from './highlight_grid_common.js';
+import {HighlightGridOverlay} from './tool_highlight_grid_impl.js';
+
+export class HighlightOverlay extends Overlay {
+ reset(resetData) {
+ super.reset(resetData);
+ this.tooltip.removeChildren();
+ this.gridOverlay.reset(resetData);
+
+ // TODO(alexrudenko): Temporarily expose canvas params globally.
+ window.canvasWidth = this.canvasWidth;
+ window.canvasHeight = this.canvasHeight;
+ }
+
+ setPlatform(platform) {
+ super.setPlatform(platform);
+
+ this.document.body.classList.add('fill');
+
+ const canvas = this.document.createElement('canvas');
+ canvas.id = 'canvas';
+ canvas.classList.add('fill');
+ this.document.body.append(canvas);
+
+ const tooltip = this.document.createElement('div');
+ tooltip.id = 'tooltip-container';
+ this.document.body.append(tooltip);
+ this.tooltip = tooltip;
+
+ this.gridOverlay = new HighlightGridOverlay(this.window);
+ this.gridOverlay.renderGridMarkup();
+ this.gridOverlay.setCanvas(canvas);
+
+ this.setCanvas(canvas);
+ }
+
+ drawHighlight(highlight) {
+ const context = this.context;
+ context.save();
+
+ const bounds = emptyBounds();
+
+ for (let paths = highlight.paths.slice(); paths.length;) {
+ const path = paths.pop();
+ context.save();
+ drawPath(context, path.path, path.fillColor, path.outlineColor, bounds);
+ if (paths.length) {
+ context.globalCompositeOperation = 'destination-out';
+ drawPath(context, paths[paths.length - 1].path, 'red', null, bounds);
+ }
+ context.restore();
+ }
+ context.restore();
+
+ context.save();
+
+ const rulerAtRight =
+ highlight.paths.length && highlight.showRulers && bounds.minX < 20 && bounds.maxX + 20 < this.canvasWidth;
+ const rulerAtBottom =
+ highlight.paths.length && highlight.showRulers && bounds.minY < 20 && bounds.maxY + 20 < this.canvasHeight;
+
+ if (highlight.showRulers) {
+ this._drawAxis(context, rulerAtRight, rulerAtBottom);
+ }
+
+ if (highlight.paths.length) {
+ if (highlight.showExtensionLines) {
+ drawRulers(
+ context, bounds, rulerAtRight, rulerAtBottom, undefined, undefined, this.canvasWidth, this.canvasHeight);
+ }
+
+ if (highlight.elementInfo) {
+ _drawElementTitle(highlight.elementInfo, highlight.colorFormat, bounds, this.canvasWidth, this.canvasHeight);
+ }
+ }
+ if (highlight.gridInfo) {
+ for (const grid of highlight.gridInfo) {
+ drawLayoutGridHighlight(grid, context, this.deviceScaleFactor, this.canvasWidth, this.canvasHeight);
+ }
+ }
+ context.restore();
+
+ return {bounds: bounds};
+ }
+
+ drawGridHighlight(highlight) {
+ this.gridOverlay.drawGridHighlight(highlight, this.context, this.deviceScaleFactor);
+ }
+
+ _drawAxis(context, rulerAtRight, rulerAtBottom) {
+ if (this.window._gridPainted) {
+ return;
+ }
+ this.window._gridPainted = true;
+
+ context.save();
+
+ const pageFactor = this.pageZoomFactor * this.pageScaleFactor * this.emulationScaleFactor;
+ const scrollX = this.scrollX * this.pageScaleFactor;
+ const scrollY = this.scrollY * this.pageScaleFactor;
+ function zoom(x) {
+ return Math.round(x * pageFactor);
+ }
+ function unzoom(x) {
+ return Math.round(x / pageFactor);
+ }
+
+ const width = this.canvasWidth / pageFactor;
+ const height = this.canvasHeight / pageFactor;
+
+ const gridSubStep = 5;
+ const gridStep = 50;
+
+ {
+ // Draw X grid background
+ context.save();
+ context.fillStyle = gridBackgroundColor;
+ if (rulerAtBottom) {
+ context.fillRect(0, zoom(height) - 15, zoom(width), zoom(height));
+ } else {
+ context.fillRect(0, 0, zoom(width), 15);
+ }
+
+ // Clip out backgrounds intersection
+ context.globalCompositeOperation = 'destination-out';
+ context.fillStyle = 'red';
+ if (rulerAtRight) {
+ context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height));
+ } else {
+ context.fillRect(0, 0, 15, zoom(height));
+ }
+ context.restore();
+
+ // Draw Y grid background
+ context.fillStyle = gridBackgroundColor;
+ if (rulerAtRight) {
+ context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height));
+ } else {
+ context.fillRect(0, 0, 15, zoom(height));
+ }
+ }
+
+ context.lineWidth = 1;
+ context.strokeStyle = darkGridColor;
+ context.fillStyle = darkGridColor;
+ {
+ // Draw labels.
+ context.save();
+ context.translate(-scrollX, 0.5 - scrollY);
+ const maxY = height + unzoom(scrollY);
+ for (let y = 2 * gridStep; y < maxY; y += 2 * gridStep) {
+ context.save();
+ context.translate(scrollX, zoom(y));
+ context.rotate(-Math.PI / 2);
+ context.fillText(y, 2, rulerAtRight ? zoom(width) - 7 : 13);
+ context.restore();
+ }
+ context.translate(0.5, -0.5);
+ const maxX = width + unzoom(scrollX);
+ for (let x = 2 * gridStep; x < maxX; x += 2 * gridStep) {
+ context.save();
+ context.fillText(x, zoom(x) + 2, rulerAtBottom ? scrollY + zoom(height) - 7 : scrollY + 13);
+ context.restore();
+ }
+ context.restore();
+ }
+
+ {
+ // Draw vertical grid
+ context.save();
+ if (rulerAtRight) {
+ context.translate(zoom(width), 0);
+ context.scale(-1, 1);
+ }
+ context.translate(-scrollX, 0.5 - scrollY);
+ const maxY = height + unzoom(scrollY);
+ for (let y = gridStep; y < maxY; y += gridStep) {
+ context.beginPath();
+ context.moveTo(scrollX, zoom(y));
+ const markLength = (y % (gridStep * 2)) ? 5 : 8;
+ context.lineTo(scrollX + markLength, zoom(y));
+ context.stroke();
+ }
+ context.strokeStyle = lightGridColor;
+ for (let y = gridSubStep; y < maxY; y += gridSubStep) {
+ if (!(y % gridStep)) {
+ continue;
+ }
+ context.beginPath();
+ context.moveTo(scrollX, zoom(y));
+ context.lineTo(scrollX + gridSubStep, zoom(y));
+ context.stroke();
+ }
+ context.restore();
+ }
+
+ {
+ // Draw horizontal grid
+ context.save();
+ if (rulerAtBottom) {
+ context.translate(0, zoom(height));
+ context.scale(1, -1);
+ }
+ context.translate(0.5 - scrollX, -scrollY);
+ const maxX = width + unzoom(scrollX);
+ for (let x = gridStep; x < maxX; x += gridStep) {
+ context.beginPath();
+ context.moveTo(zoom(x), scrollY);
+ const markLength = (x % (gridStep * 2)) ? 5 : 8;
+ context.lineTo(zoom(x), scrollY + markLength);
+ context.stroke();
+ }
+ context.strokeStyle = lightGridColor;
+ for (let x = gridSubStep; x < maxX; x += gridSubStep) {
+ if (!(x % gridStep)) {
+ continue;
+ }
+ context.beginPath();
+ context.moveTo(zoom(x), scrollY);
+ context.lineTo(zoom(x), scrollY + gridSubStep);
+ context.stroke();
+ }
+ context.restore();
+ }
+
+ context.restore();
+ }
+}
const lightGridColor = 'rgba(0,0,0,0.2)';
const darkGridColor = 'rgba(0,0,0,0.7)';
@@ -44,151 +272,6 @@
/** @typedef {!Object<string, Array>} */
let AreaPaths; // eslint-disable-line no-unused-vars
-function _drawAxis(context, rulerAtRight, rulerAtBottom) {
- if (window._gridPainted) {
- return;
- }
- window._gridPainted = true;
-
- context.save();
-
- const pageFactor = pageZoomFactor * pageScaleFactor * emulationScaleFactor;
- const scrollX = window.scrollX * pageScaleFactor;
- const scrollY = window.scrollY * pageScaleFactor;
- function zoom(x) {
- return Math.round(x * pageFactor);
- }
- function unzoom(x) {
- return Math.round(x / pageFactor);
- }
-
- const width = canvasWidth / pageFactor;
- const height = canvasHeight / pageFactor;
-
- const gridSubStep = 5;
- const gridStep = 50;
-
- {
- // Draw X grid background
- context.save();
- context.fillStyle = gridBackgroundColor;
- if (rulerAtBottom) {
- context.fillRect(0, zoom(height) - 15, zoom(width), zoom(height));
- } else {
- context.fillRect(0, 0, zoom(width), 15);
- }
-
- // Clip out backgrounds intersection
- context.globalCompositeOperation = 'destination-out';
- context.fillStyle = 'red';
- if (rulerAtRight) {
- context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height));
- } else {
- context.fillRect(0, 0, 15, zoom(height));
- }
- context.restore();
-
- // Draw Y grid background
- context.fillStyle = gridBackgroundColor;
- if (rulerAtRight) {
- context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height));
- } else {
- context.fillRect(0, 0, 15, zoom(height));
- }
- }
-
- context.lineWidth = 1;
- context.strokeStyle = darkGridColor;
- context.fillStyle = darkGridColor;
- {
- // Draw labels.
- context.save();
- context.translate(-scrollX, 0.5 - scrollY);
- const maxY = height + unzoom(scrollY);
- for (let y = 2 * gridStep; y < maxY; y += 2 * gridStep) {
- context.save();
- context.translate(scrollX, zoom(y));
- context.rotate(-Math.PI / 2);
- context.fillText(y, 2, rulerAtRight ? zoom(width) - 7 : 13);
- context.restore();
- }
- context.translate(0.5, -0.5);
- const maxX = width + unzoom(scrollX);
- for (let x = 2 * gridStep; x < maxX; x += 2 * gridStep) {
- context.save();
- context.fillText(x, zoom(x) + 2, rulerAtBottom ? scrollY + zoom(height) - 7 : scrollY + 13);
- context.restore();
- }
- context.restore();
- }
-
- {
- // Draw vertical grid
- context.save();
- if (rulerAtRight) {
- context.translate(zoom(width), 0);
- context.scale(-1, 1);
- }
- context.translate(-scrollX, 0.5 - scrollY);
- const maxY = height + unzoom(scrollY);
- for (let y = gridStep; y < maxY; y += gridStep) {
- context.beginPath();
- context.moveTo(scrollX, zoom(y));
- const markLength = (y % (gridStep * 2)) ? 5 : 8;
- context.lineTo(scrollX + markLength, zoom(y));
- context.stroke();
- }
- context.strokeStyle = lightGridColor;
- for (let y = gridSubStep; y < maxY; y += gridSubStep) {
- if (!(y % gridStep)) {
- continue;
- }
- context.beginPath();
- context.moveTo(scrollX, zoom(y));
- context.lineTo(scrollX + gridSubStep, zoom(y));
- context.stroke();
- }
- context.restore();
- }
-
- {
- // Draw horizontal grid
- context.save();
- if (rulerAtBottom) {
- context.translate(0, zoom(height));
- context.scale(1, -1);
- }
- context.translate(0.5 - scrollX, -scrollY);
- const maxX = width + unzoom(scrollX);
- for (let x = gridStep; x < maxX; x += gridStep) {
- context.beginPath();
- context.moveTo(zoom(x), scrollY);
- const markLength = (x % (gridStep * 2)) ? 5 : 8;
- context.lineTo(zoom(x), scrollY + markLength);
- context.stroke();
- }
- context.strokeStyle = lightGridColor;
- for (let x = gridSubStep; x < maxX; x += gridSubStep) {
- if (!(x % gridStep)) {
- continue;
- }
- context.beginPath();
- context.moveTo(zoom(x), scrollY);
- context.lineTo(zoom(x), scrollY + gridSubStep);
- context.stroke();
- }
- context.restore();
- }
-
- context.restore();
-}
-
-export function doReset() {
- document.getElementById('tooltip-container').removeChildren();
- document.getElementById('grid-label-container').removeChildren();
- window._gridPainted = false;
-}
-
/**
* @param {!String} hexa
* @return {!Array<number>}
@@ -400,8 +483,10 @@
* @param {Object} elementInfo The highlight config object passed to drawHighlight
* @param {String} colorFormat
* @param {Object} bounds
+ * @param {number} canvasWidth
+ * @param {number} canvasHeight
*/
-function _drawElementTitle(elementInfo, colorFormat, bounds) {
+function _drawElementTitle(elementInfo, colorFormat, bounds, canvasWidth, canvasHeight) {
// Get the tooltip container and empty it, there can only be one tooltip displayed at the same time.
const tooltipContainer = document.getElementById('tooltip-container');
tooltipContainer.removeChildren();
@@ -495,50 +580,50 @@
return path;
}
-export function drawHighlight(highlight, context) {
- context = context || window.context;
+const DEFAULT_RULER_COLOR = 'rgba(128, 128, 128, 0.3)';
+
+function drawRulers(context, bounds, rulerAtRight, rulerAtBottom, color, dash, canvasWidth, canvasHeight) {
context.save();
-
- const bounds = emptyBounds();
-
- for (let paths = highlight.paths.slice(); paths.length;) {
- const path = paths.pop();
- context.save();
- drawPath(context, path.path, path.fillColor, path.outlineColor, bounds);
- if (paths.length) {
- context.globalCompositeOperation = 'destination-out';
- drawPath(context, paths[paths.length - 1].path, 'red', null, bounds);
- }
- context.restore();
+ const width = canvasWidth;
+ const height = canvasHeight;
+ context.strokeStyle = color || DEFAULT_RULER_COLOR;
+ context.lineWidth = 1;
+ context.translate(0.5, 0.5);
+ if (dash) {
+ context.setLineDash([3, 3]);
}
+
+ if (rulerAtRight) {
+ for (const y in bounds.rightmostXForY) {
+ context.beginPath();
+ context.moveTo(width, y);
+ context.lineTo(bounds.rightmostXForY[y], y);
+ context.stroke();
+ }
+ } else {
+ for (const y in bounds.leftmostXForY) {
+ context.beginPath();
+ context.moveTo(0, y);
+ context.lineTo(bounds.leftmostXForY[y], y);
+ context.stroke();
+ }
+ }
+
+ if (rulerAtBottom) {
+ for (const x in bounds.bottommostYForX) {
+ context.beginPath();
+ context.moveTo(x, height);
+ context.lineTo(x, bounds.topmostYForX[x]);
+ context.stroke();
+ }
+ } else {
+ for (const x in bounds.topmostYForX) {
+ context.beginPath();
+ context.moveTo(x, 0);
+ context.lineTo(x, bounds.topmostYForX[x]);
+ context.stroke();
+ }
+ }
+
context.restore();
-
- context.save();
-
- const rulerAtRight =
- highlight.paths.length && highlight.showRulers && bounds.minX < 20 && bounds.maxX + 20 < canvasWidth;
- const rulerAtBottom =
- highlight.paths.length && highlight.showRulers && bounds.minY < 20 && bounds.maxY + 20 < canvasHeight;
-
- if (highlight.showRulers) {
- _drawAxis(context, rulerAtRight, rulerAtBottom);
- }
-
- if (highlight.paths.length) {
- if (highlight.showExtensionLines) {
- drawRulers(context, bounds, rulerAtRight, rulerAtBottom);
- }
-
- if (highlight.elementInfo) {
- _drawElementTitle(highlight.elementInfo, highlight.colorFormat, bounds);
- }
- }
- if (highlight.gridInfo) {
- for (const grid of highlight.gridInfo) {
- drawLayoutGridHighlight(grid, context);
- }
- }
- context.restore();
-
- return {bounds: bounds};
}