The Tor Browser: browser/components/customizableui/test/browser_914138_widget_API_overflowable

     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/. */

     5 "use strict";

     7 let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);

     8 let overflowList = document.getElementById(navbar.getAttribute("overflowtarget"));

    10 const kTestBtn1 = "test-addWidgetToArea-overflow";

    11 const kTestBtn2 = "test-removeWidgetFromArea-overflow";

    12 const kTestBtn3 = "test-createWidget-overflow";

    13 const kHomeBtn = "home-button";

    14 const kDownloadsBtn = "downloads-button";

    15 const kSearchBox = "search-container";

    16 const kStarBtn = "bookmarks-menu-button";

    18 let originalWindowWidth;

    20 // Adding a widget should add it next to the widget it's being inserted next to.

    21 add_task(function() {

    22   originalWindowWidth = window.outerWidth;

    23   createDummyXULButton(kTestBtn1, "Test");

    24   ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");

    25   ok(CustomizableUI.inDefaultState, "Should start in default state.");

    27   window.resizeTo(400, window.outerHeight);

    28   yield waitForCondition(() => navbar.hasAttribute("overflowing"));

    29   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

    30   ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");

    31   let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);

    32   ok(homeBtnNode, "Home button should be overflowing");

    33   ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem attribute");

    35   let placementOfHomeButton = CustomizableUI.getWidgetIdsInArea(navbar.id).indexOf(kHomeBtn);

    36   CustomizableUI.addWidgetToArea(kTestBtn1, navbar.id, placementOfHomeButton);

    37   ok(!navbar.querySelector("#" + kTestBtn1), "New button should not be in the navbar");

    38   let newButtonNode = overflowList.querySelector("#" + kTestBtn1);

    39   ok(newButtonNode, "New button should be overflowing");

    40   ok(newButtonNode && newButtonNode.getAttribute("overflowedItem") == "true", "New button should have overflowedItem attribute");

    41   let nextEl = newButtonNode && newButtonNode.nextSibling;

    42   is(nextEl && nextEl.id, kHomeBtn, "Test button should be next to home button.");

    44   window.resizeTo(originalWindowWidth, window.outerHeight);

    45   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));

    46   ok(!navbar.hasAttribute("overflowing"), "Should not have an overflowing toolbar.");

    47   ok(navbar.querySelector("#" + kHomeBtn), "Home button should be in the navbar");

    48   ok(homeBtnNode && (homeBtnNode.getAttribute("overflowedItem") != "true"), "Home button should no longer have overflowedItem attribute");

    49   ok(!overflowList.querySelector("#" + kHomeBtn), "Home button should no longer be overflowing");

    50   ok(navbar.querySelector("#" + kTestBtn1), "Test button should be in the navbar");

    51   ok(!overflowList.querySelector("#" + kTestBtn1), "Test button should no longer be overflowing");

    52   ok(newButtonNode && (newButtonNode.getAttribute("overflowedItem") != "true"), "New button should no longer have overflowedItem attribute");

    53   let el = document.getElementById(kTestBtn1);

    54   if (el) {

    55     CustomizableUI.removeWidgetFromArea(kTestBtn1);

    56     el.remove();

    57   }

    58   window.resizeTo(originalWindowWidth, window.outerHeight);

    59 });

    61 // Removing a widget should remove it from the overflow list if that is where it is, and update it accordingly.

    62 add_task(function() {

    63   createDummyXULButton(kTestBtn2, "Test");

    64   ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");

    65   ok(CustomizableUI.inDefaultState, "Should start in default state.");

    66   CustomizableUI.addWidgetToArea(kTestBtn2, navbar.id);

    67   ok(!navbar.hasAttribute("overflowing"), "Should still have a non-overflowing toolbar.");

    69   window.resizeTo(400, window.outerHeight);

    70   yield waitForCondition(() => navbar.hasAttribute("overflowing"));

    71   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

    72   ok(!navbar.querySelector("#" + kTestBtn2), "Test button should not be in the navbar");

    73   ok(overflowList.querySelector("#" + kTestBtn2), "Test button should be overflowing");

    75   CustomizableUI.removeWidgetFromArea(kTestBtn2);

    77   ok(!overflowList.querySelector("#" + kTestBtn2), "Test button should not be overflowing.");

    78   ok(!navbar.querySelector("#" + kTestBtn2), "Test button should not be in the navbar");

    79   ok(gNavToolbox.palette.querySelector("#" + kTestBtn2), "Test button should be in the palette");

    81   window.resizeTo(originalWindowWidth, window.outerHeight);

    82   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));

    83   ok(!navbar.hasAttribute("overflowing"), "Should not have an overflowing toolbar.");

    84   let el = document.getElementById(kTestBtn2);

    85   if (el) {

    86     CustomizableUI.removeWidgetFromArea(kTestBtn2);

    87     el.remove();

    88   }

    89   window.resizeTo(originalWindowWidth, window.outerHeight);

    90 });

    92 // Constructing a widget while overflown should set the right class on it.

    93 add_task(function() {

    94   originalWindowWidth = window.outerWidth;

    95   ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");

    96   ok(CustomizableUI.inDefaultState, "Should start in default state.");

    98   window.resizeTo(400, window.outerHeight);

    99   yield waitForCondition(() => navbar.hasAttribute("overflowing"));

   100   ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

   101   ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");

   102   let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);

   103   ok(homeBtnNode, "Home button should be overflowing");

   104   ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem class");

   106   let testBtnSpec = {id: kTestBtn3, label: "Overflowable widget test", defaultArea: "nav-bar"};

   107   CustomizableUI.createWidget(testBtnSpec);

   108   let testNode = overflowList.querySelector("#" + kTestBtn3);

   109   ok(testNode, "Test button should be overflowing");

   110   ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");

   112   CustomizableUI.destroyWidget(kTestBtn3);

   113   testNode = document.getElementById(kTestBtn3);

   114   ok(!testNode, "Test button should be gone");

   116   CustomizableUI.createWidget(testBtnSpec);

   117   testNode = overflowList.querySelector("#" + kTestBtn3);

   118   ok(testNode, "Test button should be overflowing");

   119   ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");

   121   CustomizableUI.removeWidgetFromArea(kTestBtn3);

   122   testNode = document.getElementById(kTestBtn3);

   123   ok(!testNode, "Test button should be gone");

   124   CustomizableUI.destroyWidget(kTestBtn3);

   125   window.resizeTo(originalWindowWidth, window.outerHeight);

   126 });

   128 add_task(function asyncCleanup() {

   129   window.resizeTo(originalWindowWidth, window.outerHeight);

   130   yield resetCustomization();

   131 });

The Tor Browser / file revision