1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,131 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
1.11 +let overflowList = document.getElementById(navbar.getAttribute("overflowtarget"));
1.12 +
1.13 +const kTestBtn1 = "test-addWidgetToArea-overflow";
1.14 +const kTestBtn2 = "test-removeWidgetFromArea-overflow";
1.15 +const kTestBtn3 = "test-createWidget-overflow";
1.16 +const kHomeBtn = "home-button";
1.17 +const kDownloadsBtn = "downloads-button";
1.18 +const kSearchBox = "search-container";
1.19 +const kStarBtn = "bookmarks-menu-button";
1.20 +
1.21 +let originalWindowWidth;
1.22 +
1.23 +// Adding a widget should add it next to the widget it's being inserted next to.
1.24 +add_task(function() {
1.25 + originalWindowWidth = window.outerWidth;
1.26 + createDummyXULButton(kTestBtn1, "Test");
1.27 + ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");
1.28 + ok(CustomizableUI.inDefaultState, "Should start in default state.");
1.29 +
1.30 + window.resizeTo(400, window.outerHeight);
1.31 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.32 + ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.33 + ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");
1.34 + let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);
1.35 + ok(homeBtnNode, "Home button should be overflowing");
1.36 + ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem attribute");
1.37 +
1.38 + let placementOfHomeButton = CustomizableUI.getWidgetIdsInArea(navbar.id).indexOf(kHomeBtn);
1.39 + CustomizableUI.addWidgetToArea(kTestBtn1, navbar.id, placementOfHomeButton);
1.40 + ok(!navbar.querySelector("#" + kTestBtn1), "New button should not be in the navbar");
1.41 + let newButtonNode = overflowList.querySelector("#" + kTestBtn1);
1.42 + ok(newButtonNode, "New button should be overflowing");
1.43 + ok(newButtonNode && newButtonNode.getAttribute("overflowedItem") == "true", "New button should have overflowedItem attribute");
1.44 + let nextEl = newButtonNode && newButtonNode.nextSibling;
1.45 + is(nextEl && nextEl.id, kHomeBtn, "Test button should be next to home button.");
1.46 +
1.47 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.48 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.49 + ok(!navbar.hasAttribute("overflowing"), "Should not have an overflowing toolbar.");
1.50 + ok(navbar.querySelector("#" + kHomeBtn), "Home button should be in the navbar");
1.51 + ok(homeBtnNode && (homeBtnNode.getAttribute("overflowedItem") != "true"), "Home button should no longer have overflowedItem attribute");
1.52 + ok(!overflowList.querySelector("#" + kHomeBtn), "Home button should no longer be overflowing");
1.53 + ok(navbar.querySelector("#" + kTestBtn1), "Test button should be in the navbar");
1.54 + ok(!overflowList.querySelector("#" + kTestBtn1), "Test button should no longer be overflowing");
1.55 + ok(newButtonNode && (newButtonNode.getAttribute("overflowedItem") != "true"), "New button should no longer have overflowedItem attribute");
1.56 + let el = document.getElementById(kTestBtn1);
1.57 + if (el) {
1.58 + CustomizableUI.removeWidgetFromArea(kTestBtn1);
1.59 + el.remove();
1.60 + }
1.61 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.62 +});
1.63 +
1.64 +// Removing a widget should remove it from the overflow list if that is where it is, and update it accordingly.
1.65 +add_task(function() {
1.66 + createDummyXULButton(kTestBtn2, "Test");
1.67 + ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");
1.68 + ok(CustomizableUI.inDefaultState, "Should start in default state.");
1.69 + CustomizableUI.addWidgetToArea(kTestBtn2, navbar.id);
1.70 + ok(!navbar.hasAttribute("overflowing"), "Should still have a non-overflowing toolbar.");
1.71 +
1.72 + window.resizeTo(400, window.outerHeight);
1.73 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.74 + ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.75 + ok(!navbar.querySelector("#" + kTestBtn2), "Test button should not be in the navbar");
1.76 + ok(overflowList.querySelector("#" + kTestBtn2), "Test button should be overflowing");
1.77 +
1.78 + CustomizableUI.removeWidgetFromArea(kTestBtn2);
1.79 +
1.80 + ok(!overflowList.querySelector("#" + kTestBtn2), "Test button should not be overflowing.");
1.81 + ok(!navbar.querySelector("#" + kTestBtn2), "Test button should not be in the navbar");
1.82 + ok(gNavToolbox.palette.querySelector("#" + kTestBtn2), "Test button should be in the palette");
1.83 +
1.84 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.85 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.86 + ok(!navbar.hasAttribute("overflowing"), "Should not have an overflowing toolbar.");
1.87 + let el = document.getElementById(kTestBtn2);
1.88 + if (el) {
1.89 + CustomizableUI.removeWidgetFromArea(kTestBtn2);
1.90 + el.remove();
1.91 + }
1.92 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.93 +});
1.94 +
1.95 +// Constructing a widget while overflown should set the right class on it.
1.96 +add_task(function() {
1.97 + originalWindowWidth = window.outerWidth;
1.98 + ok(!navbar.hasAttribute("overflowing"), "Should start with a non-overflowing toolbar.");
1.99 + ok(CustomizableUI.inDefaultState, "Should start in default state.");
1.100 +
1.101 + window.resizeTo(400, window.outerHeight);
1.102 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.103 + ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.104 + ok(!navbar.querySelector("#" + kHomeBtn), "Home button should no longer be in the navbar");
1.105 + let homeBtnNode = overflowList.querySelector("#" + kHomeBtn);
1.106 + ok(homeBtnNode, "Home button should be overflowing");
1.107 + ok(homeBtnNode && homeBtnNode.getAttribute("overflowedItem") == "true", "Home button should have overflowedItem class");
1.108 +
1.109 + let testBtnSpec = {id: kTestBtn3, label: "Overflowable widget test", defaultArea: "nav-bar"};
1.110 + CustomizableUI.createWidget(testBtnSpec);
1.111 + let testNode = overflowList.querySelector("#" + kTestBtn3);
1.112 + ok(testNode, "Test button should be overflowing");
1.113 + ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");
1.114 +
1.115 + CustomizableUI.destroyWidget(kTestBtn3);
1.116 + testNode = document.getElementById(kTestBtn3);
1.117 + ok(!testNode, "Test button should be gone");
1.118 +
1.119 + CustomizableUI.createWidget(testBtnSpec);
1.120 + testNode = overflowList.querySelector("#" + kTestBtn3);
1.121 + ok(testNode, "Test button should be overflowing");
1.122 + ok(testNode && testNode.getAttribute("overflowedItem") == "true", "Test button should have overflowedItem class");
1.123 +
1.124 + CustomizableUI.removeWidgetFromArea(kTestBtn3);
1.125 + testNode = document.getElementById(kTestBtn3);
1.126 + ok(!testNode, "Test button should be gone");
1.127 + CustomizableUI.destroyWidget(kTestBtn3);
1.128 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.129 +});
1.130 +
1.131 +add_task(function asyncCleanup() {
1.132 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.133 + yield resetCustomization();
1.134 +});
