Bug 566154 - text missing from preferences font size pulldown.; f=neil r=neil a=blocking-betaN+

layout/xul/base/src/nsMenuFrame.cpp

@@ -1368,6 +1368,13 @@ nsMenuFrame::SizeToPopup(nsBoxLayoutState& aState, nsSize& aSize)
         return PR_FALSE;
       tmpSize = mPopupFrame->GetPrefSize(aState);
       aSize.width = tmpSize.width;
+
+      // if there is a scroll frame, add the desired width of the scrollbar as well
+      nsIScrollableFrame* scrollFrame = do_QueryFrame(mPopupFrame->GetFirstChild(nsnull));
+      if (scrollFrame) {
+        aSize.width += scrollFrame->GetDesiredScrollbarSizes(&aState).LeftRight();
+      }
+
       return PR_TRUE;
     }
   }

toolkit/content/tests/widgets/Makefile.in

@@ -57,6 +57,7 @@ _TEST_FILES = 	test_bug360220.xul \
 		test_closemenu_attribute.xul \
 		test_colorpicker_popup.xul \
 		test_deck.xul \
+		test_menulist.xul \
 		test_menuitem_blink.xul \
 		test_menulist_keynav.xul \
 		test_menulist_null_value.xul \

toolkit/content/tests/widgets/test_menulist.xul

