From b775dae0963e20c7e3acb9657a009d9fae62e0c3 Mon Sep 17 00:00:00 2001
From: Sven Slootweg <admin@cryto.net>
Date: Mon, 12 Aug 2019 00:06:54 +0200
Subject: [PATCH] Add "highlight all" functionality

---
 public/scraping-tool-stylesheet.css   | 13 +++++++++--
 src/injector/get-element-position.js  | 12 ++++++++++
 src/injector/index.jsx                | 33 +++++++++++++++++++++++++++
 src/injector/use-memoized-position.js | 11 +++------
 4 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 src/injector/get-element-position.js

diff --git a/public/scraping-tool-stylesheet.css b/public/scraping-tool-stylesheet.css
index f8c23ad..7a41e73 100644
--- a/public/scraping-tool-stylesheet.css
+++ b/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;
diff --git a/src/injector/get-element-position.js b/src/injector/get-element-position.js
new file mode 100644
index 0000000..8beb0c6
--- /dev/null
+++ b/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
+	};
+};
diff --git a/src/injector/index.jsx b/src/injector/index.jsx
index c7600cd..d6d4147 100644
--- a/src/injector/index.jsx
+++ b/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(() => {
diff --git a/src/injector/use-memoized-position.js b/src/injector/use-memoized-position.js
index 7424530..a7b4a41 100644
--- a/src/injector/use-memoized-position.js
+++ b/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 {};
 		}