refactor: only discover shadow elements when needed

src/Form/Form.js

@@ -14,7 +14,7 @@ import {
     shouldLog,
     safeRegexTest,
     getActiveElement,
-    findEnclosedShadowElements
+    findEnclosedElements
 } from '../autofill-utils.js'
 
 import {getInputSubtype, getInputMainType, createMatching, getInputVariant} from './matching.js'
@@ -423,10 +423,10 @@ class Form {
                 // It also catches all elements when the markup is broken.
                 // We use .filter to avoid fieldset, button, textarea etc.
                 // Additionally, we try to find any shadow elements that might be there in the form.
-                foundInputs = [
-                    ...this.form.elements,
-                    ...findEnclosedShadowElements(this.form, selector)
-                ].filter(el => el.matches(selector))
+                const formElements = [...this.form.elements]
+                foundInputs = formElements.length > 0
+                    ? formElements.filter((el) => el.matches(selector))
+                    : findEnclosedElements(this.form, selector)
             } else {
                 foundInputs = this.form.querySelectorAll(selector)
             }
@@ -450,8 +450,7 @@ class Form {
     get submitButtons () {
         const selector = this.matching.cssSelector('submitButtonSelector')
         const allButtons = /** @type {HTMLElement[]} */([
-            ...this.form.querySelectorAll(selector),
-            ...findEnclosedShadowElements(this.form, selector)
+            ...findEnclosedElements(this.form, selector)
         ])
 
         return allButtons

src/Form/FormAnalyzer.js

@@ -1,7 +1,7 @@
 import { removeExcessWhitespace, Matching } from './matching.js'
 import { constants } from '../constants.js'
 import { matchingConfiguration } from './matching-config/__generated__/compiled-matching-config.js'
-import {findEnclosedShadowElements, getTextShallow, isLikelyASubmitButton, safeRegexTest} from '../autofill-utils.js'
+import {findEnclosedElements, getTextShallow, isLikelyASubmitButton, safeRegexTest} from '../autofill-utils.js'
 
 class FormAnalyzer {
     /** @type HTMLElement */
@@ -301,10 +301,7 @@ class FormAnalyzer {
 
         // Check form contents (noisy elements are skipped with the safeUniversalSelector)
         const selector = this.matching.cssSelector('safeUniversalSelector')
-        const formElements = [
-            ...this.form.querySelectorAll(selector),
-            ...findEnclosedShadowElements(this.form, selector)
-        ]
+        const formElements = findEnclosedElements(this.form, selector)
         for (let i = 0; i < formElements.length; i++) {
             // Safety cutoff to avoid huge DOMs freezing the browser
             if (i >= 200) break

src/Scanner.js

@@ -5,7 +5,7 @@ import {
     logPerformance,
     isFormLikelyToBeUsedAsPageWrapper,
     shouldLog, pierceShadowTree,
-    findEnclosedShadowElements
+    findEnclosedElements
 } from './autofill-utils.js'
 import { AddDebugFlagCall } from './deviceApiCalls/__generated__/deviceApiCalls.js'
 
@@ -157,15 +157,16 @@ class DefaultScanner {
         if ('matches' in context && context.matches?.(this.matching.cssSelector('formInputsSelectorWithoutSelect'))) {
             this.addInput(context)
         } else {
-            const inputs = context.querySelectorAll(this.matching.cssSelector('formInputsSelectorWithoutSelect'))
+            const selector = this.matching.cssSelector('formInputsSelectorWithoutSelect')
+            const inputs = context.querySelectorAll(selector)
             if (inputs.length > this.options.maxInputsPerPage) {
                 this.stopScanner(`Too many input fields in the given context (${inputs.length}), stop scanning`, context)
                 return this
             }
             inputs.forEach((input) => this.addInput(input))
             if (context instanceof HTMLFormElement) {
                 const selector = this.matching.cssSelector('formInputsSelectorWithoutSelect')
-                const shadowElements = findEnclosedShadowElements(context, selector)
+                const shadowElements = findEnclosedElements(context, selector)
                 shadowElements.forEach((input) => {
                     if (input instanceof HTMLInputElement) {
                         this.addInput(input)

src/autofill-utils.js

@@ -567,12 +567,20 @@ function getActiveElement (root = document) {
 }
 
 /**
- * Takes a root, creates a treewalker and finds all shadow elements that match the selector
- * @param {HTMLElement} root
+ * Takes a form element, creates a treewalker and finds all shadow elements that match the selector
+ * @param {HTMLElement|HTMLFormElement} root
  * @param {string} selector
- * @returns {Element[]}
+ * @returns {HTMLElement[]}
  */
-function findEnclosedShadowElements (root, selector) {
+function findEnclosedElements (root, selector) {
+    // Check if there are any normal elements that match the selector
+    const elements = root.querySelectorAll(selector)
+    if (elements.length > 0) {
+        /** @ts-ignore */
+        return elements
+    }
+
+    // Check if there are any shadow elements that match the selector
     const shadowElements = []
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
 
@@ -584,6 +592,7 @@ function findEnclosedShadowElements (root, selector) {
         node = walker.nextNode()
     }
 
+    /** @ts-ignore */
     return shadowElements
 }
 
@@ -619,5 +628,5 @@ export {
     safeRegexTest,
     pierceShadowTree,
     getActiveElement,
-    findEnclosedShadowElements
+    findEnclosedElements
 }