Skip to content
Permalink
Browse files

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

- Added badge API
- Added unit test
  • Loading branch information...
ZER0 committed Oct 1, 2014
1 parent 49b0e0c commit d52e6cf9683e5721342c99edb1dedde1882f5eff
@@ -108,4 +108,5 @@ on(actionButtonStateEvents, 'data', ({target, window, state}) => {
view.setIcon(id, window, state.icon);
view.setLabel(id, window, state.label);
view.setDisabled(id, window, state.disabled);
view.setBadge(id, window, state.badge, state.badgeColor);
});
@@ -6,14 +6,13 @@
const { contract } = require('../../util/contract');
const { isLocalURL } = require('../../url');
const { isNil, isObject, isString } = require('../../lang/type');
const { required, either, string, boolean, object } = require('../../deprecated/api-utils');
const { required, either, string, boolean, object, number } = require('../../deprecated/api-utils');
const { merge } = require('../../util/object');
const { freeze } = Object;

function isIconSet(icons) {
return Object.keys(icons).
every(size => String(size >>> 0) === size && isLocalURL(icons[size]))
}
const isIconSet = (icons) =>
Object.keys(icons).
every(size => String(size >>> 0) === size && isLocalURL(icons[size]));

let iconSet = {
is: either(object, string),
@@ -36,10 +35,22 @@ let label = {
msg: 'The option "label" must be a non empty string'
}

let badge = {
is: either(string, number),
msg: 'The option "badge" must be a string or a number'
}

let badgeColor = {
is: string,
msg: 'The option "badgeColor" must be a string'
}

let stateContract = contract({
label: label,
icon: iconSet,
disabled: boolean
disabled: boolean,
badge: badge,
badgeColor: badgeColor
});

exports.stateContract = stateContract;
@@ -100,6 +100,7 @@ on(toggleButtonStateEvents, 'data', ({target, window, state}) => {
view.setLabel(id, window, state.label);
view.setDisabled(id, window, state.disabled);
view.setChecked(id, window, state.checked);
view.setBadge(id, window, state.badge, state.badgeColor);
});

on(clickEvents, 'data', ({target: id, window, checked }) => {
@@ -15,7 +15,7 @@ const { on, off, emit } = require('../../event/core');

const { data } = require('sdk/self');

const { isObject } = require('../../lang/type');
const { isObject, isNil } = require('../../lang/type');

const { getMostRecentBrowserWindow } = require('../../window/utils');
const { ignoreWindow } = require('../../private-browsing/utils');
@@ -114,7 +114,7 @@ function nodeFor(id, window=getMostRecentBrowserWindow()) {
exports.nodeFor = nodeFor;

function create(options) {
let { id, label, icon, type } = options;
let { id, label, icon, type, badge } = options;

if (views.has(id))
throw new Error('The ID "' + id + '" seems already used.');
@@ -137,7 +137,7 @@ function create(options) {
node.style.display = 'none';

node.setAttribute('id', this.id);
node.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional');
node.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional badged-button');
node.setAttribute('type', type);
node.setAttribute('label', label);
node.setAttribute('tooltiptext', label);
@@ -213,6 +213,27 @@ function setChecked(id, window, checked) {
}
exports.setChecked = setChecked;

function setBadge(id, window, badge, color) {
let node = nodeFor(id, window);

if (node) {
// `Array.from` is needed to handle unicode symbol properly:
// '𝐀𝐁'.length is 4 where Array.from('𝐀𝐁').length is 2
let text = isNil(badge)
? ''
: Array.from(String(badge)).slice(0, 4).join('');

node.setAttribute('badge', text);

let badgeNode = node.ownerDocument.getAnonymousElementByAttribute(node,
'class', 'toolbarbutton-badge');

if (badgeNode)
badgeNode.style.backgroundColor = isNil(color) ? '' : color;
}
}
exports.setBadge = setBadge;

function click(id) {
let node = nodeFor(id);

1 comment on commit d52e6cf

@Xiller

This comment has been minimized.

Copy link

commented on d52e6cf Oct 9, 2014

So is this working now? I replaced all the files changed here in sdk 1.17 and tried to add a badge to a togglebutton like this:

var toolbarbutton = ToggleButton({

    id: "dizzlike_button",
    label: "Dizzlike",
    icon: {
      "16": self.data.url("icon16.png")
    },
    tooltiptext: "Dizzlike!",
    badge : "5",
    onChange: handleChange
});

But I cant see a badge anywhere. Am I doing something wrong?

Please sign in to comment.
You can’t perform that action at this time.