Fix performance issue when calculating if element has significant sib…

…lings (#166)

* Remove <option> element from hintable selector as we cannot display hints for them

* Fix performance issue when calculating if element has significant siblings

src/content/hints/selectors.ts

@@ -2,7 +2,7 @@ import { retrieve, store } from "../../common/storage";
 
 const defaultSelector =
 	// Elements
-	"button, a, input, summary, textarea, select, option, label, " +
+	"button, a, input, summary, textarea, select, label, " +
 	// Roles
 	"[role='button'], [role='link'], [role='treeitem'], [role='tab'], [role='option'], " +
 	"[role='radio'], [role='checkbox'], [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], " +

src/content/utils/isHintable.ts

@@ -12,19 +12,27 @@ import {
 } from "../hints/selectors";
 import { isVisible } from "./isVisible";
 
+/**
+ * Returns true if the element has any Element siblings (that are not hints) or
+ * any Text sibling with content. For performance reasons if the element has
+ * more than 9 siblings of any kind it will return true.
+ */
 function hasSignificantSiblings(target: Node) {
 	if (!target.parentNode) return false;
 
-	const significantSiblingsIncludingSelf = [
-		...target.parentNode.childNodes,
-	].filter(
+	// This is to improve performance in case the parent has many child nodes. In
+	// that case we can safely assume the element has significant siblings.
+	if (target.parentNode.childNodes.length > 10) return true;
+
+	return [...target.parentNode.childNodes].some(
 		(node) =>
+			node !== target &&
 			// We need to exclude hint divs for when we display/remove extra hints
-			(node instanceof Element && node.className !== "rango-hint-wrapper") ||
-			(node instanceof Text && node.textContent && /\S/.test(node.textContent))
+			((node instanceof Element && node.className !== "rango-hint") ||
+				(node instanceof Text &&
+					node.textContent &&
+					/\S/.test(node.textContent)))
 	);
-
-	return significantSiblingsIncludingSelf.length > 1;
 }
 
 function isRedundant(target: Element) {
@@ -38,6 +46,8 @@ function isRedundant(target: Element) {
 		return false;
 	}
 
+	// This catches instances of hintables that are wrapped within another
+	// hintable. For example a <div role="button"> that only contains a <button>.
 	if (
 		target.parentElement &&
 		matchesHintableSelector(target.parentElement) &&