Refactor design of autocomplete dropdown

[tinyoverflow]

Hello,

with this PR, I'd like to suggest a refactor for the autocomplete dropdown. My goal was to make it look a little bit more polished and modern, like the dropdowns in Bitwarden and 1Password.

It shows all informations in a more organized manner instead of just crammed into a single line, which might become too long very easily. In addition to that, it sets some default font styling to try to make it consistent across different websites.

What do you think about this?

Comparison (Before and After)

Before

After

Credits

The drop shadow was borrowed from TailwindCSS.

[droidmonkey]

Wow this looks awesome!

[varjolintu]

I'd assume that many users would want to keep the compact view intact, so maybe this could be an optional feature, but enabled by default?
I think it looks great.

[tinyoverflow]

I'd assume that many users would want to keep the compact view intact, so maybe this could be an optional feature, but enabled by default? I think it looks great.

Good point! I've added an option (useCompactMode) to switch to the old view (but styling still applies):

Though I'm not sure about how to properly add the label and description translation accordingly, so it doesn't interfere with Transifex. Can you please help me with that?

[varjolintu]

You need to add a new translation string to https://github.com/keepassxreboot/keepassxc-browser/blob/develop/keepassxc-browser/_locales/en/messages.json.

[tinyoverflow]

You need to add a new translation string to https://github.com/keepassxreboot/keepassxc-browser/blob/develop/keepassxc-browser/_locales/en/messages.json.

Thanks, done!

[varjolintu]

A couple of things:

The old version had no border radius at the top or bottom, depending if the Autocomplete Menu is positioned on the top or below. Not a real issue, just noted that change.

When looking a page that has a small input field (one of my favourites muusikoiden.net), it can be seen that there's some kind of minimum width where all information fits to the screen:

With the new look it shows like this:

Or with some smaller overlap with GitHub's login page:

Maybe there needs to be some minimum width for the new Autocomplete Menu? And of course some kind of maximum width too where the content cuts off with CSS text-overflow? However, the data shown is not very usable right now.

[tinyoverflow]

@varjolintu Good find! I haven't considered too narrow input fields. I'll work on it later this day.

[tinyoverflow]

One option would be to simply stack the content. What do you think? I think it makes the list bigger than necessary. Otherwise it is ownly shown when the user either enables it explicitly or has items from multiple groups.

Another suggestion where I reduced the font size and added some padding:

Here's the same on OpenAIs login, for example:

[varjolintu]

Personally I think the original version was better. Stacking more text vertically makes the elements much bigger.

[tinyoverflow]

Personally I think the original version was better.

In what terms? Without the stacking and/or also without the additional padding? How about th reduced font size?

[varjolintu]

Personally I think the original version was better.

In what terms? Without the stacking and/or also without the additional padding? How about th reduced font size?

With the group text on the upper-right. But I think this could also work with stacking. And it's probably much easier to implement.

[tinyoverflow]

Okey. To be honest, with long titles it looks a little bit... I don't know. It's not bad but I think its not good either.

With vertically centered alignment:

It might work though.

[droidmonkey]

I personally think there is a bit too much top/bottom padding between items, but otherwise I'm sold

[phoerious]

I like it, but perhaps we can make the compact variant a middle ground between the new spacious and the old crammed version.

[tinyoverflow]

@phoerious Thanks for your feedback! What do you mean? Do you have an idea on how this might look like?

[phoerious]

Instead of providing a basically unformatted list with names in brackets, try to fit the new layout into a single line with a little but not much more spacing than before.

[tinyoverflow]

Done. I think this looks kinda weird, though.

Option 1:

---

Option 2:

---

Default Mode:

[droidmonkey]

I preferred the "Applications" and "Work" labels on the right hand side. The label could be stacked if the width is too narrow?

[varjolintu]

I guess phoerious meant a middle option like this (compact setting with 12px padding)?:

[varjolintu]

It's possible to do this using flex:

Instead of having a position: absolute in the group I would suggest using simple flex CSS to handle the positioning. Also, use kpxcUI.createElement() where possible.

[tinyoverflow]

Ah, I totally misread phoerious comment. I'll update this PR.

I also prefer the group on the right side on the same line with the title. I also used flexbox for this suggestion. I'm not sure why I removed it, as visible in my recent screenshot:
#2119 (comment)

[tinyoverflow]

I've added it back again. I also think that this looks a lot better.

I'm not sure about the compact mode, though. Just putting it in a single line looks awful to me.

[varjolintu]

@tinyoverflow You also need to add text-overflow etc. to the label if you don't want the elements to overlap.

[phoerious]

I would make the compact mode basically the same as the default mode, but remove the group name, move the username to the right, and reduce font size and padding a little. The brackets that we have right now look awful imho. Way too messy and without any visual hierarchy.

[tinyoverflow]

This looks great, imho! I think the compact mode looks even better with the reduced padding, but with default font size.

Normal Mode

Compact Mode: Normal Padding

Compact Mode: Reduced Padding (I've pushed this one)

Compact Mode: Reduced Padding, Reduced Font Size

[varjolintu]

The filling does not always work. I often get an error in the console. This can be reproduced if you click the label instead of username.

credential-autocomplete.js:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
   at CredentialAutocomplete.itemClick (credential-autocomplete.js:26:68)
   at HTMLDivElement.<anonymous> (autocomplete.js:148:54)

Also if I disable the "Display the group name in autocomplete list when credentials are from different groups." setting, then the new normal mode looks like this:

The Autocomplete Menu position is also much lower now? Here the second input field shows above it.

Plus the "Display group name.." setting has no effect with the compact view.

As I suggested before, these can be changed:
From

const itemGroup = document.createElement('div');
itemGroup.classList.add('kpxcAutocomplete-item__group');
itemGroup.textContent = credential.group;

To

kpxcUI.createElement('div', 'kpxcAutocomplete-item__group', {}, credential.group);

[droidmonkey]

"Display the group name in autocomplete list when credentials are from different groups." setting

With this improvement to the list view I think this option might be obsolete? Or maybe we default to a more compact view if the group is not displayed.

[varjolintu]

"Display the group name in autocomplete list when credentials are from different groups." setting

With this improvement to the list view I think this option might be obsolete? Or maybe we default to a more compact view if the group is not displayed.

I think the option still has it uses even with the compact view.