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..95c38b355ee503b9c7013d946e8a9dd6b04571df 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -156,7 +156,10 @@ 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)";
+ 

[Bear Travis, 2014/04/23 20:46:06]

Extra space character here.

[Habib Virji, 2014/04/24 09:53:21]

Done.

 function drawPausedInDebuggerMessage(message)
 {
     window._controlsVisible = true;
@@ -543,6 +546,53 @@ function _drawRulers(highlight, rulerAtRight, rulerAtBottom)
 
     context.restore();
 }
+// CSS shapes 
+function drawPath(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++], commands[commandsIndex++]);
+            break;
+        case "L":
+            context.lineTo(commands[commandsIndex++], commands[commandsIndex++]);
+            break;
+        case "C":
+            context.bezierCurveTo(commands[commandsIndex++], commands[commandsIndex++], commands[commandsIndex++],
+                                  commands[commandsIndex++], commands[commandsIndex++], commands[commandsIndex++]);
+            break;
+        case "Q":
+            context.quadraticCurveTo(commands[commandsIndex++], commands[commandsIndex++], commands[commandsIndex++],
+                                     commands[commandsIndex++]);
+            break;
+        case "Z":
+            context.closePath();
+            break;
+        }
+    }
+    context.closePath();
+    context.fillStyle = fillColor;
+    context.fill();
+
+    context.restore();
+}
+
+function drawShapeHighlight(shapeInfo)
+{
+    if (shapeInfo.marginShape)
+        drawPath(shapeInfo.marginShape, shapeMarginHighlightColor);
+
+    if (shapeInfo.shape)
+        drawPath(shapeInfo.shape, shapeHighlightColor);
+
+    if (!shapeInfo.shape && !shapeInfo.marginShape)
+        drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor);
+}
 
 function drawNodeHighlight(highlight)
 {
@@ -615,6 +665,8 @@ function drawNodeHighlight(highlight)
         _drawGrid(rulerAtRight, rulerAtBottom);
         _drawRulers(highlight, rulerAtRight, rulerAtBottom);
     }
+    if (highlight.elementInfo && highlight.elementInfo.shapeOutsideInfo)
+        drawShapeHighlight(highlight.elementInfo.shapeOutsideInfo);
     _drawElementTitle(highlight);
 
     context.restore();