Skip to content

GitLab

T
tangled
Commit 9ae55b84 authored by Patrick Brosset's avatar Patrick Brosset Committed by Chromium LUCI CQ
Browse files
Options

DevTools: Send flex item's baselines to the flex overlay 

DevTools wants to be able to display the baseline when items are aligned
on it. So this change adds the offset information to the output that's
already sent to the overlay frontend.

Note that the item's margin is also added to the baseline's offset
because the frontend only knows about item's margin boxes, so it needs
an offset that's relative to that.

This CL changes the format of the data sent to the frontend, so to avoid
breakages if this change landed before the corresponding frontend CL, I
will make sure to land the frontend first, with compatibility code for
both formats.

Frontend CL:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2567355/

Bug: 1139949
Change-Id: I8c922cd07265b9dee3edc43330210cf935bd06fe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567643
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: default avatarAlex Rudenko <alexrudenko@chromium.org>
Reviewed-by: default avatarPeter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833233}
parent 0951edd8
Hide whitespace changes
Inline Side-by-side
Showing with 388 additions and 310 deletions
third_party/blink/renderer/core/inspector/inspector_highlight.cc
View file @ 9ae55b84
......@@ -28,6 +28,7 @@
#include "third_party/blink/renderer/core/layout/layout_inline.h"
#include "third_party/blink/renderer/core/layout/layout_object.h"
#include "third_party/blink/renderer/core/layout/layout_view.h"
#include "third_party/blink/renderer/core/layout/ng/ng_box_fragment.h"
#include "third_party/blink/renderer/core/layout/ng/ng_physical_box_fragment.h"
#include "third_party/blink/renderer/core/layout/shapes/shape_outside_info.h"
#include "third_party/blink/renderer/core/page/chrome_client.h"
......@@ -880,15 +881,17 @@ bool IsHorizontalFlex(LayoutObject* layout_flex) {
layout_flex->StyleRef().ResolvedIsColumnFlexDirection();
}
Vector<Vector<PhysicalRect>> GetFlexLinesAndItems(LayoutBox* layout_box,
bool is_horizontal,
bool is_reverse) {
Vector<Vector<PhysicalRect>> flex_lines;
Vector<Vector<std::pair<PhysicalRect, float>>> GetFlexLinesAndItems(
LayoutBox* layout_box,
bool is_horizontal,
bool is_reverse) {
Vector<Vector<std::pair<PhysicalRect, float>>> flex_lines;
// Flex containers can't get fragmented yet, but this may change in the
// future.
for (const auto& fragment : layout_box->PhysicalFragments()) {
LayoutUnit progression;
for (const auto& child : fragment.Children()) {
const NGPhysicalFragment* child_fragment = child.get();
if (!child_fragment || child_fragment->IsOutOfFlowPositioned())
......@@ -899,6 +902,14 @@ Vector<Vector<PhysicalRect>> GetFlexLinesAndItems(LayoutBox* layout_box,
const LayoutObject* object = child_fragment->GetLayoutObject();
const auto* box = To<LayoutBox>(object);
LayoutUnit baseline =
NGBoxFragment(box->StyleRef().GetWritingDirection(),
*To<NGPhysicalBoxFragment>(child_fragment))
.BaselineOrSynthesize();
float adjusted_baseline = AdjustForAbsoluteZoom::AdjustFloat(
baseline + box->MarginTop(), box->StyleRef());
PhysicalRect item_rect =
PhysicalRect(fragment_offset.left - box->MarginLeft(),
fragment_offset.top - box->MarginTop(),
......@@ -914,7 +925,7 @@ Vector<Vector<PhysicalRect>> GetFlexLinesAndItems(LayoutBox* layout_box,
flex_lines.emplace_back();
}
flex_lines.back().push_back(item_rect);
flex_lines.back().push_back(std::make_pair(item_rect, adjusted_baseline));
progression = is_reverse ? item_start : item_end;
}
......@@ -950,23 +961,30 @@ std::unique_ptr<protocol::DictionaryValue> BuildFlexInfo(
container_builder.AppendPath(QuadToPath(content_quad), scale);
// Gather all flex items, sorted by flex line.
Vector<Vector<PhysicalRect>> flex_lines =
Vector<Vector<std::pair<PhysicalRect, float>>> flex_lines =
GetFlexLinesAndItems(layout_box, is_horizontal, is_reverse);
// Send the offset information for each item to the frontend.
// We send a list of flex lines, each containing a list of flex items, with
// their baselines, to the frontend.
std::unique_ptr<protocol::ListValue> lines_info =
protocol::ListValue::create();
for (auto line : flex_lines) {
std::unique_ptr<protocol::ListValue> items_info =
protocol::ListValue::create();
for (auto item_rect : line) {
for (auto item_data : line) {
std::unique_ptr<protocol::DictionaryValue> item_info =
protocol::DictionaryValue::create();
FloatQuad item_margin_quad =
layout_object->LocalRectToAbsoluteQuad(item_rect);
layout_object->LocalRectToAbsoluteQuad(item_data.first);
FrameQuadToViewport(containing_view, item_margin_quad);
PathBuilder item_builder;
item_builder.AppendPath(QuadToPath(item_margin_quad), scale);
items_info->pushValue(item_builder.Release());
item_info->setValue("itemBorder", item_builder.Release());
item_info->setDouble("baseline", item_data.second);
items_info->pushValue(std::move(item_info));
}
lines_info->pushValue(std::move(items_info));
}
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-alignment-expected.txt
View file @ 9ae55b84
......@@ -115,21 +115,24 @@ flex-start{
],
"lines": [
[
[
"M",
0,
0,
"L",
0,
0,
"L",
0,
0,
"L",
0,
0,
"Z"
]
{
"itemBorder": [
"M",
0,
0,
"L",
0,
0,
"L",
0,
0,
"L",
0,
0,
"Z"
],
"baseline": 0
}
]
],
"isHorizontalFlow": true,
......@@ -286,21 +289,24 @@ flex-end{
],
"lines": [
[
[
"M",
0,
200,
"L",
0,
200,
"L",
0,
200,
"L",
0,
200,
"Z"
]
{
"itemBorder": [
"M",
0,
200,
"L",
0,
200,
"L",
0,
200,
"L",
0,
200,
"Z"
],
"baseline": 0
}
]
],
"isHorizontalFlow": true,
......@@ -457,21 +463,24 @@ center{
],
"lines": [
[
[
"M",
0,
250,
"L",
0,
250,
"L",
0,
250,
"L",
0,
250,
"Z"
]
{
"itemBorder": [
"M",
0,
250,
"L",
0,
250,
"L",
0,
250,
"L",
0,
250,
"Z"
],
"baseline": 0
}
]
],
"isHorizontalFlow": true,
......@@ -628,21 +637,24 @@ stretch{
],
"lines": [
[
[
"M",
0,
300,
"L",
0,
300,
"L",
0,
400,
"L",
0,
400,
"Z"
]
{
"itemBorder": [
"M",
0,
300,
"L",
0,
300,
"L",
0,
400,
"L",
0,
400,
"Z"
],
"baseline": 100
}
]
],
"isHorizontalFlow": true,
......@@ -799,21 +811,24 @@ normal{
],
"lines": [
[
[
"M",
0,
400,
"L",
0,
400,
"L",
0,
500,
"L",
0,
500,
"Z"
]
{
"itemBorder": [
"M",
0,
400,
"L",
0,
400,
"L",
0,
500,
"L",
0,
500,
"Z"
],
"baseline": 100
}
]
],
"isHorizontalFlow": true,
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-expected.txt
View file @ 9ae55b84
......@@ -114,51 +114,60 @@ flex-container{
],
"lines": [
[
[
"M",
8,
8,
"L",
174.671875,
8,
"L",
174.671875,
108,
"L",
8,
108,
"Z"
],
[
"M",
174.671875,
8,
"L",
341.34375,
8,
"L",
341.34375,
108,
"L",
174.671875,
108,
"Z"
],
[
"M",
341.34375,
8,
"L",
508.015625,
8,
"L",
508.015625,
108,
"L",
341.34375,
108,
"Z"
]
{
"itemBorder": [
"M",
8,
8,
"L",
174.671875,
8,
"L",
174.671875,
108,
"L",
8,
108,
"Z"
],
"baseline": 90
},
{
"itemBorder": [
"M",
174.671875,
8,
"L",
341.34375,
8,
"L",
341.34375,
108,
"L",
174.671875,
108,
"Z"
],
"baseline": 90
},
{
"itemBorder": [
"M",
341.34375,
8,
"L",
508.015625,
8,
"L",
508.015625,
108,
"L",
341.34375,
108,
"Z"
],
"baseline": 90
}
]
],
"isHorizontalFlow": true,
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-multiline-expected.txt
View file @ 9ae55b84
......@@ -114,98 +114,116 @@ flex-container{
],
"lines": [
[
[
"M",
100,
100,
"L",
200,
100,
"L",
200,
200,
"L",
100,
200,
"Z"
],
[
"M",
250,
100,
"L",
350,
100,
"L",
350,
200,
"L",
250,
200,
"Z"
],
[
"M",
400,
100,
"L",
500,
100,
"L",
500,
200,
"L",
400,
200,
"Z"
]
{
"itemBorder": [
"M",
100,
100,
"L",
200,
100,
"L",
200,
200,
"L",
100,
200,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
250,
100,
"L",
350,
100,
"L",
350,
200,
"L",
250,
200,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
400,
100,
"L",
500,
100,
"L",
500,
200,
"L",
400,
200,
"Z"
],
"baseline": 100
}
],
[
[
"M",
100,
400,
"L",
200,
400,
"L",
200,
500,
"L",
100,
500,
"Z"
],
[
"M",
250,
400,
"L",
350,
400,
"L",
350,
500,
"L",
250,
500,
"Z"
],
[
"M",
400,
400,
"L",
500,
400,
"L",
500,
500,
"L",
400,
500,
"Z"
]
{
"itemBorder": [
"M",
100,
400,
"L",
200,
400,
"L",
200,
500,
"L",
100,
500,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
250,
400,
"L",
350,
400,
"L",
350,
500,
"L",
250,
500,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
400,
400,
"L",
500,
400,
"L",
500,
500,
"L",
400,
500,
"Z"
],
"baseline": 100
}
]
],
"isHorizontalFlow": true,
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-reverse-expected.txt
View file @ 9ae55b84
......@@ -115,51 +115,60 @@ test-1{
],
"lines": [
[
[
"M",
78,
8,
"L",
98,
8,
"L",
98,
28,
"L",
78,
28,
"Z"
],
[
"M",
48,
88,
"L",
68,
88,
"L",
68,
108,
"L",
48,
108,
"Z"
],
[
"M",
18,
8,
"L",
38,
8,
"L",
38,
28,
"L",
18,
28,
"Z"
]
{
"itemBorder": [
"M",
78,
8,
"L",
98,
8,
"L",
98,
28,
"L",
78,
28,
"Z"
],
"baseline": 20
},
{
"itemBorder": [
"M",
48,
88,
"L",
68,
88,
"L",
68,
108,
"L",
48,
108,
"Z"
],
"baseline": 20
},
{
"itemBorder": [
"M",
18,
8,
"L",
38,
8,
"L",
38,
28,
"L",
18,
28,
"Z"
],
"baseline": 20
}
]
],
"isHorizontalFlow": true,
......@@ -316,51 +325,60 @@ test-2{
],
"lines": [
[
[
"M",
8,
178,
"L",
28,
178,
"L",
28,
198,
"L",
8,
198,
"Z"
],
[
"M",
88,
148,
"L",
108,
148,
"L",
108,
168,
"L",
88,
168,
"Z"
],
[
"M",
8,
118,
"L",
28,
118,
"L",
28,
138,
"L",
8,
138,
"Z"
]
{
"itemBorder": [
"M",
8,
178,
"L",
28,
178,
"L",
28,
198,
"L",
8,
198,
"Z"
],
"baseline": 20
},
{
"itemBorder": [
"M",
88,
148,
"L",
108,
148,
"L",
108,
168,
"L",
88,
168,
"Z"
],
"baseline": 20
},
{
"itemBorder": [
"M",
8,
118,
"L",
28,
118,
"L",
28,
138,
"L",
8,
138,
"Z"
],
"baseline": 20
}
]
],
"isHorizontalFlow": false,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment