Add count indication of installed addons

[murtaugh]

This is a fairly minor problem, but I think it has a very simple solution: Sometimes when I'm working with multiple installations of a site (local/remote), I lose track of whether the installed addons are in sync. (I know this is dumb.)

I feel like it would be useful, even when I'm not being dumb, to add a count of installed addons, like so:

It might be nice to be able to have a count right at your fingertips for a couple reasons, like when you prepare to upgrade a site, or when you're comparing two installations :)

[intoeetive]

@ajohnson FYI

[ajohnson]

@murtaugh @intoeetive That would come in handy.

Yuri, I can't remember if we already indicate when/if add-on updates are available via the Updates tab? If so, we should style this new "installed" count in the same way we're already styling the "updates" count.

If not, I have an idea for how we can style this.

[intoeetive]

yes we have counter on "updates" tab (is basically same that's on screenshot proposed)

[ajohnson]

@intoeetive OK, cool. In that case let's just use that same counter design on the Installed tab.

I can add this to the Core team's issue queue, unless @murtaugh you've already coded this up and have a PR.

[murtaugh]

I don't have a PR, but I took a look at the current design just to see:

Reusing an element is always ideal, but I've thought about this for a moment and there are a couple issues I see, first that this particular element is red, implying urgency, which is not what I would suggest for something that's communicating a very non-urgent piece of information. I'd update the default class (tab-bar__tab-notification) with neutral colors, for example background: var(--ee-accent-light) and color: var(--ee-text-secondary):

Then I'd add a secondary class, such as tab-notification-urgent to apply the the "urgent" colors to the "Updates" tab. (I don't know enough about the class naming conventions to know what this secondary class should be called, so I don't think I should work on the PR.)

Second, sadly, it — understandably — wasn't designed to properly hold double-digit numbers.

A minor CSS update to tab-bar__tab-notification could handle this, by updating it with border-radius: 50px, width: auto, and padding: 0px 5px:

[robsonsobral]

(The pill shape can be achieved using a border-radius greater than possible. For example, border-radius: 999em;.)

[ajohnson]

@murtaugh Yes indeed, didn't realize a red beacon was being used for Updates. Definitely would not be appropriate for the Installed count.

I'll add this to our issue queue and we'll get it implemented for a future release. Thanks!