Index: Source/core/inspector/InspectorOverlayPage.html |
diff --git a/Source/core/inspector/InspectorOverlayPage.html b/Source/core/inspector/InspectorOverlayPage.html |
index d36839592656bb4ae242f14e3b91ca88ba86d1b4..6e8b00c61b04ef078d33aa2e83a71b7ce2ec1494 100644 |
--- a/Source/core/inspector/InspectorOverlayPage.html |
+++ b/Source/core/inspector/InspectorOverlayPage.html |
@@ -156,6 +156,9 @@ const lightGridColor = "rgba(0,0,0,0.2)"; |
const darkGridColor = "rgba(0,0,0,0.7)"; |
const transparentColor = "rgba(0, 0, 0, 0)"; |
const gridBackgroundColor = "rgba(255, 255, 255, 0.8)"; |
+//CSS shapes |
+const shapeHighlightColor = "rgba(96, 82, 127, 0.8)"; |
+const shapeMarginHighlightColor = "rgba(96, 82, 127, 0.6)"; |
function drawPausedInDebuggerMessage(message) |
{ |
@@ -336,6 +339,61 @@ function drawOutlinedQuadWithClip(quad, clipQuad, fillColor) |
context.restore(); |
} |
+function drawCSSPath(commands, fillColor) |
+{ |
+ context.save(); |
+ context.beginPath(); |
+ |
+ var commandsIndex = 0; |
+ var commandsLength = commands.length; |
+ while(commandsIndex < commandsLength) { |
apavlov
2014/04/17 16:11:32
Whitespace between "while" and parenthesis
Habib Virji
2014/04/17 16:27:02
Done.
|
+ switch(commands[commandsIndex]) { |
apavlov
2014/04/17 16:11:32
Whitespace between "switch" and parenthesis
Habib Virji
2014/04/17 16:27:02
Done.
|
+ case "M": |
+ context.moveTo(commands[commandsIndex+1], commands[commandsIndex+2]); |
+ commandsIndex += 2 + 1; |
+ break; |
+ case "L": |
+ context.lineTo(commands[commandsIndex+1], commands[commandsIndex+2]); |
+ commandsIndex += 2 + 1; |
+ break; |
+ case "C": |
+ context.bezierCurveTo(commands[commandsIndex+1], commands[commandsIndex+2], commands[commandsIndex+3], |
+ commands[commandsIndex+4], commands[commandsIndex+5], commands[commandsIndex+6]); |
+ commandsIndex += 6 + 1; |
+ break; |
+ case "Q": |
+ context.quadraticCurveTo(commands[commandsIndex+1], commands[commandsIndex+2], commands[commandsIndex+3], |
+ commands[commandsIndex+4]); |
+ commandsIndex += 4 + 1; |
+ break; |
+ case "Z": |
+ context.closePath(); |
+ commandsIndex++; |
+ break; |
+ default: |
+ commandsIndex++; |
+ } |
+ } |
+ context.closePath(); |
+ context.fillStyle = fillColor; |
+ context.fill(); |
+ |
+ context.restore(); |
+} |
+ |
+function _drawShapeHighlight(shapeInfo) |
+{ |
+ if (shapeInfo.marginShape) |
+ drawCSSPath(shapeInfo.marginShape, shapeMarginHighlightColor); |
+ |
+ if (shapeInfo.shape) |
+ drawCSSPath(shapeInfo.shape, shapeHighlightColor); |
+ |
+ if (!(shapeInfo.shape || shapeInfo.marginShape)) |
apavlov
2014/04/17 16:11:32
optional:
if (!shapeInfo.shape && !shapeInfo.marg
Habib Virji
2014/04/17 16:27:02
Done.
Habib Virji
2014/04/17 16:27:02
Done.
|
+ drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor); |
+} |
+ |
+ |
function drawUnderlyingQuad(quad, fillColor) |
{ |
context.save(); |
@@ -577,24 +635,27 @@ function drawNodeHighlight(highlight) |
var hasMargin = marginQuad && highlight.marginColor !== transparentColor; |
var hasEventTarget = eventTargetQuad && highlight.eventTargetColor !== transparentColor; |
- var clipQuad; |
- if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad))) { |
- drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor); |
- clipQuad = borderQuad; |
- } |
- if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad))) { |
- drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor); |
- clipQuad = paddingQuad; |
- } |
- if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad))) { |
- drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor); |
- clipQuad = contentQuad; |
+ if (highlight.elementInfo && highlight.elementInfo.shapeOutsideInfo) { |
+ _drawShapeHighlight(highlight.elementInfo.shapeOutsideInfo); |
+ } else { |
+ var clipQuad; |
+ if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad))) { |
+ drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor); |
+ clipQuad = borderQuad; |
+ } |
+ if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad))) { |
+ drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor); |
+ clipQuad = paddingQuad; |
+ } |
+ if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad))) { |
+ drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor); |
+ clipQuad = contentQuad; |
+ } |
+ if (hasContent) |
+ drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor); |
+ if (hasEventTarget) |
+ drawUnderlyingQuad(eventTargetQuad, highlight.eventTargetColor); |
} |
- if (hasContent) |
- drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor); |
- if (hasEventTarget) |
- drawUnderlyingQuad(eventTargetQuad, highlight.eventTargetColor); |
- |
var width = canvasWidth; |
var height = canvasHeight; |
var minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = Number.MIN_VALUE; maxY = Number.MIN_VALUE; |
@@ -615,6 +676,7 @@ function drawNodeHighlight(highlight) |
_drawGrid(rulerAtRight, rulerAtBottom); |
_drawRulers(highlight, rulerAtRight, rulerAtBottom); |
} |
+ |
_drawElementTitle(highlight); |
context.restore(); |