Revert "[PS-1918] Make autofill doc-scanner traverse into ShadowRoot (#4119)" (#5147)

This reverts commit 208be8dfbf.

apps/browser/src/autofill/content/autofill.js

@@ -44,102 +44,8 @@
   11. Work on array of saved urls instead of just one to determine if we should autofill non-https sites
   12. Remove setting of attribute com.browser.browser.userEdited on user-inputs
   13. Handle null value URLs in urlNotSecure
-  14. Implement new HTML element query logic to be able to traverse into ShadowRoot
   */
 
-  /*
-   * `openOrClosedShadowRoot` is only available to WebExtensions.
-   * We need to use the correct implementation based on browser.
-   */
-  // START MODIFICATION
-  var getShadowRoot;
-
-  if (chrome.dom && chrome.dom.openOrClosedShadowRoot) {
-      // Chromium 88+
-      // https://developer.chrome.com/docs/extensions/reference/dom/
-      getShadowRoot = function (element) {
-          if (!(element instanceof HTMLElement)) {
-              return null;
-          }
-
-          return chrome.dom.openOrClosedShadowRoot(element);
-      };
-  } else {
-      getShadowRoot = function (element) {
-          // `openOrClosedShadowRoot` is currently available for Firefox 63+
-          // https://developer.mozilla.org/en-US/docs/Web/API/Element/openOrClosedShadowRoot
-          // Fallback to usual shadowRoot if it doesn't exist, which will only find open ShadowRoots, not closed ones.
-          // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#browser_compatibility
-          return element.openOrClosedShadowRoot || element.shadowRoot;
-      };
-  }
-
-  /*
-   * Returns elements like Document.querySelectorAll does, but traverses the document and shadow
-   * roots, yielding a visited node only if it passes the predicate in filterCallback.
-   */
-  function queryDocAll(doc, rootEl, filterCallback) {
-      var accumulatedNodes = [];
-
-      // mutates accumulatedNodes
-      accumulatingQueryDocAll(doc, rootEl, filterCallback, accumulatedNodes);
-
-      return accumulatedNodes;
-  }
-
-  function accumulatingQueryDocAll(doc, rootEl, filterCallback, accumulatedNodes) {
-      var treeWalker = doc.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT);
-      var node;
-
-      while (node = treeWalker.nextNode()) {
-        if (filterCallback(node)) {
-            accumulatedNodes.push(node);
-        }
-
-        // If node contains a ShadowRoot we want to step into it and also traverse all child nodes inside.
-        var nodeShadowRoot = getShadowRoot(node);
-
-        if (!nodeShadowRoot) {
-          continue;
-        }
-
-        // recursively traverse into ShadowRoot
-        accumulatingQueryDocAll(doc, nodeShadowRoot, filterCallback, accumulatedNodes);
-    }
-  }
-
-  /*
-   * Returns an element like Document.querySelector does, but traverses the document and shadow
-   * roots, yielding a visited node only if it passes the predicate in filterCallback.
-   */
-  function queryDoc(doc, rootEl, filterCallback) {
-      var treeWalker = doc.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT);
-      var node;
-
-      while (node = treeWalker.nextNode()) {
-          if (filterCallback(node)) {
-              return node;
-          }
-
-          // If node contains a ShadowRoot we want to step into it and also traverse all child nodes inside.
-          var nodeShadowRoot = getShadowRoot(node);
-
-          if (!nodeShadowRoot) {
-            continue;
-          }
-
-          // recursively traverse into ShadowRoot
-          var subQueryResult = queryDoc(doc, nodeShadowRoot, filterCallback);
-
-          if (subQueryResult) {
-              return subQueryResult;
-          }
-      }
-
-      return null;
-  }
-  // END MODIFICATION
-
   function collect(document, undefined) {
       // START MODIFICATION
       var isFirefox = navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Gecko/') !== -1;
@@ -292,22 +198,12 @@
                   theLabels = Array.prototype.slice.call(el.labels);
               } else {
                   if (el.id) {
-                      // START MODIFICATION
+                      theLabels = theLabels.concat(Array.prototype.slice.call(
-                      var elId = JSON.stringify(el.id);
+                          queryDoc(theDoc, 'label[for=' + JSON.stringify(el.id) + ']')));
-                      var labelsByReferencedId = queryDocAll(theDoc, theDoc.body, function (node) {
-                          return node.nodeName === 'LABEL' && node.htmlFor === elId;
-                      });
-                      theLabels = theLabels.concat(labelsByReferencedId);
-                      // END MODIFICATION
                   }
 
                   if (el.name) {
-                      // START MODIFICATION
+                      docLabel = queryDoc(theDoc, 'label[for=' + JSON.stringify(el.name) + ']');
-                      var elName = JSON.stringify(el.name);
-                      docLabel = queryDocAll(theDoc, theDoc.body, function (node) {
-                          return node.nodeName === 'LABEL' && node.htmlFor === elName;
-                      });
-                      // END MODIFICATION
 
                       for (var labelIndex = 0; labelIndex < docLabel.length; labelIndex++) {
                           if (-1 === theLabels.indexOf(docLabel[labelIndex])) {
@@ -364,21 +260,28 @@
           function toLowerString(s) {
               return 'string' === typeof s ? s.toLowerCase() : ('' + s).toLowerCase();
           }
-          // START MODIFICATION
+
-          // renamed queryDoc to queryDocAll and moved to top
+          /**
-          // END MODIFICATION
+           * Query the document `doc` for elements matching the selector `selector`
+           * @param {Document} doc 
+           * @param {string} query 
+           * @returns {HTMLElement[]} An array of elements matching the selector
+           */
+          function queryDoc(doc, query) {
+              var els = [];
+              try {
+                  els = doc.querySelectorAll(query);
+              } catch (e) { }
+              return els;
+          }
+
           // end helpers
 
           var theView = theDoc.defaultView ? theDoc.defaultView : window,
               passwordRegEx = RegExp('((\\\\b|_|-)pin(\\\\b|_|-)|password|passwort|kennwort|(\\\\b|_|-)passe(\\\\b|_|-)|contraseña|senha|密码|adgangskode|hasło|wachtwoord)', 'i');
 
           // get all the docs
-          // START MODIFICATION
+          var theForms = Array.prototype.slice.call(queryDoc(theDoc, 'form')).map(function (formEl, elIndex) {
-          var formNodes = queryDocAll(theDoc, theDoc.body, function (el) {
-              return el.nodeName === 'FORM';
-          });
-          var theForms = formNodes.map(function (formEl, elIndex) {
-          // END MODIFICATION
               var op = {},
                   formOpId = '__form__' + elIndex;
 
@@ -536,11 +439,7 @@
           };
 
           // get proper page title. maybe they are using the special meta tag?
-          // START MODIFICATION
+          var theTitle = document.querySelector('[data-onepassword-title]')
-          var theTitle = queryDoc(theDoc, theDoc, function (node) {
-              return node.hasAttribute('data-onepassword-title');
-          });
-          // END MODIFICATION
           if (theTitle && theTitle.dataset[DISPLAY_TITLE_ATTRIBUE]) {
               pageDetails.displayTitle = theTitle.dataset.onepasswordTitle;
           }
@@ -656,10 +555,7 @@
           // walk the dom tree until we reach the top
           for (var elStyle; theEl && theEl !== document;) {
               // Calculate the style of the element
-              // START MODIFICATION
+              elStyle = el.getComputedStyle ? el.getComputedStyle(theEl, null) : theEl.style;
-              elStyle = el.getComputedStyle && theEl instanceof Element ? el.getComputedStyle(theEl, null) : theEl.style;
-              // END MODIFICATION
-
               // If there's no computed style at all, we're done, as we know that it's not hidden
               if (!elStyle) {
                   return true;
@@ -769,28 +665,6 @@
           }
       }
 
-      var ignoredInputTypes = {
-        hidden: true,
-        submit: true,
-        reset: true,
-        button: true,
-        image: true,
-        file: true,
-      };
-
-      /*
-       * inputEl MUST BE an instanceof HTMLInputElement, else inputEl.type.toLowerCase will throw an error
-       */
-      function isRelevantInputField(inputEl) {
-        if (inputEl.hasAttribute('data-bwignore')) {
-          return false;
-        }
-
-        const isIgnoredInputType = ignoredInputTypes.hasOwnProperty(inputEl.type.toLowerCase());
-
-        return !isIgnoredInputType;
-      }
-
       /**
        * Query `theDoc` for form elements that we can use for autofill, ranked by importance and limited by `limit`
        * @param {Document} theDoc The Document to query
@@ -799,19 +673,13 @@
        */
       function getFormElements(theDoc, limit) {
           // START MODIFICATION
-
+          var els = [];
-          var els = queryDocAll(theDoc, theDoc.body, function (el) {
+          try {
-              switch (el.nodeName) {
+              var elsList = theDoc.querySelectorAll('input:not([type="hidden"]):not([type="submit"]):not([type="reset"])' +
-                  case 'SELECT':
+                  ':not([type="button"]):not([type="image"]):not([type="file"]):not([data-bwignore]), select, ' +
-                      return true;
+                  'span[data-bwautofill]');
-                  case 'SPAN':
+              els = Array.prototype.slice.call(elsList);
-                      return el.hasAttribute('data-bwautofill');
+          } catch (e) { }
-                  case 'INPUT':
-                      return isRelevantInputField(el);
-                  default:
-                      return false;
-              }
-          });
 
           if (!limit || els.length <= limit) {
               return els;
@@ -841,8 +709,8 @@
           }
 
           return returnEls;
-      }
           // END MODIFICATION
+      }
 
       /**
        * Focus the element `el` and optionally restore its original value
@@ -871,12 +739,6 @@
       var markTheFilling = true,
           animateTheFilling = true;
 
-      function queryPasswordInputs() {
-        return queryDocAll(document, document.body, function (el) {
-          return el.nodeName === 'INPUT' && el.type.toLowerCase() === 'password';
-        })
-      }
-
       // Check if URL is not secure when the original saved one was
       function urlNotSecure(savedURLs) {
           var passwordInputs = null;
@@ -884,7 +746,7 @@
               return false;
           }
 
-          return savedURLs.some(url => url?.indexOf('https://') === 0) && 'http:' === document.location.protocol && (passwordInputs = queryPasswordInputs(),
+          return savedURLs.some(url => url?.indexOf('https://') === 0) && 'http:' === document.location.protocol && (passwordInputs = document.querySelectorAll('input[type=password]'),
               0 < passwordInputs.length && (confirmResult = confirm('Warning: This is an unsecured HTTP page, and any information you submit can potentially be seen and changed by others. This Login was originally saved on a secure (HTTPS) page.\n\nDo you still wish to fill this login?'),
                   0 == confirmResult)) ? true : false;
       }
@@ -1236,12 +1098,9 @@
        */
       function getAllFields() {
           var r = RegExp('((\\\\b|_|-)pin(\\\\b|_|-)|password|passwort|kennwort|passe|contraseña|senha|密码|adgangskode|hasło|wachtwoord)', 'i');
-          return queryDocAll(document, document.body, function (el) {
+          return Array.prototype.slice.call(selectAllFromDoc("input[type='text']")).filter(function (el) {
-              return el.nodeName === 'INPUT' &&
+              return el.value && r.test(el.value);
-                  el.type.toLowerCase() === 'text' &&
+          }, this);
-                  el.value &&
-                  r.test(el.value);
-          });
       }
 
       /**
@@ -1266,9 +1125,7 @@
               a: {
                   currentEl = el;
                   for (var owner = el.ownerDocument, owner = owner ? owner.defaultView : {}, theStyle; currentEl && currentEl !== document;) {
-                      // START MODIFICATION
+                      theStyle = owner.getComputedStyle ? owner.getComputedStyle(currentEl, null) : currentEl.style;
-                      theStyle = owner.getComputedStyle && currentEl instanceof Element ? owner.getComputedStyle(currentEl, null) : currentEl.style;
-                      // END MODIFICATION
                       if (!theStyle) {
                           currentEl = true;
                           break a;
@@ -1302,19 +1159,12 @@
           }
           try {
               // START MODIFICATION
-              var filteredElements = queryDocAll(document, document.body, function (el) {
+              var elements = Array.prototype.slice.call(selectAllFromDoc('input, select, button, ' +
-                  switch (el.nodeName) {
+                  'span[data-bwautofill]'));
-                      case 'INPUT':
-                      case 'SELECT':
-                      case 'BUTTON':
-                          return el.opid === theOpId;
-                      case 'SPAN':
-                          return el.hasAttribute('data-bwautofill') && el.opid === theOpId;
-                  }
-
-                  return false;
-              });
               // END MODIFICATION
+              var filteredElements = elements.filter(function (o) {
+                  return o.opid == theOpId;
+              });
               if (0 < filteredElements.length) {
                   theElement = filteredElements[0],
                       1 < filteredElements.length && console.warn('More than one element found with opid ' + theOpId);
@@ -1335,11 +1185,11 @@
        * @returns 
        */
       function selectAllFromDoc(theSelector) {
-          // START MODIFICATION
+          var d = document, elements = [];
-          return queryDocAll(document, document, function(node) {
+          try {
-              return node.matches(theSelector);
+              elements = d.querySelectorAll(theSelector);
-          });
+          } catch (e) { }
-          // END MODIFICATION
+          return elements;
       }
 
       /**