Bug 962884 - Offer opt-out from auto-hyphenation for labels in the menu panel. r=Gijs

browser/components/customizableui/content/panelUI.js

@@ -49,6 +49,7 @@ const PanelUI = {
     this.menuButton.addEventListener("keypress", this);
     this._overlayScrollListenerBoundFn = this._overlayScrollListener.bind(this);
     window.matchMedia("(-moz-overlay-scrollbars)").addListener(this._overlayScrollListenerBoundFn);
+    CustomizableUI.addListener(this);
     this._initialized = true;
   },
 
@@ -69,10 +70,6 @@ const PanelUI = {
   },
 
   uninit: function() {
-    if (!this._eventListenersAdded) {
-      return;
-    }
-
     for (let event of this.kEvents) {
       this.panel.removeEventListener(event, this);
     }
@@ -80,6 +77,7 @@ const PanelUI = {
     this.menuButton.removeEventListener("mousedown", this);
     this.menuButton.removeEventListener("keypress", this);
     window.matchMedia("(-moz-overlay-scrollbars)").removeListener(this._overlayScrollListenerBoundFn);
+    CustomizableUI.removeListener(this);
     this._overlayScrollListenerBoundFn = null;
   },
 
@@ -183,6 +181,7 @@ const PanelUI = {
   handleEvent: function(aEvent) {
     switch (aEvent.type) {
       case "popupshowing":
+        this._adjustLabelsForAutoHyphens();
         // Fall through
       case "popupshown":
         // Fall through
@@ -370,6 +369,26 @@ const PanelUI = {
                       "browser");
   },
 
+  onWidgetAfterDOMChange: function(aNode, aNextNode, aContainer, aWasRemoval) {
+    if (aContainer != this.contents) {
+      return;
+    }
+    if (aWasRemoval) {
+      aNode.removeAttribute("auto-hyphens");
+    }
+  },
+
+  onWidgetBeforeDOMChange: function(aNode, aNextNode, aContainer, aIsRemoval) {
+    if (aContainer != this.contents) {
+      return;
+    }
+    if (!aIsRemoval &&
+        (this.panel.state == "open" ||
+         document.documentElement.hasAttribute("customizing"))) {
+      this._adjustLabelsForAutoHyphens(aNode);
+    }
+  },
+
   /** 
    * Signal that we're about to make a lot of changes to the contents of the
    * panels all at once. For performance, we ignore the mutations.
@@ -389,6 +408,22 @@ const PanelUI = {
     this.multiView.ignoreMutations = false;
   },
 
+  _adjustLabelsForAutoHyphens: function(aNode) {
+    let toolbarButtons = aNode ? [aNode] :
+                                 this.contents.querySelectorAll(".toolbarbutton-1");
+    for (let node of toolbarButtons) {
+      let label = node.getAttribute("label");
+      if (!label) {
+        continue;
+      }
+      if (label.contains("\u00ad")) {
+        node.setAttribute("auto-hyphens", "off");
+      } else {
+        node.removeAttribute("auto-hyphens");
+      }
+    }
+  },
+
   /**
    * Sets the anchor node into the open or closed state, depending
    * on the state of the panel.

browser/components/customizableui/test/browser.ini

@@ -68,6 +68,7 @@ skip-if = os == "linux"
 [browser_948985_non_removable_defaultArea.js]
 [browser_952963_areaType_getter_no_area.js]
 [browser_956602_remove_special_widget.js]
+[browser_962884_opt_in_disable_hyphens.js]
 [browser_963639_customizing_attribute_non_customizable_toolbar.js]
 [browser_967000_button_charEncoding.js]
 [browser_967000_button_feeds.js]

browser/components/customizableui/test/browser_962884_opt_in_disable_hyphens.js

@@ -0,0 +1,67 @@
+/* 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/. */
+
+"use strict";
+
+add_task(function() {
+  const kNormalLabel = "Character Encoding";
+  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_NAVBAR);
+  let characterEncoding = document.getElementById("characterencoding-button");
+  const kOriginalLabel = characterEncoding.getAttribute("label");
+  characterEncoding.setAttribute("label", "\u00ad" + kNormalLabel);
+  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_PANEL);
+
+  yield PanelUI.show();
+
+  is(characterEncoding.getAttribute("auto-hyphens"), "off",
+     "Hyphens should be disabled if the ­ character is present in the label");
+  let multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
+  let multilineTextCS = getComputedStyle(multilineText);
+  is(multilineTextCS.MozHyphens, "manual", "-moz-hyphens should be set to manual when the ­ character is present.")
+
+  let hiddenPanelPromise = promisePanelHidden(window);
+  PanelUI.toggle();
+  yield hiddenPanelPromise;
+
+  characterEncoding.setAttribute("label", kNormalLabel);
+
+  yield PanelUI.show();
+
+  isnot(characterEncoding.getAttribute("auto-hyphens"), "off",
+        "Hyphens should not be disabled if the ­ character is not present in the label");
+  multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
+  let multilineTextCS = getComputedStyle(multilineText);
+  is(multilineTextCS.MozHyphens, "auto", "-moz-hyphens should be set to auto by default.")
+
+  hiddenPanelPromise = promisePanelHidden(window);
+  PanelUI.toggle();
+  yield hiddenPanelPromise;
+
+  characterEncoding.setAttribute("label", "\u00ad" + kNormalLabel);
+  CustomizableUI.removeWidgetFromArea("characterencoding-button");
+  yield startCustomizing();
+
+  isnot(characterEncoding.getAttribute("auto-hyphens"), "off",
+        "Hyphens should not be disabled when the widget is in the palette");
+
+  gCustomizeMode.addToPanel(characterEncoding);
+  is(characterEncoding.getAttribute("auto-hyphens"), "off",
+     "Hyphens should be disabled if the ­ character is present in the label in customization mode");
+  let multilineText = document.getAnonymousElementByAttribute(characterEncoding, "class", "toolbarbutton-multiline-text");
+  let multilineTextCS = getComputedStyle(multilineText);
+  is(multilineTextCS.MozHyphens, "manual", "-moz-hyphens should be set to manual when the ­ character is present in customization mode.")
+
+  yield endCustomizing();
+
+  CustomizableUI.addWidgetToArea("characterencoding-button", CustomizableUI.AREA_NAVBAR);
+  ok(!characterEncoding.hasAttribute("auto-hyphens"),
+     "Removing the widget from the panel should remove the auto-hyphens attribute");
+
+  characterEncoding.setAttribute("label", kOriginalLabel);
+});
+
+add_task(function asyncCleanup() {
+  yield endCustomizing();
+  yield resetCustomization();
+});

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -163,11 +163,15 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
-  -moz-hyphens: auto;
   line-height: 1.1;
   max-height: 2.2em;
 }
 
+.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
+.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
+  -moz-hyphens: auto;
+}
+
 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
   position: absolute;