multi-account-containers: Icon inconsistencies

The icons in the popup and in Options (in Firefox 57) are inconsistent in both appearance and order: Popup Options

Notable inconsistencies:

The circle icon is positioned at the end in the popup.
The positions of the gift and vacation icons are switched.
The cart icon is more “solid” in the popup and has more detail in Options.
The dollar icon is contained within a circle in the popup.
The briefcase icon is more “solid” in Options and has more detail in the popup.
Small detail, but still an inconsistency: In the popup, the Color options are shown before the Icon options, while Options shows Icon first.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

@Paarmita https://searchfox.org/ is a good code searching tool for Firefox.

Finding the code in Firefox

Sometimes searching for the string like the name in the modal is actually the simplest way to find the code: “Add new Container” search result returns two results, one is the button that opens the modal and another is the modal. The code being a ftl translation file:

containers-window-new =
    .title = Add New Container

“containers-window-new” search result returns one more result which is the code that uses the translation:

function setTitle() {
  let params = window.arguments[0] || {};

  let winElem = document.documentElement;
  if (params.userContextId) {
    document.l10n.setAttributes(winElem, "containers-window-update", {
      name: params.identity.name,
    });
  } else {
    document.l10n.setAttributes(winElem, "containers-window-new");
  }
}

Looking through this code in the rest of the file you can see it’s responsible for opening up the modal and generating these icons.

The issues

These are all issues within the Firefox codebase and can be changed and tested within a ‘artefact build’ and shouldn’t require a compile of Firefox. Follow the instructions to setup your machine: Mac Windows Linux

After you get the bootstrap.py select artefact build and the script will setup your environment with mercurial and download the code too (you will be prompted at the end, if not follow the rest of the guide).
Some of the icons being wrong is actually the icons that were in the initial set in Firefox were never updated (the briefcase, cart, dollar)
The ordering of the modal in the extension came second to the modal within Firefox.
Likely there will need to be some optimisations to the icons to be placed into the Mozilla codebase.

The work however will need to be moved and logged in http://bugzilla.mozilla.org/ rather than Github. You can mark me as a review when you are done. Please feel to reach out to me with any questions you might have 😃.

jonathanKingston on Sep 27, 2018

@yatri1609 I was working on this. 😃

Paarmita on Sep 23, 2018

Make sure you have the extension installed. The first menu is when you click the extension icon and the second menu can be found in Firefox’s settings in General.

RuiNtD on Sep 21, 2018