Grid: Set a light background color on the persistent grid overlay
In order to make the persistent grid overlays stand out more, especially
when there are several of them on at the same time, we want a light
color to be applied to its background.
Before: https://imgur.com/ZFinACO.gif
After: https://imgur.com/k7s6Wdy.gif
This depends on the backend CL:
https://chromium-review.googlesource.com/c/chromium/src/+/2405997/
Bug: 1047356
Change-Id: Id1435fa8423611939e800b9ef57ce026cb41bd4e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2406120
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
diff --git a/front_end/sdk/OverlayModel.js b/front_end/sdk/OverlayModel.js
index 7398a9a..29a78e6 100644
--- a/front_end/sdk/OverlayModel.js
+++ b/front_end/sdk/OverlayModel.js
@@ -847,6 +847,7 @@
*/
_buildGridHighlightConfig(nodeId) {
const mainColor = this.colorOfGrid(nodeId);
+ const background = mainColor.setAlpha(0.1);
const gapBackground = mainColor.setAlpha(0.3);
const gapHatch = mainColor.setAlpha(0.8);
@@ -872,6 +873,7 @@
showAreaNames: /** @type {boolean} */ (this._showGridAreasSetting.get()),
showTrackSizes: /** @type {boolean} */ (this._showGridTrackSizesSetting.get()),
areaBorderColor: mainColor.toProtocolRGBA(),
+ gridBackgroundColor: background.toProtocolRGBA(),
};
}
diff --git a/inspector_overlay/debug/tool_highlight_implicit_grid.html b/inspector_overlay/debug/tool_highlight_implicit_grid.html
index 2b33156..6f33628 100644
--- a/inspector_overlay/debug/tool_highlight_implicit_grid.html
+++ b/inspector_overlay/debug/tool_highlight_implicit_grid.html
@@ -11,6 +11,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../common.css">
<script type="module" src="../tool_highlight.js"></script>
+ <style>
+ body { background: #ccc; }
+ </style>
</head>
<body>
<script type="module">
@@ -24,8 +27,6 @@
drawHighlight({
"paths":[
- {"path":["M",200,400,"L",800,400,"L",800,800,"L",200,800,"Z"],"fillColor":"rgba(111, 168, 220, .66)","name":"content"},
- {"path":["M",180,380,"L",820,380,"L",820,820,"L",180,820,"Z"],"fillColor":"rgba(246, 178, 107, .6)","name":"margin"}
],
"gridInfo":[
{
@@ -38,7 +39,7 @@
"positiveColumnLineNumberPositions":[{x:400,y:400},{x:600,y:400},{x:800,y:400}],
"negativeColumnLineNumberPositions":[{x:200,y:800},{x:400,y:800},{x:600,y:800}],
"gridBorder":["M",200,400,"L",800,400,"L",800,800,"L",200,800,"Z"],
- "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":false,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(147, 52, 230, 1)","columnLineColor":"rgba(147, 52, 230, 1)","rowHatchColor":"rgba(147, 52, 230, .8)","columnHatchColor":"rgba(147, 52, 230, .8)"},
+ "gridHighlightConfig":{"gridBackgroundColor":"rgba(147, 52, 230, .1)","gridBorderColor":"rgba(147, 52, 230, 1)","gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(147, 52, 230, 1)","columnLineColor":"rgba(147, 52, 230, 1)","rowHatchColor":"rgba(147, 52, 230, .8)","columnHatchColor":"rgba(147, 52, 230, .8)","rowGapColor":"rgba(147, 52, 230, .2)"},
"isPrimaryGrid":true
}
]
diff --git a/inspector_overlay/highlight_grid_common.js b/inspector_overlay/highlight_grid_common.js
index b1b406b..576e720 100644
--- a/inspector_overlay/highlight_grid_common.js
+++ b/inspector_overlay/highlight_grid_common.js
@@ -223,6 +223,12 @@
context.save();
_applyWritingModeTransformation(highlight.writingMode, gridBounds, context);
+ // Draw grid background
+ if (highlight.gridHighlightConfig.gridBackgroundColor) {
+ context.fillStyle = highlight.gridHighlightConfig.gridBackgroundColor;
+ context.fill(gridPath);
+ }
+
// Draw Grid border
if (highlight.gridHighlightConfig.gridBorderColor) {
context.save();