DevTools: let CDP clients configure how empty space looks in flex overlay

In the DevTools flex tooling project, we want to be able to control how
the empty space (created by justify-content, align-content and gap
properties) look.
We want to do so in a way that allows to highlight just one, or several
of them.

So this CL simply adds the required properties to the corresponding CDP
types as well as handling of this data so it goes to the overlay
frontend.

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

third_party/blink/public/devtools_protocol/browser_protocol.pdl

@@ -5652,6 +5652,14 @@ experimental domain Overlay
       optional LineStyle lineSeparator
       # The style of the separator between items
       optional LineStyle itemSeparator
+      # Style of content-distribution space on the main axis (justify-content).
+      optional BoxStyle mainDistributedSpace
+      # Style of content-distribution space on the cross axis (align-content).
+      optional BoxStyle crossDistributedSpace
+      # Style of empty space caused by row gaps (gap/row-gap).
+      optional BoxStyle rowGapSpace
+      # Style of empty space caused by columns gaps (gap/column-gap).
+      optional BoxStyle columnGapSpace
 
   # Style information for drawing a line.
   type LineStyle extends object
@@ -5663,6 +5671,14 @@ experimental domain Overlay
         dashed
         dotted
 
+  # Style information for drawing a box.
+  type BoxStyle extends object
+    properties
+      # The background color for the box (default: transparent)
+      optional DOM.RGBA fillColor
+      # The hatching color for the box (default: transparent)
+      optional DOM.RGBA hatchColor
+
   # Configuration data for the highlighting of page elements.
   type HighlightConfig extends object
     properties

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

@@ -354,17 +354,35 @@ std::unique_ptr<protocol::DictionaryValue> BuildTextNodeInfo(Text* text_node) {
 }
 
 void AppendLineStyleConfig(
-    const std::unique_ptr<LineStyle>& line_style,
+    const base::Optional<LineStyle>& line_style,
     std::unique_ptr<protocol::DictionaryValue>& parent_config,
     String line_name) {
-  if (line_style && line_style->color != Color::kTransparent) {
-    std::unique_ptr<protocol::DictionaryValue> config =
-        protocol::DictionaryValue::create();
-    config->setString("color", line_style->color.Serialized());
-    config->setString("pattern", line_style->pattern);
+  if (!line_style || line_style->IsTransparent()) {
+    return;
+  }
+
+  std::unique_ptr<protocol::DictionaryValue> config =
+      protocol::DictionaryValue::create();
+  config->setString("color", line_style->color.Serialized());
+  config->setString("pattern", line_style->pattern);
 
-    parent_config->setValue(line_name, std::move(config));
+  parent_config->setValue(line_name, std::move(config));
+}
+
+void AppendBoxStyleConfig(
+    const base::Optional<BoxStyle>& box_style,
+    std::unique_ptr<protocol::DictionaryValue>& parent_config,
+    String box_name) {
+  if (!box_style || box_style->IsTransparent()) {
+    return;
   }
+
+  std::unique_ptr<protocol::DictionaryValue> config =
+      protocol::DictionaryValue::create();
+  config->setString("fillColor", box_style->fill_color.Serialized());
+  config->setString("hatchColor", box_style->hatch_color.Serialized());
+
+  parent_config->setValue(box_name, std::move(config));
 }
 
 std::unique_ptr<protocol::DictionaryValue>
@@ -380,6 +398,15 @@ BuildFlexContainerHighlightConfigInfo(
   AppendLineStyleConfig(flex_config.item_separator, flex_config_info,
                         "itemSeparator");
 
+  AppendBoxStyleConfig(flex_config.main_distributed_space, flex_config_info,
+                       "mainDistributedSpace");
+  AppendBoxStyleConfig(flex_config.cross_distributed_space, flex_config_info,
+                       "crossDistributedSpace");
+  AppendBoxStyleConfig(flex_config.row_gap_space, flex_config_info,
+                       "rowGapSpace");
+  AppendBoxStyleConfig(flex_config.column_gap_space, flex_config_info,
+                       "columnGapSpace");
+
   return flex_config_info;
 }
 
@@ -1190,6 +1217,8 @@ InspectorSourceOrderConfig::InspectorSourceOrderConfig() = default;
 
 LineStyle::LineStyle() = default;
 
+BoxStyle::BoxStyle() = default;
+
 InspectorGridHighlightConfig::InspectorGridHighlightConfig()
     : show_grid_extension_lines(false),
       grid_border_dash(false),
@@ -1839,11 +1868,19 @@ InspectorFlexContainerHighlightConfig
 InspectorHighlight::DefaultFlexContainerConfig() {
   InspectorFlexContainerHighlightConfig config;
   config.container_border =
-      std::make_unique<LineStyle>(InspectorHighlight::DefaultLineStyle());
+      base::Optional<LineStyle>(InspectorHighlight::DefaultLineStyle());
   config.line_separator =
-      std::make_unique<LineStyle>(InspectorHighlight::DefaultLineStyle());
+      base::Optional<LineStyle>(InspectorHighlight::DefaultLineStyle());
   config.item_separator =
-      std::make_unique<LineStyle>(InspectorHighlight::DefaultLineStyle());
+      base::Optional<LineStyle>(InspectorHighlight::DefaultLineStyle());
+  config.main_distributed_space =
+      base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
+  config.cross_distributed_space =
+      base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
+  config.row_gap_space =
+      base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
+  config.column_gap_space =
+      base::Optional<BoxStyle>(InspectorHighlight::DefaultBoxStyle());
   return config;
 }
 
@@ -1855,4 +1892,12 @@ LineStyle InspectorHighlight::DefaultLineStyle() {
   return style;
 }
 
+// static
+BoxStyle InspectorHighlight::DefaultBoxStyle() {
+  BoxStyle style;
+  style.fill_color = Color(255, 0, 0, 0);
+  style.hatch_color = Color(255, 0, 0, 0);
+  return style;
+}
+
 }  // namespace blink

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