@@ -0,0 +1,241 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?>
+
+<window title="Menulist Tests"
+        onload="setTimeout(testtag_menulists, 0);"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript" src="/MochiKit/packed.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>      
+  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>      
+  <script type="application/javascript" src="xul_selectcontrol.js"></script>      
+
+<vbox id="scroller" style="overflow: auto" height="60">
+  <menulist id="menulist" onpopupshown="test_menulist_open(this, this.parentNode)"
+            onpopuphidden="$('menulist-in-listbox').open = true;">
+    <menupopup id="menulist-popup"/>
+  </menulist>
+  <button label="Two"/>
+  <button label="Three"/>
+</vbox>
+<listbox id="scroller-in-listbox" style="overflow: auto" height="60">
+  <listitem allowevents="true">
+    <menulist id="menulist-in-listbox" onpopupshown="test_menulist_open(this, this.parentNode.parentNode)"
+              onpopuphidden="SimpleTest.executeSoon(checkScrollAndFinish)">
+      <menupopup id="menulist-in-listbox-popup">
+        <menuitem label="One" value="one"/>
+        <menuitem label="Two" value="two"/>
+      </menupopup>
+    </menulist>
+  </listitem>
+  <listitem label="Two"/>
+  <listitem label="Three"/>
+  <listitem label="Four"/>
+  <listitem label="Five"/>
+  <listitem label="Six"/>
+</listbox>
+
+<hbox>
+  <menulist id="menulist-size">
+    <menupopup>
+      <menuitem label="Menuitem Label" width="200"/>
+    </menupopup>
+  </menulist>
+</hbox>
+
+<menulist id="menulist-editable" editable="true">
+  <menupopup id="menulist-popup-editable"/>
+</menulist>
+
+<menulist id="menulist-initwithvalue" value="two">
+  <menupopup>
+    <menuitem label="One" value="one"/>
+    <menuitem label="Two" value="two"/>
+    <menuitem label="Three" value="three"/>
+  </menupopup>
+</menulist>
+<menulist id="menulist-initwithselected" value="two">
+  <menupopup>
+    <menuitem label="One" value="one"/>
+    <menuitem label="Two" value="two"/>
+    <menuitem label="Three" value="three" selected="true"/>
+  </menupopup>
+</menulist>
+<menulist id="menulist-editable-initwithvalue" editable="true" value="Two">
+  <menupopup>
+    <menuitem label="One" value="one"/>
+    <menuitem label="Two" value="two"/>
+    <menuitem label="Three" value="three"/>
+  </menupopup>
+</menulist>
+<menulist id="menulist-editable-initwithselected" editable="true" value="two">
+  <menupopup>
+    <menuitem label="One" value="one"/>
+    <menuitem label="Two" value="two"/>
+    <menuitem label="Three" value="three" selected="true"/>
+  </menupopup>
+</menulist>
+
+<script class="testbody" type="application/javascript">
+<![CDATA[
+
+SimpleTest.waitForExplicitFinish();
+
+function testtag_menulists()
+{
+  testtag_menulist_UI_start($("menulist"), false);
+  testtag_menulist_UI_start($("menulist-editable"), true);
+
+  // bug 566154, the menulist width should account for vertical scrollbar
+  ok(document.getElementById("menulist-size").getBoundingClientRect().width >= 210,
+     "menulist popup width includes scrollbar width");
+
+  $("menulist").open = true;
+}
+
+function testtag_menulist_UI_start(element, editable)
+{
+  var testprefix = editable ? "editable" : "";
+
+  // check the menupopup property
+  var popup = element.menupopup;
+  ok(popup && popup.localName == "menupopup" &&
+              popup.parentNode == element, testprefix + " menupopup");
+
+  // test the interfaces that menulist implements
+  test_nsIDOMXULMenuListElement(element, testprefix, editable);
+
+  element.value = "";
+
+  test_nsIDOMXULSelectControlElement(element, "menuitem",
+                                     editable ? "editable" : null);
+}
+
+function test_nsIDOMXULMenuListElement(element, testprefix, editable)
+{
+  is(element.open, false, testprefix + " open");
+  is(element.editable, editable, testprefix + " editable");
+
+  if (editable) {
+    var inputField = element.inputField;
+    is(inputField &&
+                  inputField instanceof Components.interfaces.nsIDOMHTMLInputElement,
+                  true, testprefix + " inputField");
+
+    // check if the select method works
+    inputField.select();
+    is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");
+    is(inputField.selectionEnd, 0, testprefix + " empty select selectionEnd");
+
+    element.value = "Some Text";
+    inputField.select();
+    is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");
+    is(inputField.selectionEnd, 9, testprefix + " empty select selectionEnd");
+  }
+  else {
+    is(element.inputField, null , testprefix + " inputField");
+  }
+
+  element.appendItem("Item One", "one");
+  var seconditem = element.appendItem("Item Two", "two");
+  var thirditem = element.appendItem("Item Three", "three");
+  element.appendItem("Item Four", "four");
+
+  seconditem.image = "happy.png";
+  seconditem.setAttribute("description", "This is the second description");
+  thirditem.image = "happy.png";
+  thirditem.setAttribute("description", "This is the third description");
+
+  // check the image and description properties
+  // editable menulists don't use the image or description properties currently
+  if (editable) {
+    element.selectedIndex = 1;
+    is(element.image, "", testprefix + " image set to selected");
+    is(element.description, "", testprefix + " description set to selected");
+  }
+  else {
+    element.selectedIndex = 1;
+    is(element.image, "happy.png", testprefix + " image set to selected");
+    is(element.description, "This is the second description", testprefix + " description set to selected");
+    element.selectedIndex = -1;
+    is(element.image, "", testprefix + " image set when none selected");
+    is(element.description, "", testprefix + " description set when none selected");
+    element.selectedIndex = 2;
+    is(element.image, "happy.png", testprefix + " image set to selected again");
+    is(element.description, "This is the third description", testprefix + " description set to selected again");
+
+    // check that changing the properties of the selected item changes the menulist's properties
+    thirditem.label = "Item Number Three";
+    is(element.label, "Item Number Three", testprefix + " label modified");
+    thirditem.value = "item-three";
+    is(element.value, "item-three", testprefix + " value modified");
+    thirditem.image = "smile.png";
+    is(element.image, "smile.png", testprefix + " image modified");
+    thirditem.setAttribute("description", "Changed description");
+    is(element.description, "Changed description", testprefix + " description modified");
+    seconditem.label = "Changed Label 2";
+    is(element.label, "Item Number Three", testprefix + " label of another item modified");
+
+    element.selectedIndex = 0;
+    is(element.image, "", testprefix + " image set to selected with no image");
+    is(element.description, "", testprefix + " description set to selected with no description");
+  }
+
+  // check the removeAllItems method
+  element.appendItem("An Item", "anitem");
+  element.appendItem("Another Item", "anotheritem");
+  element.removeAllItems();
+  is(element.itemCount, 0, testprefix + " removeAllItems");
+}
+
+function test_menulist_open(element, scroller)
+{
+  element.appendItem("Scroll Item 1", "scrollitem1");
+  element.appendItem("Scroll Item 2", "scrollitem2");
+  element.focus();
+
+/*
+  // bug 530504, mousewheel while menulist is open should not scroll menulist
+  // items or parent
+  var scrolled = false;
+  var mouseScrolled = function (event) { scrolled = true; }
+  window.addEventListener("DOMMouseScroll", mouseScrolled, false);
+  synthesizeMouseScroll(element, 2, 2, { delta: 10 });
+  is(scrolled, true, "mousescroll " + element.id);
+  is(scroller.scrollTop, 0, "scroll position on mousescroll " + element.id);
+  window.removeEventListener("DOMMouseScroll", mouseScrolled, false);
+*/
+
+  // bug 543065, hovering the mouse over an item should highlight it and not
+  // scroll the parent
+  var item = element.menupopup.childNodes[1];
+
+  synthesizeMouse(element.menupopup.childNodes[1], 2, 2, { type: "mousemove" });
+  synthesizeMouse(element.menupopup.childNodes[1], 6, 6, { type: "mousemove" });
+  is(element.menuBoxObject.activeChild, item, "activeChild after menu highlight " + element.id);
+  is(scroller.scrollTop, 0, "scroll position after menu highlight " + element.id);
+
+  element.open = false;
+}
+
+function checkScrollAndFinish()
+{
+  is($("scroller").scrollTop, 0, "mousewheel on menulist does not scroll vbox parent");
+  is($("scroller-in-listbox").scrollTop, 0, "mousewheel on menulist does not scroll listbox parent");
+  SimpleTest.finish();
+}
+
+]]>
+</script>
+
+<body xmlns="http://www.w3.org/1999/xhtml">
+<p id="display">
+</p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+</pre>
+</body>
+
+</window>

