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 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();
     context.lineWidth = 2;
     context.globalCompositeOperation = "destination-over";
     context.fillStyle = fillColor;
     quadToPath(quad).fill();
     context.restore();
 }
 
@@ skipping 188 matching lines @@
             context.beginPath();
             context.moveTo(x, 0);
             context.lineTo(x, topmostYForX[x]);
             context.stroke();
         }
     }
 
     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)
 {
     {
         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>