[ENHANCEMENT] Avoid different AWS accounts using the same container colour when opening side to side

[davidebonavita]

I understand the colour of a container is decided once the first time is created. It would be nice to have it dynamically changed to avoid having multiple Aws accounts open side to side that incidentally have the same container colour. I currently mitigate this keeping an empty tab between the accounts.

E.g. in this screenshot the three green tabs are three separate AWS accounts. I can of course change the container colour, but this won't prevent it to have the same colour of another account will open in the future side-by-side.

[z0ph]

Agreed, its annoying and misleading to have the same colour for different AWS accounts.

[acahill]

It's a shame that the container tabs addon supports so few colors, makes it hard to implement a reasonably general solution. I use the Tree Style Tabs addon with this addon, and that has a nice feature where you can add custom CSS to style the tabs in the TST sidebar. This snippet colors the entire tab using the container tab color:

.contextual-identity-marker {
  margin: 0 !important;
  position: absolute !important;
  z-index: 0;

  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;

  width: unset !important;
  height: unset !important;  

  opacity: 0.25;
}

In theory it should be possible to insert the container tab icon in there as well, and that could be a useful way to make your tabs for different containers more distinct. I couldn't get it to work properly myself, but that's an option. It would mean having to use TST of course, but I'm already a convert myself.

It would be something vaguely like this, except not exactly since as I mentioned this doesn't work at all:

/* Container icon instead of colored line for tab */
tab-item:not(.faviconized) .contextual-identity-marker {
  width: calc(var(--tab-size) - (var(--contextual-identity-marker-margin) * 2));
}
tab-item.faviconized .contextual-identity-marker {
  height: calc(var(--tab-size) - (var(--contextual-identity-marker-margin) * 2));
}

tab-item .contextual-identity-marker {
  mask: none no-repeat center / cover;
  mask-image: url("/resources/icons/contextual-identities/fingerprint.svg#blue");
}
tab-item[data-contextual-identity-name="Personal"] .contextual-identity-marker {
  mask-image: url("/resources/icons/contextual-identities/fingerprint.svg#blue");
}
tab-item[data-contextual-identity-name="Work"] .contextual-identity-marker {
  mask-image: url("/resources/icons/contextual-identities/briefcase.svg#blue");
}
tab-item[data-contextual-identity-name="Banking"] .contextual-identity-marker {
  mask-image: url("/resources/icons/contextual-identities/dollar.svg#blue");
}
tab-item[data-contextual-identity-name="Shopping"] .contextual-identity-marker {
  mask-image: url("/resources/icons/contextual-identities/cart.svg#blue");
}
tab-item[data-contextual-identity-name="Facebook"] .contextual-identity-marker {
  mask-image: url("/resources/icons/contextual-identities/fence.svg#blue");
}

The CSS can tell which specific icon is associated with the container, so you could even use that to modify the color or do something else to make the containers more distinct. Screenshot for reference in case it's not clear which icons I mean:

[penchala-services-inc]

Try this extension - https://addons.mozilla.org/en-US/firefox/addon/aws-login-helper/

We added account name to the title of the browser tab and also added account name to the console pages in the right hand side. I know this is not exactly what you want but a way to know you are looking at two different accounts.