toolkit/content/tests/widgets/xul_selectcontrol.js

@@ -5,6 +5,8 @@
 // flag behaviours that differ for certain elements
 //   allow-other-value - alternate values for the value property may be used
 //                       besides those in the list
+//   other-value-clears-selection - alternative values for the value property
+//                                  clears the selected item
 //   selection-required - an item must be selected in the list, unless there
 //                        aren't any to select
 //   activate-disabled-menuitem - disabled menuitems can be highlighted
@@ -15,7 +17,7 @@
 // The win:, mac: and gtk: or other prefixes may be used for platform specific behaviour
 var behaviours = {
   menu: "win:activate-disabled-menuitem activate-disabled-menuitem-mousemove select-keynav-wraps select-extended-keynav",
-  menulist: "allow-other-value",
+  menulist: "allow-other-value other-value-clears-selection",
   listbox: "select-extended-keynav",
   richlistbox: "select-extended-keynav",
   radiogroup: "select-keynav-wraps dont-select-disabled allow-other-value",
@@ -102,17 +104,22 @@ function test_nsIDOMXULSelectControlElement(element, childtag, testprefix)
   is(element.getItemAtIndex(2), null, testid + "getItemAtIndex - index 2 is null");
 
   // check if setting the value changes the selection
-  element.value = "first";
-  test_nsIDOMXULSelectControlElement_States(element, testid + "set value 1", 2, firstitem, 0, "first");
-  element.value = "second";
-  test_nsIDOMXULSelectControlElement_States(element, testid + "set value 2", 2, seconditem, 1, "second");
+  element.value = firstvalue;
+  test_nsIDOMXULSelectControlElement_States(element, testid + "set value 1", 2, firstitem, 0, firstvalue);
+  element.value = secondvalue;
+  test_nsIDOMXULSelectControlElement_States(element, testid + "set value 2", 2, seconditem, 1, secondvalue);
   // setting the value attribute to one not in the list doesn't change the selection.
   // The value is only changed for elements which support having a value other than the
   // selection.
   element.value = "other";
   var allowOtherValue = behaviourContains(element.localName, "allow-other-value");
-  test_nsIDOMXULSelectControlElement_States(element, testid + "set value other", 2, seconditem, 1,
-                                            allowOtherValue ? "other" : "second");
+  var otherValueClearsSelection = behaviourContains(element.localName, "other-value-clears-selection");
+  test_nsIDOMXULSelectControlElement_States(element, testid + "set value other", 2,
+                                            otherValueClearsSelection ? null : seconditem,
+                                            otherValueClearsSelection ? -1 : 1,
+                                            allowOtherValue ? "other" : secondvalue);
+  if (allowOtherValue)
+    element.value = "";
 
   // 'removeItemAt' - check if removeItemAt removes the right item
   if (selectionRequired)
@@ -170,7 +177,8 @@ function test_nsIDOMXULSelectControlElement(element, childtag, testprefix)
     test_nsIDOMXULSelectControlElement_States(element, testid + "removeItemAt 6", 1, fourthitem, 0, fourthvalue);
 
   // 'insertItemAt' - check if insertItemAt inserts items at the right locations
-  var fifthitem = test_nsIDOMXULSelectControlElement_insertItemAt(element, 0, 0, testid, 5);
+  element.selectedIndex = 0;
+  test_nsIDOMXULSelectControlElement_insertItemAt(element, 0, 0, testid, 5);
   test_nsIDOMXULSelectControlElement_insertItemAt(element, 2, 2, testid, 6);
   test_nsIDOMXULSelectControlElement_insertItemAt(element, -1, 3, testid, 7);
   test_nsIDOMXULSelectControlElement_insertItemAt(element, 6, 4, testid, 8);
@@ -194,19 +202,24 @@ function test_nsIDOMXULSelectControlElement(element, childtag, testprefix)
 
 function test_nsIDOMXULSelectControlElement_init(element, testprefix)
 {
+  // editable menulists use the label as the value
+  var isEditable = (element.localName == "menulist" && element.editable);
+
   var id = element.id;
   element = document.getElementById(id + "-initwithvalue");
   if (element) {
     var seconditem = element.getItemAtIndex(1);
     test_nsIDOMXULSelectControlElement_States(element, testprefix + " value initialization",
-                                              3, seconditem, 1, seconditem.value);
+                                              3, seconditem, 1,
+                                              isEditable ? seconditem.label : seconditem.value);
   }
 
   element = document.getElementById(id + "-initwithselected");
   if (element) {
     var thirditem = element.getItemAtIndex(2);
     test_nsIDOMXULSelectControlElement_States(element, testprefix + " selected initialization",
-                                              3, thirditem, 2, thirditem.value);
+                                              3, thirditem, 2,
+                                              isEditable ? thirditem.label : thirditem.value);
   }
 }
 
