1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/components/customizableui/test/browser_976792_insertNodeInWindow.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,414 @@
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 +const kToolbarName = "test-insertNodeInWindow-placements-toolbar";
1.11 +const kTestWidgetPrefix = "test-widget-for-insertNodeInWindow-placements-";
1.12 +
1.13 +
1.14 +/*
1.15 +Tries to replicate the situation of having a placement list like this:
1.16 +
1.17 +exists-1,trying-to-insert-this,doesn't-exist,exists-2
1.18 +*/
1.19 +add_task(function() {
1.20 + let testWidgetExists = [true, false, false, true];
1.21 + let widgetIds = [];
1.22 + for (let i = 0; i < testWidgetExists.length; i++) {
1.23 + let id = kTestWidgetPrefix + i;
1.24 + widgetIds.push(id);
1.25 + if (testWidgetExists[i]) {
1.26 + let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i};
1.27 + CustomizableUI.createWidget(spec);
1.28 + }
1.29 + }
1.30 +
1.31 + let toolbarNode = createToolbarWithPlacements(kToolbarName, widgetIds);
1.32 + assertAreaPlacements(kToolbarName, widgetIds);
1.33 +
1.34 + let btnId = kTestWidgetPrefix + 1;
1.35 + let btn = createDummyXULButton(btnId, "test");
1.36 + CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
1.37 +
1.38 + is(btn.parentNode.id, kToolbarName, "New XUL widget should be placed inside new toolbar");
1.39 +
1.40 + is(btn.previousSibling.id, toolbarNode.firstChild.id,
1.41 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.42 +
1.43 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.44 + btn.remove();
1.45 + removeCustomToolbars();
1.46 + yield resetCustomization();
1.47 +});
1.48 +
1.49 +
1.50 +/*
1.51 +Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
1.52 +situation similar to:
1.53 +
1.54 +exists-1,exists-2,overflow-1,trying-to-insert-this,overflow-2
1.55 +*/
1.56 +add_task(function() {
1.57 + let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
1.58 +
1.59 + let widgetIds = [];
1.60 + for (let i = 0; i < 5; i++) {
1.61 + let id = kTestWidgetPrefix + i;
1.62 + widgetIds.push(id);
1.63 + let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
1.64 + CustomizableUI.createWidget(spec);
1.65 + CustomizableUI.addWidgetToArea(id, "nav-bar");
1.66 + }
1.67 +
1.68 + for (let id of widgetIds) {
1.69 + document.getElementById(id).style.minWidth = "200px";
1.70 + }
1.71 +
1.72 + let originalWindowWidth = window.outerWidth;
1.73 + window.resizeTo(400, window.outerHeight);
1.74 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.75 +
1.76 + let testWidgetId = kTestWidgetPrefix + 3;
1.77 +
1.78 + CustomizableUI.destroyWidget(testWidgetId);
1.79 +
1.80 + let btn = createDummyXULButton(testWidgetId, "test");
1.81 + CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
1.82 +
1.83 + is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
1.84 + is(btn.previousSibling.id, kTestWidgetPrefix + 2,
1.85 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.86 + is(btn.nextSibling.id, kTestWidgetPrefix + 4,
1.87 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.88 +
1.89 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.90 +
1.91 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.92 + CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
1.93 + btn.remove();
1.94 + yield resetCustomization();
1.95 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.96 +});
1.97 +
1.98 +
1.99 +/*
1.100 +Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
1.101 +placements situation similar to:
1.102 +
1.103 +exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,overflow-2
1.104 +*/
1.105 +add_task(function() {
1.106 + let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
1.107 +
1.108 + let widgetIds = [];
1.109 + for (let i = 0; i < 5; i++) {
1.110 + let id = kTestWidgetPrefix + i;
1.111 + widgetIds.push(id);
1.112 + let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
1.113 + CustomizableUI.createWidget(spec);
1.114 + CustomizableUI.addWidgetToArea(id, "nav-bar");
1.115 + }
1.116 +
1.117 + for (let id of widgetIds) {
1.118 + document.getElementById(id).style.minWidth = "200px";
1.119 + }
1.120 +
1.121 + let originalWindowWidth = window.outerWidth;
1.122 + window.resizeTo(400, window.outerHeight);
1.123 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.124 +
1.125 + let testWidgetId = kTestWidgetPrefix + 3;
1.126 +
1.127 + CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);
1.128 + CustomizableUI.destroyWidget(testWidgetId);
1.129 +
1.130 + let btn = createDummyXULButton(testWidgetId, "test");
1.131 + CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
1.132 +
1.133 + is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
1.134 + is(btn.previousSibling.id, kTestWidgetPrefix + 1,
1.135 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.136 + is(btn.nextSibling.id, kTestWidgetPrefix + 4,
1.137 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.138 +
1.139 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.140 +
1.141 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.142 + CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
1.143 + btn.remove();
1.144 + yield resetCustomization();
1.145 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.146 +});
1.147 +
1.148 +
1.149 +/*
1.150 +Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
1.151 +placements situation similar to:
1.152 +
1.153 +exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,doesn't-exist
1.154 +*/
1.155 +add_task(function() {
1.156 + let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
1.157 +
1.158 + let widgetIds = [];
1.159 + for (let i = 0; i < 5; i++) {
1.160 + let id = kTestWidgetPrefix + i;
1.161 + widgetIds.push(id);
1.162 + let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
1.163 + CustomizableUI.createWidget(spec);
1.164 + CustomizableUI.addWidgetToArea(id, "nav-bar");
1.165 + }
1.166 +
1.167 + for (let id of widgetIds) {
1.168 + document.getElementById(id).style.minWidth = "200px";
1.169 + }
1.170 +
1.171 + let originalWindowWidth = window.outerWidth;
1.172 + window.resizeTo(400, window.outerHeight);
1.173 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.174 +
1.175 + let testWidgetId = kTestWidgetPrefix + 3;
1.176 +
1.177 + CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);
1.178 + CustomizableUI.destroyWidget(testWidgetId);
1.179 + CustomizableUI.destroyWidget(kTestWidgetPrefix + 4);
1.180 +
1.181 + let btn = createDummyXULButton(testWidgetId, "test");
1.182 + CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
1.183 +
1.184 + is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
1.185 + is(btn.previousSibling.id, kTestWidgetPrefix + 1,
1.186 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.187 + is(btn.nextSibling, null,
1.188 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.189 +
1.190 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.191 +
1.192 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.193 + CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
1.194 + btn.remove();
1.195 + yield resetCustomization();
1.196 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.197 +});
1.198 +
1.199 +
1.200 +/*
1.201 +Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
1.202 +placements situation similar to:
1.203 +
1.204 +exists-1,exists-2,overflow-1,can't-overflow,trying-to-insert-this,overflow-2
1.205 +*/
1.206 +add_task(function() {
1.207 + let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
1.208 +
1.209 + let widgetIds = [];
1.210 + for (let i = 5; i >= 0; i--) {
1.211 + let id = kTestWidgetPrefix + i;
1.212 + widgetIds.push(id);
1.213 + let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
1.214 + CustomizableUI.createWidget(spec);
1.215 + CustomizableUI.addWidgetToArea(id, "nav-bar", 0);
1.216 + }
1.217 +
1.218 + for (let i = 10; i < 15; i++) {
1.219 + let id = kTestWidgetPrefix + i;
1.220 + widgetIds.push(id);
1.221 + let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
1.222 + CustomizableUI.createWidget(spec);
1.223 + CustomizableUI.addWidgetToArea(id, "nav-bar");
1.224 + }
1.225 +
1.226 + for (let id of widgetIds) {
1.227 + document.getElementById(id).style.minWidth = "200px";
1.228 + }
1.229 +
1.230 + let originalWindowWidth = window.outerWidth;
1.231 + window.resizeTo(400, window.outerHeight);
1.232 + yield waitForCondition(() => navbar.hasAttribute("overflowing"));
1.233 +
1.234 + // Find last widget that doesn't allow overflowing
1.235 + let nonOverflowing = navbar.customizationTarget.lastChild;
1.236 + is(nonOverflowing.getAttribute("overflows"), "false", "Last child is expected to not allow overflowing");
1.237 + isnot(nonOverflowing.getAttribute("skipintoolbarset"), "true", "Last child is expected to not be skipintoolbarset");
1.238 +
1.239 + let testWidgetId = kTestWidgetPrefix + 10;
1.240 + CustomizableUI.destroyWidget(testWidgetId);
1.241 +
1.242 + let btn = createDummyXULButton(testWidgetId, "test");
1.243 + CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
1.244 +
1.245 + is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
1.246 + is(btn.nextSibling.id, kTestWidgetPrefix + 11,
1.247 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.248 +
1.249 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.250 +
1.251 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.252 + CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
1.253 + btn.remove();
1.254 + yield resetCustomization();
1.255 + yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
1.256 +});
1.257 +
1.258 +
1.259 +/*
1.260 +Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
1.261 +placements situation similar to:
1.262 +
1.263 +exists-1,exists-2,overflow-1,trying-to-insert-this,can't-overflow,overflow-2
1.264 +*/
1.265 +add_task(function() {
1.266 + let widgetIds = [];
1.267 + let missingId = 2;
1.268 + let nonOverflowableId = 3;
1.269 + for (let i = 0; i < 5; i++) {
1.270 + let id = kTestWidgetPrefix + i;
1.271 + widgetIds.push(id);
1.272 + if (i != missingId) {
1.273 + // Setting min-width to make the overflow state not depend on styling of the button and/or
1.274 + // screen width
1.275 + let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
1.276 + onCreated: function(node) {
1.277 + node.style.minWidth = "200px";
1.278 + if (id == (kTestWidgetPrefix + nonOverflowableId)) {
1.279 + node.setAttribute("overflows", false);
1.280 + }
1.281 + }};
1.282 + info("Creating: " + id);
1.283 + CustomizableUI.createWidget(spec);
1.284 + }
1.285 + }
1.286 +
1.287 + let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
1.288 + assertAreaPlacements(kToolbarName, widgetIds);
1.289 + ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
1.290 +
1.291 + let originalWindowWidth = window.outerWidth;
1.292 + window.resizeTo(400, window.outerHeight);
1.293 + yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
1.294 + ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.295 +
1.296 + let btnId = kTestWidgetPrefix + missingId;
1.297 + let btn = createDummyXULButton(btnId, "test");
1.298 + CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
1.299 +
1.300 + is(btn.parentNode.id, kToolbarName + "-overflow-list", "New XUL widget should be placed inside new toolbar's overflow");
1.301 + is(btn.previousSibling.id, kTestWidgetPrefix + 1,
1.302 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.303 + is(btn.nextSibling.id, kTestWidgetPrefix + 4,
1.304 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.305 +
1.306 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.307 + yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
1.308 +
1.309 + btn.remove();
1.310 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.311 + removeCustomToolbars();
1.312 + yield resetCustomization();
1.313 +});
1.314 +
1.315 +
1.316 +/*
1.317 +Tests nodes do *not* get placed in the toolbar's overflow. Replicates a
1.318 +plcements situation similar to:
1.319 +
1.320 +exists-1,trying-to-insert-this,exists-2,overflowed-1
1.321 +*/
1.322 +add_task(function() {
1.323 + let widgetIds = [];
1.324 + let missingId = 1;
1.325 + for (let i = 0; i < 5; i++) {
1.326 + let id = kTestWidgetPrefix + i;
1.327 + widgetIds.push(id);
1.328 + if (i != missingId) {
1.329 + // Setting min-width to make the overflow state not depend on styling of the button and/or
1.330 + // screen width
1.331 + let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
1.332 + onCreated: function(node) { node.style.minWidth = "100px"; }};
1.333 + info("Creating: " + id);
1.334 + CustomizableUI.createWidget(spec);
1.335 + }
1.336 + }
1.337 +
1.338 + let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
1.339 + assertAreaPlacements(kToolbarName, widgetIds);
1.340 + ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
1.341 +
1.342 + let originalWindowWidth = window.outerWidth;
1.343 + window.resizeTo(400, window.outerHeight);
1.344 + yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
1.345 + ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.346 +
1.347 + let btnId = kTestWidgetPrefix + missingId;
1.348 + let btn = createDummyXULButton(btnId, "test");
1.349 + CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
1.350 +
1.351 + is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");
1.352 +
1.353 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.354 + yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
1.355 +
1.356 + btn.remove();
1.357 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.358 + removeCustomToolbars();
1.359 + yield resetCustomization();
1.360 +});
1.361 +
1.362 +
1.363 +/*
1.364 +Tests inserting a node onto the end of an overflowing toolbar *doesn't* put it in
1.365 +the overflow list when the widget disallows overflowing. ie:
1.366 +
1.367 +exists-1,exists-2,overflows-1,trying-to-insert-this
1.368 +
1.369 +Where trying-to-insert-this has overflows=false
1.370 +*/
1.371 +add_task(function() {
1.372 + let widgetIds = [];
1.373 + let missingId = 3;
1.374 + for (let i = 0; i < 5; i++) {
1.375 + let id = kTestWidgetPrefix + i;
1.376 + widgetIds.push(id);
1.377 + if (i != missingId) {
1.378 + // Setting min-width to make the overflow state not depend on styling of the button and/or
1.379 + // screen width
1.380 + let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
1.381 + onCreated: function(node) { node.style.minWidth = "200px"; }};
1.382 + info("Creating: " + id);
1.383 + CustomizableUI.createWidget(spec);
1.384 + }
1.385 + }
1.386 +
1.387 + let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
1.388 + assertAreaPlacements(kToolbarName, widgetIds);
1.389 + ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
1.390 +
1.391 + let originalWindowWidth = window.outerWidth;
1.392 + window.resizeTo(400, window.outerHeight);
1.393 + yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
1.394 + ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
1.395 +
1.396 + let btnId = kTestWidgetPrefix + missingId;
1.397 + let btn = createDummyXULButton(btnId, "test");
1.398 + btn.setAttribute("overflows", false);
1.399 + CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
1.400 +
1.401 + is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");
1.402 + is(btn.nextSibling, null,
1.403 + "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
1.404 +
1.405 + window.resizeTo(originalWindowWidth, window.outerHeight);
1.406 + yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
1.407 +
1.408 + btn.remove();
1.409 + widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
1.410 + removeCustomToolbars();
1.411 + yield resetCustomization();
1.412 +});
1.413 +
1.414 +
1.415 +add_task(function asyncCleanUp() {
1.416 + yield resetCustomization();
1.417 +});
