Devtools [LayoutEditor]: show selector info and highlight affected nodes

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 236 matching lines @@
 const gridBackgroundColor = "rgba(255, 255, 255, 0.8)";
 
 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)
+function _drawGrid(context, rulerAtRight, rulerAtBottom)
 {
     if (window._gridPainted)
         return;
     window._gridPainted = true;
 
     context.save();
 
     var pageFactor = pageZoomFactor;
     function zoom(x)
     {
@@ skipping 133 matching lines @@
     }
 
     var frameWidth = canvasWidth;
     var textWidth = context.measureText(text).width;
     context.fillStyle = gridBackgroundColor;
     context.fillRect(frameWidth - textWidth - 12, drawGridBoolean ? 15 : 0, frameWidth, 25);
     context.fillStyle = darkGridColor;
     context.fillText(text, frameWidth - textWidth - 6, drawGridBoolean ? 33 : 18);
     context.restore();
     if (drawGridBoolean)
-        _drawGrid();
+        _drawGrid(context);
 }
 
 function resetCanvas(canvasElement)
 {
     canvasElement.width = deviceScaleFactor * viewportSize.width;
     canvasElement.height = deviceScaleFactor * viewportSize.height;
     canvasElement.style.width = viewportSize.width + "px";
     canvasElement.style.height = viewportSize.height + "px";
     var context = canvasElement.getContext("2d");
     context.scale(deviceScaleFactor, deviceScaleFactor);
 }
 
 function reset(resetData)
 {
     window.viewportSize = resetData.viewportSize;
     window.deviceScaleFactor = resetData.deviceScaleFactor;
     window.pageZoomFactor = resetData.pageZoomFactor;
     window.scrollX = Math.round(resetData.scrollX);
     window.scrollY = Math.round(resetData.scrollY);
 
     window.canvas = document.getElementById("canvas");
     window.context = canvas.getContext("2d");
     resetCanvas(canvas);
-
+    var matchedNodesCanvas = document.getElementById("layout-editor-matched-nodes-canvas");
+    resetCanvas(matchedNodesCanvas);
     window.labelsCanvas = document.getElementById("labels-canvas");
     resetLabelCanvas();
 
     window.canvasWidth = viewportSize.width;
     window.canvasHeight = viewportSize.height;
 
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
     document.getElementById("element-title").style.visibility = "hidden";
     document.getElementById("tooltip-container").classList.add("hidden");
     var editor = document.getElementById("editor");
     editor.style.visibility = "hidden";
     editor.textContent = "";
+    document.getElementById("selector-tooltip").style.visibility = "hidden";
     document.body.classList.remove("dimmed");
     document.removeEventListener("mousedown", consumeEvent);
     document.removeEventListener("mousemove", onLayoutEditorMouseMove);
     document.removeEventListener("mouseup", consumeEvent);
     document.removeEventListener("click", onLayoutEditorClick);
     document.removeEventListener("keydown", onLayoutEditorKeyDown);
+    document.removeEventListener("mousewheel", onLayoutEditorMouseWheel);
 
     delete window.hoverableAreas;
     delete window.anchorsByType;
     window._gridPainted = false;
 }
 
-function _drawElementTitle(elementInfo, bounds)
+function _drawElementTitle(context, elementInfo, bounds)
 {
     document.getElementById("tag-name").textContent = elementInfo.tagName;
     document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
     var className = elementInfo.className;
     if (className && className.length > 50)
        className = className.substring(0, 50) + "\u2026";
     document.getElementById("class-name").textContent = className || "";
     document.getElementById("node-width").textContent = elementInfo.nodeWidth;
     document.getElementById("node-height").textContent = elementInfo.nodeHeight;
     var elementTitle = document.getElementById("element-title");
@@ skipping 109 matching lines @@
     // Hide arrow if element is completely off the sides of the page.
     var arrowHidden = arrowX < pageMargin + tooltipBorderRadius || arrowX + arrowRadius * 2 > canvasWidth - pageMargin - tooltipBorderRadius;
     tooltipArrow.classList.toggle("hidden", arrowHidden);
     if (!arrowHidden) {
         tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
         tooltipArrow.style.top = (onTop ? boxY + titleHeight : boxY - arrowRadius) + "px";
         tooltipArrow.style.left = arrowX + "px";
     }
 }
 
-function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
+function _drawRulers(context, bounds, rulerAtRight, rulerAtBottom)
 {
     context.save();
     var width = canvasWidth;
     var height = canvasHeight;
     context.strokeStyle = "rgba(128, 128, 128, 0.3)";
     context.lineWidth = 1;
     context.translate(0.5, 0.5);
 
     if (rulerAtRight) {
         for (var y in bounds.rightmostXForY) {
@@ skipping 23 matching lines @@
             context.beginPath();
             context.moveTo(x, 0);
             context.lineTo(x, bounds.topmostYForX[x]);
             context.stroke();
         }
     }
 
     context.restore();
 }
 