@@ -240,7 +253,7 @@ function test_nsIDOMXULSelectControlElement_insertItemAt(element, index, expecte
   if (expectedSelIndex >= expectedindex)
     expectedSelIndex++;
 
-  test_nsIDOMXULSelectControlElement_States(element, testid + "insertItemAt " + expectedindex,
+  test_nsIDOMXULSelectControlElement_States(element, testid + "insertItemAt " + index,
                                            expectedCount, expectedSelItem,
                                            expectedSelIndex, expectedSelValue);
   return newitem;

toolkit/themes/faststripe/global/menu.css

@@ -184,10 +184,7 @@ menulist > menupopup > menuitem,
 menulist > menupopup > menu {
   -moz-appearance: none;
   border: 1px solid transparent;
-  padding-top: 1px;
-  -moz-padding-end: 30px;
-  padding-bottom: 1px;
-  -moz-padding-start: 5px;
+  padding: 1px 5px;
   max-width: none;
   font: message-box;
   color: -moz-FieldText;

toolkit/themes/gnomestripe/global/menu.css

@@ -104,10 +104,7 @@ menuitem.spell-suggestion {
 menulist > menupopup > menuitem,
 .menulist-menupopup > menu,
 menulist > menupopup > menu {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  -moz-padding-start: 1px;
-  -moz-padding-end: 30px;
+  padding: 1px 5px;
   max-width: none;
   font: message-box;
 }

toolkit/themes/pmstripe/global/menu.css

@@ -197,10 +197,7 @@ menulist > menupopup > menuitem,
 .menulist-menupopup > menu,
 menulist > menupopup > menu {
   border: 1px solid transparent;
-  -moz-padding-end: 30px;
-  -moz-padding-start: 5px;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 1px 5px;
   max-width: none;
   font: message-box;
   color: -moz-FieldText;

toolkit/themes/winstripe/global/menu.css

@@ -207,10 +207,7 @@ menulist > menupopup > menuitem,
 menulist > menupopup > menu {
   -moz-appearance: none;
   border: 1px solid transparent;
-  padding-top: 1px;
-  -moz-padding-end: 30px;
-  padding-bottom: 1px;
-  -moz-padding-start: 5px;
+  padding: 1px 5px;
   max-width: none;
   font: message-box;
   color: -moz-FieldText;