Bug 994280 - It would be nice to have ability to add badge over button

- Added badge support for both `ActionButton` and `ToggleButton`
- Unit Test needs to be added

**Notice** that this PR needs the platform patch attached in [bug 994280](https://bugzilla.mozilla.org/show_bug.cgi?id=994280) to work properly.
And [bug 1037528](https://bugzilla.mozilla.org/show_bug.cgi?id=1037528) is a probably a blocker to land this feature.

## API
I slightly changed the API in the last commit. The previous API was:
```js
// old API
let button = ActionButton({
  id: 'my-button',
  label: 'my button',
  icon: './icon.png',
  badge: {
    text: '+1',  // both string and number
    color: 'red' // optional, just string
})
```

Now the API is:
```js
// new API
let button = ActionButton({
  id: 'my-button',
  label: 'my button',
  icon: './icon.png',
  badge: '+1',
  badgeColor: 'red'
});
```
Where I don't like "prefixing" object properties in such ways – see all the `contentScript*` we have – after I tried to use a bit the old API implementation, I noticed it was a bit too cumbersome; considering that our nested objects are immutable – they're snapshot, just "descriptor", in order to avoid side effects.

To be more clear, let's consider a really simple use case: increase the value of the badge, and then change color based on that value. With the current new API, this is the code:

```js
// new API
let button = ActionButton({
  id: 'my-button',
  label: 'my button',
  icon: './icon.png',
  badge: 1,
  onClick: function() {
    // every time we click, we increment by one
    this.badge += 1;
  }
});

// let's assume that now we want to change just the color,
// based on some event or content we received:

myservice.on("ContentReceived", data => {
  button.badgeColor = data.type === 'warning' ? 'yellow' : '';
});
```

In this way the click is independent, the only thing changed is the color, and it doesn't matter if we passed a number, or a string previously.
With the previous API, it's a different thing:

```js
// old API
let button = ActionButton({
  id: 'my-button',
  label: 'my button',
  icon: './icon.png',
  badge: {
    text: 1
  },
  onClick: function() {
    // every time we click, we increment by one
    this.badge = {text: this.badge.text + 1};
  }
});

// let's assume that now we want to change just the color,
// based on some event or content we received:

myservice.on("ContentReceived", data => {
  // we need to get the text value as first thing:
  let { text } = button.badge;
  let color = data.type === 'warning' ? 'yellow' : '';

   button.badge = { text: text, color: color };
});
```

Also, with the old API it was verbose to simply set a text, without color, that is likely the more common use case. Of course, we could also makes the `badge` property takes an object,  `number` or `string`, but if the user wanted to change color later, it would be more verbose to him:

```js
myservice.on("ContentReceived", data => {
  // we need to get the text value as first thing:
  let text = "text" in button.badge ? button.badge.text : button.badge;
  let color = data.type === 'warning' ? 'yellow' : '';

   button.badge = { text: text, color: color };
});
```

Notice also that thanks to the `state` method, the developer is still able to set both properties in one line, as object, even in the new API, if he really likes that, or have a set of objects with defined properties – but I don't think is the case for badges:

```js
  button.state(button, {badge: '+1', badgeColor: 'red'});
```

nit can we make this title more descriptive, as I think one of the more important tests here is to explicity test the use case where the badge has a length > 4.