1 files changed, 66 insertions, 0 deletions
diff --git a/browser/components/customizableui/test/browser_palette_labels.js b/browser/components/customizableui/test/browser_palette_labels.js
new file mode 100644
index 0000000000..42767a8ee2
--- /dev/null
+++ b/browser/components/customizableui/test/browser_palette_labels.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that all customizable buttons have labels and icons.
+ *
+ * This is primarily designed to ensure we don't end up with items without
+ * labels in customize mode. In the past, this has happened due to race
+ * conditions, where labels would be correct if and only if the item had
+ * already been moved into a toolbar or panel in the main UI before
+ * (forcing it to be constructed and any fluent identifiers to be localized
+ * and applied).
+ * We use a new window to ensure that earlier tests using some of the widgets
+ * in the palette do not influence our checks to see that such items get
+ * labels, "even" if the first time they're rendered is in customize mode's
+ * palette.
+ */
+add_task(async function test_all_buttons_have_labels() {
+  let win = await BrowserTestUtils.openNewBrowserWindow();
+  registerCleanupFunction(async () => {
+    await endCustomizing(win);
+    return BrowserTestUtils.closeWindow(win);
+  });
+  await startCustomizing(win);
+  let { palette } = win.gNavToolbox;
+  // Wait for things to paint.
+  await TestUtils.waitForCondition(() => {
+    return !!Array.from(palette.querySelectorAll(".toolbarbutton-icon")).filter(
+      n => {
+        let rect = n.getBoundingClientRect();
+        return rect.height > 0 && rect.width > 0;
+      }
+    ).length;
+  }, "Must start rendering icons.");
+
+  for (let wrapper of palette.children) {
+    if (wrapper.hasAttribute("title")) {
+      ok(true, wrapper.firstElementChild.id + " has a label.");
+    } else {
+      info(
+        `${wrapper.firstElementChild.id} doesn't seem to have a label, waiting.`
+      );
+      await BrowserTestUtils.waitForAttribute("title", wrapper);
+      ok(
+        wrapper.hasAttribute("title"),
+        wrapper.firstElementChild.id + " has a label."
+      );
+    }
+    let icons = Array.from(wrapper.querySelectorAll(".toolbarbutton-icon"));
+    // If there are icons, at least one must be visible
+    // (not everything necessarily has one, e.g. the search bar has no icon)
+    if (icons.length) {
+      let visibleIcons = icons.filter(n => {
+        let rect = n.getBoundingClientRect();
+        return rect.height > 0 && rect.width > 0;
+      });
+      Assert.greater(
+        visibleIcons.length,
+        0,
+        `${wrapper.firstElementChild.id} should have at least one visible icon.`
+      );
+    }
+  }
+});