DevTools: Add 2D positions for line name labels in the overlay

Bug: 1106681
Change-Id: Id67b1669a0b97e57e0fba13e123cf98efece1272
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2328859Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Cr-Commit-Position: refs/heads/master@{#793378}

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

@@ -684,22 +684,35 @@ std::unique_ptr<protocol::ListValue> BuildGridLineNames(
       direction == kForColumns ? layout_grid->StyleRef().NamedGridColumnLines()
                                : layout_grid->StyleRef().NamedGridRowLines();
   LayoutUnit gap = layout_grid->GridGap(direction);
-  LayoutUnit firstOffset = tracks.front();
+  LayoutUnit first_offset = tracks.front();
+  const Vector<LayoutUnit>& alt_positions = direction == kForRows
+                                                ? layout_grid->ColumnPositions()
+                                                : layout_grid->RowPositions();
+  LayoutUnit alt_axis_pos = alt_positions.front();
 
   for (const auto& item : named_lines_map) {
     const String& name = item.key;
 
     for (const size_t index : item.value) {
-      std::unique_ptr<protocol::DictionaryValue> line =
-          protocol::DictionaryValue::create();
-
       LayoutUnit track = tracks.at(index);
-      line->setString("name", name);
 
       LayoutUnit gap_offset =
           index > 0 && index < tracks.size() - 1 ? gap / 2 : LayoutUnit();
-      line->setValue("offset", protocol::FundamentalValue::create(
-                                   (track - gap_offset - firstOffset) * scale));
+
+      LayoutUnit main_axis_pos = track - gap_offset - first_offset;
+      PhysicalOffset line_name_pos(main_axis_pos, alt_axis_pos);
+
+      if (direction == kForRows)
+        line_name_pos = Transpose(line_name_pos);
+
+      std::unique_ptr<protocol::DictionaryValue> line = BuildPosition(
+          LocalToAbsolutePoint(layout_grid, line_name_pos, scale));
+
+      line->setString("name", name);
+      // TODO (alexrudenko): offset should be removed once the frontend starts
+      // using absolute positions.
+      line->setValue("offset",
+                     protocol::FundamentalValue::create(main_axis_pos * scale));
 
       lines->pushValue(std::move(line));
     }

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

@@ -410,56 +410,82 @@ grid-with-line-names{
       "areaNames": {},
       "rowLineNameOffsets": [
         {
+          "x": 0,
+          "y": 205,
           "name": "article",
           "offset": 205
         },
         {
+          "x": 0,
+          "y": 0,
           "name": "header",
           "offset": 0
         },
         {
+          "x": 0,
+          "y": 205,
           "name": "main",
           "offset": 205
         },
         {
+          "x": 0,
+          "y": 830,
           "name": "end",
           "offset": 830
         },
         {
+          "x": 0,
+          "y": 205,
           "name": "section",
           "offset": 205
         },
         {
+          "x": 0,
+          "y": 415,
           "name": "section",
           "offset": 415
         },
         {
+          "x": 0,
+          "y": 625,
           "name": "section",
           "offset": 625
         },
         {
+          "x": 0,
+          "y": 205,
           "name": "images",
           "offset": 205
         }
       ],
       "columnLineNameOffsets": [
         {
+          "x": 105,
+          "y": 0,
           "name": "header",
           "offset": 105
         },
         {
+          "x": 105,
+          "y": 0,
           "name": "content-start",
           "offset": 105
         },
         {
+          "x": 640,
+          "y": 0,
           "name": "fullpage-end",
           "offset": 640
         },
         {
+          "x": 0,
+          "y": 0,
           "name": "fullpage-start",
           "offset": 0
         },
         {
+          "x": 615,
+          "y": 0,
           "name": "content-end",
           "offset": 615
         }