DevTools: Let the grid overlay frontend know what writing-mode the grid is in

Right now, the grid overlay does not support vertical writing modes.
The grid information collected by the backend (track and gap breadth, etc.) is collected "logically", as if the grid
was in its default horizontal-tb mode.

The approach here is to add the writing-mode value to the grid info object sent to the grid overlay frontend so it can
apply the right transformation, as a whole, to the overlay.

I decided not to convert coordinates on the backend as I thought the code would become quickly difficult to read and
maintain as opposed to applying a transform on the frontend canvas which would achieve the same thing.

In both cases anyway, displaying grid labels so they point to the right place has to be done on the frontend, so
doing the writing-mode transformation on the front-end means we do everything there, making it easier to follow.

Corresponding frontend CL: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2364455/

Bug: 1096971
Change-Id: I27fc7b24d73581439cd1fb9c5dd6e4c19d4846d0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2363050
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799660}

third_party/blink/renderer/core/inspector/inspector_highlight.cc

@@ -34,6 +34,7 @@
 #include "third_party/blink/renderer/platform/geometry/float_point.h"
 #include "third_party/blink/renderer/platform/geometry/layout_unit.h"
 #include "third_party/blink/renderer/platform/graphics/path.h"
+#include "third_party/blink/renderer/platform/text/writing_mode.h"
 #include "third_party/blink/renderer/platform/web_test_support.h"
 
 namespace blink {
@@ -685,6 +686,20 @@ int GetRotationAngle(LayoutGrid* layout_grid) {
   return bearing - local_vector_bearing;
 }
 
+String GetWritingMode(const LayoutGrid* layout_grid) {
+  // The grid overlay uses this to flip the grid lines and labels accordingly.
+  // lr, lr-tb, rl, rl-tb, tb, and tb-rl are deprecated and not handled here.
+  // sideways-lr and sideways-rl are not supported yet and not handled here.
+  WritingMode writing_mode = layout_grid->StyleRef().GetWritingMode();
+  if (writing_mode == WritingMode::kVerticalLr) {
+    return "vertical-lr";
+  }
+  if (writing_mode == WritingMode::kVerticalRl) {
+    return "vertical-rl";
+  }
+  return "horizontal-tb";
+}
+
 // Gets the list of authored track size values resolving repeat() functions
 // and skipping line names.
 Vector<String> GetAuthoredGridTrackSizes(const CSSValue* value,
@@ -763,6 +778,12 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
 
   grid_info->setInteger("rotationAngle", GetRotationAngle(layout_grid));
 
+  // The grid track information collected in this method and sent to the overlay
+  // frontend assumes that the grid layout is in a horizontal-tb writing-mode.
+  // It is the responsibility of the frontend to flip the rendering of the grid
+  // overlay based on the following writingMode value.
+  grid_info->setString("writingMode", GetWritingMode(layout_grid));
+
   auto row_gap =
       layout_grid->GridGap(kForRows) + layout_grid->GridItemOffset(kForRows);
   auto column_gap = layout_grid->GridGap(kForColumns) +

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-area-expected.txt

@@ -98,6 +98,7 @@ grid-with-areas{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 97.75,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-direction-expected.txt

@@ -99,6 +99,7 @@ ltrGrid{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 18,
@@ -358,6 +359,7 @@ rtlGrid{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 48,
@@ -617,6 +619,7 @@ ltrGridGap{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 18,
@@ -882,6 +885,7 @@ rtlGridGap{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 32,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-expected.txt

@@ -99,6 +99,7 @@ paddedGrid{
   "gridInfo": [
     {
       "rotationAngle": -90,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 173,
@@ -394,6 +395,7 @@ nestedGrid{
   "gridInfo": [
     {
       "rotationAngle": -90,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 228,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-huge-expected.txt

@@ -98,6 +98,7 @@ big-grid{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 10.5,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-line-names-expected.txt

@@ -98,6 +98,7 @@ grid-with-line-names{
   "gridInfo": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 50,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-writing-mode.js

+// 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.
+
+(async function() {
+  TestRunner.addResult(`This test verifies that similarly-sized grids with different writing-modes share the same grid information but have a different writingMode value.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      .grid {
+        position: absolute;
+        top: 50px;
+        left: 50px;
+        display: grid;
+        grid-template-rows: 20px 50px;
+        grid-template-columns: 100px 200px;
+        gap: 10px;
+      }
+      #verticalRl {
+        writing-mode: vertical-rl;
+      }
+      #verticalLr {
+        writing-mode: vertical-lr;
+      }
+      #sidewaysRl {
+        writing-mode: sideways-rl;
+      }
+      </style>
+
+      <p id="description">This test verifies that similarly-sized grids with different writing-modes share the same grid information but have a different writingMode value.</p>
+      <div>
+          <div class="grid" id="horizontalTb">
+              <div style="background: burlywood">1</div>
+              <div style="background: cadetblue">2</div>
+              <div style="background: aquamarine">3</div>
+              <div style="background: peachpuff">4</div>
+          </div>
+          <div class="grid" id="verticalRl">
+            <div style="background: burlywood">1</div>
+            <div style="background: cadetblue">2</div>
+            <div style="background: aquamarine">3</div>
+            <div style="background: peachpuff">4</div>
+          </div>
+          <div class="grid" id="verticalLr">
+            <div style="background: burlywood">1</div>
+            <div style="background: cadetblue">2</div>
+            <div style="background: aquamarine">3</div>
+            <div style="background: peachpuff">4</div>
+          </div>
+          <div class="grid" id="sidewaysRl">
+            <div style="background: burlywood">1</div>
+            <div style="background: cadetblue">2</div>
+            <div style="background: aquamarine">3</div>
+            <div style="background: peachpuff">4</div>
+          </div>
+      </div>
+  `);
+
+  function getWritingMode(highlightObject) {
+    return highlightObject.gridInfo[0].writingMode;
+  }
+
+  function getGridInfo(highlightObject) {
+    const info = highlightObject.gridInfo[0];
+    // Drop the writingMode property as it's the only one that differs, and we want to compare the rest.
+    return JSON.stringify(info, (key, value) => key === 'writingMode' ? undefined : value, 2)
+  }
+
+  const horizontalTbNode = await ElementsTestRunner.nodeWithIdPromise('horizontalTb');
+  const horizontalTbHighlight = await TestRunner.OverlayAgent.getHighlightObjectForTest(horizontalTbNode.id);
+  const horizontalTbInfo = getGridInfo(horizontalTbHighlight);
+
+  TestRunner.addResult(`Node id #horizontalTb writing-mode: ${getWritingMode(horizontalTbHighlight)}`);
+  TestRunner.addResult(`Grid info: ${horizontalTbInfo}`);
+
+  for (const id of ['verticalRl', 'verticalLr', 'sidewaysRl']) {
+    const node = await ElementsTestRunner.nodeWithIdPromise(id);
+    const result = await TestRunner.OverlayAgent.getHighlightObjectForTest(node.id);
+    const gridInfo = getGridInfo(result);
+
+    TestRunner.addResult(`Node id #${id} writing-mode: ${getWritingMode(result)}`);
+    TestRunner.addResult(`Grid info: ${gridInfo}`);
+    TestRunner.addResult(`Should be the same as #horizontalTb: ${gridInfo === horizontalTbInfo}`)
+  }
+
+  TestRunner.completeTest();
+})();

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-huge-expected.txt

@@ -4,6 +4,7 @@ This test verifies that huge CSS grids can be highlighted with the grid Highligh
   "gridHighlights": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 10.5,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-iframe-expected.txt

@@ -4,6 +4,7 @@ This test verifies that persistent grid in iframe are positioned correctly.
   "gridHighlights": [
     {
       "rotationAngle": 0,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 158,

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-multiple-css-grid-expected.txt

@@ -4,6 +4,7 @@ This test verifies the position and size of the highlight rectangles overlayed o
   "gridHighlights": [
     {
       "rotationAngle": -90,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 173,
@@ -200,6 +201,7 @@ This test verifies the position and size of the highlight rectangles overlayed o
     },
     {
       "rotationAngle": -90,
+      "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
           "x": 108,