Modified: trunk/Source/WebCore/ChangeLog (275559 => 275560)
--- trunk/Source/WebCore/ChangeLog 2021-04-06 22:09:25 UTC (rev 275559)
+++ trunk/Source/WebCore/ChangeLog 2021-04-06 22:13:40 UTC (rev 275560)
@@ -1,5 +1,24 @@
2021-04-06 Patrick Angle <pan...@apple.com>
+ Web Inspector: Grid overlay label style cleanup
+ https://bugs.webkit.org/show_bug.cgi?id=224240
+
+ Reviewed by BJ Burg.
+
+ Clean up grid overlay label styling by:
+ - Make all labels use a translucent background. This patch chooses a middle ground between the existing
+ translucent labels that matched the color of the rulers, and the solid white background used by line
+ numbers/names for maximum legibility.
+ - Bumping the label padding by 1px to improve legibility.
+ - Bumping the label arrow size by 2px to make it easier to understand where a label is pointing, particularly
+ for labels where the edge position is not `Middle`.
+
+ * inspector/InspectorOverlay.cpp:
+ (WebCore::InspectorOverlay::drawGridOverlay):
+ (WebCore::InspectorOverlay::buildGridOverlay):
+
+2021-04-06 Patrick Angle <pan...@apple.com>
+
Web Inspector: Grid overlay track size labels should show implicit `auto` value and no computed size
https://bugs.webkit.org/show_bug.cgi?id=224199
Modified: trunk/Source/WebCore/inspector/InspectorOverlay.cpp (275559 => 275560)
--- trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2021-04-06 22:09:25 UTC (rev 275559)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2021-04-06 22:13:40 UTC (rev 275560)
@@ -85,8 +85,8 @@
static constexpr float rulerSubStepIncrement = 5;
static constexpr float rulerSubStepLength = 5;
-static constexpr float layoutLabelPadding = 3;
-static constexpr float layoutLabelArrowSize = 4;
+static constexpr float layoutLabelPadding = 4;
+static constexpr float layoutLabelArrowSize = 6;
static constexpr UChar bullet = 0x2022;
static constexpr UChar ellipsis = 0x2026;
@@ -1466,7 +1466,7 @@
void InspectorOverlay::drawGridOverlay(GraphicsContext& context, const InspectorOverlay::Highlight::GridHighlightOverlay& gridOverlay)
{
- constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
+ constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(230);
GraphicsContextStateSaver saver(context);
context.setStrokeThickness(1);
@@ -1623,7 +1623,7 @@
return { };
}
- constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
+ constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(230);
FrameView* pageView = m_page.mainFrame().view();
if (!pageView)
@@ -1828,7 +1828,7 @@
gapLabelPosition = gapLabelLine.pointAtAbsoluteDistance(expectedLabelSize.height());
}
- gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, Color::white, arrowDirection, arrowEdgePosition));
+ gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, translucentLabelBackgroundColor, arrowDirection, arrowEdgePosition));
}
}
@@ -1901,7 +1901,7 @@
if (gapLabelPosition.x() - expectedLabelSize.width() + scrollPosition.x() - viewportBounds.x() < 0)
arrowDirection = correctedArrowDirection(LabelArrowDirection::Left, GridTrackSizingDirection::ForRows);
- gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, Color::white, arrowDirection, arrowEdgePosition));
+ gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, translucentLabelBackgroundColor, arrowDirection, arrowEdgePosition));
}
}
Modified: trunk/Source/WebKit/ChangeLog (275559 => 275560)
--- trunk/Source/WebKit/ChangeLog 2021-04-06 22:09:25 UTC (rev 275559)
+++ trunk/Source/WebKit/ChangeLog 2021-04-06 22:13:40 UTC (rev 275560)
@@ -1,3 +1,16 @@
+2021-04-06 Patrick Angle <pan...@apple.com>
+
+ Web Inspector: Grid overlay label style cleanup
+ https://bugs.webkit.org/show_bug.cgi?id=224240
+
+ Reviewed by BJ Burg.
+
+ Mirror changes to constants from `WebCore::InspectorOverlay`.
+
+ * UIProcess/Inspector/ios/WKInspectorHighlightView.mm:
+ (createLayoutLabelLayer):
+ (-[WKInspectorHighlightView _createGridOverlayLayer:scale:]):
+
2021-04-06 Mike Gorse <mgo...@suse.com>
Build fails when video is disabled
Modified: trunk/Source/WebKit/UIProcess/Inspector/ios/WKInspectorHighlightView.mm (275559 => 275560)
--- trunk/Source/WebKit/UIProcess/Inspector/ios/WKInspectorHighlightView.mm 2021-04-06 22:09:25 UTC (rev 275559)
+++ trunk/Source/WebKit/UIProcess/Inspector/ios/WKInspectorHighlightView.mm 2021-04-06 22:13:40 UTC (rev 275560)
@@ -323,7 +323,7 @@
auto font = WebCore::InspectorOverlay::fontForLayoutLabel();
constexpr auto padding = 4;
- constexpr auto arrowSize = 4;
+ constexpr auto arrowSize = 6;
float textHeight = font.fontMetrics().floatHeight();
float textWidth = font.width(WebCore::TextRun(label));
@@ -461,7 +461,7 @@
[layer addSublayer:areaLayer];
}
- constexpr auto translucentLabelBackgroundColor = WebCore::Color::white.colorWithAlphaByte(153);
+ constexpr auto translucentLabelBackgroundColor = WebCore::Color::white.colorWithAlphaByte(230);
for (auto area : overlay.areas)
[layer addSublayer:createLayoutLabelLayer(area.name, area.quad.p1(), WebCore::InspectorOverlay::LabelArrowDirection::None, WebCore::InspectorOverlay::LabelArrowEdgePosition::None, translucentLabelBackgroundColor, overlay.color, scale, area.quad.boundingBox().width())];
