DevTools: Backend support for drawing flex self-alignment in the overlay

This lets DevTools configure how it wants to draw the alignment part of
the overlay, and sends the current align-items value to the overlay
frontend.

The actual drawing is done by the overlay frontend code, in this CL:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2552427/

Bug: 1139949
Change-Id: I89e4f9210facb9a34ce2d46c4b96895debd6fa91
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2552282Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#831298}

third_party/blink/public/devtools_protocol/browser_protocol.pdl

@@ -5680,6 +5680,8 @@ experimental domain Overlay
       optional BoxStyle rowGapSpace
       # Style of empty space caused by columns gaps (gap/column-gap).
       optional BoxStyle columnGapSpace
+      # Style of the self-alignment line (align-items).
+      optional LineStyle crossAlignment
 
   # Style information for drawing a line.
   type LineStyle extends object

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

@@ -426,6 +426,8 @@ BuildFlexContainerHighlightConfigInfo(
                        "rowGapSpace");
   AppendBoxStyleConfig(flex_config.column_gap_space, flex_config_info,
                        "columnGapSpace");
+  AppendLineStyleConfig(flex_config.cross_alignment, flex_config_info,
+                        "crossAlignment");
 
   return flex_config_info;
 }
@@ -923,6 +925,8 @@ std::unique_ptr<protocol::DictionaryValue> BuildFlexInfo(
     const InspectorFlexContainerHighlightConfig&
         flex_container_highlight_config,
     float scale) {
+  CSSComputedStyleDeclaration* style =
+      MakeGarbageCollected<CSSComputedStyleDeclaration>(node, true);
   LocalFrameView* containing_view = node->GetDocument().View();
   LayoutObject* layout_object = node->GetLayoutObject();
   auto* layout_box = To<LayoutBox>(layout_object);
@@ -964,6 +968,9 @@ std::unique_ptr<protocol::DictionaryValue> BuildFlexInfo(
   flex_info->setValue("containerBorder", container_builder.Release());
   flex_info->setArray("lines", std::move(lines_info));
   flex_info->setBoolean("isHorizontalFlow", is_horizontal);
+  flex_info->setString(
+      "alignItemsStyle",
+      style->GetPropertyCSSValue(CSSPropertyID::kAlignItems)->CssText());
   flex_info->setValue(
       "flexContainerHighlightConfig",
       BuildFlexContainerHighlightConfigInfo(flex_container_highlight_config));
@@ -1903,6 +1910,8 @@ InspectorHighlight::DefaultFlexContainerConfig() {
       base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
   config.column_gap_space =
       base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
+  config.cross_alignment =
+      base::Optional<LineStyle>(InspectorHighlight::DefaultLineStyle());
   return config;
 }
 

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

@@ -98,6 +98,7 @@ struct CORE_EXPORT InspectorFlexContainerHighlightConfig {
   base::Optional<BoxStyle> cross_distributed_space;
   base::Optional<BoxStyle> row_gap_space;
   base::Optional<BoxStyle> column_gap_space;
+  base::Optional<LineStyle> cross_alignment;
 };
 
 struct CORE_EXPORT InspectorHighlightConfig {

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

@@ -1541,6 +1541,8 @@ InspectorOverlayAgent::ToFlexContainerHighlightConfig(
       InspectorOverlayAgent::ToBoxStyle(config->getRowGapSpace(nullptr));
   highlight_config->column_gap_space =
       InspectorOverlayAgent::ToBoxStyle(config->getColumnGapSpace(nullptr));
+  highlight_config->cross_alignment =
+      InspectorOverlayAgent::ToLineStyle(config->getCrossAlignment(nullptr));
 
   return highlight_config;
 }

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-alignment.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 the flex self-alignment value sent by the backend.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      html, body {
+        margin: 0;
+      }
+      .container {
+        width: 100px;
+        height: 100px;
+        display: flex;
+      }
+      button {
+        width: 50px;
+        height: 50px;
+        border: 0;
+        padding: 0;
+      }
+      </style>
+      <div id="flex-start" class="container" style="align-items:flex-start"><div class="item"></div></div>
+      <div id="flex-end" class="container" style="align-items:flex-end"><div class="item"></div></div>
+      <div id="center" class="container" style="align-items:center"><div class="item"></div></div>
+      <div id="stretch" class="container" style="align-items:stretch"><div class="item"></div></div>
+      <div id="normal" class="container" style="align-items:normal"><div class="item"></div></div>
+      <p id="description">This test verifies the flex self-alignment value sent by the backend.</p>
+    `);
+
+  function dumpFlexHighlight(id) {
+    return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
+  }
+
+  await dumpFlexHighlight('flex-start');
+  await dumpFlexHighlight('flex-end');
+  await dumpFlexHighlight('center');
+  await dumpFlexHighlight('stretch');
+  await dumpFlexHighlight('normal');
+
+  TestRunner.completeTest();
+})();

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

@@ -162,6 +162,7 @@ flex-container{
         ]
       ],
       "isHorizontalFlow": true,
+      "alignItemsStyle": "normal",
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -190,6 +191,10 @@ flex-container{
         "columnGapSpace": {
           "fillColor": "rgba(255, 0, 0, 0)",
           "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
         }
       }
     }

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

@@ -209,6 +209,7 @@ flex-container{
         ]
       ],
       "isHorizontalFlow": true,
+      "alignItemsStyle": "normal",
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -237,6 +238,10 @@ flex-container{
         "columnGapSpace": {
           "fillColor": "rgba(255, 0, 0, 0)",
           "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
         }
       }
     }