summaryrefslogtreecommitdiffstats
path: root/browser/components/customizableui/test/browser_hidden_widget_overflow.js
blob: eff0bff4b0f10089fc47fc4a18bd74a07fb67e03 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

/**
 * Tests that if only hidden widgets are overflowed that the
 * OverflowableToolbar won't show the overflow panel anchor.
 */

const kHiddenButtonID = "fake-hidden-button";
const kDisplayNoneButtonID = "display-none-button";
const kWebExtensionButtonID1 = "fake-webextension-button-1";
const kWebExtensionButtonID2 = "fake-webextension-button-2";
let gWin = null;

add_setup(async function () {
  gWin = await BrowserTestUtils.openNewBrowserWindow();

  // To make it easier to write a test where we can control overflowing
  // for a test that can run in a bunch of environments with slightly
  // different rules on when things will overflow, we'll go ahead and
  // just remove everything removable from the nav-bar by default. Then
  // we'll add our hidden item, and a single WebExtension item, and
  // force toolbar overflow.
  let widgetIDs = CustomizableUI.getWidgetIdsInArea(CustomizableUI.AREA_NAVBAR);
  for (let widgetID of widgetIDs) {
    if (CustomizableUI.isWidgetRemovable(widgetID)) {
      CustomizableUI.removeWidgetFromArea(widgetID);
    }
  }

  CustomizableUI.createWidget({
    id: kWebExtensionButtonID1,
    label: "Test WebExtension widget 1",
    defaultArea: CustomizableUI.AREA_NAVBAR,
    webExtension: true,
  });

  CustomizableUI.createWidget({
    id: kWebExtensionButtonID2,
    label: "Test WebExtension widget 2",
    defaultArea: CustomizableUI.AREA_NAVBAR,
    webExtension: true,
  });

  // Let's force the WebExtension widgets to be significantly wider. This
  // just makes it easier to ensure that both of these (which are to the left
  // of the hidden widget) get overflowed.
  for (let webExtID of [kWebExtensionButtonID1, kWebExtensionButtonID2]) {
    let webExtNode = CustomizableUI.getWidget(webExtID).forWindow(gWin).node;
    webExtNode.style.minWidth = "100px";
  }

  CustomizableUI.createWidget({
    id: kHiddenButtonID,
    label: "Test hidden=true widget",
    defaultArea: CustomizableUI.AREA_NAVBAR,
  });

  // Now hide the button with hidden=true so that it has no dimensions.
  let hiddenButtonNode =
    CustomizableUI.getWidget(kHiddenButtonID).forWindow(gWin).node;
  hiddenButtonNode.hidden = true;

  CustomizableUI.createWidget({
    id: kDisplayNoneButtonID,
    label: "Test display:none widget",
    defaultArea: CustomizableUI.AREA_NAVBAR,
  });

  // Now hide the button with display: none so that it has no dimensions.
  let displayNoneButtonNode =
    CustomizableUI.getWidget(kDisplayNoneButtonID).forWindow(gWin).node;
  displayNoneButtonNode.style.display = "none";

  registerCleanupFunction(async () => {
    CustomizableUI.destroyWidget(kWebExtensionButtonID1);
    CustomizableUI.destroyWidget(kWebExtensionButtonID2);
    CustomizableUI.destroyWidget(kHiddenButtonID);
    CustomizableUI.destroyWidget(kDisplayNoneButtonID);
    await BrowserTestUtils.closeWindow(gWin);
    await CustomizableUI.reset();
  });
});

add_task(async function test_hidden_widget_overflow() {
  gWin.resizeTo(kForceOverflowWidthPx, window.outerHeight);

  // Wait until the left-most fake WebExtension button is overflowing.
  let webExtNode = CustomizableUI.getWidget(kWebExtensionButtonID1).forWindow(
    gWin
  ).node;
  await BrowserTestUtils.waitForMutationCondition(
    webExtNode,
    { attributes: true },
    () => {
      return webExtNode.hasAttribute("overflowedItem");
    }
  );

  let hiddenButtonNode =
    CustomizableUI.getWidget(kHiddenButtonID).forWindow(gWin).node;
  Assert.ok(
    hiddenButtonNode.hasAttribute("overflowedItem"),
    "Hidden button should be overflowed."
  );

  let overflowButton = gWin.document.getElementById("nav-bar-overflow-button");

  Assert.ok(
    !BrowserTestUtils.isVisible(overflowButton),
    "Overflow panel button should be hidden."
  );
});