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

     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 const kToolbarName = "test-insertNodeInWindow-placements-toolbar";

     8 const kTestWidgetPrefix = "test-widget-for-insertNodeInWindow-placements-";

    11 /*

    12 Tries to replicate the situation of having a placement list like this:

    14 exists-1,trying-to-insert-this,doesn't-exist,exists-2

    15 */

    16 add_task(function() {

    17   let testWidgetExists = [true, false, false, true];

    18   let widgetIds = [];

    19   for (let i = 0; i < testWidgetExists.length; i++) {

    20     let id = kTestWidgetPrefix + i;

    21     widgetIds.push(id);

    22     if (testWidgetExists[i]) {

    23       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i};

    24       CustomizableUI.createWidget(spec);

    25     }

    26   }

    28   let toolbarNode = createToolbarWithPlacements(kToolbarName, widgetIds);

    29   assertAreaPlacements(kToolbarName, widgetIds);

    31   let btnId = kTestWidgetPrefix + 1;

    32   let btn = createDummyXULButton(btnId, "test");

    33   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);

    35   is(btn.parentNode.id, kToolbarName, "New XUL widget should be placed inside new toolbar");

    37   is(btn.previousSibling.id, toolbarNode.firstChild.id,

    38      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

    40   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

    41   btn.remove();

    42   removeCustomToolbars();

    43   yield resetCustomization();

    44 });

    47 /*

    48 Tests nodes get placed inside the toolbar's overflow as expected. Replicates a

    49 situation similar to:

    51 exists-1,exists-2,overflow-1,trying-to-insert-this,overflow-2

    52 */

    53 add_task(function() {

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

    56   let widgetIds = [];

    57   for (let i = 0; i < 5; i++) {

    58     let id = kTestWidgetPrefix + i;

    59     widgetIds.push(id);

    60     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};

    61     CustomizableUI.createWidget(spec);

    62     CustomizableUI.addWidgetToArea(id, "nav-bar");

    63   }

    65   for (let id of widgetIds) {

    66     document.getElementById(id).style.minWidth = "200px";

    67   }

    69   let originalWindowWidth = window.outerWidth;

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

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

    73   let testWidgetId = kTestWidgetPrefix + 3;

    75   CustomizableUI.destroyWidget(testWidgetId);

    77   let btn = createDummyXULButton(testWidgetId, "test");

    78   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);

    80   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");

    81   is(btn.previousSibling.id, kTestWidgetPrefix + 2,

    82      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

    83   is(btn.nextSibling.id, kTestWidgetPrefix + 4,

    84      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

    88   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

    89   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);

    90   btn.remove();

    91   yield resetCustomization();

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

    93 });

    96 /*

    97 Tests nodes get placed inside the toolbar's overflow as expected. Replicates a

    98 placements situation similar to:

   100 exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,overflow-2

   101 */

   102 add_task(function() {

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

   105   let widgetIds = [];

   106   for (let i = 0; i < 5; i++) {

   107     let id = kTestWidgetPrefix + i;

   108     widgetIds.push(id);

   109     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};

   110     CustomizableUI.createWidget(spec);

   111     CustomizableUI.addWidgetToArea(id, "nav-bar");

   112   }

   114   for (let id of widgetIds) {

   115     document.getElementById(id).style.minWidth = "200px";

   116   }

   118   let originalWindowWidth = window.outerWidth;

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

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

   122   let testWidgetId = kTestWidgetPrefix + 3;

   124   CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);

   125   CustomizableUI.destroyWidget(testWidgetId);

   127   let btn = createDummyXULButton(testWidgetId, "test");

   128   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);

   130   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");

   131   is(btn.previousSibling.id, kTestWidgetPrefix + 1,

   132      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

   133   is(btn.nextSibling.id, kTestWidgetPrefix + 4,

   134      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

   138   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   139   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);

   140   btn.remove();

   141   yield resetCustomization();

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

   143 });

   146 /*

   147 Tests nodes get placed inside the toolbar's overflow as expected. Replicates a

   148 placements situation similar to:

   150 exists-1,exists-2,overflow-1,doesn't-exist,trying-to-insert-this,doesn't-exist

   151 */

   152 add_task(function() {

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

   155   let widgetIds = [];

   156   for (let i = 0; i < 5; i++) {

   157     let id = kTestWidgetPrefix + i;

   158     widgetIds.push(id);

   159     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};

   160     CustomizableUI.createWidget(spec);

   161     CustomizableUI.addWidgetToArea(id, "nav-bar");

   162   }

   164   for (let id of widgetIds) {

   165     document.getElementById(id).style.minWidth = "200px";

   166   }

   168   let originalWindowWidth = window.outerWidth;

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

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

   172   let testWidgetId = kTestWidgetPrefix + 3;

   174   CustomizableUI.destroyWidget(kTestWidgetPrefix + 2);

   175   CustomizableUI.destroyWidget(testWidgetId);

   176   CustomizableUI.destroyWidget(kTestWidgetPrefix + 4);

   178   let btn = createDummyXULButton(testWidgetId, "test");

   179   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);

   181   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");

   182   is(btn.previousSibling.id, kTestWidgetPrefix + 1,

   183      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

   184   is(btn.nextSibling, null,

   185      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

   189   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   190   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);

   191   btn.remove();

   192   yield resetCustomization();

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

   194 });

   197 /*

   198 Tests nodes get placed inside the toolbar's overflow as expected. Replicates a

   199 placements situation similar to:

   201 exists-1,exists-2,overflow-1,can't-overflow,trying-to-insert-this,overflow-2

   202 */

   203 add_task(function() {

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

   206   let widgetIds = [];

   207   for (let i = 5; i >= 0; i--) {

   208     let id = kTestWidgetPrefix + i;

   209     widgetIds.push(id);

   210     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};

   211     CustomizableUI.createWidget(spec);

   212     CustomizableUI.addWidgetToArea(id, "nav-bar", 0);

   213   }

   215   for (let i = 10; i < 15; i++) {

   216     let id = kTestWidgetPrefix + i;

   217     widgetIds.push(id);

   218     let spec = {id: id, type: "button", removable: true, label: "insertNodeInWindow test", tooltiptext: "" + i};

   219     CustomizableUI.createWidget(spec);

   220     CustomizableUI.addWidgetToArea(id, "nav-bar");

   221   }

   223   for (let id of widgetIds) {

   224     document.getElementById(id).style.minWidth = "200px";

   225   }

   227   let originalWindowWidth = window.outerWidth;

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

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

   231   // Find last widget that doesn't allow overflowing

   232   let nonOverflowing = navbar.customizationTarget.lastChild;

   233   is(nonOverflowing.getAttribute("overflows"), "false", "Last child is expected to not allow overflowing");

   234   isnot(nonOverflowing.getAttribute("skipintoolbarset"), "true", "Last child is expected to not be skipintoolbarset");

   236   let testWidgetId = kTestWidgetPrefix + 10;

   237   CustomizableUI.destroyWidget(testWidgetId);

   239   let btn = createDummyXULButton(testWidgetId, "test");

   240   CustomizableUI.ensureWidgetPlacedInWindow(testWidgetId, window);

   242   is(btn.parentNode.id, navbar.overflowable._list.id, "New XUL widget should be placed inside overflow of toolbar");

   243   is(btn.nextSibling.id, kTestWidgetPrefix + 11,

   244      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

   248   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   249   CustomizableUI.removeWidgetFromArea(btn.id, kToolbarName);

   250   btn.remove();

   251   yield resetCustomization();

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

   253 });

   256 /*

   257 Tests nodes get placed inside the toolbar's overflow as expected. Replicates a

   258 placements situation similar to:

   260 exists-1,exists-2,overflow-1,trying-to-insert-this,can't-overflow,overflow-2

   261 */

   262 add_task(function() {

   263   let widgetIds = [];

   264   let missingId = 2;

   265   let nonOverflowableId = 3;

   266   for (let i = 0; i < 5; i++) {

   267     let id = kTestWidgetPrefix + i;

   268     widgetIds.push(id);

   269     if (i != missingId) {

   270       // Setting min-width to make the overflow state not depend on styling of the button and/or

   271       // screen width

   272       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,

   273                   onCreated: function(node) {

   274                     node.style.minWidth = "200px";

   275                     if (id == (kTestWidgetPrefix + nonOverflowableId)) {

   276                       node.setAttribute("overflows", false);

   277                     }

   278                  }};

   279       info("Creating: " + id);

   280       CustomizableUI.createWidget(spec);

   281     }

   282   }

   284   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);

   285   assertAreaPlacements(kToolbarName, widgetIds);

   286   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");

   288   let originalWindowWidth = window.outerWidth;

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

   290   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));

   291   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

   293   let btnId = kTestWidgetPrefix + missingId;

   294   let btn = createDummyXULButton(btnId, "test");

   295   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);

   297   is(btn.parentNode.id, kToolbarName + "-overflow-list", "New XUL widget should be placed inside new toolbar's overflow");

   298   is(btn.previousSibling.id, kTestWidgetPrefix + 1,

   299      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

   300   is(btn.nextSibling.id, kTestWidgetPrefix + 4,

   301      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

   304   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));

   306   btn.remove();

   307   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   308   removeCustomToolbars();

   309   yield resetCustomization();

   310 });

   313 /*

   314 Tests nodes do *not* get placed in the toolbar's overflow. Replicates a

   315 plcements situation similar to:

   317 exists-1,trying-to-insert-this,exists-2,overflowed-1

   318 */

   319 add_task(function() {

   320   let widgetIds = [];

   321   let missingId = 1;

   322   for (let i = 0; i < 5; i++) {

   323     let id = kTestWidgetPrefix + i;

   324     widgetIds.push(id);

   325     if (i != missingId) {

   326       // Setting min-width to make the overflow state not depend on styling of the button and/or

   327       // screen width

   328       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,

   329                   onCreated: function(node) { node.style.minWidth = "100px"; }};

   330       info("Creating: " + id);

   331       CustomizableUI.createWidget(spec);

   332     }

   333   }

   335   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);

   336   assertAreaPlacements(kToolbarName, widgetIds);

   337   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");

   339   let originalWindowWidth = window.outerWidth;

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

   341   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));

   342   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

   344   let btnId = kTestWidgetPrefix + missingId;

   345   let btn = createDummyXULButton(btnId, "test");

   346   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);

   348   is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");

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

   351   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));

   353   btn.remove();

   354   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   355   removeCustomToolbars();

   356   yield resetCustomization();

   357 });

   360 /*

   361 Tests inserting a node onto the end of an overflowing toolbar *doesn't* put it in

   362 the overflow list when the widget disallows overflowing. ie:

   364 exists-1,exists-2,overflows-1,trying-to-insert-this

   366 Where trying-to-insert-this has overflows=false

   367 */

   368 add_task(function() {

   369   let widgetIds = [];

   370   let missingId = 3;

   371   for (let i = 0; i < 5; i++) {

   372     let id = kTestWidgetPrefix + i;

   373     widgetIds.push(id);

   374     if (i != missingId) {

   375       // Setting min-width to make the overflow state not depend on styling of the button and/or

   376       // screen width

   377       let spec = {id: id, type: "button", removable: true, label: "test", tooltiptext: "" + i,

   378                   onCreated: function(node) { node.style.minWidth = "200px"; }};

   379       info("Creating: " + id);

   380       CustomizableUI.createWidget(spec);

   381     }

   382   }

   384   let toolbarNode = createOverflowableToolbarWithPlacements(kToolbarName, widgetIds);

   385   assertAreaPlacements(kToolbarName, widgetIds);

   386   ok(!toolbarNode.hasAttribute("overflowing"), "Toolbar shouldn't overflow to start with.");

   388   let originalWindowWidth = window.outerWidth;

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

   390   yield waitForCondition(() => toolbarNode.hasAttribute("overflowing"));

   391   ok(toolbarNode.hasAttribute("overflowing"), "Should have an overflowing toolbar.");

   393   let btnId = kTestWidgetPrefix + missingId;

   394   let btn = createDummyXULButton(btnId, "test");

   395   btn.setAttribute("overflows", false);

   396   CustomizableUI.ensureWidgetPlacedInWindow(btnId, window);

   398   is(btn.parentNode.id, kToolbarName + "-target", "New XUL widget should be placed inside new toolbar");

   399   is(btn.nextSibling, null,

   400      "insertNodeInWindow should have placed new XUL widget in correct place in DOM according to placements");

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

   403   yield waitForCondition(() => !toolbarNode.hasAttribute("overflowing"));

   405   btn.remove();

   406   widgetIds.forEach(id => CustomizableUI.destroyWidget(id));

   407   removeCustomToolbars();

   408   yield resetCustomization();

   409 });

   412 add_task(function asyncCleanUp() {

   413   yield resetCustomization();

   414 });

The Tor Browser / file revision

browser/components/customizableui/test/browser_976792_insertNodeInWindow.js@8bccb770b82d

browser/components/customizableui/test/browser_976792_insertNodeInWindow.js