From 48a3f3e9518b0e8285530b817263644d94dad2cf Mon Sep 17 00:00:00 2001
From: Sven Slootweg <admin@cryto.net>
Date: Tue, 26 Nov 2019 19:01:30 +0100
Subject: [PATCH] Various improvements

---
 data/injector.html                  |  2 +-
 public/scraping-tool-stylesheet.css |  2 +-
 rewrite-html-urls.js                |  2 +-
 src/injector/generate-selector.js   | 37 ++++++++++-------------------
 src/injector/index.jsx              | 16 ++++++++-----
 5 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/data/injector.html b/data/injector.html
index 997231b..0fc5f8c 100644
--- a/data/injector.html
+++ b/data/injector.html
@@ -2,6 +2,6 @@
 <link rel="stylesheet" href="/scraping-tool-stylesheet.css">
 <script src="/scraping-tool-bundle.js"></script>
 
-<div class="___scraping___tool___overlay active">
+<div class="___scraping___tool___overlay">
 	
 </div>
diff --git a/public/scraping-tool-stylesheet.css b/public/scraping-tool-stylesheet.css
index 7a41e73..a73aec6 100644
--- a/public/scraping-tool-stylesheet.css
+++ b/public/scraping-tool-stylesheet.css
@@ -23,7 +23,7 @@
 	z-index: 999999990;
 }
 
-.___scraping___tool___overlay.active {
+.___scraping___tool___overlay.___scraping___tool___active {
 	/* background-color: rgba(240, 0, 0, 0.4); */
 	font-family: sans-serif;
 	font-weight: normal;
diff --git a/rewrite-html-urls.js b/rewrite-html-urls.js
index 1975eda..e7a339f 100644
--- a/rewrite-html-urls.js
+++ b/rewrite-html-urls.js
@@ -42,7 +42,7 @@ module.exports = function (body, rewriteUrl) {
 	$("style").get().forEach((element) => {
 		let $element = $(element);
 
-		$element.text(rewriteCss($element.text()));
+		$element.text(rewriteCssUrls($element.text(), rewriteUrl));
 	});
 
 	$("*[style]").get().forEach((element) => {
diff --git a/src/injector/generate-selector.js b/src/injector/generate-selector.js
index c2c8899..f9ac048 100644
--- a/src/injector/generate-selector.js
+++ b/src/injector/generate-selector.js
@@ -16,28 +16,17 @@ module.exports = function generateSelector(element) {
 	/* FIXME: check that element != null */
 	let root = findIdRoot(element);
 
-	let segments = [
-		(root != null) ? `#${root.id}` : null,
-		(element.classList.length > 0)
-			? Array.from(element.classList).map((className) => `.${className}`).join("")
-			: element.tagName.toLowerCase()
-	].filter((segment) => segment != null);
-
-	return segments.join(" ");
-
-	// console.log(root);
-
-	// let className = element.classList.item(0);
-
-	// if (root === element) {
-	// 	return `#${root.id}`;
-	// } else if (root != null) {
-	// 	if (className != null) {
-	// 		return `#${root.id} .${className}`;
-	// 	} else {
-	// 		return `#${root.id} ${element.tagName}`;
-	// 	}
-	// } else {
-	// 	return `stuff`;
-	// }
+	if (root === element) {
+		/* Special case: always identify by the ID alone, never suffix anything else, when the selected element *itself* has an ID. */
+		return `#${element.id}`;
+	} else {
+		let segments = [
+			(root != null) ? `#${root.id}` : null,
+			(element.classList.length > 0)
+				? Array.from(element.classList).map((className) => `.${className}`).join("")
+				: element.tagName.toLowerCase()
+		].filter((segment) => segment != null);
+	
+		return segments.join(" ");
+	}
 };
diff --git a/src/injector/index.jsx b/src/injector/index.jsx
index d6d4147..0febadf 100644
--- a/src/injector/index.jsx
+++ b/src/injector/index.jsx
@@ -14,6 +14,8 @@ const elementsFromPoint = require("./elements-from-point");
 const uniqueElementId = require("./unique-element-id");
 const getElementPosition = require("./get-element-position");
 
+/* MARKER: Implement selection refining. The refining tree does NOT necessarily match the element selection tree, since overlapping elements are not necessarily DOM ancestors of one another. For refining, *all* identifiers should be shown: tag type, ID, classes. Item selection panel should be made a two-part panel (with the inactive part header-only and grayed out?), first item selection, then refining. */
+
 function Overlay() {
 	let [ scrollX, setScrollX ] = React.useState();
 	let [ scrollY, setScrollY ] = React.useState();
@@ -46,7 +48,8 @@ function Overlay() {
 			});
 
 			function clickHandler(event) {
-				if (enabledRef.current) {
+				/* TODO: Need to find a nicer way to exclude scraping tool UI from this interception, than looking at the class prefix */
+				if (enabledRef.current && !event.target.className.startsWith("___scraping___tool___")) {
 					event.preventDefault();
 					event.stopPropagation();
 
@@ -91,7 +94,7 @@ function Overlay() {
 	}, [ selectedElement, scrollX, scrollY ]);
 
 	return (
-		<div className="___scraping___tool___overlay active">
+		<div className="___scraping___tool___overlay ___scraping___tool___active">
 			{(hoveredPosition != null && isHovering)
 				? <HoverHighlight element={hoveredElement} {... hoveredPosition} />
 				: null
@@ -109,7 +112,7 @@ function Overlay() {
 				: null
 			}
 			{(isPicking)
-				? <Picker candidates={elementList} onHover={setPickHoveredElement} />
+				? <Picker candidates={elementList} onHover={setPickHoveredElement} onSelect={setSelectedElement} /> /* FIXME: setPickedElement eventually instead */
 				: null
 			}
 			{secondaryMatches.map((element) => {
@@ -123,7 +126,7 @@ function Overlay() {
 	);
 }
 
-function Picker({ candidates, onHover }) {
+function Picker({ candidates, onHover, onSelect }) {
 	return (
 		<div className="___scraping___tool___candidatePicker">
 			{candidates.map((candidate) => {
@@ -132,15 +135,16 @@ function Picker({ candidates, onHover }) {
 					element={candidate}
 					onEnter={() => onHover(candidate)}
 					onLeave={() => onHover(null)}
+					onClick={() => onSelect(candidate)}
 				/>;
 			})}
 		</div>
 	);
 }
 
-function PickerCandidate({ element, onEnter, onLeave }) {
+function PickerCandidate({ element, onEnter, onLeave, onClick }) {
 	return (
-		<div className="___scraping___tool___candidate" onMouseEnter={onEnter} onMouseLeave={onLeave}>
+		<div className="___scraping___tool___candidate" onMouseEnter={onEnter} onMouseLeave={onLeave} onClick={onClick}>
 			{generateSelector(element)}
 		</div>
 	);