michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: const kToolbarName = "test-insertNodeInWindow-placements-toolbar";
michael@0: const kTestWidgetPrefix = "test-widget-for-insertNodeInWindow-placements-";
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tries to replicate the situation of having a placement list like this:
michael@0: 
michael@0: exists-1,trying-to-insert-this,doesn't-exist,exists-2
michael@0: */
michael@0: add_task(function() {
michael@0:   let testWidgetExists = [true, false, false, true];
michael@0:   let widgetIds = [];
michael@0:   for (let i = 0; i < testWidgetExists.length; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     if (testWidgetExists[i]) {
michael@0:       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i};
michael@0:       CustomizableUI.createWidget(spec);
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   let toolbarNode = createToolbarWithPlacements(kToolbarName, widgetIds);
michael@0:   assertAreaPlacements(kToolbarName, widgetIds);
michael@0: 
michael@0:   let btnId = kTestWidgetPrefix + 1;
michael@0:   let btn = createDummyXULButton(btnId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, kToolbarName, "New XUL widget should be placed inside new toolbar");
michael@0: 
michael@0:   is(btn.previousSibling.id, toolbarNode.firstChild.id,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   btn.remove();
michael@0:   removeCustomToolbars();
michael@0:   yield resetCustomization();
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
michael@0: situation similar to:
michael@0: 
michael@0: exists-1,exists-2,overflow-1,trying-to-insert-this,overflow-2
michael@0: */
michael@0: add_task(function() {
michael@0:   let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
michael@0: 
michael@0:   let widgetIds = [];
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
michael@0:     CustomizableUI.createWidget(spec);
michael@0:     CustomizableUI.addWidgetToArea(id, "nav-bar");
michael@0:   }
michael@0: 
michael@0:   for (let id of widgetIds) {
michael@0:     document.getElementById(id).style.minWidth = "200px";
michael@0:   }
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
michael@0: 
michael@0:   let testWidgetId = kTestWidgetPrefix + 3;
michael@0: 
michael@0:   CustomizableUI.destroyWidget(testWidgetId);
michael@0: 
michael@0:   let btn = createDummyXULButton(testWidgetId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
michael@0:   is(btn.previousSibling.id, kTestWidgetPrefix + 2,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0:   is(btn.nextSibling.id, kTestWidgetPrefix + 4,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0: 
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
michael@0:   btn.remove();
michael@0:   yield resetCustomization();
michael@0:   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
michael@0: placements situation similar to:
michael@0: 
michael@0: exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,overflow-2
michael@0: */
michael@0: add_task(function() {
michael@0:   let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
michael@0: 
michael@0:   let widgetIds = [];
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
michael@0:     CustomizableUI.createWidget(spec);
michael@0:     CustomizableUI.addWidgetToArea(id, "nav-bar");
michael@0:   }
michael@0: 
michael@0:   for (let id of widgetIds) {
michael@0:     document.getElementById(id).style.minWidth = "200px";
michael@0:   }
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
michael@0: 
michael@0:   let testWidgetId = kTestWidgetPrefix + 3;
michael@0: 
michael@0:   CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);
michael@0:   CustomizableUI.destroyWidget(testWidgetId);
michael@0: 
michael@0:   let btn = createDummyXULButton(testWidgetId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
michael@0:   is(btn.previousSibling.id, kTestWidgetPrefix + 1,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0:   is(btn.nextSibling.id, kTestWidgetPrefix + 4,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0: 
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
michael@0:   btn.remove();
michael@0:   yield resetCustomization();
michael@0:   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
michael@0: placements situation similar to:
michael@0: 
michael@0: exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,doesn't-exist
michael@0: */
michael@0: add_task(function() {
michael@0:   let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
michael@0: 
michael@0:   let widgetIds = [];
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
michael@0:     CustomizableUI.createWidget(spec);
michael@0:     CustomizableUI.addWidgetToArea(id, "nav-bar");
michael@0:   }
michael@0: 
michael@0:   for (let id of widgetIds) {
michael@0:     document.getElementById(id).style.minWidth = "200px";
michael@0:   }
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
michael@0: 
michael@0:   let testWidgetId = kTestWidgetPrefix + 3;
michael@0: 
michael@0:   CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);
michael@0:   CustomizableUI.destroyWidget(testWidgetId);
michael@0:   CustomizableUI.destroyWidget(kTestWidgetPrefix + 4);
michael@0: 
michael@0:   let btn = createDummyXULButton(testWidgetId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
michael@0:   is(btn.previousSibling.id, kTestWidgetPrefix + 1,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0:   is(btn.nextSibling, null,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0: 
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
michael@0:   btn.remove();
michael@0:   yield resetCustomization();
michael@0:   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
michael@0: placements situation similar to:
michael@0: 
michael@0: exists-1,exists-2,overflow-1,can't-overflow,trying-to-insert-this,overflow-2
michael@0: */
michael@0: add_task(function() {
michael@0:   let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
michael@0: 
michael@0:   let widgetIds = [];
michael@0:   for (let i = 5; i >= 0; i--) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
michael@0:     CustomizableUI.createWidget(spec);
michael@0:     CustomizableUI.addWidgetToArea(id, "nav-bar", 0);
michael@0:   }
michael@0: 
michael@0:   for (let i = 10; i < 15; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};
michael@0:     CustomizableUI.createWidget(spec);
michael@0:     CustomizableUI.addWidgetToArea(id, "nav-bar");
michael@0:   }
michael@0: 
michael@0:   for (let id of widgetIds) {
michael@0:     document.getElementById(id).style.minWidth = "200px";
michael@0:   }
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => navbar.hasAttribute("overflowing"));
michael@0: 
michael@0:   // Find last widget that doesn't allow overflowing
michael@0:   let nonOverflowing = navbar.customizationTarget.lastChild;
michael@0:   is(nonOverflowing.getAttribute("overflows"), "false", "Last child is expected to not allow overflowing");
michael@0:   isnot(nonOverflowing.getAttribute("skipintoolbarset"), "true", "Last child is expected to not be skipintoolbarset");
michael@0: 
michael@0:   let testWidgetId = kTestWidgetPrefix + 10;
michael@0:   CustomizableUI.destroyWidget(testWidgetId);
michael@0: 
michael@0:   let btn = createDummyXULButton(testWidgetId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");
michael@0:   is(btn.nextSibling.id, kTestWidgetPrefix + 11,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0: 
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);
michael@0:   btn.remove();
michael@0:   yield resetCustomization();
michael@0:   yield waitForCondition(() => !navbar.hasAttribute("overflowing"));
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes get placed inside the toolbar's overflow as expected. Replicates a
michael@0: placements situation similar to:
michael@0: 
michael@0: exists-1,exists-2,overflow-1,trying-to-insert-this,can't-overflow,overflow-2
michael@0: */
michael@0: add_task(function() {
michael@0:   let widgetIds = [];
michael@0:   let missingId = 2;
michael@0:   let nonOverflowableId = 3;
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     if (i != missingId) {
michael@0:       // Setting min-width to make the overflow state not depend on styling of the button and/or
michael@0:       // screen width
michael@0:       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
michael@0:                   onCreated: function(node) {
michael@0:                     node.style.minWidth = "200px";
michael@0:                     if (id == (kTestWidgetPrefix + nonOverflowableId)) {
michael@0:                       node.setAttribute("overflows", false);
michael@0:                     }
michael@0:                  }};
michael@0:       info("Creating: " + id);
michael@0:       CustomizableUI.createWidget(spec);
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
michael@0:   assertAreaPlacements(kToolbarName, widgetIds);
michael@0:   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
michael@0:   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
michael@0: 
michael@0:   let btnId = kTestWidgetPrefix + missingId;
michael@0:   let btn = createDummyXULButton(btnId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, kToolbarName + "-overflow-list", "New XUL widget should be placed inside new toolbar's overflow");
michael@0:   is(btn.previousSibling.id, kTestWidgetPrefix + 1,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0:   is(btn.nextSibling.id, kTestWidgetPrefix + 4,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0:   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
michael@0: 
michael@0:   btn.remove();
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   removeCustomToolbars();
michael@0:   yield resetCustomization();
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests nodes do *not* get placed in the toolbar's overflow. Replicates a
michael@0: plcements situation similar to:
michael@0: 
michael@0: exists-1,trying-to-insert-this,exists-2,overflowed-1
michael@0: */
michael@0: add_task(function() {
michael@0:   let widgetIds = [];
michael@0:   let missingId = 1;
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     if (i != missingId) {
michael@0:       // Setting min-width to make the overflow state not depend on styling of the button and/or
michael@0:       // screen width
michael@0:       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
michael@0:                   onCreated: function(node) { node.style.minWidth = "100px"; }};
michael@0:       info("Creating: " + id);
michael@0:       CustomizableUI.createWidget(spec);
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
michael@0:   assertAreaPlacements(kToolbarName, widgetIds);
michael@0:   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
michael@0:   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
michael@0: 
michael@0:   let btnId = kTestWidgetPrefix + missingId;
michael@0:   let btn = createDummyXULButton(btnId, "test");
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0:   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
michael@0: 
michael@0:   btn.remove();
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   removeCustomToolbars();
michael@0:   yield resetCustomization();
michael@0: });
michael@0: 
michael@0: 
michael@0: /*
michael@0: Tests inserting a node onto the end of an overflowing toolbar *doesn't* put it in
michael@0: the overflow list when the widget disallows overflowing. ie:
michael@0: 
michael@0: exists-1,exists-2,overflows-1,trying-to-insert-this
michael@0: 
michael@0: Where trying-to-insert-this has overflows=false
michael@0: */
michael@0: add_task(function() {
michael@0:   let widgetIds = [];
michael@0:   let missingId = 3;
michael@0:   for (let i = 0; i < 5; i++) {
michael@0:     let id = kTestWidgetPrefix + i;
michael@0:     widgetIds.push(id);
michael@0:     if (i != missingId) {
michael@0:       // Setting min-width to make the overflow state not depend on styling of the button and/or
michael@0:       // screen width
michael@0:       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,
michael@0:                   onCreated: function(node) { node.style.minWidth = "200px"; }};
michael@0:       info("Creating: " + id);
michael@0:       CustomizableUI.createWidget(spec);
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);
michael@0:   assertAreaPlacements(kToolbarName, widgetIds);
michael@0:   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");
michael@0: 
michael@0:   let originalWindowWidth = window.outerWidth;
michael@0:   window.resizeTo(400, window.outerHeight);
michael@0:   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));
michael@0:   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
michael@0: 
michael@0:   let btnId = kTestWidgetPrefix + missingId;
michael@0:   let btn = createDummyXULButton(btnId, "test");
michael@0:   btn.setAttribute("overflows", false);
michael@0:   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);
michael@0: 
michael@0:   is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");
michael@0:   is(btn.nextSibling, null,
michael@0:      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");
michael@0: 
michael@0:   window.resizeTo(originalWindowWidth, window.outerHeight);
michael@0:   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));
michael@0: 
michael@0:   btn.remove();
michael@0:   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));
michael@0:   removeCustomToolbars();
michael@0:   yield resetCustomization();
michael@0: });
michael@0: 
michael@0: 
michael@0: add_task(function asyncCleanUp() {
michael@0:   yield resetCustomization();
michael@0: });