Modified: trunk/Source/WebCore/ChangeLog (239078 => 239079)
--- trunk/Source/WebCore/ChangeLog 2018-12-11 19:21:38 UTC (rev 239078)
+++ trunk/Source/WebCore/ChangeLog 2018-12-11 19:27:26 UTC (rev 239079)
@@ -1,3 +1,24 @@
+2018-12-11 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: overlay bounds rulers don't match element when page is scrolled
+ https://bugs.webkit.org/show_bug.cgi?id=192577
+
+ Reviewed by Joseph Pecoraro.
+
+ When drawing the highlight for a node, the canvas is translated based on the scroll position
+ of the node. This translation was not applied to the bounds calculations, which meant that
+ the bounds always drew where the node would have been if it wasn't scrolled.
+
+ * inspector/InspectorOverlayPage.js:
+ (Bounds.prototype.get minX):
+ (Bounds.prototype.get minY):
+ (Bounds.prototype.get maxX):
+ (Bounds.prototype.get maxY):
+ (Bounds.prototype.offset): Added.
+ (drawNodeHighlight):
+ Drive-by: draw bounds for every node being highlighted instead of just the first one.
+ Drive-by: switch the bounds color to be a semi-transparent red for more visibility/contrast.
+
2018-12-11 Andy Estes <aes...@apple.com>
Introduce makeBlockPtr for lambdas
Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.js (239078 => 239079)
--- trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2018-12-11 19:21:38 UTC (rev 239078)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2018-12-11 19:27:26 UTC (rev 239079)
@@ -1,4 +1,4 @@
-const boundsColor = "rgba(0,0,0,0.4)";
+const boundsColor = "rgba(255,0,0,0.6)";
const lightGridColor = "rgba(0,0,0,0.2)";
const darkGridColor = "rgba(0,0,0,0.5)";
const transparentColor = "rgba(0, 0, 0, 0)";
@@ -22,14 +22,17 @@
this._minY = Number.MAX_VALUE;
this._maxX = Number.MIN_VALUE;
this._maxY = Number.MIN_VALUE;
+
+ this._offsetX = 0;
+ this._offsetY = 0;
}
// Public
- get minX() { return this._minX; }
- get minY() { return this._minY; }
- get maxX() { return this._maxX; }
- get maxY() { return this._maxY; }
+ get minX() { return this._minX + this._offsetX; }
+ get minY() { return this._minY + this._offsetY; }
+ get maxX() { return this._maxX + this._offsetX; }
+ get maxY() { return this._maxY + this._offsetY; }
update(x, y)
{
@@ -38,6 +41,12 @@
this._maxX = Math.max(this._maxX, x);
this._maxY = Math.max(this._maxY, y);
}
+
+ offset(x, y)
+ {
+ this._offsetX = x || 0;
+ this._offsetY = y || 0;
+ }
}
function drawPausedInDebuggerMessage(message)
@@ -50,9 +59,10 @@
function drawNodeHighlight(allHighlights)
{
- let bounds = new Bounds;
+ for (let highlight of allHighlights) {
+ let bounds = new Bounds;
+ bounds.offset(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
- for (let highlight of allHighlights) {
_isolateActions(() => {
context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
@@ -62,11 +72,11 @@
if (highlight.elementData && highlight.elementData.shapeOutsideData)
_drawShapeHighlight(highlight.elementData.shapeOutsideData, bounds);
});
+
+ if (DATA.showRulers)
+ _drawBounds(bounds);
}
- if (DATA.showRulers)
- _drawBounds(bounds);
-
if (allHighlights.length === 1) {
for (let fragment of allHighlights[0].fragments)
_drawElementTitle(allHighlights[0].elementData, fragment, allHighlights[0].scrollOffset);
