Skip to content

GitLab

T
tangled
Commit 0b205859 authored by Patrick Brosset's avatar Patrick Brosset Committed by Commit Bot
Browse files
Options

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: default avatarAlex Rudenko <alexrudenko@chromium.org>
Reviewed-by: default avatarAndrey Kosyakov <caseq@chromium.org>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#831298}
parent 90f799c8
Show whitespace changes
Inline Side-by-side
Showing with 927 additions and 0 deletions
third_party/blink/public/devtools_protocol/browser_protocol.pdl
View file @ 0b205859
......@@ -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
View file @ 0b205859
......@@ -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
View file @ 0b205859
......@@ -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
View file @ 0b205859
......@@ -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-expected.txt 0 → 100644
View file @ 0b205859
This test verifies the flex self-alignment value sent by the backend.
flex-start{
"paths": [
{
"path": [
"M",
0,
0,
"L",
100,
0,
"L",
100,
100,
"L",
0,
100,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
0,
"L",
100,
0,
"L",
100,
100,
"L",
0,
100,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
0,
"L",
100,
0,
"L",
100,
100,
"L",
0,
100,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
0,
"L",
800,
0,
"L",
800,
100,
"L",
0,
100,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "flex-start",
"className": ".container",
"nodeWidth": "100",
"nodeHeight": "100",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutNGFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
0,
0,
"L",
100,
0,
"L",
100,
100,
"L",
0,
100,
"Z"
],
"lines": [
[
[
"M",
0,
0,
"L",
0,
0,
"L",
0,
0,
"L",
0,
0,
"Z"
]
]
],
"isHorizontalFlow": true,
"alignItemsStyle": "flex-start",
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"lineSeparator": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"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)"
},
"crossAlignment": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
}
}
}
]
}
flex-end{
"paths": [
{
"path": [
"M",
0,
100,
"L",
100,
100,
"L",
100,
200,
"L",
0,
200,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
100,
"L",
100,
100,
"L",
100,
200,
"L",
0,
200,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
100,
"L",
100,
100,
"L",
100,
200,
"L",
0,
200,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
100,
"L",
800,
100,
"L",
800,
200,
"L",
0,
200,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "flex-end",
"className": ".container",
"nodeWidth": "100",
"nodeHeight": "100",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutNGFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
0,
100,
"L",
100,
100,
"L",
100,
200,
"L",
0,
200,
"Z"
],
"lines": [
[
[
"M",
0,
200,
"L",
0,
200,
"L",
0,
200,
"L",
0,
200,
"Z"
]
]
],
"isHorizontalFlow": true,
"alignItemsStyle": "flex-end",
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"lineSeparator": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"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)"
},
"crossAlignment": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
}
}
}
]
}
center{
"paths": [
{
"path": [
"M",
0,
200,
"L",
100,
200,
"L",
100,
300,
"L",
0,
300,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
200,
"L",
100,
200,
"L",
100,
300,
"L",
0,
300,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
200,
"L",
100,
200,
"L",
100,
300,
"L",
0,
300,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
200,
"L",
800,
200,
"L",
800,
300,
"L",
0,
300,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "center",
"className": ".container",
"nodeWidth": "100",
"nodeHeight": "100",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutNGFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
0,
200,
"L",
100,
200,
"L",
100,
300,
"L",
0,
300,
"Z"
],
"lines": [
[
[
"M",
0,
250,
"L",
0,
250,
"L",
0,
250,
"L",
0,
250,
"Z"
]
]
],
"isHorizontalFlow": true,
"alignItemsStyle": "center",
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"lineSeparator": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"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)"
},
"crossAlignment": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
}
}
}
]
}
stretch{
"paths": [
{
"path": [
"M",
0,
300,
"L",
100,
300,
"L",
100,
400,
"L",
0,
400,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
300,
"L",
100,
300,
"L",
100,
400,
"L",
0,
400,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
300,
"L",
100,
300,
"L",
100,
400,
"L",
0,
400,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
300,
"L",
800,
300,
"L",
800,
400,
"L",
0,
400,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "stretch",
"className": ".container",
"nodeWidth": "100",
"nodeHeight": "100",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutNGFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
0,
300,
"L",
100,
300,
"L",
100,
400,
"L",
0,
400,
"Z"
],
"lines": [
[
[
"M",
0,
300,
"L",
0,
300,
"L",
0,
400,
"L",
0,
400,
"Z"
]
]
],
"isHorizontalFlow": true,
"alignItemsStyle": "stretch",
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"lineSeparator": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"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)"
},
"crossAlignment": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
}
}
}
]
}
normal{
"paths": [
{
"path": [
"M",
0,
400,
"L",
100,
400,
"L",
100,
500,
"L",
0,
500,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
400,
"L",
100,
400,
"L",
100,
500,
"L",
0,
500,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
400,
"L",
100,
400,
"L",
100,
500,
"L",
0,
500,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
400,
"L",
800,
400,
"L",
800,
500,
"L",
0,
500,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "normal",
"className": ".container",
"nodeWidth": "100",
"nodeHeight": "100",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutNGFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
0,
400,
"L",
100,
400,
"L",
100,
500,
"L",
0,
500,
"Z"
],
"lines": [
[
[
"M",
0,
400,
"L",
0,
400,
"L",
0,
500,
"L",
0,
500,
"Z"
]
]
],
"isHorizontalFlow": true,
"alignItemsStyle": "normal",
"flexContainerHighlightConfig": {
"containerBorder": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"lineSeparator": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
},
"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)"
},
"crossAlignment": {
"color": "rgba(255, 0, 0, 0)",
"pattern": "solid"
}
}
}
]
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-alignment.js 0 → 100644
View file @ 0b205859
// 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
View file @ 0b205859
......@@ -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
View file @ 0b205859
......@@ -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"
}
}
}
......
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