Bitwarden Browser Extension UI Design Refresh - Early Preview Now Available

Hi everyone. Over the past months we have been working to refresh the browser extension with an updated design. Today I am pleased to make this new UI available as an early preview through our Chrome extension beta channel here.

This Beta extension is a completely separate extension that can be installed alongside the main, production channel extension. Some of you may remember it from when we were testing the Manifest V3 update earlier this year. I recommend that you install the Beta and simply toggle to disable the production extension while testing. You can manage multiple extensions easily through Chrome’s extension management page by typing chrome://extensions into your address bar. Use this management page to toggle availability back and forth between the extensions as you prefer to use/test.

We are releasing this preview in hopes of gathering feedback from you so that we can quickly iterate on the design for its upcoming general availability release. Please provide feedback in this post and/or submit it through out feedback form here.

Thank you for your continued feedback

Known issues/items still being worked on:

  • Unauthenticated pages (before login)
    • Old UI still in use
  • Generator:
    • Parameters are lost after closing extension
    • Options not always reflected in auto-generated passwords
    • Forwarded usernames not available
  • Vault:
    • New buttons are not accessible via keyboard
    • Passwords in view login page do not have custom styling
    • Login item password history uses old UI
  • Page transitions:
    • Page transition animations do not slide in from right / slide out to left
  • Unlock:
    • Biometrics unlock doesn’t autoprompt
2 Likes

I am delighted to be invited to try this out. Is this topic the proper place to provide feedback? (I’ll prepare some comments in anticipation…) Thanks again

4 posts were merged into an existing topic: Persistent Bitwarden UI and maintain unsaved data

@richb-hanover Yes, this is the correct place to post feedback on the Beta :slight_smile:

Thank you for your feedback on the Persist Bitwarden UI and maintain unsaved data issue. Bitwarden is aware of and working to address this issue. The new design does include a persistent “popout” button across all screens to ease the issue in the short term. The full solution we are working on will involve temporarily saving entered data if the extension is closed while creating or editing an item.

I’m not seeing any new “popout” button on any of the edit or add screens with the beta browser client. 2024.10.999 is version that shows up.

Can you be more specific about what to expect for the change?

1 Like

Hi Danielle,

Thanks for the response. I’m afraid that I’m not making myself clear…

From my testing, it seems that the popout button already does cause the extension to save the entered data as long as that window remains open.

Am I mistaken? Thanks

The button Danielle is referring to is located in the top right corner of the extension. Here is a screenshot showing the icon she is referring to.

Screenshot 2024-10-18 at 2.55.27 PM

As I said - I do not see any new popout button:

That rightmost bitwarden plugin is the beta.

I do see the same one on the main pages that I’ve always seen in the upper LEFT:

image

@Nathan_Neulinger That is not the Beta, but the old version. Try to (temporarily) deactivate the old version in the extension manager of the browser.

Is the beta version not version 2024.10.999? or are you saying it is incompatible with having both enabled at the same time?

It very clearly identifies as the beta:

image

I just disabled all, and re-enabled only the beta. Display is exactly the same.

Oh, interesting - I can see the changes. Seems they don’t take effect with your system.

Are you on a self-hosted environment Nathan? If so, you will need to manually disable the feature flag to see the changes. Instructions to do so are here: Feature Flags | Bitwarden Contributing Documentation

If you are not in a self-hosted environment would you mind telling me what browser you are using?

I half wondered if that might be the case, yes, running self hosted. Will look into the article. What is the specific feature flag key/value for the new functionality?

Thumbs up on the new look and functionality when used against the non-self-hosted server. Definitely looks like that will be an improvement.

1 Like

In French, the auto-fill button on each element is too big (‘Saisie automatique’).
The name should be shortened or an icon should be used.
Image 019

3 Likes

Well, a first impression from me:

Though I generally like it, it feels a bit “unbalanced” regarding the size of things. Some things are quite large like some fonts and the added spaces feel like it. And other things are quite small, like some other fonts. E.g. the “auto-fill suggestions” show only the first (maybe 10?) characters of the name of the login vault item, so that if I have more similar items, beginning with the same word(s), I can barely differentiate between them.

Here one example of the “shortness” of the name/title of the entry (but I guess everyone can see this themselves):

Screenshot 2024-10-18 220051

Maybe reduce the “auto-fill” button in height, so that the complete “line” above can show the name/title more complete?!

Then I saw, that on the Generator “tab”, it is wide enough to force scrolling (PS: I meant the horizontal scrolling here! - vertical scrolling is never a problem!). Maybe a result of the translation, producing too long words?!? (German…)

And as you can see, “Mindestanzahl” is so long, that “number” (Zahlen) and “special character” (Sonderzeichen) isn’t even readable without the “mouse-over”.

So much for a first impression…

I just wrote a similar thing.

And yeah, as the caption already states, that the following entries are “suggestions for auto-fill”:

Screenshot 2024-10-18 220953

… that “auto-fill” button is too big for my taste. An icon is a good idea - maybe something like an arrow… “shooting to the browser to auto-fill”. :sweat_smile:

Or just one short word like “Ok” or “Go”. :thinking: (something like “Go!” could be okay, since this is the “suggestions for auto-fill” section and the meaning of “Go” could be more or less clear to that context… otherwise a mouse-over can explain it further)

Appreciate you taking the time to leave feedback and provide screenshots.