Consider two-line popup design

[Maxim Baz]

Idea described in #272 (comment)

This needs some extra thought, for now I just want to track this in a separate ticket so that I don't forget about it.

[Erayd]

I like this idea. I think it should have a toggle in the options to enable / disable it, but it does seem like something that would be useful.

[Michael Hu]

Here's a second pass at this two-line popup design. Consider the following password-store which has been deliberately constructed to show the different cases in one screenshot:

Breadcrumbs rather than slashes

1. Instead of Consulting\Bain\google.com, you get Consulting and Bain in their own visual tag.
2. Clicking Consulting or Bain will add those terms to the Refine search... box, which would filter the results by that tag (ie: breadcrumb filtering interface).
3. Order matters: Consulting\Bain\google.com != google.com\Consulting\Bain in the password-store. This is visually reflected in the UI by the top->down, left->right ordering of the tags.

Color-code the tags

1. Tags are color coded. This for example, makes the Deloitte login stand out visually.
2. The content of a tag determines its color, not its depth in the folder structure. ie: The Bain tag is blue as opposed to all tags at the second level of hierarchy being blue.
3. Discoverability UI principle: Give each tag a different default color, but allow the user to override a color for a particular tag. That way, I don't have to manually configure Consulting to be green, Bain to be blue, etc., which I may never get around to because I didn't know that featured existed. However, if I didn't like the default color for the Family tag , I'll hunt through the interface to change its color.
4. If you're wondering what color palate to use for the default colors, Bootstrap has some ideas.

Corner-case for a one-line interface

1. If a .gpg file is at the root of the password-store, there is no containing folder (ie: tag) by definition. Revert to a one-line UI in this case as the first line would just be blank.

Consider documenting different directory structure strategies for .gpg files

There's a lot of duplication in this directory structure because it's mixing organizational models in under one password-store. Let met define some terminology inspired by a GTD implementation called Things for this discussion:

Things-like organization

• Consulting and Family are Areas of Responsibility. They have 1 or more projects.
• Bain and Deloitte are projects. They have 1 or more domains.
• www.google.com is a domain. It has 0 or more logins.
• Anderson contract and Davidson contract are logins. Logins are always leaf nodes in this directory structure, and are therefore always rendered on the second line in this two line interface.

The advantages of this folder structure are:

1. Each Area of Responsibility can be a different password-store, so you could share your Consulting logins with your executive assistant, and keep your personal logins private to yourself.
2. You are moving from most general to most specific in your organizational model, which is a best practice for a good tree (aka: directory) structure.
3. It corresponds to how bookmark folders are typically set up for most users if they use subfolders.

Simple folder organization

• There is no Area of Responsibility.
• Family is just a folder. That folder has domains and logins.
• A domain has one or more login.

The advantages of this folder structure are:

1. It's simple.
2. It corresponds to how bookmark folders are typically set up for most users.

Domain-first organization

• google.com is a domain. It has zero or more Areas of Responsibility.
• Consulting is an Area of Responsibility. It has one or more projects.
• Bain is a project. It has one or more logins.
• Anderson contract, Davidson contract, and Deloitte are logins.

The advantages of this folder structure are:

1. It's the easiest structure for a computer to parse if you're filtering by domain name.
2. It's the easiest structure for a human to debug if they're trying to get a set of logins to show up for a particular domain.

Recommendations

1. Pick one folder organization strategy and stick with it rather than mixing organizational models.
2. Document the pros and cons of each folder organization strategy.
3. If browserpass really wants to be folder-structure agnostic, then it has to provide an interface to select which logins should be shared with the executive assistant rather than relying on all those logins to be under the Consulting Area of Responsibility. It's current multiple password-storage support favors a Things-like, rather than domain-first organization structure because a password-storage root lives at the root of its directory tree.

[Erayd]

@ipundit I'm strongly opposed to a breadcrumb interface as proposed above.

1. It's visually cluttered, and considerably more difficult to parse at a glance. The constantly changing contrast within a single entry is a hindrance to reading it quickly.

2. There are insufficient distinctive colours available to allocate to each unique directory name without repetition. If the colours cannot be relied upon to be unique, then the colour alone is insufficient to quickly distinguish the entry.

3. Clickable breadcrumb filtering introduces a significant divergence between keyboard and mouse navigation, and it's a feature that can't be easily made keyboard-compatible in a manner that is not somewhat cumbersome.

4. It feels over-complicated, and IMO is trying to solve a problem (easy search refinement) that is already solved, while simultaneously making the UX worse. I concede it looks attractive, but looking attractive is a lower priority than good UX.

Pick one folder organisation strategy and stick with it rather than mixing organisational models.

This is outside the scope of what browserpass can or should determine. Yes, it's ideal in probably the majority of cases, but the nature of pass is such that the user can choose to organise things any way they'd like - it's fundamentally just files in a directory. Furthermore, different styles of organisation suit different users - there isn't One Right Way of doing things.

Document the pros and cons of each folder organisation strategy.

Perhaps. This is still out of scope for browserpass though. It's a frontend for a pass store; it's not a full-stack password manager in the same way that e.g. LastPass is.

If browserpass really wants to be folder-structure agnostic, then it has to provide an interface to select which logins should be shared with the executive assistant rather than relying on all those logins to be under the Consulting Area of Responsibility.

Why? The user already has full control over the folder structure; if they feel that they need some way of distinguishing a particular subset of logins, even across different stores, then they are free to organise things in a way that facilitates this. I don't see why this needs a dedicated feature within browserpass. Could you expand a bit on why you think this is necessary, and how you envisage such a thing being implemented without breaking compatibility with pass?

Its current multiple password-storage support favours a Things-like, rather than domain-first organisation structure because a password storage root lives at the root of its directory tree.

There is nothing requiring you to organise things this way. Multiple stores are supported, because it's common for people to need unified access to multiple stores. That doesn't mean you need to split your own logins across multiple stores; there's nothing preventing you from using a domain-first approach in a single store, if that's what you want to do.

It's also worth bearing in mind, that in a multiple-stores approach, the user doesn't necessarily have control of all the stores. They may have read-only access to stores which are outside of their control, and the way those stores are organised may not be the same.

[Maxim Baz]

The next version of browserpass will have two-lines design: