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 367 matching lines @@
         for (var x in topmostYForX) {
             context.beginPath();
             context.moveTo(x, 0);
             context.lineTo(x, topmostYForX[x]);
             context.stroke();
         }
     }
 
     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)

[rwlbuis, 2014/04/24 15:17:27]

You could combine above using else so you only test shapeInfo.shape once.

[Habib Virji, 2014/04/24 17:12:22]

Done.

+        drawOutlinedQuad(shapeInfo.bounds, shapeHighlightColor, shapeHighlightColor);
+}
+
 function drawNodeHighlight(highlight)
 {
     {
         for (var i = 0; i < highlight.quads.length; ++i) {
             var quad = highlight.quads[i];
             for (var j = 0; j < quad.length; ++j) {
                 quad[j].x = Math.round(quad[j].x * pageScaleFactor - scrollX);
                 quad[j].y = Math.round(quad[j].y * pageScaleFactor - scrollY);
             }
         }
@@ skipping 51 matching lines @@
         }
     }
 
     var rulerAtRight = minX < 20 && maxX + 20 < width;
     var rulerAtBottom = minY < 20 && maxY + 20 < height;
 
     if (highlight.showRulers) {
         _drawGrid(rulerAtRight, rulerAtBottom);
         _drawRulers(highlight, rulerAtRight, rulerAtBottom);
     }
+    if (highlight.elementInfo && highlight.elementInfo.shapeOutsideInfo)
+        drawShapeHighlight(highlight.elementInfo.shapeOutsideInfo);
     _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>