diff --git a/src/content/hinting.ts b/src/content/hinting.ts index 904b93de..0c55f987 100644 --- a/src/content/hinting.ts +++ b/src/content/hinting.ts @@ -844,15 +844,47 @@ export function hintables(selectors = DOM.HINTTAGS_selectors, withjs = false) { const elemSet = new Set([...elems, ...DOM.hintworthy_js_elems]) elems = [...elemSet] } - elems.forEach((element, index) => { - if (element.childNodes.length === 0 || element.tagName !== "A") return; - element.childNodes.forEach((child) => { - if (child.nodeName === "DIV" || child.nodeName === "SPAN") { - elems[index] = child as Element; + elems = elems.filter(DOM.isVisible) + return changeHintablesToLargestChild(elems); +} + +/** + * Changes html elements in an array to their largest child, + * if it is larger than the element in the array. + * @hidden + */ +function changeHintablesToLargestChild(elements: Element[]): Element[] { + elements.forEach((element, index) => { + if (element.childNodes.length === 0) return; + let largestChild: Element; + // Find largest child. + element.childNodes.forEach((c) => { + const currentChild = (c as Element); + if (!largestChild || isElementLargerThan(currentChild, largestChild)) { + largestChild = currentChild; } }) + // Change element if child is larger + if (isElementLargerThan(largestChild, element)) { + elements[index] = largestChild; + } }) - return elems.filter(DOM.isVisible) + return elements; +} + +/** + * Returns true if e1 is larger than e2, otherwise false. + * @hidden + */ +function isElementLargerThan(e1: Element, e2: Element): boolean { + if (typeof e1.getBoundingClientRect !== "function") { + return false; + } else if (typeof e2.getBoundingClientRect !== "function") { + return true; + } + const e1BR = e1.getBoundingClientRect(); + const e2BR = e2.getBoundingClientRect(); + return e1BR.height > e2BR.height && e1BR.width > e2BR.width; } /** Returns elements that point to a saveable resource