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..c78c19638ebae4268b5562da720c705df4198482 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,56 @@ function drawOutlinedQuadWithClip(quad, clipQuad, fillColor)
     context.restore();
 }
 
+function pathCommand(context, commands, name, index, length) {

[pfeldman, 2014/04/15 11:59:09]

{ on the next line

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

Done.

+    context[name].apply(context, commands.slice(index + 1, index + length + 1));

[pfeldman, 2014/04/15 11:59:09]

We plan on annotating this code with JSDoc, reflection like this makes things
harder to compile / lint.

+    return index + length + 1;
+}
+
+function drawPath(context, commands, fillColor, outlineColor)
+{
+    context.save();
+    context.beginPath();
+
+    var commandsIndex = 0;
+    var commandsLength = commands.length;
+    while(commandsIndex < commandsLength) {
+        switch(commands[commandsIndex]) {
+        // 1 point
+        case 'M':

[pfeldman, 2014/04/15 11:59:09]

We use double quotes for strings.

+            commandsIndex = pathCommand(context, commands, "moveTo", commandsIndex, 2);

[pfeldman, 2014/04/15 11:59:09]

Lets just call context.moveTo(...) and increment index by 2.

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

Done.

+            break;
+        // 1 point
+        case 'L':
+            commandsIndex = pathCommand(context, commands, "lineTo", commandsIndex, 2);
+            break;
+        // 3 points
+        case 'C':
+            commandsIndex = pathCommand(context, commands, "bezierCurveTo", commandsIndex, 6);
+            break;
+        // 2 points
+        case 'Q':
+            commandsIndex = pathCommand(context, commands, "quadraticCurveTo", commandsIndex, 2);
+            break;
+        // 0 points
+        case 'Z':
+            commandsIndex = pathCommand(context, commands, "closePath", commandsIndex, 0);
+            break;
+        default:
+            commandsIndex++;
+        }
+    }
+    context.closePath();
+    context.fillStyle = fillColor;
+    context.fill();
+
+    if (outlineColor) {
+        context.lineWidth = 2;
+        context.strokeStyle = outlineColor;
+        context.stroke();
+    }
+
+    context.restore();
+}
 function drawUnderlyingQuad(quad, fillColor)
 {
     context.save();
@@ -544,6 +597,17 @@ function _drawRulers(highlight, rulerAtRight, rulerAtBottom)
     context.restore();
 }
 
+function _drawShapeHighlight(shapeInfo) {

[pfeldman, 2014/04/15 11:59:09]

{ on the next line

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

Done.

+    if (shapeInfo.marginShape)
+        drawPath(context, shapeInfo.marginShape, shapeMarginHighlightColor);
+
+    if (shapeInfo.shape)
+        drawPath(context, shapeInfo.shape, shapeHighlightColor);
+
+    if (!(shapeInfo.shape || shapeInfo.marginShape))
+        drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor);
+}
+
 function drawNodeHighlight(highlight)
 {
     {
@@ -615,6 +679,9 @@ function drawNodeHighlight(highlight)
         _drawGrid(rulerAtRight, rulerAtBottom);
         _drawRulers(highlight, rulerAtRight, rulerAtBottom);
     }
+    if (highlight.elementInfo && highlight.elementInfo.shapeOutsideInfo)
+       _drawShapeHighlight(highlight.elementInfo.shapeOutsideInfo);
+
     _drawElementTitle(highlight);
 
     context.restore();