The Tor Browser / file comparison
comparison: browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js
browser/components/customizableui/test/browser_914138_widget_API_overflowable_toolbar.js
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:f5d14563628b |
|---|---|
| 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 | |
| 5 "use strict"; | |
| 6 | |
| 7 let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR); | |
| 8 let overflowList = document.getElementById(navbar.getAttribute("overflowtarget")); | |
| 9 | |
| 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"; | |
| 17 | |
| 18 let originalWindowWidth; | |
| 19 | |
| 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."); | |
| 26 | |
| 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"); | |
| 34 | |
| 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."); | |
| 43 | |
| 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 }); | |
| 60 | |
| 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."); | |
| 68 | |
| 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"); | |
| 74 | |
| 75 CustomizableUI.removeWidgetFromArea(kTestBtn2); | |
| 76 | |
| 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"); | |
| 80 | |
| 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 }); | |
| 91 | |
| 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."); | |
| 97 | |
| 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"); | |
| 105 | |
| 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"); | |
| 111 | |
| 112 CustomizableUI.destroyWidget(kTestBtn3); | |
| 113 testNode = document.getElementById(kTestBtn3); | |
| 114 ok(!testNode, "Test button should be gone"); | |
| 115 | |
| 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"); | |
| 120 | |
| 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 }); | |
| 127 | |
| 128 add_task(function asyncCleanup() { | |
| 129 window.resizeTo(originalWindowWidth, window.outerHeight); | |
| 130 yield resetCustomization(); | |
| 131 }); |
