CSS shapes support in Web Inspector

Source/core/inspector/InspectorOverlayPage.html

Index: Source/core/inspector/InspectorOverlayPage.html
diff --git a/Source/core/inspector/InspectorOverlayPage.html b/Source/core/inspector/InspectorOverlayPage.html
index d36839592656bb4ae242f14e3b91ca88ba86d1b4..343f7fa54bb968a74d10afef1b0b59ec357bb545 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) {
+        switch (commands[commandsIndex]) {
+        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:39:12]

This is wrong: !(a || b) === (!a && !b). See
http://en.wikipedia.org/wiki/De_Morgan's_laws for the reference.

[Habib Virji, 2014/04/17 16:43:15]

Thanks for pointing out. Corrected

+        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();