Bug 1673409 - show icon and label for import button in customize mode, r=jaws

Differential Revision: https://phabricator.services.mozilla.com/D94783

browser/components/customizableui/CustomizeMode.jsm

@@ -147,6 +147,9 @@ function CustomizeMode(aWindow) {
   this.browser = aWindow.gBrowser;
   this.areas = new Set();
 
+  this._translationObserver = new aWindow.MutationObserver(mutations =>
+    this._onTranslations(mutations)
+  );
   this._ensureCustomizationPanels();
 
   let content = this.$("customization-content-container");
@@ -495,6 +498,8 @@ CustomizeMode.prototype = {
 
     this._handler.isExitingCustomizeMode = true;
 
+    this._translationObserver.disconnect();
+
     this._teardownDownloadAutoHideToggle();
 
     AddonManager.removeAddonListener(this);
@@ -966,6 +971,40 @@ CustomizeMode.prototype = {
     return wrapper;
   },
 
+  /**
+   * Helper to set the label, either directly or to set up the translation
+   * observer so we can set the label once it's available.
+   */
+  _updateWrapperLabel(aNode, aIsUpdate, aWrapper = aNode.parentElement) {
+    if (aNode.hasAttribute("label")) {
+      aWrapper.setAttribute("title", aNode.getAttribute("label"));
+      aWrapper.setAttribute("tooltiptext", aNode.getAttribute("label"));
+    } else if (aNode.hasAttribute("title")) {
+      aWrapper.setAttribute("title", aNode.getAttribute("title"));
+      aWrapper.setAttribute("tooltiptext", aNode.getAttribute("title"));
+    } else if (aNode.hasAttribute("data-l10n-id") && !aIsUpdate) {
+      this._translationObserver.observe(aNode, {
+        attributes: true,
+        attributeFilter: ["label", "title"],
+      });
+    }
+  },
+
+  /**
+   * Called when a node without a label or title is updated.
+   */
+  _onTranslations(aMutations) {
+    for (let mut of aMutations) {
+      let { target } = mut;
+      if (
+        target.parentElement?.localName == "toolbarpaletteitem" &&
+        (target.hasAttribute("label") || mut.target.hasAttribute("title"))
+      ) {
+        this._updateWrapperLabel(target, true);
+      }
+    }
+  },
+
   createOrUpdateWrapper(aNode, aPlace, aIsUpdate) {
     let wrapper;
     if (
@@ -1010,13 +1049,7 @@ CustomizeMode.prototype = {
       wrapper.setAttribute("id", "wrapper-" + aNode.getAttribute("id"));
     }
 
-    if (aNode.hasAttribute("label")) {
-      wrapper.setAttribute("title", aNode.getAttribute("label"));
-      wrapper.setAttribute("tooltiptext", aNode.getAttribute("label"));
-    } else if (aNode.hasAttribute("title")) {
-      wrapper.setAttribute("title", aNode.getAttribute("title"));
-      wrapper.setAttribute("tooltiptext", aNode.getAttribute("title"));
-    }
+    this._updateWrapperLabel(aNode, aIsUpdate, wrapper);
 
     if (aNode.hasAttribute("flex")) {
       wrapper.setAttribute("flex", aNode.getAttribute("flex"));

browser/components/customizableui/test/browser.ini

@@ -155,6 +155,7 @@ skip-if = os == "linux" # linux doesn't get drag space (no tabsintitlebar)
 skip-if = os == "mac" # no toggle-able menubar on macOS.
 [browser_overflow_use_subviews.js]
 skip-if = verify
+[browser_palette_labels.js]
 [browser_panel_keyboard_navigation.js]
 [browser_panel_toggle.js]
 [browser_panelUINotifications.js]

browser/components/customizableui/test/browser_952963_areaType_getter_no_area.js

@@ -9,6 +9,15 @@ const kUnregisterAreaTestWidget = "test-widget-for-unregisterArea-areaType";
 const kTestWidget = "test-widget-no-area-areaType";
 registerCleanupFunction(removeCustomToolbars);
 
+registerCleanupFunction(() => {
+  try {
+    CustomizableUI.destroyWidget(kTestWidget);
+    CustomizableUI.destroyWidget(kUnregisterAreaTestWidget);
+  } catch (ex) {
+    Cu.reportError(ex);
+  }
+});
+
 function checkAreaType(widget) {
   try {
     // widget.areaType returns either null or undefined

browser/components/customizableui/test/browser_980155_add_overflow_toolbar.js

@@ -11,6 +11,16 @@ add_task(async function addOverflowingToolbar() {
   let originalWindowWidth = window.outerWidth;
 
   let widgetIds = [];
+  registerCleanupFunction(() => {
+    try {
+      for (let id of widgetIds) {
+        CustomizableUI.destroyWidget(id);
+      }
+    } catch (ex) {
+      Cu.reportError(ex);
+    }
+  });
+
   for (let i = 0; i < 10; i++) {
     let id = kTestWidgetPrefix + i;
     widgetIds.push(id);

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.`
+      );
+    }
+  }
+});

browser/themes/shared/icons/import.svg

@@ -1,4 +1,4 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="context-fill"><path d="M13.374 1H4.623A2.83 2.83 0 0 0 2 4v4h2V4a.928.928 0 0 1 .833-1h8.333A.928.928 0 0 1 14 4v8a.928.928 0 0 1-.833 1H4.833A.928.928 0 0 1 4 12v-1H2v1a2.833 2.833 0 0 0 2.627 3h9.623A1.888 1.888 0 0 0 16 13V4a2.833 2.833 0 0 0-2.626-3z"/><path d="M7.146 11.146a.5.5 0 1 0 .707.707l2-2a.5.5 0 0 0 0-.707l-2-2a.5.5 0 0 0-.707.707L8.293 9H1.5a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 1.5 10h6.793z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="context-fill"><path d="M13.374 1H4.623A2.83 2.83 0 0 0 2 4v4h2V4a.928.928 0 0 1 .833-1h8.333A.928.928 0 0 1 14 4v8a.928.928 0 0 1-.833 1H4.833A.928.928 0 0 1 4 12v-1H2v1a2.833 2.833 0 0 0 2.627 3h9.623A1.888 1.888 0 0 0 16 13V4a2.833 2.833 0 0 0-2.626-3z"/><path d="M7.146 11.146a.5.5 0 1 0 .707.707l2-2a.5.5 0 0 0 0-.707l-2-2a.5.5 0 0 0-.707.707L8.293 9H1.5a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 1.5 10h6.793z"/></g></svg>