mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
1350 lines
38 KiB
JavaScript
1350 lines
38 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
'use strict';
|
|
|
|
module.metadata = {
|
|
'engines': {
|
|
'Firefox': '> 28'
|
|
}
|
|
};
|
|
|
|
const { Cu } = require('chrome');
|
|
const { Loader } = require('sdk/test/loader');
|
|
const { data } = require('sdk/self');
|
|
const { open, focus, close } = require('sdk/window/helpers');
|
|
const { setTimeout } = require('sdk/timers');
|
|
const { getMostRecentBrowserWindow } = require('sdk/window/utils');
|
|
const { partial } = require('sdk/lang/functional');
|
|
const { wait } = require('./event/helpers');
|
|
const { gc } = require('sdk/test/memory');
|
|
|
|
const openBrowserWindow = partial(open, null, {features: {toolbar: true}});
|
|
const openPrivateBrowserWindow = partial(open, null,
|
|
{features: {toolbar: true, private: true}});
|
|
|
|
const badgeNodeFor = (node) =>
|
|
node.ownerDocument.getAnonymousElementByAttribute(node,
|
|
'class', 'toolbarbutton-badge');
|
|
|
|
function getWidget(buttonId, window = getMostRecentBrowserWindow()) {
|
|
const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
|
|
const { AREA_NAVBAR } = CustomizableUI;
|
|
|
|
let widgets = CustomizableUI.getWidgetIdsInArea(AREA_NAVBAR).
|
|
filter((id) => id.startsWith('toggle-button--') && id.endsWith(buttonId));
|
|
|
|
if (widgets.length === 0)
|
|
throw new Error('Widget with id `' + id +'` not found.');
|
|
|
|
if (widgets.length > 1)
|
|
throw new Error('Unexpected number of widgets: ' + widgets.length)
|
|
|
|
return CustomizableUI.getWidget(widgets[0]).forWindow(window);
|
|
};
|
|
|
|
exports['test basic constructor validation'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
assert.throws(
|
|
() => ToggleButton({}),
|
|
/^The option/,
|
|
'throws on no option given');
|
|
|
|
// Test no label
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', icon: './icon.png'}),
|
|
/^The option "label"/,
|
|
'throws on no label given');
|
|
|
|
// Test no id
|
|
assert.throws(
|
|
() => ToggleButton({ label: 'my button', icon: './icon.png' }),
|
|
/^The option "id"/,
|
|
'throws on no id given');
|
|
|
|
// Test no icon
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'my button' }),
|
|
/^The option "icon"/,
|
|
'throws on no icon given');
|
|
|
|
|
|
// Test empty label
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: '', icon: './icon.png' }),
|
|
/^The option "label"/,
|
|
'throws on no valid label given');
|
|
|
|
// Test invalid id
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my button', label: 'my button', icon: './icon.png' }),
|
|
/^The option "id"/,
|
|
'throws on no valid id given');
|
|
|
|
// Test empty id
|
|
assert.throws(
|
|
() => ToggleButton({ id: '', label: 'my button', icon: './icon.png' }),
|
|
/^The option "id"/,
|
|
'throws on no valid id given');
|
|
|
|
// Test remote icon
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'my button', icon: 'http://www.mozilla.org/favicon.ico'}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
// Test wrong icon: no absolute URI to local resource, neither relative './'
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'my button', icon: 'icon.png'}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
// Test wrong icon: no absolute URI to local resource, neither relative './'
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'my button', icon: 'foo and bar'}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
// Test wrong icon: '../' is not allowed
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'my button', icon: '../icon.png'}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'button', icon: './i.png', badge: true}),
|
|
/^The option "badge"/,
|
|
'throws on no valid badge given');
|
|
|
|
assert.throws(
|
|
() => ToggleButton({ id: 'my-button', label: 'button', icon: './i.png', badgeColor: true}),
|
|
/^The option "badgeColor"/,
|
|
'throws on no valid badge given');
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
exports['test button added'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-1',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
// check defaults
|
|
assert.equal(button.disabled, false,
|
|
'disabled is set to default `false` value');
|
|
|
|
let { node } = getWidget(button.id);
|
|
|
|
assert.ok(!!node, 'The button is in the navbar');
|
|
|
|
assert.equal(button.label, node.getAttribute('label'),
|
|
'label is set');
|
|
|
|
assert.equal(button.label, node.getAttribute('tooltiptext'),
|
|
'tooltip is set');
|
|
|
|
assert.equal(data.url(button.icon.substr(2)), node.getAttribute('image'),
|
|
'icon is set');
|
|
|
|
assert.equal("", node.getAttribute('badge'),
|
|
'badge attribute is empty');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button added with resource URI'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-1',
|
|
label: 'my button',
|
|
icon: data.url('icon.png')
|
|
});
|
|
|
|
assert.equal(button.icon, data.url('icon.png'),
|
|
'icon is set');
|
|
|
|
let { node } = getWidget(button.id);
|
|
|
|
assert.equal(button.icon, node.getAttribute('image'),
|
|
'icon on node is set');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button duplicate id'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-2',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
assert.throws(() => {
|
|
let doppelganger = ToggleButton({
|
|
id: 'my-button-2',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
},
|
|
/^The ID/,
|
|
'No duplicates allowed');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button multiple destroy'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-2',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
button.destroy();
|
|
button.destroy();
|
|
button.destroy();
|
|
|
|
assert.pass('multiple destroy doesn\'t matter');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button removed on dispose'] = function(assert, done) {
|
|
const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let widgetId;
|
|
|
|
CustomizableUI.addListener({
|
|
onWidgetDestroyed: function(id) {
|
|
if (id === widgetId) {
|
|
CustomizableUI.removeListener(this);
|
|
|
|
assert.pass('button properly removed');
|
|
loader.unload();
|
|
done();
|
|
}
|
|
}
|
|
});
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-3',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
// Tried to use `getWidgetIdsInArea` but seems undefined, not sure if it
|
|
// was removed or it's not in the UX build yet
|
|
widgetId = getWidget(button.id).id;
|
|
|
|
button.destroy();
|
|
};
|
|
|
|
exports['test button global state updated'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-4',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
});
|
|
|
|
// Tried to use `getWidgetIdsInArea` but seems undefined, not sure if it
|
|
// was removed or it's not in the UX build yet
|
|
|
|
let { node, id: widgetId } = getWidget(button.id);
|
|
|
|
// check read-only properties
|
|
|
|
assert.throws(() => button.id = 'another-id',
|
|
/^setting a property that has only a getter/,
|
|
'id cannot be set at runtime');
|
|
|
|
assert.equal(button.id, 'my-button-4',
|
|
'id is unchanged');
|
|
assert.equal(node.id, widgetId,
|
|
'node id is unchanged');
|
|
|
|
// check writable properties
|
|
|
|
button.label = 'New label';
|
|
assert.equal(button.label, 'New label',
|
|
'label is updated');
|
|
assert.equal(node.getAttribute('label'), 'New label',
|
|
'node label is updated');
|
|
assert.equal(node.getAttribute('tooltiptext'), 'New label',
|
|
'node tooltip is updated');
|
|
|
|
button.icon = './new-icon.png';
|
|
assert.equal(button.icon, './new-icon.png',
|
|
'icon is updated');
|
|
assert.equal(node.getAttribute('image'), data.url('new-icon.png'),
|
|
'node image is updated');
|
|
|
|
button.disabled = true;
|
|
assert.equal(button.disabled, true,
|
|
'disabled is updated');
|
|
assert.equal(node.getAttribute('disabled'), 'true',
|
|
'node disabled is updated');
|
|
|
|
button.badge = '+2';
|
|
button.badgeColor = 'blue';
|
|
|
|
assert.equal(button.badge, '+2',
|
|
'badge is updated');
|
|
assert.equal(node.getAttribute('bagde'), '',
|
|
'node badge is updated');
|
|
|
|
assert.equal(button.badgeColor, 'blue',
|
|
'badgeColor is updated');
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, 'blue',
|
|
'badge color is updated');
|
|
|
|
// TODO: test validation on update
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button global state set and get with state method'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-16',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
// read the button's state
|
|
let state = button.state(button);
|
|
|
|
assert.equal(state.label, 'my button',
|
|
'label is correct');
|
|
assert.equal(state.icon, './icon.png',
|
|
'icon is correct');
|
|
assert.equal(state.disabled, false,
|
|
'disabled is correct');
|
|
|
|
// set the new button's state
|
|
button.state(button, {
|
|
label: 'New label',
|
|
icon: './new-icon.png',
|
|
disabled: true,
|
|
badge: '+2',
|
|
badgeColor: 'blue'
|
|
});
|
|
|
|
assert.equal(button.label, 'New label',
|
|
'label is updated');
|
|
assert.equal(button.icon, './new-icon.png',
|
|
'icon is updated');
|
|
assert.equal(button.disabled, true,
|
|
'disabled is updated');
|
|
assert.equal(button.badge, '+2',
|
|
'badge is updated');
|
|
assert.equal(button.badgeColor, 'blue',
|
|
'badgeColor is updated');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button global state updated on multiple windows'] = function*(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-5',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
let nodes = [getWidget(button.id).node];
|
|
|
|
let window = yield openBrowserWindow();
|
|
|
|
nodes.push(getWidget(button.id, window).node);
|
|
|
|
button.label = 'New label';
|
|
button.icon = './new-icon.png';
|
|
button.disabled = true;
|
|
button.badge = '+10';
|
|
button.badgeColor = 'green';
|
|
|
|
for (let node of nodes) {
|
|
assert.equal(node.getAttribute('label'), 'New label',
|
|
'node label is updated');
|
|
assert.equal(node.getAttribute('tooltiptext'), 'New label',
|
|
'node tooltip is updated');
|
|
|
|
assert.equal(button.icon, './new-icon.png',
|
|
'icon is updated');
|
|
assert.equal(node.getAttribute('image'), data.url('new-icon.png'),
|
|
'node image is updated');
|
|
|
|
assert.equal(button.disabled, true,
|
|
'disabled is updated');
|
|
assert.equal(node.getAttribute('disabled'), 'true',
|
|
'node disabled is updated');
|
|
|
|
assert.equal(button.badge, '+10',
|
|
'badge is updated')
|
|
assert.equal(button.badgeColor, 'green',
|
|
'badgeColor is updated')
|
|
assert.equal(node.getAttribute('badge'), '+10',
|
|
'node badge is updated')
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, 'green',
|
|
'node badge color is updated')
|
|
};
|
|
|
|
yield close(window);
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
exports['test button window state'] = function*(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-6',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
badge: '+1',
|
|
badgeColor: 'red'
|
|
});
|
|
|
|
let mainWindow = browserWindows.activeWindow;
|
|
let nodes = [getWidget(button.id).node];
|
|
|
|
let window = yield openBrowserWindow().then(focus);
|
|
|
|
nodes.push(getWidget(button.id, window).node);
|
|
|
|
let { activeWindow } = browserWindows;
|
|
|
|
button.state(activeWindow, {
|
|
label: 'New label',
|
|
icon: './new-icon.png',
|
|
disabled: true,
|
|
badge: '+2',
|
|
badgeColor : 'green'
|
|
});
|
|
|
|
// check the states
|
|
|
|
assert.equal(button.label, 'my button',
|
|
'global label unchanged');
|
|
assert.equal(button.icon, './icon.png',
|
|
'global icon unchanged');
|
|
assert.equal(button.disabled, false,
|
|
'global disabled unchanged');
|
|
assert.equal(button.badge, '+1',
|
|
'global badge unchanged');
|
|
assert.equal(button.badgeColor, 'red',
|
|
'global badgeColor unchanged');
|
|
|
|
let state = button.state(mainWindow);
|
|
|
|
assert.equal(state.label, 'my button',
|
|
'previous window label unchanged');
|
|
assert.equal(state.icon, './icon.png',
|
|
'previous window icon unchanged');
|
|
assert.equal(state.disabled, false,
|
|
'previous window disabled unchanged');
|
|
assert.deepEqual(button.badge, '+1',
|
|
'previouswindow badge unchanged');
|
|
assert.deepEqual(button.badgeColor, 'red',
|
|
'previous window badgeColor unchanged');
|
|
|
|
state = button.state(activeWindow);
|
|
|
|
assert.equal(state.label, 'New label',
|
|
'active window label updated');
|
|
assert.equal(state.icon, './new-icon.png',
|
|
'active window icon updated');
|
|
assert.equal(state.disabled, true,
|
|
'active disabled updated');
|
|
assert.equal(state.badge, '+2',
|
|
'active badge updated');
|
|
assert.equal(state.badgeColor, 'green',
|
|
'active badgeColor updated');
|
|
|
|
// change the global state, only the windows without a state are affected
|
|
|
|
button.label = 'A good label';
|
|
button.badge = '+3';
|
|
|
|
assert.equal(button.label, 'A good label',
|
|
'global label updated');
|
|
assert.equal(button.state(mainWindow).label, 'A good label',
|
|
'previous window label updated');
|
|
assert.equal(button.state(activeWindow).label, 'New label',
|
|
'active window label unchanged');
|
|
assert.equal(button.state(activeWindow).badge, '+2',
|
|
'active badge unchanged');
|
|
assert.equal(button.state(activeWindow).badgeColor, 'green',
|
|
'active badgeColor unchanged');
|
|
assert.equal(button.state(mainWindow).badge, '+3',
|
|
'previous window badge updated');
|
|
assert.equal(button.state(mainWindow).badgeColor, 'red',
|
|
'previous window badgeColor unchanged');
|
|
|
|
// delete the window state will inherits the global state again
|
|
|
|
button.state(activeWindow, null);
|
|
|
|
state = button.state(activeWindow);
|
|
|
|
assert.equal(state.label, 'A good label',
|
|
'active window label inherited');
|
|
assert.equal(state.badge, '+3',
|
|
'previous window badge inherited');
|
|
assert.equal(button.badgeColor, 'red',
|
|
'previous window badgeColor inherited');
|
|
|
|
// check the nodes properties
|
|
let node = nodes[0];
|
|
|
|
state = button.state(mainWindow);
|
|
|
|
assert.equal(node.getAttribute('label'), state.label,
|
|
'node label is correct');
|
|
assert.equal(node.getAttribute('tooltiptext'), state.label,
|
|
'node tooltip is correct');
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
|
|
'node image is correct');
|
|
assert.equal(node.hasAttribute('disabled'), state.disabled,
|
|
'disabled is correct');
|
|
assert.equal(node.getAttribute("badge"), state.badge,
|
|
'badge is correct');
|
|
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, state.badgeColor,
|
|
'badge color is correct');
|
|
|
|
node = nodes[1];
|
|
state = button.state(activeWindow);
|
|
|
|
assert.equal(node.getAttribute('label'), state.label,
|
|
'node label is correct');
|
|
assert.equal(node.getAttribute('tooltiptext'), state.label,
|
|
'node tooltip is correct');
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
|
|
'node image is correct');
|
|
assert.equal(node.hasAttribute('disabled'), state.disabled,
|
|
'disabled is correct');
|
|
assert.equal(node.getAttribute('badge'), state.badge,
|
|
'badge is correct');
|
|
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, state.badgeColor,
|
|
'badge color is correct');
|
|
|
|
yield close(window);
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
|
|
exports['test button tab state'] = function*(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
let tabs = loader.require('sdk/tabs');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-7',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
let mainTab = tabs.activeTab;
|
|
let node = getWidget(button.id).node;
|
|
|
|
tabs.open('about:blank');
|
|
|
|
yield wait(tabs, 'ready');
|
|
|
|
let tab = tabs.activeTab;
|
|
let { activeWindow } = browserWindows;
|
|
|
|
// set window state
|
|
button.state(activeWindow, {
|
|
label: 'Window label',
|
|
icon: './window-icon.png',
|
|
badge: 'win',
|
|
badgeColor: 'blue'
|
|
});
|
|
|
|
// set previous active tab state
|
|
button.state(mainTab, {
|
|
label: 'Tab label',
|
|
icon: './tab-icon.png',
|
|
badge: 'tab',
|
|
badgeColor: 'red'
|
|
});
|
|
|
|
// set current active tab state
|
|
button.state(tab, {
|
|
icon: './another-tab-icon.png',
|
|
disabled: true,
|
|
badge: 't1',
|
|
badgeColor: 'green'
|
|
});
|
|
|
|
// check the states, be sure they won't be gc'ed
|
|
yield gc();
|
|
|
|
assert.equal(button.label, 'my button',
|
|
'global label unchanged');
|
|
assert.equal(button.icon, './icon.png',
|
|
'global icon unchanged');
|
|
assert.equal(button.disabled, false,
|
|
'global disabled unchanged');
|
|
assert.equal(button.badge, undefined,
|
|
'global badge unchanged')
|
|
|
|
let state = button.state(mainTab);
|
|
|
|
assert.equal(state.label, 'Tab label',
|
|
'previous tab label updated');
|
|
assert.equal(state.icon, './tab-icon.png',
|
|
'previous tab icon updated');
|
|
assert.equal(state.disabled, false,
|
|
'previous tab disabled unchanged');
|
|
assert.equal(state.badge, 'tab',
|
|
'previous tab badge unchanged')
|
|
assert.equal(state.badgeColor, 'red',
|
|
'previous tab badgeColor unchanged')
|
|
|
|
state = button.state(tab);
|
|
|
|
assert.equal(state.label, 'Window label',
|
|
'active tab inherited from window state');
|
|
assert.equal(state.icon, './another-tab-icon.png',
|
|
'active tab icon updated');
|
|
assert.equal(state.disabled, true,
|
|
'active disabled updated');
|
|
assert.equal(state.badge, 't1',
|
|
'active badge updated');
|
|
assert.equal(state.badgeColor, 'green',
|
|
'active badgeColor updated');
|
|
|
|
// change the global state
|
|
button.icon = './good-icon.png';
|
|
|
|
// delete the tab state
|
|
button.state(tab, null);
|
|
|
|
assert.equal(button.icon, './good-icon.png',
|
|
'global icon updated');
|
|
assert.equal(button.state(mainTab).icon, './tab-icon.png',
|
|
'previous tab icon unchanged');
|
|
assert.equal(button.state(tab).icon, './window-icon.png',
|
|
'tab icon inherited from window');
|
|
assert.equal(button.state(mainTab).badge, 'tab',
|
|
'previous tab badge is unchaged');
|
|
assert.equal(button.state(tab).badge, 'win',
|
|
'tab badge is inherited from window');
|
|
|
|
// delete the window state
|
|
button.state(activeWindow, null);
|
|
|
|
state = button.state(tab);
|
|
|
|
assert.equal(state.icon, './good-icon.png',
|
|
'tab icon inherited from global');
|
|
assert.equal(state.badge, undefined,
|
|
'tab badge inherited from global');
|
|
assert.equal(state.badgeColor, undefined,
|
|
'tab badgeColor inherited from global');
|
|
|
|
// check the node properties
|
|
yield wait();
|
|
|
|
assert.equal(node.getAttribute('label'), state.label,
|
|
'node label is correct');
|
|
assert.equal(node.getAttribute('tooltiptext'), state.label,
|
|
'node tooltip is correct');
|
|
assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
|
|
'node image is correct');
|
|
assert.equal(node.hasAttribute('disabled'), state.disabled,
|
|
'node disabled is correct');
|
|
assert.equal(node.getAttribute('badge'), '',
|
|
'badge text is correct');
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, '',
|
|
'badge color is correct');
|
|
|
|
mainTab.activate();
|
|
|
|
yield wait(tabs, 'activate');
|
|
|
|
// This is made in order to avoid to check the node before it
|
|
// is updated, need a better check
|
|
yield wait();
|
|
|
|
state = button.state(mainTab);
|
|
|
|
assert.equal(node.getAttribute('label'), state.label,
|
|
'node label is correct');
|
|
assert.equal(node.getAttribute('tooltiptext'), state.label,
|
|
'node tooltip is correct');
|
|
assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
|
|
'node image is correct');
|
|
assert.equal(node.hasAttribute('disabled'), state.disabled,
|
|
'disabled is correct');
|
|
assert.equal(node.getAttribute('badge'), state.badge,
|
|
'badge text is correct');
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, state.badgeColor,
|
|
'badge color is correct');
|
|
|
|
tab.close(loader.unload);
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
exports['test button click'] = function*(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let labels = [];
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-8',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
onClick: ({label}) => labels.push(label)
|
|
});
|
|
|
|
let mainWindow = browserWindows.activeWindow;
|
|
let chromeWindow = getMostRecentBrowserWindow();
|
|
|
|
let window = yield openBrowserWindow().then(focus);
|
|
|
|
button.state(mainWindow, { label: 'nothing' });
|
|
button.state(mainWindow.tabs.activeTab, { label: 'foo'})
|
|
button.state(browserWindows.activeWindow, { label: 'bar' });
|
|
|
|
button.click();
|
|
|
|
yield focus(chromeWindow);
|
|
|
|
button.click();
|
|
|
|
assert.deepEqual(labels, ['bar', 'foo'],
|
|
'button click works');
|
|
|
|
yield close(window);
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button icon set'] = function(assert) {
|
|
const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
// Test remote icon set
|
|
assert.throws(
|
|
() => ToggleButton({
|
|
id: 'my-button-10',
|
|
label: 'my button',
|
|
icon: {
|
|
'16': 'http://www.mozilla.org/favicon.ico'
|
|
}
|
|
}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-11',
|
|
label: 'my button',
|
|
icon: {
|
|
'5': './icon5.png',
|
|
'16': './icon16.png',
|
|
'32': './icon32.png',
|
|
'64': './icon64.png'
|
|
}
|
|
});
|
|
|
|
let { node, id: widgetId } = getWidget(button.id);
|
|
let { devicePixelRatio } = node.ownerDocument.defaultView;
|
|
|
|
let size = 16 * devicePixelRatio;
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(button.icon[size].substr(2)),
|
|
'the icon is set properly in navbar');
|
|
|
|
size = 32 * devicePixelRatio;
|
|
|
|
CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_PANEL);
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(button.icon[size].substr(2)),
|
|
'the icon is set properly in panel');
|
|
|
|
// Using `loader.unload` without move back the button to the original area
|
|
// raises an error in the CustomizableUI. This is doesn't happen if the
|
|
// button is moved manually from navbar to panel. I believe it has to do
|
|
// with `addWidgetToArea` method, because even with a `timeout` the issue
|
|
// persist.
|
|
CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_NAVBAR);
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button icon set with only one option'] = function(assert) {
|
|
const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
// Test remote icon set
|
|
assert.throws(
|
|
() => ToggleButton({
|
|
id: 'my-button-10',
|
|
label: 'my button',
|
|
icon: {
|
|
'16': 'http://www.mozilla.org/favicon.ico'
|
|
}
|
|
}),
|
|
/^The option "icon"/,
|
|
'throws on no valid icon given');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-11',
|
|
label: 'my button',
|
|
icon: {
|
|
'5': './icon5.png'
|
|
}
|
|
});
|
|
|
|
let { node, id: widgetId } = getWidget(button.id);
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(button.icon['5'].substr(2)),
|
|
'the icon is set properly in navbar');
|
|
|
|
CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_PANEL);
|
|
|
|
assert.equal(node.getAttribute('image'), data.url(button.icon['5'].substr(2)),
|
|
'the icon is set properly in panel');
|
|
|
|
// Using `loader.unload` without move back the button to the original area
|
|
// raises an error in the CustomizableUI. This is doesn't happen if the
|
|
// button is moved manually from navbar to panel. I believe it has to do
|
|
// with `addWidgetToArea` method, because even with a `timeout` the issue
|
|
// persist.
|
|
CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_NAVBAR);
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button state validation'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-12',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
})
|
|
|
|
let state = button.state(button);
|
|
|
|
assert.throws(
|
|
() => button.state(button, { icon: 'http://www.mozilla.org/favicon.ico' }),
|
|
/^The option "icon"/,
|
|
'throws on remote icon given');
|
|
|
|
assert.throws(
|
|
() => button.state(button, { badge: true } ),
|
|
/^The option "badge"/,
|
|
'throws on wrong badge value given');
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
exports['test button are not in private windows'] = function(assert, done) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let{ isPrivate } = loader.require('sdk/private-browsing');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-13',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
openPrivateBrowserWindow().then(window => {
|
|
assert.ok(isPrivate(window),
|
|
'the new window is private');
|
|
|
|
let { node } = getWidget(button.id, window);
|
|
|
|
assert.ok(!node || node.style.display === 'none',
|
|
'the button is not added / is not visible on private window');
|
|
|
|
return window;
|
|
}).
|
|
then(close).
|
|
then(loader.unload).
|
|
then(done, assert.fail)
|
|
}
|
|
|
|
exports['test button state are snapshot'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
let tabs = loader.require('sdk/tabs');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-14',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
let state = button.state(button);
|
|
let windowState = button.state(browserWindows.activeWindow);
|
|
let tabState = button.state(tabs.activeTab);
|
|
|
|
assert.deepEqual(windowState, state,
|
|
'window state has the same properties of button state');
|
|
|
|
assert.deepEqual(tabState, state,
|
|
'tab state has the same properties of button state');
|
|
|
|
assert.notEqual(windowState, state,
|
|
'window state is not the same object of button state');
|
|
|
|
assert.notEqual(tabState, state,
|
|
'tab state is not the same object of button state');
|
|
|
|
assert.deepEqual(button.state(button), state,
|
|
'button state has the same content of previous button state');
|
|
|
|
assert.deepEqual(button.state(browserWindows.activeWindow), windowState,
|
|
'window state has the same content of previous window state');
|
|
|
|
assert.deepEqual(button.state(tabs.activeTab), tabState,
|
|
'tab state has the same content of previous tab state');
|
|
|
|
assert.notEqual(button.state(button), state,
|
|
'button state is not the same object of previous button state');
|
|
|
|
assert.notEqual(button.state(browserWindows.activeWindow), windowState,
|
|
'window state is not the same object of previous window state');
|
|
|
|
assert.notEqual(button.state(tabs.activeTab), tabState,
|
|
'tab state is not the same object of previous tab state');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button icon object is a snapshot'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let icon = {
|
|
'16': './foo.png'
|
|
};
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-17',
|
|
label: 'my button',
|
|
icon: icon
|
|
});
|
|
|
|
assert.deepEqual(button.icon, icon,
|
|
'button.icon has the same properties of the object set in the constructor');
|
|
|
|
assert.notEqual(button.icon, icon,
|
|
'button.icon is not the same object of the object set in the constructor');
|
|
|
|
assert.throws(
|
|
() => button.icon[16] = './bar.png',
|
|
/16 is read-only/,
|
|
'properties of button.icon are ready-only'
|
|
);
|
|
|
|
let newIcon = {'16': './bar.png'};
|
|
button.icon = newIcon;
|
|
|
|
assert.deepEqual(button.icon, newIcon,
|
|
'button.icon has the same properties of the object set');
|
|
|
|
assert.notEqual(button.icon, newIcon,
|
|
'button.icon is not the same object of the object set');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test button after destroy'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
let { activeTab } = loader.require('sdk/tabs');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-15',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
onClick: () => assert.fail('onClick should not be called')
|
|
});
|
|
|
|
button.destroy();
|
|
|
|
assert.throws(
|
|
() => button.click(),
|
|
/^The state cannot be set or get/,
|
|
'button.click() not executed');
|
|
|
|
assert.throws(
|
|
() => button.label,
|
|
/^The state cannot be set or get/,
|
|
'button.label cannot be get after destroy');
|
|
|
|
assert.throws(
|
|
() => button.label = 'my label',
|
|
/^The state cannot be set or get/,
|
|
'button.label cannot be set after destroy');
|
|
|
|
assert.throws(
|
|
() => {
|
|
button.state(browserWindows.activeWindow, {
|
|
label: 'window label'
|
|
});
|
|
},
|
|
/^The state cannot be set or get/,
|
|
'window state label cannot be set after destroy');
|
|
|
|
assert.throws(
|
|
() => button.state(browserWindows.activeWindow).label,
|
|
/^The state cannot be set or get/,
|
|
'window state label cannot be get after destroy');
|
|
|
|
assert.throws(
|
|
() => {
|
|
button.state(activeTab, {
|
|
label: 'tab label'
|
|
});
|
|
},
|
|
/^The state cannot be set or get/,
|
|
'tab state label cannot be set after destroy');
|
|
|
|
assert.throws(
|
|
() => button.state(activeTab).label,
|
|
/^The state cannot be set or get/,
|
|
'window state label cannot se get after destroy');
|
|
|
|
loader.unload();
|
|
};
|
|
|
|
exports['test button badge property'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-18',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
badge: 123456
|
|
});
|
|
|
|
assert.equal(button.badge, 123456,
|
|
'badge is set');
|
|
|
|
assert.equal(button.badgeColor, undefined,
|
|
'badge color is not set');
|
|
|
|
let { node } = getWidget(button.id);
|
|
let { getComputedStyle } = node.ownerDocument.defaultView;
|
|
let badgeNode = badgeNodeFor(node);
|
|
|
|
assert.equal('1234', node.getAttribute('badge'),
|
|
'badge text is displayed up to four characters');
|
|
|
|
assert.equal(getComputedStyle(badgeNode).backgroundColor, 'rgb(217, 0, 0)',
|
|
'badge color is the default one');
|
|
|
|
button.badge = '危機';
|
|
|
|
assert.equal(button.badge, '危機',
|
|
'badge is properly set');
|
|
|
|
assert.equal('危機', node.getAttribute('badge'),
|
|
'badge text is displayed');
|
|
|
|
button.badge = '🐶🐰🐹';
|
|
|
|
assert.equal(button.badge, '🐶🐰🐹',
|
|
'badge is properly set');
|
|
|
|
assert.equal('🐶🐰🐹', node.getAttribute('badge'),
|
|
'badge text is displayed');
|
|
|
|
loader.unload();
|
|
}
|
|
exports['test button badge color'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-19',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
badge: '+1',
|
|
badgeColor: 'blue'
|
|
});
|
|
|
|
assert.equal(button.badgeColor, 'blue',
|
|
'badge color is set');
|
|
|
|
let { node } = getWidget(button.id);
|
|
let { getComputedStyle } = node.ownerDocument.defaultView;
|
|
let badgeNode = badgeNodeFor(node);
|
|
|
|
assert.equal(badgeNodeFor(node).style.backgroundColor, 'blue',
|
|
'badge color is displayed properly');
|
|
assert.equal(getComputedStyle(badgeNode).backgroundColor, 'rgb(0, 0, 255)',
|
|
'badge color overrides the default one');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
// toggle button only
|
|
exports['test button checked'] = function(assert, done) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let events = [];
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-9',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
checked: true,
|
|
onClick: ({label}) => events.push('clicked:' + label),
|
|
onChange: state => events.push('changed:' + state.label + ':' + state.checked)
|
|
});
|
|
|
|
let { node } = getWidget(button.id);
|
|
|
|
assert.equal(node.getAttribute('type'), 'checkbox',
|
|
'node type is properly set');
|
|
|
|
let mainWindow = browserWindows.activeWindow;
|
|
let chromeWindow = getMostRecentBrowserWindow();
|
|
|
|
openBrowserWindow().then(focus).then(window => {
|
|
button.state(mainWindow, { label: 'nothing' });
|
|
button.state(mainWindow.tabs.activeTab, { label: 'foo'})
|
|
button.state(browserWindows.activeWindow, { label: 'bar' });
|
|
|
|
button.click();
|
|
button.click();
|
|
|
|
focus(chromeWindow).then(() => {
|
|
button.click();
|
|
button.click();
|
|
|
|
assert.deepEqual(events, [
|
|
'clicked:bar', 'changed:bar:false', 'clicked:bar', 'changed:bar:true',
|
|
'clicked:foo', 'changed:foo:false', 'clicked:foo', 'changed:foo:true'
|
|
],
|
|
'button change events works');
|
|
|
|
close(window).
|
|
then(loader.unload).
|
|
then(done, assert.fail);
|
|
})
|
|
}).then(null, assert.fail);
|
|
}
|
|
|
|
exports['test button is checked on window level'] = function(assert, done) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
let tabs = loader.require('sdk/tabs');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-20',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
let mainWindow = browserWindows.activeWindow;
|
|
let mainTab = tabs.activeTab;
|
|
|
|
assert.equal(button.checked, false,
|
|
'global state, checked is `false`.');
|
|
assert.equal(button.state(mainTab).checked, false,
|
|
'tab state, checked is `false`.');
|
|
assert.equal(button.state(mainWindow).checked, false,
|
|
'window state, checked is `false`.');
|
|
|
|
button.click();
|
|
|
|
tabs.open({
|
|
url: 'about:blank',
|
|
onActivate: function onActivate(tab) {
|
|
tab.removeListener('activate', onActivate);
|
|
|
|
assert.notEqual(mainTab, tab,
|
|
'the current tab is not the same.');
|
|
|
|
assert.equal(button.checked, false,
|
|
'global state, checked is `false`.');
|
|
assert.equal(button.state(mainTab).checked, true,
|
|
'previous tab state, checked is `true`.');
|
|
assert.equal(button.state(tab).checked, true,
|
|
'current tab state, checked is `true`.');
|
|
assert.equal(button.state(mainWindow).checked, true,
|
|
'window state, checked is `true`.');
|
|
|
|
openBrowserWindow().then(focus).then(window => {
|
|
let { activeWindow } = browserWindows;
|
|
let { activeTab } = activeWindow.tabs;
|
|
|
|
assert.equal(button.checked, false,
|
|
'global state, checked is `false`.');
|
|
assert.equal(button.state(activeTab).checked, false,
|
|
'tab state, checked is `false`.');
|
|
|
|
assert.equal(button.state(activeWindow).checked, false,
|
|
'window state, checked is `false`.');
|
|
|
|
tab.close(()=> {
|
|
close(window).
|
|
then(loader.unload).
|
|
then(done, assert.fail);
|
|
})
|
|
}).
|
|
then(null, assert.fail);
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
exports['test button click do not messing up states'] = function(assert) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { browserWindows } = loader.require('sdk/windows');
|
|
|
|
let button = ToggleButton({
|
|
id: 'my-button-21',
|
|
label: 'my button',
|
|
icon: './icon.png'
|
|
});
|
|
|
|
let mainWindow = browserWindows.activeWindow;
|
|
let { activeTab } = mainWindow.tabs;
|
|
|
|
button.state(mainWindow, { icon: './new-icon.png' });
|
|
button.state(activeTab, { label: 'foo'})
|
|
|
|
assert.equal(button.state(mainWindow).label, 'my button',
|
|
'label property for window state, properly derived from global state');
|
|
|
|
assert.equal(button.state(activeTab).icon, './new-icon.png',
|
|
'icon property for tab state, properly derived from window state');
|
|
|
|
button.click();
|
|
|
|
button.label = 'bar';
|
|
|
|
assert.equal(button.state(mainWindow).label, 'bar',
|
|
'label property for window state, properly derived from global state');
|
|
|
|
button.state(mainWindow, null);
|
|
|
|
assert.equal(button.state(activeTab).icon, './icon.png',
|
|
'icon property for tab state, properly derived from window state');
|
|
|
|
loader.unload();
|
|
}
|
|
|
|
exports['test buttons can have anchored panels'] = function(assert, done) {
|
|
let loader = Loader(module);
|
|
let { ToggleButton } = loader.require('sdk/ui');
|
|
let { Panel } = loader.require('sdk/panel');
|
|
let { identify } = loader.require('sdk/ui/id');
|
|
let { getActiveView } = loader.require('sdk/view/core');
|
|
|
|
let b1 = ToggleButton({
|
|
id: 'my-button-22',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
onChange: ({checked}) => checked && panel.show()
|
|
});
|
|
|
|
let b2 = ToggleButton({
|
|
id: 'my-button-23',
|
|
label: 'my button',
|
|
icon: './icon.png',
|
|
onChange: ({checked}) => checked && panel.show({position: b2})
|
|
});
|
|
|
|
let panel = Panel({
|
|
position: b1
|
|
});
|
|
|
|
let { document } = getMostRecentBrowserWindow();
|
|
let b1Node = document.getElementById(identify(b1));
|
|
let b2Node = document.getElementById(identify(b2));
|
|
let panelNode = getActiveView(panel);
|
|
|
|
panel.once('show', () => {
|
|
assert.ok(b1.state('window').checked,
|
|
'button is checked');
|
|
|
|
assert.equal(panelNode.getAttribute('type'), 'arrow',
|
|
'the panel is a arrow type');
|
|
|
|
assert.strictEqual(b1Node, panelNode.anchorNode,
|
|
'the panel is anchored properly to the button given in costructor');
|
|
|
|
panel.hide();
|
|
|
|
panel.once('show', () => {
|
|
assert.ok(b2.state('window').checked,
|
|
'button is checked');
|
|
|
|
assert.equal(panelNode.getAttribute('type'), 'arrow',
|
|
'the panel is a arrow type');
|
|
|
|
// test also that the button passed in `show` method, takes the precedence
|
|
// over the button set in panel's constructor.
|
|
assert.strictEqual(b2Node, panelNode.anchorNode,
|
|
'the panel is anchored properly to the button passed to show method');
|
|
|
|
loader.unload();
|
|
|
|
done();
|
|
});
|
|
|
|
b2.click();
|
|
});
|
|
|
|
b1.click();
|
|
}
|
|
|
|
require('sdk/test').run(exports);
|