-function drawPath(commands, fillColor, outlineColor, bounds, name)
+function drawPath(context, commands, fillColor, outlineColor, bounds, name)
 {
     var commandsIndex = 0;
 
     function extractPoints(count)
     {
         var points = [];
 
         for (var i = 0; i < count; ++i) {
             var x = Math.round(commands[commandsIndex++]);
             bounds.maxX = Math.max(bounds.maxX, x);
@@ skipping 48 matching lines @@
     context.restore();
 
     if (name) {
         if (!window.hoverableAreas)
             window.hoverableAreas = new Map();
 
         window.hoverableAreas.set(name, path);
     }
 }
 
-function drawHighlight(highlight)
+function drawHighlight(highlight, context)
 {
+    context = context || window.context;
     context.save();
 
     var bounds = {
         minX: Number.MAX_VALUE,
         minY: Number.MAX_VALUE,
         maxX: Number.MIN_VALUE,
         maxY: Number.MIN_VALUE,
         leftmostXForY: {},
         rightmostXForY: {},
         topmostYForX: {},
         bottommostYForX: {}
     };
 
     for (var paths = highlight.paths.slice(); paths.length;) {
         var path = paths.pop();
-        drawPath(path.path, path.fillColor, path.outlineColor, bounds, path.name);
+        drawPath(context, path.path, path.fillColor, path.outlineColor, bounds, path.name);
         if (paths.length) {
             context.save();
             context.globalCompositeOperation = "destination-out";
-            drawPath(paths[paths.length - 1].path, "red", null, bounds);
+            drawPath(context, paths[paths.length - 1].path, "red", null, bounds);
             context.restore();
         }
     }
 
     var rulerAtRight = highlight.paths.length && highlight.showRulers && bounds.minX < 20 && bounds.maxX + 20 < canvasWidth;
     var rulerAtBottom = highlight.paths.length && highlight.showRulers && bounds.minY < 20 && bounds.maxY + 20 < canvasHeight;
 
     if (highlight.showRulers)
-        _drawGrid(rulerAtRight, rulerAtBottom);
+        _drawGrid(context, rulerAtRight, rulerAtBottom);
 
     if (highlight.paths.length) {
         if (highlight.showExtensionLines)
-            _drawRulers(bounds, rulerAtRight, rulerAtBottom);
+            _drawRulers(context, bounds, rulerAtRight, rulerAtBottom);
 
         if (highlight.elementInfo && highlight.displayAsMaterial)
            _drawMaterialElementTitle(highlight.elementInfo, bounds);
         else if (highlight.elementInfo)
-           _drawElementTitle(highlight.elementInfo, bounds);
+           _drawElementTitle(context, highlight.elementInfo, bounds);
     }
     context.restore();
 }
 
 function setPlatform(platform)
 {
     window.platform = platform;
     document.body.classList.add("platform-" + platform);
 }
 
@@ skipping 59 matching lines @@
     }
 
     if (selectedAnchorInfo)
         showLabels(selectedAnchorInfo.type, selectedAnchorInfo.propertyName);
 
     document.addEventListener("mousedown", consumeEvent);
     document.addEventListener("mousemove", onLayoutEditorMouseMove);
     document.addEventListener("mouseup", consumeEvent);
     document.addEventListener("click", onLayoutEditorClick);
     document.addEventListener("keydown", onLayoutEditorKeyDown);
+    document.addEventListener("mousewheel", onLayoutEditorMouseWheel);
+    showSelectorTooltip();
+}
+
+function showSelectorTooltip()
+{
+    var tooltipElement = document.getElementById("selector-tooltip");
+    tooltipElement.style.visibility = "visible";
+    tooltipElement.style.left = "100px";
+    tooltipElement.style.top = "100px";
+    var selectorInfo = JSON.parse(InspectorOverlayHost.currentSelectorInfo());
+    tooltipElement.textContent = selectorInfo.selector;
+    tooltipElement.style.backgroundColor = "#eee";
+
+    var matchedNodesCanvas = document.getElementById("layout-editor-matched-nodes-canvas");
+    resetCanvas(matchedNodesCanvas);
+
+    if (!selectorInfo.nodes)
+        return;
+
+    for (var nodeHighlight of selectorInfo.nodes)
+        drawHighlight(nodeHighlight, matchedNodesCanvas.getContext("2d"));
 }
 
 function createAnchor(anchorInfo)
 {
     var handleWidth = 5;
     context.save();
     context.shadowColor = "rgba(0, 0, 0, 0.34)";
     context.shadowBlur = 2;
     context.fillStyle = anchorColorForProperty(anchorInfo);
     context.beginPath();
@@ skipping 226 matching lines @@
     if (window.draggedPropertyName)
         return;
 
     // Clear selection on Esc.
     if (event.keyIdentifier === "U+001B") {
         event.preventDefault();
         InspectorOverlayHost.clearSelection(false);
     }
 }
 
+function onLayoutEditorMouseWheel(event)
+{
+    event.preventDefault();
+    if (event.wheelDelta > 0)
+        InspectorOverlayHost.previousSelector();
+    else
+        InspectorOverlayHost.nextSelector();
+
+    showSelectorTooltip();
+}
+
 function consumeEvent(event)
 {
     event.preventDefault();
 }
 
 function resetLabelCanvas()
 {
     delete window.labelCanvasState;
     resetCanvas(labelsCanvas);
     if (!window.draggedPropertyName && document.body.style.cursor)
@@ skipping 27 matching lines @@
 
 </script>
 </head>
 <body class="fill">
 <div class="controls-line">
     <div class="message-box"><div id="paused-in-debugger"></div></div>
     <div class="button" id="resume-button" title="Resume script execution (F8)."><div class="glyph"></div></div>
     <div class="button" id="step-over-button" title="Step over next function call (F10)."><div class="glyph"></div></div>
 </div>
 </body>
+<canvas id="layout-editor-matched-nodes-canvas" class="fill"></canvas>
 <canvas id="canvas" class="fill"></canvas>
 <canvas id="labels-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="tooltip-container" class="hidden">
     <div id="element-tooltip">
       <div id="element-description" class="monospace"><span id="material-tag-name"></span><span id="material-node-id"></span><span id="material-class-name"></span></div>
       <div id="dimensions"><span id="material-node-width"></span>&#xD7;<span id="material-node-height"></span></div>
     </div>
     <div id="element-tooltip-arrow"></div>
 <div id="editor" class="fill"></div>
+<div id="selector-tooltip"></div>
 <div id="log"></div>
 </html>