@@ -25,10 +25,27 @@ struct CORE_EXPORT LineStyle {
  public:
   LineStyle();
 
+  bool IsTransparent() const { return color == Color::kTransparent; }
+
   Color color;
   String pattern;
 };
 
+struct CORE_EXPORT BoxStyle {
+  USING_FAST_MALLOC(BoxStyle);
+
+ public:
+  BoxStyle();
+
+  bool IsTransparent() const {
+    return fill_color == Color::kTransparent &&
+           hatch_color == Color::kTransparent;
+  }
+
+  Color fill_color;
+  Color hatch_color;
+};
+
 struct CORE_EXPORT InspectorSourceOrderConfig {
   USING_FAST_MALLOC(InspectorSourceOrderConfig);
 
@@ -72,9 +89,14 @@ struct CORE_EXPORT InspectorFlexContainerHighlightConfig {
  public:
   InspectorFlexContainerHighlightConfig();
 
-  std::unique_ptr<LineStyle> container_border;
-  std::unique_ptr<LineStyle> line_separator;
-  std::unique_ptr<LineStyle> item_separator;
+  base::Optional<LineStyle> container_border;
+  base::Optional<LineStyle> line_separator;
+  base::Optional<LineStyle> item_separator;
+
+  base::Optional<BoxStyle> main_distributed_space;
+  base::Optional<BoxStyle> cross_distributed_space;
+  base::Optional<BoxStyle> row_gap_space;
+  base::Optional<BoxStyle> column_gap_space;
 };
 
 struct CORE_EXPORT InspectorHighlightConfig {
@@ -189,6 +211,7 @@ class CORE_EXPORT InspectorHighlight : public InspectorHighlightBase {
   void AddLayoutBoxToDistanceInfo(LayoutObject* layout_object);
 
   static LineStyle DefaultLineStyle();
+  static BoxStyle DefaultBoxStyle();
 
   std::unique_ptr<protocol::Array<protocol::Array<double>>> boxes_;
   std::unique_ptr<protocol::DictionaryValue> computed_style_;

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

@@ -1533,22 +1533,46 @@ InspectorOverlayAgent::ToFlexContainerHighlightConfig(
   highlight_config->item_separator =
       InspectorOverlayAgent::ToLineStyle(config->getItemSeparator(nullptr));
 
+  highlight_config->main_distributed_space = InspectorOverlayAgent::ToBoxStyle(
+      config->getMainDistributedSpace(nullptr));
+  highlight_config->cross_distributed_space = InspectorOverlayAgent::ToBoxStyle(
+      config->getCrossDistributedSpace(nullptr));
+  highlight_config->row_gap_space =
+      InspectorOverlayAgent::ToBoxStyle(config->getRowGapSpace(nullptr));
+  highlight_config->column_gap_space =
+      InspectorOverlayAgent::ToBoxStyle(config->getColumnGapSpace(nullptr));
+
   return highlight_config;
 }
 
 // static
-std::unique_ptr<LineStyle> InspectorOverlayAgent::ToLineStyle(
+base::Optional<LineStyle> InspectorOverlayAgent::ToLineStyle(
     protocol::Overlay::LineStyle* config) {
   if (!config) {
-    return nullptr;
+    return base::nullopt;
   }
-  std::unique_ptr<LineStyle> line_style = std::make_unique<LineStyle>();
+  base::Optional<LineStyle> line_style = LineStyle();
   line_style->color = InspectorDOMAgent::ParseColor(config->getColor(nullptr));
   line_style->pattern = config->getPattern("solid");
 
   return line_style;
 }
 
+// static
+base::Optional<BoxStyle> InspectorOverlayAgent::ToBoxStyle(
+    protocol::Overlay::BoxStyle* config) {
+  if (!config) {
+    return base::nullopt;
+  }
+  base::Optional<BoxStyle> box_style = BoxStyle();
+  box_style->fill_color =
+      InspectorDOMAgent::ParseColor(config->getFillColor(nullptr));
+  box_style->hatch_color =
+      InspectorDOMAgent::ParseColor(config->getHatchColor(nullptr));
+
+  return box_style;
+}
+
 // static
 std::unique_ptr<InspectorHighlightConfig>
 InspectorOverlayAgent::ToHighlightConfig(

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

@@ -148,7 +148,8 @@ class CORE_EXPORT InspectorOverlayAgent final
   static std::unique_ptr<InspectorFlexContainerHighlightConfig>
   ToFlexContainerHighlightConfig(
       protocol::Overlay::FlexContainerHighlightConfig*);
-  static std::unique_ptr<LineStyle> ToLineStyle(protocol::Overlay::LineStyle*);
+  static base::Optional<LineStyle> ToLineStyle(protocol::Overlay::LineStyle*);
+  static base::Optional<BoxStyle> ToBoxStyle(protocol::Overlay::BoxStyle*);
   static std::unique_ptr<InspectorHighlightConfig> ToHighlightConfig(
       protocol::Overlay::HighlightConfig*);
   InspectorOverlayAgent(WebLocalFrameImpl*,

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

@@ -174,6 +174,22 @@ flex-container{
         "itemSeparator": {
           "color": "rgba(255, 0, 0, 0)",
           "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
         }
       }
     }

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

@@ -221,6 +221,22 @@ flex-container{
         "itemSeparator": {
           "color": "rgba(255, 0, 0, 0)",
           "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
         }
       }
     }