Grid overlay: allow explicit writing-mode transform root

Use an optional writingModeRoot to transform vertical grid overlays from the correct origin.

Bug: 40215569
Change-Id: I96ced9ebd8028920c6ed5ce53d35cab3e8c4c7aa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7632884
Reviewed-by: Paul Irish <paulirish@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Helmut Januschka <helmut@januschka.com>

Author: hjanuschka

inspector_overlay/BUILD.gn

@@ -113,6 +113,7 @@ ts_library("unittests") {
     "css_grid_label_helpers.test.ts",
     "highlight_common.test.ts",
     "highlight_flex_common.test.ts",
+    "highlight_grid_common.test.ts",
     "tool_highlight.test.ts",
     "tool_source_order.test.ts",
     "tool_window_controls.test.ts",

inspector_overlay/highlight_grid_common.test.ts

@@ -0,0 +1,72 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type {Position} from './common.js';
+import {drawLayoutGridHighlight, type GridHighlight} from './highlight_grid_common.js';
+import {getGridAreaNameLabelContainer, initFrameForGridLabels} from './testing/InspectorOverlayHelpers.js';
+
+function createGridHighlight(writingModeRoot?: Position): GridHighlight {
+  const areaPath: Array<string|number> = ['M', 100, 100, 'L', 200, 100, 'L', 200, 200, 'L', 100, 200, 'Z'];
+
+  return {
+    gridBorder: areaPath,
+    writingMode: 'vertical-rl',
+    writingModeRoot,
+    rowGaps: [],
+    rotationAngle: 0,
+    columnGaps: [],
+    rows: [],
+    columns: [],
+    areaNames: {foo: areaPath},
+    gridHighlightConfig: {
+      gridBorderDash: false,
+      rowLineDash: false,
+      columnLineDash: false,
+      showGridExtensionLines: false,
+      showPositiveLineNumbers: false,
+      showNegativeLineNumbers: false,
+      rowLineColor: '',
+      columnLineColor: '',
+      rowHatchColor: '',
+      columnHatchColor: '',
+      showLineNames: false,
+    },
+  };
+}
+
+function drawGridAndGetAreaLabel(highlight: GridHighlight): HTMLElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = 500;
+  canvas.height = 500;
+
+  const context = canvas.getContext('2d');
+  assert.instanceOf(context, CanvasRenderingContext2D);
+
+  drawLayoutGridHighlight(highlight, context, 1, canvas.width, canvas.height, 1, {gridLayerCounter: 1});
+
+  const areaLabelsContainer = getGridAreaNameLabelContainer(1);
+  const label = areaLabelsContainer.querySelector('.grid-label-content');
+  assert.exists(label, `Expected area label, container html: ${areaLabelsContainer.innerHTML}`);
+  assert.instanceOf(label, HTMLElement);
+
+  return label;
+}
+
+describe('drawLayoutGridHighlight', () => {
+  beforeEach(initFrameForGridLabels);
+
+  it('positions area labels in vertical-rl mode from grid bounds by default', () => {
+    const label = drawGridAndGetAreaLabel(createGridHighlight());
+
+    assert.strictEqual(label.style.left, '100px');
+    assert.strictEqual(label.style.top, '100px');
+  });
+
+  it('positions area labels in vertical-rl mode from writingModeRoot when provided', () => {
+    const label = drawGridAndGetAreaLabel(createGridHighlight({x: 150, y: 100}));
+
+    assert.strictEqual(label.style.left, '150px');
+    assert.strictEqual(label.style.top, '50px');
+  });
+});

inspector_overlay/highlight_grid_common.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {AreaBounds, Bounds} from './common.js';
+import type {AreaBounds, Bounds, Position} from './common.js';
 import {drawGridLabels, type GridLabelState, isHorizontalWritingMode} from './css_grid_label_helpers.js';
 import {applyMatrixToPoint, buildPath, emptyBounds, hatchFillPath} from './highlight_common.js';
 
@@ -188,6 +188,7 @@ export const gridStyle = `
 export interface GridHighlight {
   gridBorder: Array<string|number>;
   writingMode: string;
+  writingModeRoot?: Position;
   rowGaps: Array<string|number>;
   rotationAngle: number;
   columnGaps: Array<string|number>;
@@ -222,7 +223,7 @@ export function drawLayoutGridHighlight(
 
   // Transform the context to match the current writing-mode.
   context.save();
-  applyWritingModeTransformation(highlight.writingMode, gridBounds, context);
+  applyWritingModeTransformation(highlight.writingMode, gridBounds, context, highlight.writingModeRoot);
 
   // Draw grid background
   if (highlight.gridHighlightConfig.gridBackgroundColor) {
@@ -285,21 +286,23 @@ export function drawLayoutGridHighlight(
       writingModeMatrix);
 }
 
-function applyWritingModeTransformation(writingMode: string, gridBounds: Bounds, context: CanvasRenderingContext2D) {
+function applyWritingModeTransformation(
+    writingMode: string, gridBounds: Bounds, context: CanvasRenderingContext2D, writingModeRoot?: Position) {
   if (isHorizontalWritingMode(writingMode)) {
     return;
   }
 
   const topLeft = gridBounds.allPoints[0];
   const topRight = gridBounds.allPoints[1];
   const bottomLeft = gridBounds.allPoints[3];
+  const origin = writingModeRoot ?? topLeft;
 
-  // Move to the top-left corner to do all transformations there.
-  context.translate(topLeft.x, topLeft.y);
+  // Move to the origin corner to do all transformations there.
+  context.translate(origin.x, origin.y);
 
   if (writingMode === 'vertical-rl' || writingMode === 'sideways-rl') {
     context.rotate(90 * Math.PI / 180);
-    context.translate(0, -1 * (bottomLeft.y - topLeft.y));
+    context.translate(0, -(bottomLeft.y - topLeft.y));
   }
 
   if (writingMode === 'vertical-lr') {
@@ -309,11 +312,11 @@ function applyWritingModeTransformation(writingMode: string, gridBounds: Bounds,
 
   if (writingMode === 'sideways-lr') {
     context.rotate(-90 * Math.PI / 180);
-    context.translate(-1 * (topRight.x - topLeft.x), 0);
+    context.translate(-(topRight.x - topLeft.x), 0);
   }
 
   // Move back to the original point.
-  context.translate(topLeft.x * -1, topLeft.y * -1);
+  context.translate(-origin.x, -origin.y);
 }
 
 function drawGridLines(