Various improvements

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>

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;

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) => {

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(" ");
+	}
 };

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>
 	);