Skip to content

GitLab

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

DevTools: Provide gap information to the devtools overlay frontend 

With this extra piece of information, the overlay frontend can now show
how tall or wide gaps in a flex container are, from DevTools.

Corresponding devtools CL:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2579039/

Bug: 1150832
Change-Id: Ia001a4950658624219bef05f169f2ec11566ec56
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2582260
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@{#835616}
parent fc37b89d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1124 additions and 0 deletions
third_party/blink/renderer/core/inspector/inspector_highlight.cc
View file @ 816e65bb
......@@ -9,6 +9,7 @@
#include "third_party/blink/renderer/core/css/css_computed_style_declaration.h"
#include "third_party/blink/renderer/core/css/css_grid_auto_repeat_value.h"
#include "third_party/blink/renderer/core/css/css_grid_integer_repeat_value.h"
#include "third_party/blink/renderer/core/css/css_numeric_literal_value.h"
#include "third_party/blink/renderer/core/css/css_property_name.h"
#include "third_party/blink/renderer/core/css/css_property_names.h"
#include "third_party/blink/renderer/core/css/css_value.h"
......@@ -992,9 +993,29 @@ 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->setBoolean("isReverse", is_reverse);
flex_info->setString(
"alignItemsStyle",
style->GetPropertyCSSValue(CSSPropertyID::kAlignItems)->CssText());
double row_gap_value = 0;
const CSSValue* row_gap = style->GetPropertyCSSValue(CSSPropertyID::kRowGap);
if (row_gap->IsNumericLiteralValue()) {
row_gap_value = To<CSSNumericLiteralValue>(row_gap)->DoubleValue();
}
double column_gap_value = 0;
const CSSValue* column_gap =
style->GetPropertyCSSValue(CSSPropertyID::kColumnGap);
if (column_gap->IsNumericLiteralValue()) {
column_gap_value = To<CSSNumericLiteralValue>(column_gap)->DoubleValue();
}
flex_info->setDouble("mainGap",
is_horizontal ? column_gap_value : row_gap_value);
flex_info->setDouble("crossGap",
is_horizontal ? row_gap_value : column_gap_value);
flex_info->setValue(
"flexContainerHighlightConfig",
BuildFlexContainerHighlightConfigInfo(flex_container_highlight_config));
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-alignment-expected.txt
View file @ 816e65bb
......@@ -136,7 +136,10 @@ flex-start{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "flex-start",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......@@ -310,7 +313,10 @@ flex-end{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "flex-end",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......@@ -484,7 +490,10 @@ center{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "center",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......@@ -658,7 +667,10 @@ stretch{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "stretch",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......@@ -832,7 +844,10 @@ normal{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "normal",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-expected.txt
View file @ 816e65bb
......@@ -171,7 +171,10 @@ flex-container{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "normal",
"mainGap": 0,
"crossGap": 0,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-gap.js 0 → 100644
View file @ 816e65bb
// 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 gap information sent to the overlay frontend for flex contains with gaps.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<style>
.container {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
place-content: start;
column-gap: 10px;
row-gap: 20px;
}
.item {
width: 100px;
height: 100px;
}
</style>
<div class="container" id="test-1" style="flex-direction:row;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" id="test-2" style="flex-direction:row-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" id="test-3" style="flex-direction:column;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" id="test-4" style="flex-direction:column-reverse;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
`);
function dumFlexHighlight(id) {
return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
}
await dumFlexHighlight('test-1');
await dumFlexHighlight('test-2');
await dumFlexHighlight('test-3');
await dumFlexHighlight('test-4');
TestRunner.completeTest();
})();
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-multiline-expected.txt
View file @ 816e65bb
......@@ -227,7 +227,10 @@ flex-container{
]
],
"isHorizontalFlow": true,
"isReverse": false,
"alignItemsStyle": "normal",
"mainGap": 10,
"crossGap": 10,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-reverse-expected.txt
View file @ 816e65bb
......@@ -172,7 +172,10 @@ test-1{
]
],
"isHorizontalFlow": true,
"isReverse": true,
"alignItemsStyle": "flex-start",
"mainGap": 10,
"crossGap": 10,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......@@ -382,7 +385,10 @@ test-2{
]
],
"isHorizontalFlow": false,
"isReverse": true,
"alignItemsStyle": "flex-start",
"mainGap": 10,
"crossGap": 10,
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
......
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