Add "highlight all" functionality

public/scraping-tool-stylesheet.css

@@ -34,12 +34,20 @@
 	z-index: 999999991;
 }
 
+.___scraping___tool___hover, .___scraping___tool___selection, .___scraping___tool___secondarySelection {
+	box-sizing: border-box;
+	border: 1px solid black;
+}
+
 .___scraping___tool___hover {
 	background-color: rgba(216, 61, 255, 0.4);
+	border-color: rgba(140, 21, 170, 0.4);
+	z-index: 999999992;
 }
 
 .___scraping___tool___selection {
 	background-color: rgba(0, 255, 0, 0.4);
+	border-color: rgba(0, 184, 0, 0.4);
 }
 
 .___scraping___tool___tooltip {
@@ -51,12 +59,13 @@
 }
 
 .___scraping___tool___secondarySelection {
-	background-color: rgb(104, 241, 230);
+	background-color: rgba(181, 238, 233, 0.4);
+	border-color: rgba(80, 185, 177, 0.4);
 }
 
 .___scraping___tool___candidatePicker {
 	pointer-events: initial;
-	z-index: 999999992;
+	z-index: 999999995;
 
 	position: absolute;
 	left: 16px;

src/injector/get-element-position.js

@@ -0,0 +1,12 @@
+"use strict";
+
+module.exports = function getElementPosition(element) {
+	let rect = element.getBoundingClientRect();
+	
+	return {
+		x: rect.left,
+		y: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+};

src/injector/index.jsx

@@ -12,6 +12,7 @@ const useStateRef = require("./use-state-ref");
 const useMemoizedPosition = require("./use-memoized-position");
 const elementsFromPoint = require("./elements-from-point");
 const uniqueElementId = require("./unique-element-id");
+const getElementPosition = require("./get-element-position");
 
 function Overlay() {
 	let [ scrollX, setScrollX ] = React.useState();
@@ -72,6 +73,23 @@ function Overlay() {
 	let pickedPosition = useMemoizedPosition(pickedElement, [ scrollX, scrollY ]);
 	let pickHoveredPosition = useMemoizedPosition(pickHoveredElement, [ scrollX, scrollY ]);
 
+	let secondaryMatches = React.useMemo(() => {
+		if (selectedElement != null) {
+			let elements = Array.from(document.querySelectorAll(generateSelector(selectedElement)));
+
+			return elements
+				.filter((element) => element !== selectedElement)
+				.map((element) => {
+					return {
+						element: element,
+						position: getElementPosition(element)
+					};
+				});
+		} else {
+			return [];
+		}
+	}, [ selectedElement, scrollX, scrollY ]);
+
 	return (
 		<div className="___scraping___tool___overlay active">
 			{(hoveredPosition != null && isHovering)
@@ -94,6 +112,13 @@ function Overlay() {
 				? <Picker candidates={elementList} onHover={setPickHoveredElement} />
 				: null
 			}
+			{secondaryMatches.map((element) => {
+				return <SecondarySelectionHighlight
+					key={uniqueElementId(element)}
+					element={element.element}
+					{... element.position}
+				/>
+			})}
 		</div>
 	);
 }
@@ -142,6 +167,14 @@ function PrimarySelectionHighlight({ x, y, width, height, element }) {
 	</>);
 }
 
+function SecondarySelectionHighlight({ x, y, width, height, element }) {
+	let boxStyle = { left: x, top: y, width: width, height: height };
+
+	return (<>
+		<div className="___scraping___tool___secondarySelection" style={boxStyle} />
+	</>);
+}
+
 Promise.try(() => {
 	return documentReadyPromise();
 }).then(() => {

src/injector/use-memoized-position.js

@@ -2,17 +2,12 @@
 
 const React = require("react");
 
+const getElementPosition = require("./get-element-position");
+
 module.exports = function useMemoizedPosition(element, extraDependencies = []) {
 	return React.useMemo(() => {
 		if (element != null) {
-			let rect = element.getBoundingClientRect();
-	
-			return {
-				x: rect.left,
-				y: rect.top,
-				width: rect.width,
-				height: rect.height
-			};
+			return getElementPosition(element);
 		} else {
 			return {};
 		}