[SG-1026 / PM-1125] - Document / Improve Form Detection in Notification Bar

[JaredSnider-Bitwarden]

Type of change

- [X] Bug fix
- [ ] New feature development
- [X] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [X] Other

Objectives

SG-1026 / PM-1125

1. Document the notification-bar.ts to provide additional clarity in preparation for handoff to new autofill team.
2. Review user reported failures of form detection for (1) Account Creation (2) Password Changes and (3) Adding New logins not yet tracked by Bitwarden, and identify areas for improvement
3. Surgically refactor / address smaller bugs to improve the reliability of showing the notification bar (with a bias towards false positives if possible) while writing up recommendations for any changes needed to resolve larger issues.

Code changes

This might be easier to review by commits, but I'll break down the largest changes here as well:

• apps/browser/src/autofill/services/autofill.service.ts:

  • On account creation, even if the pageDetails contained a valid form to watch, the loadPasswordFields method parameter for fillNewPassword being false for inputs with autoCompleteType of "new-password" would cause the account creation form to not be watched (null form data returned to notification bar). Setting this to true will help capture more account creations in the above specified scenario.
    • AutofillService.loadPasswordFields(pageDetails, true, true, false, **true**);
    • Website used: talkshoe.com - pulled from user reported spreadsheet and used for some testing as it had easy account creation / deletion features
  • Added additional logic to group most likely related password fields to improve detection of password change forms with poor mark up design

• apps/browser/src/autofill/content/notification-bar.ts:

  • Added code regions / JS Doc style method comments / inline comments to document all behavior to improve code approachability
  • Added TypeScript types where possible
  • Improved form detection on load and page change
    • Refactored the page details collection on load behavior to eagerly setup mutation observer while still waiting 1 second minimum to collect the page details to prevent forms from being missed
    • Built deterministic hook for mutation observer to call the new handlePageChange(...) method on SPA page change vs. just depending on a scheduled call to the same method.
  • Improved form submit button listening logic
    • When retrieving a form submit button, we must use both the loginButtonNames and the changePasswordButton names as we don't know what type of form we are listening to.
  • Added new fallback to submit button retrieval logic
    • If we cannot find a submit button within a form, try going up one level to the parent element and searching again
  • Improve formSubmitted logic
    • When listening to a form with a submit button, we can attach the form one password id to the button so we can only have DOM traversal in one location and retrieve the form off the button later on in the form submission logic.
      • For now, I just added it as a fallback, but it could be the primary approach with more testing.
    • Added logic for handling multi-step login forms where the next button gets swapped for a submit button
      • Website used: login.live.com
      • This logic works sometimes as the submit button page change often stops the submit button event listeners from being able to fire and send the login to the background script. However, that is a separate issue to be solved, and sometimes is better than never.
      • This type of logic might be useful in solving the multi-step account creation form on https://signup.live.com/signup but that will require additional changes to the autofill service which currently intercepts forms without passwords and prevents them from reaching the notification-bar.ts content script.

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
4 Code Smells

No Coverage information
0.0% Duplication

[differsthecat]

Couple of comments; the main one being some concerns with the tree walker changes potentially slowing pages down.

[differsthecat]

Fantastic work on this @JaredSnider-Bitwarden !

[djsmith85]

@JaredSnider-Bitwarden: Outstanding work 🚀
Breaking sections down, documenting them, renaming things to clarify what is going on and then starting to add some tweaks for a better detection 💪 :bitwarden-love

This is a huge step, to aid the AutoFill team to start working on this.

Thank you so much for looking into this!

[JaredSnider-Bitwarden]

QA tested and approved to merge.