DevTools: add showTrackSizes parameter to grid overlay

Adds a new option to GridHighlightConfig to display grid track sizes.

Screenshot: https://i.imgur.com/JjSr5v2.png
Frontend CL: https://crrev.com/c/2300099

Change-Id: Ic2a105128bce8c67ee41c3a153808ac171e5ea98
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2299343
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789873}

third_party/blink/public/devtools_protocol/browser_protocol.pdl

@@ -5289,6 +5289,8 @@ experimental domain Overlay
       optional boolean showAreaNames
       # Show line name labels (default: false).
       optional boolean showLineNames
+      # Show track size labels (default: false).
+      optional boolean showTrackSizes
       # The grid container border highlight color (default: transparent).
       optional DOM.RGBA gridBorderColor
       # The cell border color (default: transparent).

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

@@ -25,6 +25,7 @@
 #include "third_party/blink/renderer/core/page/chrome_client.h"
 #include "third_party/blink/renderer/core/page/page.h"
 #include "third_party/blink/renderer/core/style/computed_style_constants.h"
+#include "third_party/blink/renderer/core/style/grid_positions_resolver.h"
 #include "third_party/blink/renderer/platform/graphics/path.h"
 #include "third_party/blink/renderer/platform/web_test_support.h"
 
@@ -402,6 +403,39 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridHighlightConfigInfo(
   return grid_config_info;
 }
 
