CSS shapes support in Web Inspector

Source/core/inspector/InspectorOverlayPage.html

 <!--
  Copyright (C) 2012 Google Inc. All rights reserved.
 
  Redistribution and use in source and binary forms, with or without
  modification, are permitted provided that the following conditions
  are met:
 
  1.  Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
  2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 138 matching lines @@
     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
     color: rgb(153, 69, 0);
 }
 
 </style>
 <script>
 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)
 {
     window._controlsVisible = true;
     document.querySelector(".controls-line").style.visibility = "visible";
     document.getElementById("paused-in-debugger").textContent = message;
     document.body.classList.add("dimmed");
 }
 
 function _drawGrid(rulerAtRight, rulerAtBottom)
@@ skipping 160 matching lines @@
     context.fillStyle = fillColor;
     context.save();
     context.lineWidth = 0;
     quadToPath(quad).fill();
     context.globalCompositeOperation = "destination-out";
     context.fillStyle = "red";
     quadToPath(clipQuad).fill();
     context.restore();
 }
 
+function drawCSSPath(commands, fillColor)

[Bear Travis, 2014/04/17 20:26:45]

The name CSSPath seems a little odd, as I don't know of any CSS path element.
This particular syntax is borrowed from SVG.

[Habib Virji, 2014/04/23 16:28:33]

Done.

Wanted to be explicit, function usage details. Have added comment in top to be
explicit it is for css shapes. 

+{
+    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;

[Bear Travis, 2014/04/17 20:26:45]

Why not just combine these (ie commandsIndex += 3)? It seems extraneous to add
both numbers.

[Habib Virji, 2014/04/23 16:28:33]

Done.

+            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)
+        drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor);
+}
+
+
 function drawUnderlyingQuad(quad, fillColor)
 {
     context.save();
     context.lineWidth = 2;
     context.globalCompositeOperation = "destination-over";
     context.fillStyle = fillColor;
     quadToPath(quad).fill();
     context.restore();
 }
 
@@ skipping 221 matching lines @@
     var paddingQuad = quads.pop();
     var borderQuad = quads.pop();
     var marginQuad = quads.pop();
 
     var hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor;
     var hasPadding = paddingQuad && highlight.paddingColor !== transparentColor;
     var hasBorder = borderQuad && highlight.borderColor !== transparentColor;
     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 (highlight.elementInfo && highlight.elementInfo.shapeOutsideInfo) {
+        _drawShapeHighlight(highlight.elementInfo.shapeOutsideInfo);
+    } else {

[Bear Travis, 2014/04/17 20:26:45]

Are you not drawing the box model highlights when a shape is present? In WK, the
shape highlight is drawn on top of the box model highlight, which I think
provides additional useful information.

[Habib Virji, 2014/04/23 16:28:33]

OK, I tried with the box model previously but found so many boxes confusing. 

Perhaps we need some way of indicating in 4 boxes what is what, and indicate
clearly shape highlight.

[Habib Virji, 2014/04/23 16:28:33]

Done.

+        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 (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);
-
     var width = canvasWidth;
     var height = canvasHeight;
     var minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = Number.MIN_VALUE; maxY = Number.MIN_VALUE;
     for (var i = 0; i < highlight.quads.length; ++i) {
         var quad = highlight.quads[i];
         for (var j = 0; j < quad.length; ++j) {
             minX = Math.min(minX, quad[j].x);
             maxX = Math.max(maxX, quad[j].x);
             minY = Math.min(minY, quad[j].y);
             maxY = Math.max(maxY, quad[j].y);
         }
     }
 
     var rulerAtRight = minX < 20 && maxX + 20 < width;
     var rulerAtBottom = minY < 20 && maxY + 20 < height;
 
     if (highlight.showRulers) {
         _drawGrid(rulerAtRight, rulerAtBottom);
         _drawRulers(highlight, rulerAtRight, rulerAtBottom);
     }
+

[Bear Travis, 2014/04/17 20:26:45]

Added line break.

[Habib Virji, 2014/04/23 16:28:33]

Done.

     _drawElementTitle(highlight);
 
     context.restore();
 }
 
 function drawQuadHighlight(highlight)
 {
     context.save();
     drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor);
     context.restore();
@@ skipping 61 matching lines @@
     <div class="button" id="step-over-button" title="Step over next function call (F10)."><div class="glyph"></div></div>
 </div>
 </body>
 <canvas id="canvas" class="fill"></canvas>
 <div id="element-title">
   <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span>
   <span id="node-width"></span><span class="px">px</span><span class="px"> &#xD7; </span><span id="node-height"></span><span class="px">px</span>
 </div>
 <div id="log"></div>
 </html>