Grid: Handle separate row/col color and dash and highlight on grid-template hover
This is based on the following backend change:
https://chromium-review.googlesource.com/c/chromium/src/+/2302230/
The feature that this change allows is for users to hover over
grid-template-rows and grid-template-columns. When doing so, the rows and
columns get highlighted in the page, accordingly.
The backend CL emits separate information for rows and cols to make this
possible, so this frontend change contains overlay updates to deal with
this.
This frontend change also contains the necessary code to do the on-hover
highlight.
2 ideas for follow-up changes:
* Only showing the explicitly defined lines when hovering
over grid-template-rows/columns, since those are the ones defined by
these properties.
* Show the track sizing labels and line name labels when those do land
since these are also defined by grid-template-rows/columns properties.
Change-Id: I0fed00f16a060fcba303a25e2d47d2d7df06bf5c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2302429
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Brandon Goddard <[email protected]>
Commit-Queue: Patrick Brosset <[email protected]>
diff --git a/front_end/inspector_overlay/highlight_common.js b/front_end/inspector_overlay/highlight_common.js
index 9fb3ee0..230c9dc 100644
--- a/front_end/inspector_overlay/highlight_common.js
+++ b/front_end/inspector_overlay/highlight_common.js
@@ -32,11 +32,17 @@
// @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) {
+ drawHorizontalRulers(context, bounds, rulerAtRight, color, dash);
+ drawVerticalRulers(context, bounds, rulerAtBottom, color, dash);
+}
+
+export function drawHorizontalRulers(context, bounds, rulerAtRight, color = DEFAULT_RULER_COLOR, dash = false) {
context.save();
const width = canvasWidth;
- const height = canvasHeight;
- context.strokeStyle = color || 'rgba(128, 128, 128, 0.3)';
+ context.strokeStyle = color;
context.lineWidth = 1;
context.translate(0.5, 0.5);
if (dash) {
@@ -59,6 +65,19 @@
}
}
+ context.restore();
+}
+
+export function drawVerticalRulers(context, bounds, rulerAtBottom, color = DEFAULT_RULER_COLOR, dash = false) {
+ context.save();
+ const height = canvasHeight;
+ context.strokeStyle = color;
+ context.lineWidth = 1;
+ context.translate(0.5, 0.5);
+ if (dash) {
+ context.setLineDash([3, 3]);
+ }
+
if (rulerAtBottom) {
for (const x in bounds.bottommostYForX) {
context.beginPath();
