[PM-2147] [BEEEP] Open login form used to unlock extension in a separate window instead of a tab

[cagonzalezcs]

Type of change

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

Objective

Reimplementing the workflow for how we handle a user who is attempting an autofill when their vault is locked.

With this implementation, we are now opening the password prompt in a window that will always be focused and presented at the top left corner of the currently active browser window. Users can now enter their password in this window and the vault will unlock and autofill the password in the exact same manner as before.

Anytime a user re-attempts a autofill with a locked vault, we first check for existing windows that contain the login form and close them before re-opening the login prompt in the top left corner of the currently active window.

We now also display a notification to the user in the same UI design that is used to display the "Add/Update Cipher" notification. This notification has the ability to re-open the prompt to login to the vault.

Code changes

• apps/browser/src/_locales/en/messages.json: Adding translations for the notification that we're sending to users when they attempt to autofill with a lock vault
• apps/browser/src/autofill/background/notification.background.ts: Added a new notification type UnlockVault and incorporated behavior for showing/hiding this notification when the user attempts to autofill from the extension with a locked vault. Implemented behavior to ensure that this new notification did not appear when a user was adding a new item, or editing an existing one, from a locked vault.
• apps/browser/src/autofill/notification/bar.html: Adding markup required to display the UnlockVault notification
• apps/browser/src/autofill/notification/bar.ts: Adding content script logic required to display the UnlockVault notification and to populate translated content within the markup used to display the notification. Also adding click listeners to the notification that re-open the prompt to unlock a user vault
• apps/browser/src/background/models/add-unlock-vault-queue-message.ts: Adding typing information for the UnlockVault notification queue.
• apps/browser/src/background/models/lockedVaultPendingNotificationsItem.ts: Updating the type information for LockedVaultPendingNotificationsItem to ensure that the msg value is indicated as an object expecting a command key and an optional data key
• apps/browser/src/background/models/notificationQueueMessageType.ts: Adding UnlockVault as a notification queue message type
• apps/browser/src/background/runtime.background.ts: Modifying the runtime message listeners that handle prompting the user to login when a vault is locked.
• apps/browser/src/browser/browserApi.ts: Added a method for getting a window based on a passed window id. Added a method for opening the Bitwarden login prompt in a new window. Added a method that would close the Bitwarden login prompt.

Screenshots

Screen.Recording.2023-05-19.at.10.06.35.AM.mov

Example of adding/editing vault items from a locked extension

Screen.Recording.2023-06-12.at.9.55.12.AM.mov

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
• Ensure that all UI additions follow WCAG AA requirements

[danielleflinn]

This is awesome. Thanks for working on this user experience bug.

@cagonzalezcs How did you decide on opening the window in the top left?

Also can you explain more of your thinking behind adding the notification and "Unlock" prompt? Is this in case the user accidentally closes the unlock window, the notification will allow the user to re-open without having to use the shortcut again/re-attempt auto-fill through the context menu?

[cagonzalezcs]

@danielleflinn

So the goal with moving the opening position from a new tab to the window at the top left is done to solve two issues:

1. Ensure that the user's attention is not diverted in as harsh of a manner as opening a new tab and completely changing context.
2. Ensuring that the context for the user login action, ie. autofilling a password into a specific website, is not lost in some manner.

I opted to open the window in the top left corner of the currently active browser because of how that mechanism works when opening any new window in a browser using a keystroke. For instance, if you press CMD + N on the MacOS version of Chrome/Firefox, a new window opens int the top left corner of the currently active window. As a result, our mechanism for opening this window for users should mimic that default action.

The goal of the notification was to ensure that users had an “anchor” to reference when being required to login when triggering an autofill. This requirement came through a conversation I had with @djsmith85 regarding potential pitfalls surrounding having the login form open in a new window rather than a new tab. He felt that it was too easy for users to potentially lose the login window behind another browser window, and this notification allows the user the ability to quickly recall the login form if that does happen.

Also, yes if the user closes the login window, they can open it either using this notification or another autofill keystroke.

[danielleflinn]

@cagonzalezcs Thanks for clarifying the window placement. For the save passkey in Bitwarden work, the window opens in the top right–the thinking there was to keep the window near the extension icon where users are already used to looking for it. Initially I thought it might be good to standardize the window placement but perhaps this is not as big of a deal as I originally thought since the passkey popout is not triggered by a keystroke.

[cagonzalezcs]

@danielleflinn

Hmm... it'd make sense to keep this consistent with other plans for the extension. Shouldn't be a huge issue to modify it to open in the top right either. I'll do that this Friday when we have some BEEEP time.

[MGibson1]

Very clean changes, I like it

[Camusensei]

Hi. Just noticed the change in my extension and could not understand some things. Maybe if I knew how to find the page for PM-2147 so feel free to direct me to it if the answers are there.

First is the reason, it's not explained here. Why the change? Historically it would open the popout, then it was changed to a new tab, now to a new window. I'm fine either way, but why these changes?

And the second one is that I don't see the bitwarden extension tag in firefox like shown in the video, so any extension could be showing me the popup and I wouldn't know (unless I remembered the bitwarden extension tag, and always made the effort of maximizing the window to see the address) . Should I open a bug for that?

Thanks!!!

[cagonzalezcs]

@Camusensei Thank you for the feedback.

More context on the "why" for this change can be found with this comment: #6412 (comment)

For your second concern, unfortunately we do not have control over how the tag is displayed to the end user. That said, the relevant information for verifying that this window is showing a Bitwarden extension page should be easily accessible. Unfortunately Firefox truncates the extension tag that precedes the URL, however if you click on it you should see the full context of the tag.

As a result, this is working as intended and does not require a bug report.

If you have any further questions or concerns please feel free to open a ticket with support or an issue on this repository.

[maximevhw]

Hello, I could not find anything in the setting so i thought i'd ask.
Is there a way to disable the seperate window? I much preferred everything happening withing the extension viewport.
Atl east having a setting would be wonderfull since everyone has different preferences. But for me this is kinda anoying,

[Camusensei]

Hello, I could not find anything in the setting so i thought i'd ask. Is there a way to disable the seperate window? I much preferred everything happening withing the extension viewport. Atl east having a setting would be wonderfull since everyone has different preferences. But for me this is kinda anoying,

Hello. I asked the same question and this was the answer:

More context on the "why" for this change can be found with this comment: #6412 (comment)

The comment contains among other things this explanation:

we are unfortunately limited in how we can programmatically open the extension popup window. If I could facilitate your described workflow, I would definitely have opted to open it in that manner instead of in a new window.

[clemensrieder]

This is a super-annoying change. I unlock my extension using biometrics (MacBook Air + Chrome browser). The popup window disappears but can be restored with CMD + SHIFT + T. I regularly use this shortcut to reopen tabs. Still, I absolutely never want to reopen my extension in a separate window. Unfortunately, it will reopen the Bitwarden extension looking like this:

[fiskfisk33]

Is there any way to revert to the old behaviour in settings somewhere I'm missing?

[Jamie4224]

Same question here, I have an issue with this in combination with pinned tabs where the newly opened window does not close after password verification. This is very bothersome as I need to close the window manually every time. It would be nice if it was configurable to use a new window or new tab.

Also see my response here with reproduction steps: #6707 (comment)