+std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
+    LayoutGrid* layout_grid,
+    GridTrackSizingDirection direction,
+    float scale,
+    LayoutUnit gap) {
+  std::unique_ptr<protocol::ListValue> sizes = protocol::ListValue::create();
+
+  unsigned i = 0;
+  float start = 0;
+  for (LayoutUnit track : layout_grid->TrackSizesForComputedStyle(direction)) {
+    if (i > 0)
+      start += gap;
+    std::unique_ptr<protocol::DictionaryValue> size_info =
+        protocol::DictionaryValue::create();
+    auto adjusted_size = AdjustForAbsoluteZoom::AdjustFloat(
+        track.ToFloat() * scale, layout_grid->StyleRef());
+    size_info->setDouble("computedSize", adjusted_size);
+    // TODO (alexrudenko): Add authored sizes here
+    float offset = start + track / 2;
+    FloatPoint local_arrow_pos(direction == kForColumns ? offset : 0,
+                               direction == kForColumns ? 0 : offset);
+    FloatPoint abs_arrow_pos =
+        layout_grid->LocalToAbsoluteFloatPoint(local_arrow_pos);
+    size_info->setDouble("x", abs_arrow_pos.X());
+    size_info->setDouble("y", abs_arrow_pos.Y());
+    sizes->pushValue(std::move(size_info));
+    start += track;
+    i++;
+  }
+
+  return sizes;
+}
+
 std::unique_ptr<protocol::ListValue> BuildGridPositiveLineNumberOffsets(
     LayoutGrid* layout_grid,
     const Vector<LayoutUnit>& trackPositions,
@@ -549,6 +583,22 @@ std::unique_ptr<protocol::ListValue> BuildGridLineNames(
   return lines;
 }
 
+// Gets the rotation angle of the grid layout (clock-wise).
+int GetRotationAngle(LayoutGrid* layout_grid) {
+  // Local vector has 135deg bearing to the Y axis.
+  int local_vector_bearing = 135;
+  FloatPoint local_a(0, 0);
+  FloatPoint local_b(1, 1);
+  FloatPoint abs_a = layout_grid->LocalToAbsoluteFloatPoint(local_a);
+  FloatPoint abs_b = layout_grid->LocalToAbsoluteFloatPoint(local_b);
+  // Compute bearing of the absolute vector against the Y axis.
+  double theta = atan2(abs_b.X() - abs_a.X(), abs_a.Y() - abs_b.Y());
+  if (theta < 0.0)
+    theta += kTwoPiDouble;
+  int bearing = std::round(rad2deg(theta));
+  return bearing - local_vector_bearing;
+}
+
 std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
     LocalFrameView* containing_view,
     LayoutGrid* layout_grid,
@@ -561,11 +611,22 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
   const auto& rows = layout_grid->RowPositions();
   const auto& columns = layout_grid->ColumnPositions();
 
+  grid_info->setInteger("rotationAngle", GetRotationAngle(layout_grid));
+
   auto row_gap =
       layout_grid->GridGap(kForRows) + layout_grid->GridItemOffset(kForRows);
   auto column_gap = layout_grid->GridGap(kForColumns) +
                     layout_grid->GridItemOffset(kForColumns);
 
+  if (grid_highlight_config.show_track_sizes) {
+    grid_info->setValue(
+        "columnTrackSizes",
+        BuildGridTrackSizes(layout_grid, kForColumns, scale, column_gap));
+    grid_info->setValue(
+        "rowTrackSizes",
+        BuildGridTrackSizes(layout_grid, kForRows, scale, row_gap));
+  }
+
   PathBuilder row_builder;
   PathBuilder row_gap_builder;
   LayoutUnit row_left = columns.front();
@@ -780,7 +841,8 @@ InspectorGridHighlightConfig::InspectorGridHighlightConfig()
       show_positive_line_numbers(false),
       show_negative_line_numbers(false),
       show_area_names(false),
-      show_line_names(false) {}
+      show_line_names(false),
+      show_track_sizes(false) {}
 
 InspectorHighlight::InspectorHighlight(
     Node* node,
@@ -1332,6 +1394,7 @@ InspectorGridHighlightConfig InspectorHighlight::DefaultGridConfig() {
   config.show_line_names = true;
   config.grid_border_dash = false;
   config.cell_border_dash = true;
+  config.show_track_sizes = true;
   return config;
 }
 

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

@@ -39,6 +39,7 @@ struct CORE_EXPORT InspectorGridHighlightConfig {
   bool show_negative_line_numbers;
   bool show_area_names;
   bool show_line_names;
+  bool show_track_sizes;
 };
 
 struct CORE_EXPORT InspectorHighlightConfig {

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

@@ -1375,6 +1375,7 @@ InspectorOverlayAgent::ToGridHighlightConfig(
       config->getShowGridExtensionLines(false);
   highlight_config->grid_border_dash = config->getGridBorderDash(false);
   highlight_config->cell_border_dash = config->getCellBorderDash(false);
+  highlight_config->show_track_sizes = config->getShowTrackSizes(false);
   highlight_config->grid_color =
       InspectorDOMAgent::ParseColor(config->getGridBorderColor(nullptr));
   highlight_config->cell_color =

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

@@ -97,6 +97,31 @@ grid-with-areas{
   },
   "gridInfo": [
     {
+      "rotationAngle": 0,
+      "columnTrackSizes": [
+        {
+          "computedSize": 195.5,
+          "x": 97.75,
+          "y": 0
+        },
+        {
+          "computedSize": 195.5,
+          "x": 303.25,
+          "y": 0
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 295.5,
+          "x": 0,
+          "y": 147.75
+        },
+        {
+          "computedSize": 295.5,
+          "x": 0,
+          "y": 453.25
+        }
+      ],
       "rows": [
         "M",
         0,

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

@@ -98,6 +98,31 @@ paddedGrid{
   },
   "gridInfo": [
     {
+      "rotationAngle": -90,
+      "columnTrackSizes": [
+        {
+          "computedSize": 50,
+          "x": 118,
+          "y": 1173
+        },
+        {
+          "computedSize": 200,
+          "x": 118,
+          "y": 1023
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 25,
+          "x": 130.5,
+          "y": 1198
+        },
+        {
+          "computedSize": 25,
+          "x": 170.5,
+          "y": 1198
+        }
+      ],
       "rows": [
         "M",
         173,
@@ -334,6 +359,31 @@ nestedGrid{
   },
   "gridInfo": [
     {
+      "rotationAngle": -90,
+      "columnTrackSizes": [
+        {
+          "computedSize": 50,
+          "x": 228,
+          "y": 1083
+        },
+        {
+          "computedSize": 200,
+          "x": 228,
+          "y": 958
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 25,
+          "x": 240.5,
+          "y": 1108
+        },
+        {
+          "computedSize": 25,
+          "x": 265.5,
+          "y": 1108
+        }
+      ],
       "rows": [
         "M",
         228,

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

@@ -97,6 +97,46 @@ grid-with-line-names{
   },
   "gridInfo": [
     {
+      "rotationAngle": 0,
+      "columnTrackSizes": [
+        {
+          "computedSize": 100,
+          "x": 50,
+          "y": 0
+        },
+        {
+          "computedSize": 500,
+          "x": 360,
+          "y": 0
+        },
+        {
+          "computedSize": 20,
+          "x": 630,
+          "y": 0
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 200,
+          "x": 0,
+          "y": 100
+        },
+        {
+          "computedSize": 200,
+          "x": 0,
+          "y": 310
+        },
+        {
+          "computedSize": 200,
+          "x": 0,
+          "y": 520
+        },
+        {
+          "computedSize": 200,
+          "x": 0,
+          "y": 730
+        }
+      ],
       "rows": [
         "M",
         0,

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

@@ -3,6 +3,31 @@ This test verifies the position and size of the highlight rectangles overlayed o
 {
   "gridHighlights": [
     {
+      "rotationAngle": -90,
+      "columnTrackSizes": [
+        {
+          "computedSize": 50,
+          "x": 118,
+          "y": 1173
+        },
+        {
+          "computedSize": 200,
+          "x": 118,
+          "y": 1023
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 25,
+          "x": 130.5,
+          "y": 1198
+        },
+        {
+          "computedSize": 25,
+          "x": 170.5,
+          "y": 1198
+        }
+      ],
       "rows": [
         "M",
         173,
@@ -140,6 +165,31 @@ This test verifies the position and size of the highlight rectangles overlayed o
       "isPrimaryGrid": true
     },
     {
+      "rotationAngle": -90,
+      "columnTrackSizes": [
+        {
+          "computedSize": 50,
+          "x": 108,
+          "y": 1183
+        },
+        {
+          "computedSize": 1200,
+          "x": 108,
+          "y": 508
+        }
+      ],
+      "rowTrackSizes": [
+        {
+          "computedSize": 100,
+          "x": 158,
+          "y": 1208
+        },
+        {
+          "computedSize": 100,
+          "x": 278,
+          "y": 1208
+        }
+      ],
       "rows": [
         "M",
         108,