Bug 1527105 - Convert menucaption to Custom Element r=paolo

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

--HG--
rename : toolkit/content/widgets/menu.xml => toolkit/content/widgets/menu.js
extra : moz-landing-system : lando

toolkit/content/customElements.js

@@ -383,6 +383,7 @@ const isDummyDocument = document.documentURI == "chrome://extensions/content/dum
 if (!isDummyDocument) {
   for (let script of [
     "chrome://global/content/elements/general.js",
+    "chrome://global/content/elements/menu.js",
     "chrome://global/content/elements/notificationbox.js",
     "chrome://global/content/elements/popupnotification.js",
     "chrome://global/content/elements/radio.js",

toolkit/content/jar.mn

@@ -90,6 +90,7 @@ toolkit.jar:
    content/global/elements/findbar.js          (widgets/findbar.js)
    content/global/elements/editor.js           (widgets/editor.js)
    content/global/elements/general.js          (widgets/general.js)
+   content/global/elements/menu.js             (widgets/menu.js)
    content/global/elements/notificationbox.js  (widgets/notificationbox.js)
    content/global/elements/pluginProblem.js    (widgets/pluginProblem.js)
    content/global/elements/radio.js            (widgets/radio.js)

toolkit/content/widgets/menu.js

@@ -0,0 +1,166 @@
+/* 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";
+
+// This is loaded into all XUL windows. Wrap in a block to prevent
+// leaking to window scope.
+{
+class MozMenuItemBase extends MozElements.BaseText {
+  // nsIDOMXULSelectControlItemElement
+  set value(val) {
+    this.setAttribute("value", val);
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+
+  // nsIDOMXULSelectControlItemElement
+  get selected() {
+    return this.getAttribute("selected") == "true";
+  }
+
+  // nsIDOMXULSelectControlItemElement
+  get control() {
+    var parent = this.parentNode;
+    // Return the parent if it is a menu or menulist.
+    if (parent && parent.parentNode instanceof XULMenuElement) {
+      return parent.parentNode;
+    }
+    return null;
+  }
+
+  // nsIDOMXULContainerItemElement
+  get parentContainer() {
+    for (var parent = this.parentNode; parent; parent = parent.parentNode) {
+      if (parent instanceof XULMenuElement) {
+        return parent;
+      }
+    }
+    return null;
+  }
+}
+
+MozXULElement.implementCustomInterface(MozMenuItemBase, [Ci.nsIDOMXULSelectControlItemElement, Ci.nsIDOMXULContainerItemElement]);
+
+class MozMenuBase extends MozMenuItemBase {
+  set open(val) {
+    this.openMenu(val);
+    return val;
+  }
+
+  get open() {
+    return this.hasAttribute("open");
+  }
+
+  get itemCount() {
+    var menupopup = this.menupopup;
+    return menupopup ? menupopup.children.length : 0;
+  }
+
+  get menupopup() {
+    const XUL_NS =
+      "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+    for (var child = this.firstElementChild; child; child = child.nextElementSibling) {
+      if (child.namespaceURI == XUL_NS && child.localName == "menupopup")
+        return child;
+    }
+    return null;
+  }
+
+  appendItem(aLabel, aValue) {
+    var menupopup = this.menupopup;
+    if (!menupopup) {
+      menupopup = this.ownerDocument.createXULElement("menupopup");
+      this.appendChild(menupopup);
+    }
+
+    var menuitem = this.ownerDocument.createXULElement("menuitem");
+    menuitem.setAttribute("label", aLabel);
+    menuitem.setAttribute("value", aValue);
+
+    return menupopup.appendChild(menuitem);
+  }
+
+  getIndexOfItem(aItem) {
+    var menupopup = this.menupopup;
+    if (menupopup) {
+      var items = menupopup.children;
+      var length = items.length;
+      for (var index = 0; index < length; ++index) {
+        if (items[index] == aItem)
+          return index;
+      }
+    }
+    return -1;
+  }
+
+  getItemAtIndex(aIndex) {
+    var menupopup = this.menupopup;
+    if (!menupopup || aIndex < 0 || aIndex >= menupopup.children.length)
+      return null;
+
+    return menupopup.children[aIndex];
+  }
+}
+
+MozXULElement.implementCustomInterface(MozMenuBase, [Ci.nsIDOMXULContainerElement]);
+
+// The <menucaption> element is used for rendering <html:optgroup> inside of <html:select>,
+// See SelectParentHelper.jsm.
+class MozMenuCaption extends MozMenuBase {
+  static get observedAttributes() {
+    return [
+      "selected",
+      "disabled",
+      "checked",
+      "image",
+      "validate",
+      "src",
+      "label",
+      "crop",
+      "highlightable",
+    ];
+  }
+
+  _updateAttributes() {
+    if (!this._inheritedAttributeMap) {
+      return;
+    }
+
+    for (let [ el, attrs ] of this._inheritedAttributeMap.entries()) {
+      for (let attr of attrs) {
+        this.inheritAttribute(el, attr);
+      }
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    this._updateAttributes();
+  }
+
+  connectedCallback() {
+    this.textContent = "";
+    this.appendChild(MozXULElement.parseXULToFragment(`
+      <hbox class="menu-iconic-left" align="center" pack="center" inherits="selected,disabled,checked" role="none">
+        <image class="menu-iconic-icon" inherits="src=image,validate,src" role="none"></image>
+      </hbox>
+      <label class="menu-iconic-text" flex="1" inherits="value=label,crop,highlightable" crop="right" role="none"></label>
+      <label class="menu-iconic-highlightable-text" inherits="text=label,crop,highlightable" crop="right" role="none"></label>
+    `));
+    this._inheritedAttributeMap = new Map();
+    for (let el of this.querySelectorAll("[inherits]")) {
+      this._inheritedAttributeMap.set(el, el.getAttribute("inherits").split(","));
+    }
+    this._updateAttributes();
+  }
+}
+
+customElements.define("menucaption", MozMenuCaption);
+}

toolkit/content/widgets/menu.xml

@@ -194,17 +194,6 @@
     </content>
   </binding>
 
-  <binding id="menucaption" extends="chrome://global/content/bindings/menu.xml#menu-base">
-    <content>
-      <xul:hbox class="menu-iconic-left" align="center" pack="center"
-                xbl:inherits="selected,disabled,checked">
-        <xul:image class="menu-iconic-icon" xbl:inherits="src=image,validate,src"/>
-      </xul:hbox>
-      <xul:label class="menu-iconic-text" flex="1" xbl:inherits="value=label,crop,highlightable" crop="right"/>
-      <xul:label class="menu-iconic-highlightable-text" xbl:inherits="xbl:text=label,crop,highlightable" crop="right"/>
-    </content>
-  </binding>
-
   <binding id="menu-iconic"
            extends="chrome://global/content/bindings/menu.xml#menu-base">
     <content>

toolkit/content/xul.css

@@ -291,10 +291,6 @@ menuitem[type="radio"] {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
 }
 
-menucaption {
-  -moz-binding: url("chrome://global/content/bindings/menu.xml#menucaption");
-}
-
 .menu-text {
   -moz-box-flex: 1;
 }