Skip to content

GitLab

T
tangled
Commit 56ea8daf authored by Patrick Brosset's avatar Patrick Brosset Committed by Commit Bot
Browse files
Options

DevTools: protocol and backend support for line names in overlay 

This introduces a new option (showLineNames) to the
gridHighlightConfig option, passed to overlays.
The option defaults to false. When set to true, it tells the
backend implementation of the overlay domain to
also generate offset information for all of the named lines.

The corresponding frontend CL is
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2292205

Because the frontend CL also adds a new setting that needs
telemetry support, the corresponding enum value is added here.

Bug: 1100385
Change-Id: I0487ae7c5d6aad21c8d6b16bcb3be46a08e0ee07
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2291435
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: default avatarAndrey Kosyakov <caseq@chromium.org>
Reviewed-by: default avatarAlex Rudenko <alexrudenko@chromium.org>
Reviewed-by: default avatarBrandon Goddard <brgoddar@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#789773}
parent 44f4827e
Hide whitespace changes
Inline Side-by-side
Showing with 480 additions and 1 deletion
third_party/blink/public/devtools_protocol/browser_protocol.pdl
View file @ 56ea8daf
......@@ -5287,6 +5287,8 @@ experimental domain Overlay
optional boolean showNegativeLineNumbers
# Show area name labels (default: false).
optional boolean showAreaNames
# Show line name labels (default: false).
optional boolean showLineNames
# The grid container border highlight color (default: transparent).
optional DOM.RGBA gridBorderColor
# The cell border color (default: transparent).
......
third_party/blink/renderer/core/inspector/inspector_highlight.cc
View file @ 56ea8daf
......@@ -369,6 +369,7 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridHighlightConfigInfo(
grid_config_info->setBoolean("showNegativeLineNumbers",
grid_config.show_negative_line_numbers);
grid_config_info->setBoolean("showAreaNames", grid_config.show_area_names);
grid_config_info->setBoolean("showLineNames", grid_config.show_line_names);
if (grid_config.grid_color != Color::kTransparent) {
grid_config_info->setString("gridBorderColor",
......@@ -512,6 +513,42 @@ std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
return area_paths;
}
std::unique_ptr<protocol::ListValue> BuildGridLineNames(
LayoutGrid* layout_grid,
GridTrackSizingDirection direction,
float scale) {
std::unique_ptr<protocol::ListValue> lines = protocol::ListValue::create();
const Vector<LayoutUnit>& tracks = direction == kForColumns
? layout_grid->ColumnPositions()
: layout_grid->RowPositions();
const NamedGridLinesMap& named_lines_map =
direction == kForColumns ? layout_grid->StyleRef().NamedGridColumnLines()
: layout_grid->StyleRef().NamedGridRowLines();
LayoutUnit gap = layout_grid->GridGap(direction);
for (const auto& item : named_lines_map) {
const String& name = item.key;
for (const size_t index : item.value) {
std::unique_ptr<protocol::DictionaryValue> line =
protocol::DictionaryValue::create();
LayoutUnit track = tracks.at(index);
line->setString("name", name);
LayoutUnit gap_offset =
index > 0 && index < tracks.size() - 1 ? gap / 2 : LayoutUnit();
line->setValue("offset", protocol::FundamentalValue::create(
(track - gap_offset) * scale));
lines->pushValue(std::move(line));
}
}
return lines;
}
std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
LocalFrameView* containing_view,
LayoutGrid* layout_grid,
......@@ -613,6 +650,14 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
grid_info->setValue("areaNames", BuildAreaNamePaths(layout_grid, scale));
}
// line names
if (grid_highlight_config.show_line_names) {
grid_info->setValue("rowLineNameOffsets",
BuildGridLineNames(layout_grid, kForRows, scale));
grid_info->setValue("columnLineNameOffsets",
BuildGridLineNames(layout_grid, kForColumns, scale));
}
// Grid border
PathBuilder grid_border_builder;
PhysicalOffset grid_position(row_left, column_top);
......@@ -734,7 +779,8 @@ InspectorGridHighlightConfig::InspectorGridHighlightConfig()
cell_border_dash(false),
show_positive_line_numbers(false),
show_negative_line_numbers(false),
show_area_names(false) {}
show_area_names(false),
show_line_names(false) {}
InspectorHighlight::InspectorHighlight(
Node* node,
......@@ -1283,6 +1329,7 @@ InspectorGridHighlightConfig InspectorHighlight::DefaultGridConfig() {
config.show_positive_line_numbers = true;
config.show_negative_line_numbers = true;
config.show_area_names = true;
config.show_line_names = true;
config.grid_border_dash = false;
config.cell_border_dash = true;
return config;
......
third_party/blink/renderer/core/inspector/inspector_highlight.h
View file @ 56ea8daf
......@@ -38,6 +38,7 @@ struct CORE_EXPORT InspectorGridHighlightConfig {
bool show_positive_line_numbers;
bool show_negative_line_numbers;
bool show_area_names;
bool show_line_names;
};
struct CORE_EXPORT InspectorHighlightConfig {
......
third_party/blink/renderer/core/inspector/inspector_overlay_agent.cc
View file @ 56ea8daf
......@@ -1370,6 +1370,7 @@ InspectorOverlayAgent::ToGridHighlightConfig(
highlight_config->show_negative_line_numbers =
config->getShowNegativeLineNumbers(false);
highlight_config->show_area_names = config->getShowAreaNames(false);
highlight_config->show_line_names = config->getShowLineNames(false);
highlight_config->show_grid_extension_lines =
config->getShowGridExtensionLines(false);
highlight_config->grid_border_dash = config->getGridBorderDash(false);
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-area-expected.txt
View file @ 56ea8daf
......@@ -246,6 +246,8 @@ grid-with-areas{
"Z"
]
},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
0,
......@@ -268,6 +270,7 @@ grid-with-areas{
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-expected.txt
View file @ 56ea8daf
......@@ -199,6 +199,8 @@ paddedGrid{
275
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
173,
......@@ -221,6 +223,7 @@ paddedGrid{
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......@@ -420,6 +423,8 @@ nestedGrid{
250
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
228,
......@@ -442,6 +447,7 @@ nestedGrid{
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-huge-expected.txt
View file @ 56ea8daf
......@@ -5492,6 +5492,8 @@ big-grid{
995
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
8,
......@@ -5514,6 +5516,7 @@ big-grid{
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-line-names-expected.txt 0 → 100644
View file @ 56ea8daf
This test verifies the names and positions of named grid lines are generated correctly.
grid-with-line-names{
"paths": [
{
"path": [
"M",
0,
0,
"L",
640,
0,
"L",
640,
830,
"L",
0,
830,
"Z"
],
"fillColor": "rgba(255, 0, 0, 0)",
"outlineColor": "rgba(128, 0, 0, 0)",
"name": "content"
},
{
"path": [
"M",
0,
0,
"L",
640,
0,
"L",
640,
830,
"L",
0,
830,
"Z"
],
"fillColor": "rgba(0, 255, 0, 0)",
"name": "padding"
},
{
"path": [
"M",
0,
0,
"L",
640,
0,
"L",
640,
830,
"L",
0,
830,
"Z"
],
"fillColor": "rgba(0, 0, 255, 0)",
"name": "border"
},
{
"path": [
"M",
0,
0,
"L",
640,
0,
"L",
640,
830,
"L",
0,
830,
"Z"
],
"fillColor": "rgba(255, 255, 255, 0)",
"name": "margin"
}
],
"showRulers": true,
"showExtensionLines": true,
"showAccessibilityInfo": true,
"colorFormat": "hex",
"elementInfo": {
"tagName": "div",
"idValue": "grid-with-line-names",
"nodeWidth": "640",
"nodeHeight": "830",
"isKeyboardFocusable": false,
"accessibleName": "",
"accessibleRole": "generic",
"layoutObjectName": "LayoutGrid",
"showAccessibilityInfo": true
},
"gridInfo": [
{
"rows": [
"M",
0,
0,
"L",
640,
0,
"M",
640,
200,
"L",
0,
200,
"M",
0,
210,
"L",
640,
210,
"M",
640,
410,
"L",
0,
410,
"M",
0,
420,
"L",
640,
420,
"M",
640,
620,
"L",
0,
620,
"M",
0,
630,
"L",
640,
630,
"M",
640,
830,
"L",
0,
830
],
"rowGaps": [
"M",
0,
200,
"L",
640,
200,
"L",
640,
210,
"L",
0,
210,
"Z",
"M",
0,
410,
"L",
640,
410,
"L",
640,
420,
"L",
0,
420,
"Z",
"M",
0,
620,
"L",
640,
620,
"L",
640,
630,
"L",
0,
630,
"Z"
],
"columns": [
"M",
0,
0,
"L",
0,
830,
"M",
100,
830,
"L",
100,
0,
"M",
110,
0,
"L",
110,
830,
"M",
610,
830,
"L",
610,
0,
"M",
620,
0,
"L",
620,
830,
"M",
640,
830,
"L",
640,
0
],
"columnGaps": [
"M",
100,
0,
"L",
110,
0,
"L",
110,
830,
"L",
100,
830,
"Z",
"M",
610,
0,
"L",
620,
0,
"L",
620,
830,
"L",
610,
830,
"Z"
],
"positiveRowLineNumberOffsets": [
0,
205,
415,
625,
830
],
"positiveColumnLineNumberOffsets": [
0,
105,
615,
640
],
"negativeRowLineNumberOffsets": [
0,
205,
415,
625,
830
],
"negativeColumnLineNumberOffsets": [
0,
105,
615,
640
],
"areaNames": {},
"rowLineNameOffsets": [
{
"name": "article",
"offset": 205
},
{
"name": "header",
"offset": 0
},
{
"name": "main",
"offset": 205
},
{
"name": "end",
"offset": 830
},
{
"name": "section",
"offset": 205
},
{
"name": "section",
"offset": 415
},
{
"name": "section",
"offset": 625
},
{
"name": "images",
"offset": 205
}
],
"columnLineNameOffsets": [
{
"name": "header",
"offset": 105
},
{
"name": "content-start",
"offset": 105
},
{
"name": "fullpage-end",
"offset": 640
},
{
"name": "fullpage-start",
"offset": 0
},
{
"name": "content-end",
"offset": 615
}
],
"gridBorder": [
"M",
0,
0,
"L",
640,
0,
"L",
640,
830,
"L",
0,
830,
"Z"
],
"gridHighlightConfig": {
"gridBorderDash": false,
"cellBorderDash": true,
"showGridExtensionLines": true,
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
"columnGapColor": "rgba(0, 0, 255, 0)",
"rowHatchColor": "rgba(255, 255, 255, 0)",
"columnHatchColor": "rgba(128, 128, 128, 0)",
"areaBorderColor": "rgba(255, 0, 0, 0)"
},
"isPrimaryGrid": true
}
]
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-line-names.js 0 → 100644
View file @ 56ea8daf
// 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 names and positions of named grid lines are generated correctly.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<style>
body {
width: 1000px;
height: 1000px;
}
#grid-with-line-names {
position: absolute;
top: 0;
left: 0;
display: grid;
gap: 10px;
grid-template-columns: [fullpage-start] 100px [content-start header] 500px [content-end] 20px [fullpage-end];
grid-template-rows: [header] 200px [main article images] repeat(3, [section] 200px) [end];
}
</style>
<div id="grid-with-line-names"></div>
<p id="description">This test verifies the names and positions of named grid lines are generated correctly.</p>
`);
ElementsTestRunner.dumpInspectorHighlightJSON('grid-with-line-names', () => TestRunner.completeTest());
})();
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-huge-expected.txt
View file @ 56ea8daf
......@@ -5398,6 +5398,8 @@ This test verifies that huge CSS grids can be highlighted with the grid Highligh
995
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
8,
......@@ -5420,6 +5422,7 @@ This test verifies that huge CSS grids can be highlighted with the grid Highligh
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-multiple-css-grid-expected.txt
View file @ 56ea8daf
......@@ -104,6 +104,8 @@ This test verifies the position and size of the highlight rectangles overlayed o
275
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
173,
......@@ -126,6 +128,7 @@ This test verifies the position and size of the highlight rectangles overlayed o
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......@@ -238,6 +241,8 @@ This test verifies the position and size of the highlight rectangles overlayed o
1300
],
"areaNames": {},
"rowLineNameOffsets": [],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
108,
......@@ -260,6 +265,7 @@ This test verifies the position and size of the highlight rectangles overlayed o
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"cellBorderColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
......
tools/metrics/histograms/enums.xml
View file @ 56ea8daf
......@@ -15947,6 +15947,7 @@ to ensure that the crash string is shown properly on the user-facing crash UI.
<int value="15" label="showGridGaps.both"/>
<int value="16" label="showGridAreas.false"/>
<int value="17" label="showGridAreas.true"/>
<int value="18" label="showGridLineNumbers.names"/>
</enum>
<enum name="DevToolsIssuesPanelOpenedFrom">
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