addon-sdk/source/test/test-ui-toggle-button.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4 'use strict';
   5
   6 module.metadata = {
   7   'engines': {
   8     'Firefox': '> 28'
   9   }
  10 };
  11
  12 const { Cu } = require('chrome');
  13 const { Loader } = require('sdk/test/loader');
  14 const { data } = require('sdk/self');
  15 const { open, focus, close } = require('sdk/window/helpers');
  16 const { setTimeout } = require('sdk/timers');
  17 const { getMostRecentBrowserWindow } = require('sdk/window/utils');
  18 const { partial } = require('sdk/lang/functional');
  19
  20 const openBrowserWindow = partial(open, null, {features: {toolbar: true}});
  21 const openPrivateBrowserWindow = partial(open, null,
  22   {features: {toolbar: true, private: true}});
  23
  24 function getWidget(buttonId, window = getMostRecentBrowserWindow()) {
  25   const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
  26   const { AREA_NAVBAR } = CustomizableUI;
  27
  28   let widgets = CustomizableUI.getWidgetIdsInArea(AREA_NAVBAR).
  29     filter((id) => id.startsWith('toggle-button--') && id.endsWith(buttonId));
  30
  31   if (widgets.length === 0)
  32     throw new Error('Widget with id `' + id +'` not found.');
  33
  34   if (widgets.length > 1)
  35     throw new Error('Unexpected number of widgets: ' + widgets.length)
  36
  37   return CustomizableUI.getWidget(widgets[0]).forWindow(window);
  38 };
  39
  40 exports['test basic constructor validation'] = function(assert) {
  41   let loader = Loader(module);
  42   let { ToggleButton } = loader.require('sdk/ui');
  43
  44   assert.throws(
  45     () => ToggleButton({}),
  46     /^The option/,
  47     'throws on no option given');
  48
  49   // Test no label
  50   assert.throws(
  51     () => ToggleButton({ id: 'my-button', icon: './icon.png'}),
  52     /^The option "label"/,
  53     'throws on no label given');
  54
  55   // Test no id
  56   assert.throws(
  57     () => ToggleButton({ label: 'my button', icon: './icon.png' }),
  58     /^The option "id"/,
  59     'throws on no id given');
  60
  61   // Test no icon
  62   assert.throws(
  63     () => ToggleButton({ id: 'my-button', label: 'my button' }),
  64     /^The option "icon"/,
  65     'throws on no icon given');
  66
  67
  68   // Test empty label
  69   assert.throws(
  70     () => ToggleButton({ id: 'my-button', label: '', icon: './icon.png' }),
  71     /^The option "label"/,
  72     'throws on no valid label given');
  73
  74   // Test invalid id
  75   assert.throws(
  76     () => ToggleButton({ id: 'my button', label: 'my button', icon: './icon.png' }),
  77     /^The option "id"/,
  78     'throws on no valid id given');
  79
  80   // Test empty id
  81   assert.throws(
  82     () => ToggleButton({ id: '', label: 'my button', icon: './icon.png' }),
  83     /^The option "id"/,
  84     'throws on no valid id given');
  85
  86   // Test remote icon
  87   assert.throws(
  88     () => ToggleButton({ id: 'my-button', label: 'my button', icon: 'http://www.mozilla.org/favicon.ico'}),
  89     /^The option "icon"/,
  90     'throws on no valid icon given');
  91
  92   // Test wrong icon: no absolute URI to local resource, neither relative './'
  93   assert.throws(
  94     () => ToggleButton({ id: 'my-button', label: 'my button', icon: 'icon.png'}),
  95     /^The option "icon"/,
  96     'throws on no valid icon given');
  97
  98   // Test wrong icon: no absolute URI to local resource, neither relative './'
  99   assert.throws(
 100     () => ToggleButton({ id: 'my-button', label: 'my button', icon: 'foo and bar'}),
 101     /^The option "icon"/,
 102     'throws on no valid icon given');
 103
 104   // Test wrong icon: '../' is not allowed
 105   assert.throws(
 106     () => ToggleButton({ id: 'my-button', label: 'my button', icon: '../icon.png'}),
 107     /^The option "icon"/,
 108     'throws on no valid icon given');
 109
 110   // Test wrong checked
 111   assert.throws(
 112     () => ToggleButton({
 113       id: 'my-button', label: 'my button', icon: './icon.png', checked: 'yes'}),
 114     /^The option "checked"/,
 115     'throws on no valid checked value given');
 116
 117   loader.unload();
 118 };
 119
 120 exports['test button added'] = function(assert) {
 121   let loader = Loader(module);
 122   let { ToggleButton } = loader.require('sdk/ui');
 123
 124   let button = ToggleButton({
 125     id: 'my-button-1',
 126     label: 'my button',
 127     icon: './icon.png'
 128   });
 129
 130   // check defaults
 131   assert.equal(button.checked, false,
 132     'checked is set to default `false` value');
 133
 134   assert.equal(button.disabled, false,
 135     'disabled is set to default `false` value');
 136
 137   let { node } = getWidget(button.id);
 138
 139   assert.ok(!!node, 'The button is in the navbar');
 140
 141   assert.equal(button.label, node.getAttribute('label'),
 142     'label is set');
 143
 144   assert.equal(button.label, node.getAttribute('tooltiptext'),
 145     'tooltip is set');
 146
 147   assert.equal(data.url(button.icon.substr(2)), node.getAttribute('image'),
 148     'icon is set');
 149
 150   loader.unload();
 151 }
 152
 153 exports['test button added with resource URI'] = function(assert) {
 154   let loader = Loader(module);
 155   let { ToggleButton } = loader.require('sdk/ui');
 156
 157   let button = ToggleButton({
 158     id: 'my-button-1',
 159     label: 'my button',
 160     icon: data.url('icon.png')
 161   });
 162
 163   assert.equal(button.icon, data.url('icon.png'),
 164     'icon is set');
 165
 166   let { node } = getWidget(button.id);
 167
 168   assert.equal(button.icon, node.getAttribute('image'),
 169     'icon on node is set');
 170
 171   loader.unload();
 172 }
 173
 174 exports['test button duplicate id'] = function(assert) {
 175   let loader = Loader(module);
 176   let { ToggleButton } = loader.require('sdk/ui');
 177
 178   let button = ToggleButton({
 179     id: 'my-button-2',
 180     label: 'my button',
 181     icon: './icon.png'
 182   });
 183
 184   assert.throws(() => {
 185     let doppelganger = ToggleButton({
 186       id: 'my-button-2',
 187       label: 'my button',
 188       icon: './icon.png'
 189     });
 190   },
 191   /^The ID/,
 192   'No duplicates allowed');
 193
 194   loader.unload();
 195 }
 196
 197 exports['test button multiple destroy'] = function(assert) {
 198   let loader = Loader(module);
 199   let { ToggleButton } = loader.require('sdk/ui');
 200
 201   let button = ToggleButton({
 202     id: 'my-button-2',
 203     label: 'my button',
 204     icon: './icon.png'
 205   });
 206
 207   button.destroy();
 208   button.destroy();
 209   button.destroy();
 210
 211   assert.pass('multiple destroy doesn\'t matter');
 212
 213   loader.unload();
 214 }
 215
 216 exports['test button removed on dispose'] = function(assert, done) {
 217   const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
 218   let loader = Loader(module);
 219   let { ToggleButton } = loader.require('sdk/ui');
 220
 221   let widgetId;
 222
 223   CustomizableUI.addListener({
 224     onWidgetDestroyed: function(id) {
 225       if (id === widgetId) {
 226         CustomizableUI.removeListener(this);
 227
 228         assert.pass('button properly removed');
 229         loader.unload();
 230         done();
 231       }
 232     }
 233   });
 234
 235   let button = ToggleButton({
 236     id: 'my-button-3',
 237     label: 'my button',
 238     icon: './icon.png'
 239   });
 240
 241   // Tried to use `getWidgetIdsInArea` but seems undefined, not sure if it
 242   // was removed or it's not in the UX build yet
 243   widgetId = getWidget(button.id).id;
 244
 245   button.destroy();
 246 };
 247
 248 exports['test button global state updated'] = function(assert) {
 249   let loader = Loader(module);
 250   let { ToggleButton } = loader.require('sdk/ui');
 251
 252   let button = ToggleButton({
 253     id: 'my-button-4',
 254     label: 'my button',
 255     icon: './icon.png'
 256   });
 257
 258   // Tried to use `getWidgetIdsInArea` but seems undefined, not sure if it
 259   // was removed or it's not in the UX build yet
 260
 261   let { node, id: widgetId } = getWidget(button.id);
 262
 263   // check read-only properties
 264
 265   assert.throws(() => button.id = 'another-id',
 266     /^setting a property that has only a getter/,
 267     'id cannot be set at runtime');
 268
 269   assert.equal(button.id, 'my-button-4',
 270     'id is unchanged');
 271   assert.equal(node.id, widgetId,
 272     'node id is unchanged');
 273
 274   // check writable properties
 275
 276   button.label = 'New label';
 277   assert.equal(button.label, 'New label',
 278     'label is updated');
 279   assert.equal(node.getAttribute('label'), 'New label',
 280     'node label is updated');
 281   assert.equal(node.getAttribute('tooltiptext'), 'New label',
 282     'node tooltip is updated');
 283
 284   button.icon = './new-icon.png';
 285   assert.equal(button.icon, './new-icon.png',
 286     'icon is updated');
 287   assert.equal(node.getAttribute('image'), data.url('new-icon.png'),
 288     'node image is updated');
 289
 290   button.disabled = true;
 291   assert.equal(button.disabled, true,
 292     'disabled is updated');
 293   assert.equal(node.getAttribute('disabled'), 'true',
 294     'node disabled is updated');
 295
 296   // TODO: test validation on update
 297
 298   loader.unload();
 299 }
 300
 301 exports['test button global state set and get with state method'] = function(assert) {
 302   let loader = Loader(module);
 303   let { ToggleButton } = loader.require('sdk/ui');
 304
 305   let button = ToggleButton({
 306     id: 'my-button-16',
 307     label: 'my button',
 308     icon: './icon.png'
 309   });
 310
 311   // read the button's state
 312   let state = button.state(button);
 313
 314   assert.equal(state.label, 'my button',
 315     'label is correct');
 316   assert.equal(state.icon, './icon.png',
 317     'icon is correct');
 318   assert.equal(state.disabled, false,
 319     'disabled is correct');
 320
 321   // set the new button's state
 322   button.state(button, {
 323     label: 'New label',
 324     icon: './new-icon.png',
 325     disabled: true
 326   });
 327
 328   assert.equal(button.label, 'New label',
 329     'label is updated');
 330   assert.equal(button.icon, './new-icon.png',
 331     'icon is updated');
 332   assert.equal(button.disabled, true,
 333     'disabled is updated');
 334
 335   loader.unload();
 336 };
 337
 338 exports['test button global state updated on multiple windows'] = function(assert, done) {
 339   let loader = Loader(module);
 340   let { ToggleButton } = loader.require('sdk/ui');
 341
 342   let button = ToggleButton({
 343     id: 'my-button-5',
 344     label: 'my button',
 345     icon: './icon.png'
 346   });
 347
 348   let nodes = [getWidget(button.id).node];
 349
 350   openBrowserWindow().then(window => {
 351     nodes.push(getWidget(button.id, window).node);
 352
 353     button.label = 'New label';
 354     button.icon = './new-icon.png';
 355     button.disabled = true;
 356
 357     for (let node of nodes) {
 358       assert.equal(node.getAttribute('label'), 'New label',
 359         'node label is updated');
 360       assert.equal(node.getAttribute('tooltiptext'), 'New label',
 361         'node tooltip is updated');
 362
 363       assert.equal(button.icon, './new-icon.png',
 364         'icon is updated');
 365       assert.equal(node.getAttribute('image'), data.url('new-icon.png'),
 366         'node image is updated');
 367
 368       assert.equal(button.disabled, true,
 369         'disabled is updated');
 370       assert.equal(node.getAttribute('disabled'), 'true',
 371         'node disabled is updated');
 372     };
 373
 374     return window;
 375   }).
 376   then(close).
 377   then(loader.unload).
 378   then(done, assert.fail);
 379 };
 380
 381 exports['test button window state'] = function(assert, done) {
 382   let loader = Loader(module);
 383   let { ToggleButton } = loader.require('sdk/ui');
 384   let { browserWindows } = loader.require('sdk/windows');
 385
 386   let button = ToggleButton({
 387     id: 'my-button-6',
 388     label: 'my button',
 389     icon: './icon.png'
 390   });
 391
 392   let mainWindow = browserWindows.activeWindow;
 393   let nodes = [getWidget(button.id).node];
 394
 395   openBrowserWindow().then(focus).then(window => {
 396     nodes.push(getWidget(button.id, window).node);
 397
 398     let { activeWindow } = browserWindows;
 399
 400     button.state(activeWindow, {
 401       label: 'New label',
 402       icon: './new-icon.png',
 403       disabled: true
 404     });
 405
 406     // check the states
 407
 408     assert.equal(button.label, 'my button',
 409       'global label unchanged');
 410     assert.equal(button.icon, './icon.png',
 411       'global icon unchanged');
 412     assert.equal(button.disabled, false,
 413       'global disabled unchanged');
 414
 415     let state = button.state(mainWindow);
 416
 417     assert.equal(state.label, 'my button',
 418       'previous window label unchanged');
 419     assert.equal(state.icon, './icon.png',
 420       'previous window icon unchanged');
 421     assert.equal(state.disabled, false,
 422       'previous window disabled unchanged');
 423
 424     let state = button.state(activeWindow);
 425
 426     assert.equal(state.label, 'New label',
 427       'active window label updated');
 428     assert.equal(state.icon, './new-icon.png',
 429       'active window icon updated');
 430     assert.equal(state.disabled, true,
 431       'active disabled updated');
 432
 433     // change the global state, only the windows without a state are affected
 434
 435     button.label = 'A good label';
 436
 437     assert.equal(button.label, 'A good label',
 438       'global label updated');
 439     assert.equal(button.state(mainWindow).label, 'A good label',
 440       'previous window label updated');
 441     assert.equal(button.state(activeWindow).label, 'New label',
 442       'active window label unchanged');
 443
 444     // delete the window state will inherits the global state again
 445
 446     button.state(activeWindow, null);
 447
 448     assert.equal(button.state(activeWindow).label, 'A good label',
 449       'active window label inherited');
 450
 451     // check the nodes properties
 452     let node = nodes[0];
 453     let state = button.state(mainWindow);
 454
 455     assert.equal(node.getAttribute('label'), state.label,
 456       'node label is correct');
 457     assert.equal(node.getAttribute('tooltiptext'), state.label,
 458       'node tooltip is correct');
 459
 460     assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
 461       'node image is correct');
 462     assert.equal(node.hasAttribute('disabled'), state.disabled,
 463       'disabled is correct');
 464
 465     let node = nodes[1];
 466     let state = button.state(activeWindow);
 467
 468     assert.equal(node.getAttribute('label'), state.label,
 469       'node label is correct');
 470     assert.equal(node.getAttribute('tooltiptext'), state.label,
 471       'node tooltip is correct');
 472
 473     assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
 474       'node image is correct');
 475     assert.equal(node.hasAttribute('disabled'), state.disabled,
 476       'disabled is correct');
 477
 478     return window;
 479   }).
 480   then(close).
 481   then(loader.unload).
 482   then(done, assert.fail);
 483 };
 484
 485
 486 exports['test button tab state'] = function(assert, done) {
 487   let loader = Loader(module);
 488   let { ToggleButton } = loader.require('sdk/ui');
 489   let { browserWindows } = loader.require('sdk/windows');
 490   let tabs = loader.require('sdk/tabs');
 491
 492   let button = ToggleButton({
 493     id: 'my-button-7',
 494     label: 'my button',
 495     icon: './icon.png'
 496   });
 497
 498   let mainTab = tabs.activeTab;
 499   let node = getWidget(button.id).node;
 500
 501   tabs.open({
 502     url: 'about:blank',
 503     onActivate: function onActivate(tab) {
 504       tab.removeListener('activate', onActivate);
 505
 506       let { activeWindow } = browserWindows;
 507       // set window state
 508       button.state(activeWindow, {
 509         label: 'Window label',
 510         icon: './window-icon.png'
 511       });
 512
 513       // set previous active tab state
 514       button.state(mainTab, {
 515         label: 'Tab label',
 516         icon: './tab-icon.png',
 517       });
 518
 519       // set current active tab state
 520       button.state(tab, {
 521         icon: './another-tab-icon.png',
 522         disabled: true
 523       });
 524
 525       // check the states
 526
 527       Cu.schedulePreciseGC(() => {
 528         assert.equal(button.label, 'my button',
 529           'global label unchanged');
 530         assert.equal(button.icon, './icon.png',
 531           'global icon unchanged');
 532         assert.equal(button.disabled, false,
 533           'global disabled unchanged');
 534
 535         let state = button.state(mainTab);
 536
 537         assert.equal(state.label, 'Tab label',
 538           'previous tab label updated');
 539         assert.equal(state.icon, './tab-icon.png',
 540           'previous tab icon updated');
 541         assert.equal(state.disabled, false,
 542           'previous tab disabled unchanged');
 543
 544         let state = button.state(tab);
 545
 546         assert.equal(state.label, 'Window label',
 547           'active tab inherited from window state');
 548         assert.equal(state.icon, './another-tab-icon.png',
 549           'active tab icon updated');
 550         assert.equal(state.disabled, true,
 551           'active disabled updated');
 552
 553         // change the global state
 554         button.icon = './good-icon.png';
 555
 556         // delete the tab state
 557         button.state(tab, null);
 558
 559         assert.equal(button.icon, './good-icon.png',
 560           'global icon updated');
 561         assert.equal(button.state(mainTab).icon, './tab-icon.png',
 562           'previous tab icon unchanged');
 563         assert.equal(button.state(tab).icon, './window-icon.png',
 564           'tab icon inherited from window');
 565
 566         // delete the window state
 567         button.state(activeWindow, null);
 568
 569         assert.equal(button.state(tab).icon, './good-icon.png',
 570           'tab icon inherited from global');
 571
 572         // check the node properties
 573
 574         let state = button.state(tabs.activeTab);
 575
 576         assert.equal(node.getAttribute('label'), state.label,
 577           'node label is correct');
 578         assert.equal(node.getAttribute('tooltiptext'), state.label,
 579           'node tooltip is correct');
 580         assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
 581           'node image is correct');
 582         assert.equal(node.hasAttribute('disabled'), state.disabled,
 583           'disabled is correct');
 584
 585         tabs.once('activate', () => {
 586           // This is made in order to avoid to check the node before it
 587           // is updated, need a better check
 588           setTimeout(() => {
 589             let state = button.state(mainTab);
 590
 591             assert.equal(node.getAttribute('label'), state.label,
 592               'node label is correct');
 593             assert.equal(node.getAttribute('tooltiptext'), state.label,
 594               'node tooltip is correct');
 595             assert.equal(node.getAttribute('image'), data.url(state.icon.substr(2)),
 596               'node image is correct');
 597             assert.equal(node.hasAttribute('disabled'), state.disabled,
 598               'disabled is correct');
 599
 600             tab.close(() => {
 601               loader.unload();
 602               done();
 603             });
 604           }, 500);
 605         });
 606
 607         mainTab.activate();
 608       });
 609     }
 610   });
 611
 612 };
 613
 614 exports['test button click'] = function(assert, done) {
 615   let loader = Loader(module);
 616   let { ToggleButton } = loader.require('sdk/ui');
 617   let { browserWindows } = loader.require('sdk/windows');
 618
 619   let labels = [];
 620
 621   let button = ToggleButton({
 622     id: 'my-button-8',
 623     label: 'my button',
 624     icon: './icon.png',
 625     onClick: ({label}) => labels.push(label)
 626   });
 627
 628   let mainWindow = browserWindows.activeWindow;
 629   let chromeWindow = getMostRecentBrowserWindow();
 630
 631   openBrowserWindow().then(focus).then(window => {
 632     button.state(mainWindow, { label: 'nothing' });
 633     button.state(mainWindow.tabs.activeTab, { label: 'foo'})
 634     button.state(browserWindows.activeWindow, { label: 'bar' });
 635
 636     button.click();
 637
 638     focus(chromeWindow).then(() => {
 639       button.click();
 640
 641       assert.deepEqual(labels, ['bar', 'foo'],
 642         'button click works');
 643
 644       close(window).
 645         then(loader.unload).
 646         then(done, assert.fail);
 647     });
 648   }).then(null, assert.fail);
 649 }
 650
 651 exports['test button icon set'] = function(assert) {
 652   const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
 653   let loader = Loader(module);
 654   let { ToggleButton } = loader.require('sdk/ui');
 655
 656   // Test remote icon set
 657   assert.throws(
 658     () => ToggleButton({
 659       id: 'my-button-10',
 660       label: 'my button',
 661       icon: {
 662         '16': 'http://www.mozilla.org/favicon.ico'
 663       }
 664     }),
 665     /^The option "icon"/,
 666     'throws on no valid icon given');
 667
 668   let button = ToggleButton({
 669     id: 'my-button-11',
 670     label: 'my button',
 671     icon: {
 672       '5': './icon5.png',
 673       '16': './icon16.png',
 674       '32': './icon32.png',
 675       '64': './icon64.png'
 676     }
 677   });
 678
 679   let { node, id: widgetId } = getWidget(button.id);
 680   let { devicePixelRatio } = node.ownerDocument.defaultView;
 681
 682   let size = 16 * devicePixelRatio;
 683
 684   assert.equal(node.getAttribute('image'), data.url(button.icon[size].substr(2)),
 685     'the icon is set properly in navbar');
 686
 687   let size = 32 * devicePixelRatio;
 688
 689   CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_PANEL);
 690
 691   assert.equal(node.getAttribute('image'), data.url(button.icon[size].substr(2)),
 692     'the icon is set properly in panel');
 693
 694   // Using `loader.unload` without move back the button to the original area
 695   // raises an error in the CustomizableUI. This is doesn't happen if the
 696   // button is moved manually from navbar to panel. I believe it has to do
 697   // with `addWidgetToArea` method, because even with a `timeout` the issue
 698   // persist.
 699   CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_NAVBAR);
 700
 701   loader.unload();
 702 }
 703
 704 exports['test button icon se with only one option'] = function(assert) {
 705   const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
 706   let loader = Loader(module);
 707   let { ToggleButton } = loader.require('sdk/ui');
 708
 709   // Test remote icon set
 710   assert.throws(
 711     () => ToggleButton({
 712       id: 'my-button-10',
 713       label: 'my button',
 714       icon: {
 715         '16': 'http://www.mozilla.org/favicon.ico'
 716       }
 717     }),
 718     /^The option "icon"/,
 719     'throws on no valid icon given');
 720
 721   let button = ToggleButton({
 722     id: 'my-button-11',
 723     label: 'my button',
 724     icon: {
 725       '5': './icon5.png'
 726     }
 727   });
 728
 729   let { node, id: widgetId } = getWidget(button.id);
 730
 731   assert.equal(node.getAttribute('image'), data.url(button.icon['5'].substr(2)),
 732     'the icon is set properly in navbar');
 733
 734   CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_PANEL);
 735
 736   assert.equal(node.getAttribute('image'), data.url(button.icon['5'].substr(2)),
 737     'the icon is set properly in panel');
 738
 739   // Using `loader.unload` without move back the button to the original area
 740   // raises an error in the CustomizableUI. This is doesn't happen if the
 741   // button is moved manually from navbar to panel. I believe it has to do
 742   // with `addWidgetToArea` method, because even with a `timeout` the issue
 743   // persist.
 744   CustomizableUI.addWidgetToArea(widgetId, CustomizableUI.AREA_NAVBAR);
 745
 746   loader.unload();
 747 }
 748
 749 exports['test button state validation'] = function(assert) {
 750   let loader = Loader(module);
 751   let { ToggleButton } = loader.require('sdk/ui');
 752   let { browserWindows } = loader.require('sdk/windows');
 753
 754   let button = ToggleButton({
 755     id: 'my-button-12',
 756     label: 'my button',
 757     icon: './icon.png'
 758   })
 759
 760   let state = button.state(button);
 761
 762   assert.throws(
 763     () => button.state(button, { icon: 'http://www.mozilla.org/favicon.ico' }),
 764     /^The option "icon"/,
 765     'throws on remote icon given');
 766
 767   loader.unload();
 768 };
 769
 770 exports['test button are not in private windows'] = function(assert, done) {
 771   let loader = Loader(module);
 772   let { ToggleButton } = loader.require('sdk/ui');
 773   let{ isPrivate } = loader.require('sdk/private-browsing');
 774   let { browserWindows } = loader.require('sdk/windows');
 775
 776   let button = ToggleButton({
 777     id: 'my-button-13',
 778     label: 'my button',
 779     icon: './icon.png'
 780   });
 781
 782   openPrivateBrowserWindow().then(window => {
 783     assert.ok(isPrivate(window),
 784       'the new window is private');
 785
 786     let { node } = getWidget(button.id, window);
 787
 788     assert.ok(!node || node.style.display === 'none',
 789       'the button is not added / is not visible on private window');
 790
 791     return window;
 792   }).
 793   then(close).
 794   then(loader.unload).
 795   then(done, assert.fail)
 796 }
 797
 798 exports['test button state are snapshot'] = function(assert) {
 799   let loader = Loader(module);
 800   let { ToggleButton } = loader.require('sdk/ui');
 801   let { browserWindows } = loader.require('sdk/windows');
 802   let tabs = loader.require('sdk/tabs');
 803
 804   let button = ToggleButton({
 805     id: 'my-button-14',
 806     label: 'my button',
 807     icon: './icon.png'
 808   });
 809
 810   let state = button.state(button);
 811   let windowState = button.state(browserWindows.activeWindow);
 812   let tabState = button.state(tabs.activeTab);
 813
 814   assert.deepEqual(windowState, state,
 815     'window state has the same properties of button state');
 816
 817   assert.deepEqual(tabState, state,
 818     'tab state has the same properties of button state');
 819
 820   assert.notEqual(windowState, state,
 821     'window state is not the same object of button state');
 822
 823   assert.notEqual(tabState, state,
 824     'tab state is not the same object of button state');
 825
 826   assert.deepEqual(button.state(button), state,
 827     'button state has the same content of previous button state');
 828
 829   assert.deepEqual(button.state(browserWindows.activeWindow), windowState,
 830     'window state has the same content of previous window state');
 831
 832   assert.deepEqual(button.state(tabs.activeTab), tabState,
 833     'tab state has the same content of previous tab state');
 834
 835   assert.notEqual(button.state(button), state,
 836     'button state is not the same object of previous button state');
 837
 838   assert.notEqual(button.state(browserWindows.activeWindow), windowState,
 839     'window state is not the same object of previous window state');
 840
 841   assert.notEqual(button.state(tabs.activeTab), tabState,
 842     'tab state is not the same object of previous tab state');
 843
 844   loader.unload();
 845 }
 846
 847 exports['test button icon object is a snapshot'] = function(assert) {
 848   let loader = Loader(module);
 849   let { ToggleButton } = loader.require('sdk/ui');
 850
 851   let icon = {
 852     '16': './foo.png'
 853   };
 854
 855   let button = ToggleButton({
 856     id: 'my-button-17',
 857     label: 'my button',
 858     icon: icon
 859   });
 860
 861   assert.deepEqual(button.icon, icon,
 862     'button.icon has the same properties of the object set in the constructor');
 863
 864   assert.notEqual(button.icon, icon,
 865     'button.icon is not the same object of the object set in the constructor');
 866
 867   assert.throws(
 868     () => button.icon[16] = './bar.png',
 869     /16 is read-only/,
 870     'properties of button.icon are ready-only'
 871   );
 872
 873   let newIcon = {'16': './bar.png'};
 874   button.icon = newIcon;
 875
 876   assert.deepEqual(button.icon, newIcon,
 877     'button.icon has the same properties of the object set');
 878
 879   assert.notEqual(button.icon, newIcon,
 880     'button.icon is not the same object of the object set');
 881
 882   loader.unload();
 883 }
 884
 885 exports['test button after destroy'] = function(assert) {
 886   let loader = Loader(module);
 887   let { ToggleButton } = loader.require('sdk/ui');
 888   let { browserWindows } = loader.require('sdk/windows');
 889   let { activeTab } = loader.require('sdk/tabs');
 890
 891   let button = ToggleButton({
 892     id: 'my-button-15',
 893     label: 'my button',
 894     icon: './icon.png',
 895     onClick: () => assert.fail('onClick should not be called')
 896   });
 897
 898   button.destroy();
 899
 900   assert.throws(
 901     () => button.click(),
 902     /^The state cannot be set or get/,
 903     'button.click() not executed');
 904
 905   assert.throws(
 906     () => button.label,
 907     /^The state cannot be set or get/,
 908     'button.label cannot be get after destroy');
 909
 910   assert.throws(
 911     () => button.label = 'my label',
 912     /^The state cannot be set or get/,
 913     'button.label cannot be set after destroy');
 914
 915   assert.throws(
 916     () => {
 917       button.state(browserWindows.activeWindow, {
 918         label: 'window label'
 919       });
 920     },
 921     /^The state cannot be set or get/,
 922     'window state label cannot be set after destroy');
 923
 924   assert.throws(
 925     () => button.state(browserWindows.activeWindow).label,
 926     /^The state cannot be set or get/,
 927     'window state label cannot be get after destroy');
 928
 929   assert.throws(
 930     () => {
 931       button.state(activeTab, {
 932         label: 'tab label'
 933       });
 934     },
 935     /^The state cannot be set or get/,
 936     'tab state label cannot be set after destroy');
 937
 938   assert.throws(
 939     () => button.state(activeTab).label,
 940     /^The state cannot be set or get/,
 941     'window state label cannot se get after destroy');
 942
 943   loader.unload();
 944 };
 945
 946 exports['test button checked'] = function(assert, done) {
 947   let loader = Loader(module);
 948   let { ToggleButton } = loader.require('sdk/ui');
 949   let { browserWindows } = loader.require('sdk/windows');
 950
 951   let events = [];
 952
 953   let button = ToggleButton({
 954     id: 'my-button-9',
 955     label: 'my button',
 956     icon: './icon.png',
 957     checked: true,
 958     onClick: ({label}) => events.push('clicked:' + label),
 959     onChange: state => events.push('changed:' + state.label + ':' + state.checked)
 960   });
 961
 962   let { node } = getWidget(button.id);
 963
 964   assert.equal(node.getAttribute('type'), 'checkbox',
 965     'node type is properly set');
 966
 967   let mainWindow = browserWindows.activeWindow;
 968   let chromeWindow = getMostRecentBrowserWindow();
 969
 970   openBrowserWindow().then(focus).then(window => {
 971     button.state(mainWindow, { label: 'nothing' });
 972     button.state(mainWindow.tabs.activeTab, { label: 'foo'})
 973     button.state(browserWindows.activeWindow, { label: 'bar' });
 974
 975     button.click();
 976     button.click();
 977
 978     focus(chromeWindow).then(() => {
 979       button.click();
 980       button.click();
 981
 982       assert.deepEqual(events, [
 983           'clicked:bar', 'changed:bar:false', 'clicked:bar', 'changed:bar:true',
 984           'clicked:foo', 'changed:foo:false', 'clicked:foo', 'changed:foo:true'
 985         ],
 986         'button change events works');
 987
 988       close(window).
 989         then(loader.unload).
 990         then(done, assert.fail);
 991     })
 992   }).then(null, assert.fail);
 993 }
 994
 995 exports['test button is checked on window level'] = function(assert, done) {
 996   let loader = Loader(module);
 997   let { ToggleButton } = loader.require('sdk/ui');
 998   let { browserWindows } = loader.require('sdk/windows');
 999   let tabs = loader.require('sdk/tabs');
1000
1001   let button = ToggleButton({
1002     id: 'my-button-20',
1003     label: 'my button',
1004     icon: './icon.png'
1005   });
1006
1007   let mainWindow = browserWindows.activeWindow;
1008   let mainTab = tabs.activeTab;
1009
1010   assert.equal(button.checked, false,
1011     'global state, checked is `false`.');
1012   assert.equal(button.state(mainTab).checked, false,
1013     'tab state, checked is `false`.');
1014   assert.equal(button.state(mainWindow).checked, false,
1015     'window state, checked is `false`.');
1016
1017   button.click();
1018
1019   tabs.open({
1020     url: 'about:blank',
1021     onActivate: function onActivate(tab) {
1022       tab.removeListener('activate', onActivate);
1023
1024       assert.notEqual(mainTab, tab,
1025         'the current tab is not the same.');
1026
1027       assert.equal(button.checked, false,
1028         'global state, checked is `false`.');
1029       assert.equal(button.state(mainTab).checked, true,
1030         'previous tab state, checked is `true`.');
1031       assert.equal(button.state(tab).checked, true,
1032         'current tab state, checked is `true`.');
1033       assert.equal(button.state(mainWindow).checked, true,
1034         'window state, checked is `true`.');
1035
1036       openBrowserWindow().then(focus).then(window => {
1037         let { activeWindow } = browserWindows;
1038         let { activeTab } = activeWindow.tabs;
1039
1040         assert.equal(button.checked, false,
1041           'global state, checked is `false`.');
1042         assert.equal(button.state(activeTab).checked, false,
1043           'tab state, checked is `false`.');
1044
1045         assert.equal(button.state(activeWindow).checked, false,
1046           'window state, checked is `false`.');
1047
1048         tab.close(()=> {
1049           close(window).
1050             then(loader.unload).
1051             then(done, assert.fail);
1052         })
1053       }).
1054       then(null, assert.fail);
1055     }
1056   });
1057
1058 };
1059
1060 exports['test button click do not messing up states'] = function(assert) {
1061   let loader = Loader(module);
1062   let { ToggleButton } = loader.require('sdk/ui');
1063   let { browserWindows } = loader.require('sdk/windows');
1064
1065   let button = ToggleButton({
1066     id: 'my-button-21',
1067     label: 'my button',
1068     icon: './icon.png'
1069   });
1070
1071   let mainWindow = browserWindows.activeWindow;
1072   let { activeTab } = mainWindow.tabs;
1073
1074   button.state(mainWindow, { icon: './new-icon.png' });
1075   button.state(activeTab, { label: 'foo'})
1076
1077   assert.equal(button.state(mainWindow).label, 'my button',
1078     'label property for window state, properly derived from global state');
1079
1080   assert.equal(button.state(activeTab).icon, './new-icon.png',
1081     'icon property for tab state, properly derived from window state');
1082
1083   button.click();
1084
1085   button.label = 'bar';
1086
1087   assert.equal(button.state(mainWindow).label, 'bar',
1088     'label property for window state, properly derived from global state');
1089
1090   button.state(mainWindow, null);
1091
1092   assert.equal(button.state(activeTab).icon, './icon.png',
1093     'icon property for tab state, properly derived from window state');
1094
1095   loader.unload();
1096 }
1097
1098 exports['test buttons can have anchored panels'] = function(assert, done) {
1099   let loader = Loader(module);
1100   let { ToggleButton } = loader.require('sdk/ui');
1101   let { Panel } = loader.require('sdk/panel');
1102   let { identify } = loader.require('sdk/ui/id');
1103   let { getActiveView } = loader.require('sdk/view/core');
1104
1105   let b1 = ToggleButton({
1106     id: 'my-button-22',
1107     label: 'my button',
1108     icon: './icon.png',
1109     onChange: ({checked}) => checked && panel.show()
1110   });
1111
1112   let b2 = ToggleButton({
1113     id: 'my-button-23',
1114     label: 'my button',
1115     icon: './icon.png',
1116     onChange: ({checked}) => checked && panel.show({position: b2})
1117   });
1118
1119   let panel = Panel({
1120     position: b1
1121   });
1122
1123   let { document } = getMostRecentBrowserWindow();
1124   let b1Node = document.getElementById(identify(b1));
1125   let b2Node = document.getElementById(identify(b2));
1126   let panelNode = getActiveView(panel);
1127
1128   panel.once('show', () => {
1129     assert.ok(b1.state('window').checked,
1130       'button is checked');
1131
1132     assert.equal(panelNode.getAttribute('type'), 'arrow',
1133       'the panel is a arrow type');
1134
1135     assert.strictEqual(b1Node, panelNode.anchorNode,
1136       'the panel is anchored properly to the button given in costructor');
1137
1138     panel.hide();
1139
1140     panel.once('show', () => {
1141       assert.ok(b2.state('window').checked,
1142         'button is checked');
1143
1144       assert.equal(panelNode.getAttribute('type'), 'arrow',
1145         'the panel is a arrow type');
1146
1147       // test also that the button passed in `show` method, takes the precedence
1148       // over the button set in panel's constructor.
1149       assert.strictEqual(b2Node, panelNode.anchorNode,
1150         'the panel is anchored properly to the button passed to show method');
1151
1152       loader.unload();
1153
1154       done();
1155     });
1156
1157     b2.click();
1158   });
1159
1160   b1.click();
1161 }
1162
1163 require('sdk/test').run(exports);