Bug 1047713, e10s optgroup support, r=neil,felipe

2024-09-13 09:24:08 -07:00 · 2015-06-05 08:33:28 -04:00 · 2015-06-05 08:33:28 -04:00 · 981147060c
commit 981147060c
parent b427ed718f
9 changed files with 147 additions and 20 deletions
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -1022,14 +1022,9 @@ chatbox:-moz-full-screen-ancestor > .chat-titlebar {
  direction: ltr;
 }

-.contentSelectDropdown-optgroup {
-  font-weight: bold;
-  /* color: menutext used to overwrite the disabled color */
-  color: menutext;
-}
-
-.contentSelectDropdown-ingroup {
-  -moz-margin-start: 2em;
+/* Indent options in optgroups */
+.contentSelectDropdown-ingroup .menu-iconic-text {
+  -moz-padding-start: 2em;
 }

 /* Give this menupopup an arrow panel styling */
--- a/browser/base/content/test/general/browser.ini
+++ b/browser/base/content/test/general/browser.ini
@ -380,6 +380,8 @@ skip-if = e10s
 support-files =
  searchSuggestionUI.html
  searchSuggestionUI.js
+[browser_selectpopup.js]
+run-if = e10s
 [browser_selectTabAtIndex.js]
 [browser_ssl_error_reports.js]
 [browser_star_hsts.js]
--- a/browser/base/content/test/general/browser_selectpopup.js
+++ b/browser/base/content/test/general/browser_selectpopup.js
@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// This test checks that a <select> with an <optgroup> opens and can be navigated
+// in a child process. This is different than single-process as a <menulist> is used
+// to implement the dropdown list.
+
+const PAGECONTENT =
+  "<html><body onload='document.body.firstChild.focus()'><select>" +
+  "  <optgroup label='First Group'>" +
+  "    <option value=One>One" +
+  "    <option value=Two>Two" +
+  "  </optgroup>" +
+  "  <option value=Three>Three" +
+  "  <optgroup label='Second Group'>" +
+  "    <option value=Four>Four" +
+  "    <option value=Five>Five" +
+  "  </optgroup>" +
+  "</body></html>";
+
+function openSelectPopup(selectPopup)
+{
+  return new Promise((resolve, reject) => {
+    selectPopup.addEventListener("popupshown", function popupListener(event) {
+      selectPopup.removeEventListener("popupshown", popupListener, false)
+      resolve();
+    }, false);
+    setTimeout(() => EventUtils.synthesizeKey("KEY_ArrowDown", { altKey: true, code: "ArrowDown" }), 1500);
+  });
+}
+
+function hideSelectPopup(selectPopup)
+{
+  return new Promise((resolve, reject) => {
+    selectPopup.addEventListener("popuphidden", function popupListener(event) {
+      selectPopup.removeEventListener("popuphidden", popupListener, false)
+      resolve();
+    }, false);
+    EventUtils.synthesizeKey("KEY_Enter", { code: "Enter" });
+  });
+}
+
+add_task(function*() {
+  let tab = gBrowser.selectedTab = gBrowser.addTab();
+  let browser = gBrowser.getBrowserForTab(tab);
+  yield promiseTabLoadEvent(tab, "data:text/html," + escape(PAGECONTENT));
+
+  yield SimpleTest.promiseFocus(browser.contentWindow);
+
+  let menulist = document.getElementById("ContentSelectDropdown");
+  let selectPopup = menulist.menupopup;
+
+  yield openSelectPopup(selectPopup);
+
+  is(menulist.selectedIndex, 1, "Initial selection");
+  is(selectPopup.firstChild.localName, "menucaption", "optgroup is caption");
+  is(selectPopup.firstChild.getAttribute("label"), "First Group", "optgroup label");
+  is(selectPopup.childNodes[1].localName, "menuitem", "option is menuitem");
+  is(selectPopup.childNodes[1].getAttribute("label"), "One", "option label");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", { code: "ArrowDown" });
+  is(menulist.menuBoxObject.activeChild, menulist.getItemAtIndex(2), "Select item 2");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", { code: "ArrowDown" });
+  is(menulist.menuBoxObject.activeChild, menulist.getItemAtIndex(3), "Select item 3");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", { code: "ArrowDown" });
+  is(menulist.menuBoxObject.activeChild, menulist.getItemAtIndex(5), "Skip optgroup header and select item 4");
+
+  yield hideSelectPopup(selectPopup);
+
+  is(menulist.selectedIndex, 5, "Item 4 still selected selectedIndex");
+
+  gBrowser.removeCurrentTab();
+});
+
--- a/toolkit/content/widgets/menu.xml
+++ b/toolkit/content/widgets/menu.xml
@ -187,6 +187,12 @@
    </content>
  </binding>

+  <binding id="menucaption" extends="chrome://global/content/bindings/menu.xml#menu-base">
+    <content>
+      <xul:label class="menu-text" xbl:inherits="value=label,crop" crop="right"/>
+    </content>
+  </binding>
+
  <binding id="menu-menubar"
           extends="chrome://global/content/bindings/menu.xml#menu-base">
    <content>
@ -227,6 +233,16 @@
    </content>
  </binding>

+  <binding id="menucaption-inmenulist" extends="chrome://global/content/bindings/menu.xml#menucaption">
+    <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" crop="right"/>
+    </content>
+  </binding>
+
  <binding id="menuitem-iconic-desc-noaccel" extends="chrome://global/content/bindings/menu.xml#menuitem">
    <content>
      <xul:hbox class="menu-iconic-left" align="center" pack="center"
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@ -382,6 +382,10 @@ menuitem.menuitem-non-iconic {
  -moz-binding: url("chrome://global/content/bindings/menu.xml#menubutton-item");
 }

+menucaption {
+  -moz-binding: url("chrome://global/content/bindings/menu.xml#menucaption");
+}
+
 .menu-text {
  -moz-box-flex: 1;
 }
@ -953,6 +957,10 @@ menulist > menupopup > menuitem {
  -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic-noaccel");
 }

+menulist > menupopup > menucaption {
+  -moz-binding: url("chrome://global/content/bindings/menu.xml#menucaption-inmenulist");
+}
+
 dropmarker {
  -moz-binding: url("chrome://global/content/bindings/general.xml#dropmarker");
 }
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@ -65,20 +65,20 @@ this.SelectParentHelper = {

 };

-function populateChildren(menulist, options, selectedIndex, startIndex = 0, isGroup = false) {
+function populateChildren(menulist, options, selectedIndex, startIndex = 0, isInGroup = false) {
  let index = startIndex;
  let element = menulist.menupopup;

  for (let option of options) {
-    let item = element.ownerDocument.createElement("menuitem");
+    let isOptGroup = (option.tagName == 'OPTGROUP');
+    let item = element.ownerDocument.createElement(isOptGroup ? "menucaption" : "menuitem");
+
    item.setAttribute("label", option.textContent);
    item.style.direction = option.textDirection;

    element.appendChild(item);

-    if (option.children.length > 0) {
-      item.classList.add("contentSelectDropdown-optgroup");
-      item.setAttribute("disabled", "true");
+    if (isOptGroup) {
      index = populateChildren(menulist, option.children, selectedIndex, index, true);
    } else {
      if (index == selectedIndex) {
@ -89,9 +89,10 @@ function populateChildren(menulist, options, selectedIndex, startIndex = 0, isGr
        // _moz-menuactive attribute on the selected <xul:menuitem>.
        menulist.selectedItem = item;
      }
+
      item.setAttribute("value", index++);

-      if (isGroup) {
+      if (isInGroup) {
        item.classList.add("contentSelectDropdown-ingroup")
      }
    }
--- a/toolkit/themes/linux/global/menu.css
+++ b/toolkit/themes/linux/global/menu.css
@ -12,6 +12,7 @@

 menu,
 menuitem,
+menucaption,
 .splitmenu-menuitem {
  -moz-appearance: menuitem;
  -moz-box-align: center;
@ -68,6 +69,7 @@ menuitem.spell-suggestion {
 /* ::::: menu/menuitems in menulist popups ::::: */

 menulist > menupopup > menuitem,
+menulist > menupopup > menucaption,
 menulist > menupopup > menu {
  padding: 1px 5px;
  max-width: none;
@ -92,6 +94,12 @@ menulist > menupopup > menu {
  font-weight: inherit;
 }

+menucaption > .menu-text,
+menucaption > .menu-iconic-text {
+  -moz-margin-start: 0 !important;
+  font-weight: bold;
+}
+
 .menu-description {
  font-style: italic;
  color: GrayText;
@ -149,6 +157,7 @@ menulist > menupopup > menu {


 menulist > menupopup > menuitem > .menu-iconic-left,
+menulist > menupopup > menucaption > .menu-iconic-left,
 menulist > menupopup > menu > .menu-iconic-left {
  display: none;
 }
--- a/toolkit/themes/osx/global/menu.css
+++ b/toolkit/themes/osx/global/menu.css
@ -5,7 +5,8 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

 menu,
-menuitem {
+menuitem,
+menucaption {
  -moz-appearance: menuitem;
  -moz-box-align: center;
  color: MenuText;
@ -36,6 +37,11 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
  color: inherit;
 }

+menucaption > .menu-text,
+menucaption > .menu-iconic-text {
+  font-weight: bold;
+}
+
 .menu-description {
  font-style: italic;
  color: -moz-mac-menutextdisable;
@ -127,7 +133,8 @@ menubar > menu[_moz-menuactive="true"][open="true"] {
 /* ::::: menu/menuitems in popups ::::: */

 menupopup > menu,
-menupopup > menuitem {
+menupopup > menuitem,
+menupopup > menucaption {
  max-width: 42em;
 }

@ -140,6 +147,7 @@ menuitem[_moz-menuactive="true"] {
 /* ::::: menu/menuitems in menulist popups ::::: */

 menulist > menupopup > menuitem,
+menulist > menupopup > menucaption,
 menulist > menupopup > menu {
  max-width: none;
  font: inherit;
@ -148,11 +156,12 @@ menulist > menupopup > menu {

 /* ::::: menuitems in editable menulist popups ::::: */

-menulist[editable="true"] > menupopup > menuitem {
+menulist[editable="true"] > menupopup > menuitem,
+menulist[editable="true"] > menupopup > menucaption {
  -moz-appearance: none;
 }

-menulist[editable="true"] > menupopup > menuitem > .menu-iconic-left {
+menulist[editable="true"] > menupopup > :moz-any(menuitem, menucaption) > .menu-iconic-left
  display: none;
 }

--- a/toolkit/themes/windows/global/menu.css
+++ b/toolkit/themes/windows/global/menu.css
@ -12,6 +12,7 @@

 menu,
 menuitem,
+menucaption,
 .splitmenu-menuitem {
  -moz-appearance: menuitem;
  -moz-box-align: center;
@ -72,6 +73,12 @@ menuitem.spell-suggestion {
  -moz-padding-end: 2px;
 }

+menucaption > .menu-text,
+menucaption > .menu-iconic-text {
+  font-weight: bold;
+  -moz-padding-start: 0 !important;
+}
+
 .menu-description {
  font-style: italic;
  color: GrayText;
@ -173,7 +180,8 @@ menubar > menu:-moz-window-inactive {
 /* ::::: menu/menuitems in popups ::::: */

 menupopup > menu,
-menupopup > menuitem {
+menupopup > menuitem,
+menupopup > menucaption {
  max-width: 42em;
 }

@ -187,6 +195,7 @@ menuitem[_moz-menuactive="true"],
 /* ::::: menu/menuitems in menulist popups ::::: */

 menulist > menupopup > menuitem,
+menulist > menupopup > menucaption,
 menulist > menupopup > menu {
  -moz-appearance: none !important;
  border: 1px solid transparent;
@ -204,12 +213,14 @@ menulist > menupopup > menu[_moz-menuactive="true"] {
 }

 menulist > menupopup > menuitem > .menu-iconic-left,
+menulist > menupopup > menucaption > .menu-iconic-left,
 menulist > menupopup > menu > .menu-iconic-left {
  display: none;
  padding-top: 0px;
 }

 menulist > menupopup > menuitem > label,
+menulist > menupopup > menucaption > label,
 menulist > menupopup > menu > label {
  padding-top: 0px;
  padding-bottom: 0px;
@ -228,7 +239,7 @@ menulist > menupopup > menuitem[disabled="true"]:not([_moz-menuactive="true"]):-
  text-shadow: none;
 }

-menulist > menupopup > menuitem:not(.menuitem-iconic) > .menu-iconic-text {
+menulist > menupopup > :moz-any(menuitem, menucaption):not(.menuitem-iconic) > .menu-iconic-text,
  margin: 0 !important;
 }