Bug 989751 - Some items in the Web Developer and Sidebar widgets have the wrong styling, r=gijs

--HG--
extra : rebase_source : c5d3e9fb0aa32d16a0a24edd43a800f68eba114f

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -114,7 +114,6 @@ function fillSubviewFromMenuItems(aMenuItems, aSubview) {
       subviewItem = doc.createElementNS(kNSXUL, "menuseparator");
     } else if (menuChild.localName == "menuitem") {
       subviewItem = doc.createElementNS(kNSXUL, "toolbarbutton");
-      subviewItem.setAttribute("class", "subviewbutton");
       addShortcut(menuChild, doc, subviewItem);
     } else {
       continue;
@@ -124,6 +123,10 @@ function fillSubviewFromMenuItems(aMenuItems, aSubview) {
       if (attrVal)
         subviewItem.setAttribute(attr, attrVal);
     }
+    // We do this after so the .subviewbutton class doesn't get overriden.
+    if (menuChild.localName == "menuitem") {
+      subviewItem.classList.add("subviewbutton");
+    }
     fragment.appendChild(subviewItem);
   }
   aSubview.appendChild(fragment);

browser/components/customizableui/test/browser.ini

@@ -99,6 +99,7 @@ skip-if = os == "linux"
 
 [browser_985815_propagate_setToolbarVisibility.js]
 [browser_981305_separator_insertion.js]
+[browser_989751_subviewbutton_class.js]
 [browser_987177_destroyWidget_xul.js]
 [browser_987177_xul_wrapper_updating.js]
 [browser_987492_window_api.js]

browser/components/customizableui/test/browser_989751_subviewbutton_class.js

@@ -0,0 +1,62 @@
+/* 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";
+
+const kCustomClass = "acustomclassnoonewilluse";
+let tempElement = null;
+
+function insertClassNameToMenuChildren(parentMenu) {
+  let el = parentMenu.querySelector("menuitem:first-of-type");
+  el.classList.add(kCustomClass);
+  tempElement = el;
+}
+
+function checkSubviewButtonClass(menuId, buttonId, subviewId) {
+  return function() {
+    info("Checking for items without the subviewbutton class in " + buttonId + " widget");
+    let menu = document.getElementById(menuId);
+    insertClassNameToMenuChildren(menu);
+
+    let placement = CustomizableUI.getPlacementOfWidget(buttonId);
+    let changedPlacement = false;
+    if (!placement || placement.area != CustomizableUI.AREA_PANEL) {
+      CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_PANEL);
+      changedPlacement = true;
+    }
+    yield PanelUI.show();
+
+    let button = document.getElementById(buttonId);
+    button.click();
+
+    yield waitForCondition(() => !PanelUI.multiView.hasAttribute("transitioning"));
+    let subview = document.getElementById(subviewId);
+    ok(subview.firstChild, "Subview should have a kid");
+    let subviewchildren = subview.querySelectorAll("toolbarbutton");
+    for (let i = 0; i < subviewchildren.length; i++) {
+      let item = subviewchildren[i];
+      let itemReadable = "Item '" + item.label + "' (classes: " + item.className + ")";
+      ok(item.classList.contains("subviewbutton"), itemReadable + " should have the subviewbutton class.");
+      if (i == 0) {
+        ok(item.classList.contains(kCustomClass), itemReadable + " should still have its own class, too.");
+      }
+    }
+
+    let panelHiddenPromise = promisePanelHidden(window);
+    PanelUI.hide();
+    yield panelHiddenPromise;
+
+    if (changedPlacement) {
+      CustomizableUI.reset();
+    }
+  };
+}
+
+add_task(checkSubviewButtonClass("menuWebDeveloperPopup", "developer-button", "PanelUI-developerItems"));
+add_task(checkSubviewButtonClass("viewSidebarMenu", "sidebar-button", "PanelUI-sidebarItems"));
+
+registerCleanupFunction(function() {
+  tempElement.classList.remove(kCustomClass)
+  tempElement = null;
+});