From 107a29219572bad3c3a61281bd892af6239e1279 Mon Sep 17 00:00:00 2001
From: "Olli.Pettay%helsinki.fi" <Olli.Pettay%helsinki.fi>
Date: Tue, 16 Jan 2007 17:09:58 +0000
Subject: [PATCH] Bug 298371, make richlistbox multi-selectable p=surkov,
 r=mano+enndeakin

---
 toolkit/content/widgets/listbox.xml           | 1114 ++++++++++-------
 toolkit/content/widgets/richlistbox.xml       |  731 ++++++-----
 .../themes/pinstripe/global/richlistbox.css   |   16 +
 .../themes/winstripe/global/richlistbox.css   |   16 +
 4 files changed, 1023 insertions(+), 854 deletions(-)

diff --git a/toolkit/content/widgets/listbox.xml b/toolkit/content/widgets/listbox.xml
index 9955814f08d..7f572d20ce7 100644
--- a/toolkit/content/widgets/listbox.xml
+++ b/toolkit/content/widgets/listbox.xml
@@ -1,18 +1,562 @@
 <?xml version="1.0"?>
 
+<!-- ***** BEGIN LICENSE BLOCK *****
+   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
+   -
+   - The contents of this file are subject to the Mozilla Public License Version
+   - 1.1 (the "License"); you may not use this file except in compliance with
+   - the License. You may obtain a copy of the License at
+   - http://www.mozilla.org/MPL/
+   -
+   - Software distributed under the License is distributed on an "AS IS" basis,
+   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+   - for the specific language governing rights and limitations under the
+   - License.
+   -
+   - The Original Code is toolkit code.
+   -
+   - The Initial Developer of the Original Code is
+   - Netscape Communications Corporation.
+   - Portions created by the Initial Developer are Copyright (C) 2002
+   - the Initial Developer. All Rights Reserved.
+   -
+   - Contributor(s):
+   -   Joe Hewitt <hewitt@netscape.com> (original author)
+   -   Simon Bünzli <zeniko@gmail.com>
+   -   Alexander Surkov <surkov.alexander@gmail.com>
+   -
+   - Alternatively, the contents of this file may be used under the terms of
+   - either the GNU General Public License Version 2 or later (the "GPL"), or
+   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+   - in which case the provisions of the GPL or the LGPL are applicable instead
+   - of those above. If you wish to allow use of your version of this file only
+   - under the terms of either the GPL or the LGPL, and not to allow others to
+   - use your version of this file under the terms of the MPL, indicate your
+   - decision by deleting the provisions above and replace them with the notice
+   - and other provisions required by the GPL or the LGPL. If you do not delete
+   - the provisions above, a recipient may use your version of this file under
+   - the terms of any one of the MPL, the GPL or the LGPL.
+   -
+   - ***** END LICENSE BLOCK ***** -->
+
 <bindings id="listboxBindings"
-   xmlns="http://www.mozilla.org/xbl"
-   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-   xmlns:xbl="http://www.mozilla.org/xbl">
-  
-  <binding id="listbox-base" extends="chrome://global/content/bindings/general.xml#basecontrol">
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+          xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <!--
+    Interface binding that is base for bindings of xul:listbox and
+    xul:richlistbox elements. This binding assumes that successors bindings
+    will implement the following methods:
+
+    /** Return index of given item
+    * @param aItem - given item element */
+    getIndexOfItem(aItem)
+
+    /** Return item at given index
+    * @param aIndex - index of item element */
+    getItemAtIndex(aIndex)
+
+    /** Return count of item elements */
+    getRowCount()
+
+    /** Return count of visible item elements */
+    getNumberOfVisibleRows()
+
+    /** Return index of first visible item element */
+    getIndexOfFirstVisibleRow()
+
+    /** Return true if item of given index is visible
+     * @param aIndex - index of item element
+     *
+     * @note XXX: this method should be removed after bug 364612 is fixed
+     */
+    ensureIndexIsVisible(aIndex)
+
+    /** Return true if item element is visible
+     * @param aElement - given item element */
+    ensureElementIsVisible(aElement)
+
+    /** Scroll list control to make visible item of given index
+     * @param aIndex - index of item element
+     *
+     * @note XXX: this method should be removed after bug 364612 is fixed
+     */
+    scrollToIndex(aIndex)
+
+    /** Create item element and append it to the end of listbox
+     * @param aLabel - label of new item element
+     * @param aValue - value of new item element */
+    appendItem(aLabel, aValue)
+
+    /** Create item element and insert it to given position
+     * @param aIndex - insertion position
+     * @param aLabel - label of new item element
+     * @param aValue - value of new item element */
+    insertItemAt(aIndex, aLabel, aValue)
+
+    /** Scroll up/down one page
+     * @param aDirection - specifies scrolling direction, should be either -1
+                           or 1 */
+    scrollOnePage(aDirection)
+
+    /** Fire "select" event */
+    _fireOnSelect()
+   -->
+   <binding id="listbox-base"
+            extends="chrome://global/content/bindings/general.xml#basecontrol">
+
+    <implementation implements="nsIDOMXULMultiSelectControlElement, nsIAccessibleProvider">
+
+    <!-- nsIAccessibleProvider -->
+      <property name="accessibleType" readonly="true">
+        <getter>
+          return Components.interfaces.nsIAccessibleProvider.XULListbox;
+        </getter>
+      </property>
+
+    <!-- nsIDOMXULSelectControlElement -->
+      <property name="selectedItem"
+                onset="this.selectItem(val);">
+        <getter>
+        <![CDATA[
+          return this.selectedItems.length > 0 ? this.selectedItems[0] : null;
+        ]]>
+        </getter>
+      </property>
+
+      <property name="selectedIndex">
+        <getter>
+        <![CDATA[
+          if (this.selectedItems.length > 0)
+            return this.getIndexOfItem(this.selectedItems[0]);
+          return -1;
+        ]]>
+        </getter>
+        <setter>
+        <![CDATA[
+          if (val >= 0)
+            this.selectItem(this.getItemAtIndex(val));
+          else
+            this.clearSelection();
+        ]]>
+        </setter>
+      </property>
+
+      <property name="value">
+        <getter>
+        <![CDATA[
+          if (this.selectedItems.length > 0)
+            return this.selectedItem.value;
+          return null;
+        ]]>
+        </getter>
+        <setter>
+        <![CDATA[
+          var kids = this.getElementsByAttribute("value", val);
+          if (kids && kids.item(0))
+            this.selectItem(kids[0]);
+          return val;
+        ]]>
+        </setter>
+      </property>
+
+      <method name="removeItemAt">
+        <parameter name="index"/>
+        <body>
+        <![CDATA[
+          var remove = this.getItemAtIndex(index);
+          if (remove)
+            this.removeChild(remove);
+          return remove;
+        ]]>
+        </body>
+      </method>
+
+    <!-- nsIDOMXULMultiSelectControlElement -->
+      <property name="selType"
+                onget="return this.getAttribute('seltype');"
+                onset="this.setAttribute('seltype', val); return val;"/>
+
+      <property name="currentItem" onget="return this._currentItem;">
+        <setter>
+          if (this._currentItem == val)
+            return val;
+
+          if (this._currentItem)
+            this._currentItem.current = false;
+          this._currentItem = val;
+
+          if (val)
+            val.current = true;
+
+          return val;
+        </setter>
+      </property>
+
+      <property name="currentIndex">
+        <getter>
+          return this.currentItem ? this.getIndexOfItem(this.currentItem) : -1;
+        </getter>
+        <setter>
+        <![CDATA[
+          if (val >= 0)
+            this.currentItem = this.getItemAtIndex(val);
+          else
+            this.currentItem = null;
+        ]]>
+        </setter>
+      </property>
+
+      <field name="selectedItems">[]</field>
+
+      <method name="addItemToSelection">
+        <parameter name="aItem"/>
+        <body>
+        <![CDATA[
+          if (this.selType != "multiple" && this.selectedCount)
+            return;
+
+          if (aItem.selected)
+            return;
+
+          this.selectedItems.push(aItem);
+          aItem.selected = true;
+
+          this._fireOnSelect();
+        ]]>
+        </body>
+      </method>
+
+      <method name="removeItemFromSelection">
+        <parameter name="aItem"/>
+        <body>
+        <![CDATA[
+          if (!aItem.selected)
+            return;
+
+          for (var i = 0; i < this.selectedItems.length; ++i) {
+            if (this.selectedItems[i] == aItem) {
+              this.selectedItems.splice(i, 1);
+              aItem.selected = false;
+              break;
+            }
+          }
+
+          this._fireOnSelect();
+        ]]>
+        </body>
+      </method>
+
+      <method name="toggleItemSelection">
+        <parameter name="aItem"/>
+        <body>
+        <![CDATA[
+          if (aItem.selected)
+            this.removeItemFromSelection(aItem);
+          else
+            this.addItemToSelection(aItem);
+        ]]>
+        </body>
+      </method>
+
+      <method name="selectItem">
+        <parameter name="aItem"/>
+        <body>
+        <![CDATA[
+          if (!aItem)
+            return;
+
+          if (this.selectedItems.length == 1 && this.selectedItems[0] == aItem)
+            return;
+
+          this._selectionStart = null;
+
+          var suppress = this._suppressOnSelect;
+          this._suppressOnSelect = true;
+
+          this.clearSelection();
+          this.addItemToSelection(aItem);
+          this.currentItem = aItem;
+
+          this._suppressOnSelect = suppress;
+          this._fireOnSelect();
+        ]]>
+        </body>
+      </method>
+
+      <method name="selectItemRange">
+        <parameter name="aStartItem"/>
+        <parameter name="aEndItem"/>
+        <body>
+        <![CDATA[
+          if (this.selType != "multiple")
+            return;
+
+          if (!aStartItem)
+            aStartItem = this._selectionStart ?
+              this._selectionStart : this.currentItem;
+
+          if (!aStartItem)
+            aStartItem = aEndItem;
+
+          var suppressSelect = this._suppressOnSelect;
+          this._suppressOnSelect = true;
+
+          this._selectionStart = aStartItem;
+
+          var currentItem;
+          var startIndex = this.getIndexOfItem(aStartItem);
+          var endIndex = this.getIndexOfItem(aEndItem);
+          if (endIndex < startIndex) {
+            currentItem = aEndItem;
+            aEndItem = aStartItem;
+            aStartItem = currentItem;
+          } else {
+            currentItem = aStartItem;
+          }
+
+          while (currentItem) {
+            this.addItemToSelection(currentItem);
+            if (currentItem == aEndItem) {
+              currentItem = this.getNextItem(currentItem, 1);
+              break;
+            }
+            currentItem = this.getNextItem(currentItem, 1);
+          }
+
+          // Clear around new selection
+          // Don't use clearSelection() because it causes a lot of noise
+          // with respect to selection removed notifications used by the
+          // accessibility API support.
+          for (; currentItem; currentItem = this.getNextItem(currentItem, 1))
+            this.removeItemFromSelection(currentItem);
+
+          for (currentItem = this.getItemAtIndex(0); currentItem != aStartItem;
+               currentItem = this.getNextItem(currentItem, 1))
+            this.removeItemFromSelection(currentItem);
+
+          this._suppressOnSelect = suppressSelect;
+
+          this._fireOnSelect();
+        ]]>
+        </body>
+      </method>
+
+      <method name="selectAll">
+        <body>
+          this._selectionStart = null;
+
+          var suppress = this._suppressOnSelect;
+          this._suppressOnSelect = true;
+
+          var item = this.getItemAtIndex(0);
+          while (item) {
+            this.addItemToSelection(item);
+            item = this.getNextItem(item, 1);
+          }
+
+          this._suppressOnSelect = suppress;
+          this._fireOnSelect();
+        </body>
+      </method>
+
+      <method name="invertSelection">
+        <body>
+          this._selectionStart = null;
+
+          var suppress = this._suppressOnSelect;
+          this._suppressOnSelect = true;
+
+          var item = this.getItemAtIndex(0);
+          while (item) {
+            if (item.selected)
+              this.removeItemFromSelection(item);
+            else
+              this.addItemToSelection(item);
+            item = this.getNextItem(item, 1);
+          }
+
+          this._suppressOnSelect = suppress;
+          this._fireOnSelect();
+        </body>
+      </method>
+
+      <method name="clearSelection">
+        <body>
+        <![CDATA[
+          if (this.selectedItems) {
+            for (var i = this.selectedItems.length - 1; i >= 0; --i)
+              this.selectedItems[i].selected = false;
+
+            this.selectedItems.splice(0, this.selectedItems.length);
+          }
+
+          this._selectionStart = null;
+          this._fireOnSelect();
+        ]]>
+        </body>
+      </method>
+
+      <property name="selectedCount" readonly="true"
+                onget="return this.selectedItems.length;"/>
+
+      <method name="getSelectedItem">
+        <parameter name="aIndex"/>
+        <body>
+        <![CDATA[
+          return aIndex < this.selectedItems.length ?
+            this.selectedItems[aIndex] : null;
+        ]]>
+        </body>
+      </method>
+
+    <!-- Other public members -->
+      <property name="disableKeyNavigation"
+                onget="return this.hasAttribute('disableKeyNavigation');">
+        <setter>
+          if (val)
+            this.setAttribute("disableKeyNavigation", "true");
+          else
+            this.removeAttribute("disableKeyNavigation");
+          return val;
+        </setter>
+      </property>
+
+      <property name="suppressOnSelect"
+                onget="return this.getAttribute('suppressonselect') == 'true';"
+                onset="this.setAttribute('suppressonselect', val);"/>
+
+      <property name="_selectDelay"
+                onset="this.setAttribute('_selectDelay', val);"
+                onget="return this.getAttribute('_selectDelay') || 50;"/>
+
+      <method name="timedSelect">
+        <parameter name="aItem"/>
+        <parameter name="aTimeout"/>
+        <body>
+        <![CDATA[
+          var suppress = this._suppressOnSelect;
+          if (aTimeout != -1)
+            this._suppressOnSelect = true;
+
+          this.selectItem(aItem);
+
+          this._suppressOnSelect = suppress;
+
+          if (aTimeout != -1) {
+            if (this._selectTimeout)
+              window.clearTimeout(this._selectTimeout);
+            this._selectTimeout =
+              window.setTimeout(this._selectTimeoutHandler, aTimeout, this);
+          }
+        ]]>
+        </body>
+      </method>
+
+      <method name="moveByOffset">
+        <parameter name="aOffset"/>
+        <parameter name="aIsSelecting"/>
+        <parameter name="aIsSelectingRange"/>
+        <body>
+        <![CDATA[
+          if ((aIsSelectingRange || !aIsSelecting) &&
+              this.selType != "multiple")
+            return;
+
+          var newIndex = this.currentIndex + aOffset;
+          if (newIndex < 0)
+            newIndex = 0;
+
+          var numItems = this.getRowCount();
+          if (newIndex > numItems - 1)
+            newIndex = numItems - 1;
+
+          var newItem = this.getItemAtIndex(newIndex);
+          if (newItem) {
+            this.ensureIndexIsVisible(newIndex);
+            if (aIsSelectingRange)
+              this.selectItemRange(null, newItem);
+            else if (aIsSelecting)
+              this.selectItem(newItem);
+
+            this.currentItem = newItem;
+          }
+        ]]>
+        </body>
+      </method>
+
+    <!-- Private -->
+      <method name="getNextItem">
+        <parameter name="aStartItem"/>
+        <parameter name="aDelta"/>
+        <body>
+        <![CDATA[
+          while (aStartItem) {
+            aStartItem = aStartItem.nextSibling;
+            if (aStartItem && aStartItem instanceof
+                Components.interfaces.nsIDOMXULSelectControlItemElement) {
+              --aDelta;
+              if (aDelta == 0)
+                return aStartItem;
+            }
+          }
+          return null;
+        ]]></body>
+      </method>
+
+      <method name="getPreviousItem">
+        <parameter name="aStartItem"/>
+        <parameter name="aDelta"/>
+        <body>
+        <![CDATA[
+          while (aStartItem) {
+            aStartItem = aStartItem.previousSibling;
+            if (aStartItem && aStartItem instanceof
+                Components.interfaces.nsIDOMXULSelectControlItemElement) {
+              --aDelta;
+              if (aDelta == 0)
+                return aStartItem;
+            }
+          }
+          return null;
+        ]]>
+        </body>
+      </method>
+
+      <method name="_selectTimeoutHandler">
+        <parameter name="aMe"/>
+        <body>
+          aMe._fireOnSelect();
+          aMe._selectTimeout = null;
+        </body>
+      </method>
+
+      <constructor>
+      <![CDATA[
+        var els = this.getElementsByAttribute("selected", "true");
+        for (var i = 0; i < els.length; ++i)
+          this.selectedItems.push(els[i]);
+      ]]>
+      </constructor>
+
+      <field name="_suppressOnSelect">false</field>
+      <field name="_selectTimeout">null</field>
+      <field name="_currentItem">null</field>
+      <field name="_selectionStart">null</field>
+    </implementation>
+  </binding>
+
+
+  <!-- Binding for xul:listbox element.
+  -->
+  <binding id="listbox"
+           extends="#listbox-base">
+
     <resources>
       <stylesheet src="chrome://global/skin/listbox.css"/>
     </resources>
-  </binding>
-  
-  <binding id="listbox"
-           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+
     <content>
       <children includes="listcols">
         <xul:listcols>
@@ -26,77 +570,23 @@
         </xul:listboxbody> 
       </xul:listrows>
     </content>
-    
-    <implementation implements="nsIDOMXULMultiSelectControlElement, nsIAccessibleProvider">
-      <field name="_suppressOnSelect">false</field>
-      <field name="_selectionStart">null</field>
-      <field name="_currentItem">null</field>
-      <field name="_selectTimeout">null</field>
+
+    <implementation>
       <field name="_lastKeyTime">0</field>
       <field name="_incrementalString">""</field>
 
-      <constructor>
-      <![CDATA[
-        var els = this.getElementsByAttribute("selected", "true");
-        for (var i = 0; i < els.length; ++i)
-          this.selectedItems.push(els[i]);
-      ]]>
-      </constructor>
-
-      <!-- ///////////////// nsIAccessibleProvider ///////////////// -->
-
-      <property name="accessibleType" readonly="true">
-        <getter>
-          <![CDATA[
-            return Components.interfaces.nsIAccessibleProvider.XULListbox;
-          ]]>
-        </getter>
-      </property>
-      
       <!-- ///////////////// public listbox members ///////////////// -->
 
       <property name="listBoxObject"
                 onget="return this.boxObject.QueryInterface(Components.interfaces.nsIListBoxObject);"
                 readonly="true"/>
 
-      <property name="disableKeyNavigation"
-                onget="return this.hasAttribute('disableKeyNavigation');"
-                onset="if (val) this.setAttribute('disableKeyNavigation', 'true');
-                       else this.removeAttribute('disableKeyNavigation'); return val;"/>
-
-      <property name="_selectDelay" 
-                onset="this.setAttribute('_selectDelay', val);"
-                onget="return this.getAttribute('_selectDelay') || 50;"/>
-
-      <method name="timedSelect">
-        <parameter name="item"/>
-        <parameter name="timeout"/>
-        <body>
-        <![CDATA[
-          var suppress = this._suppressOnSelect;
-          if (timeout != -1)
-            this._suppressOnSelect = true;
-          
-          this.selectItem(item);
-          
-          this._suppressOnSelect = suppress;         
-          
-          if (timeout != -1) {
-            if (this._selectTimeout)
-              window.clearTimeout(this._selectTimeout);
-              
-            this._selectTimeout = window.setTimeout(this._selectTimeoutHandler, timeout, this); 
-          }
-        ]]>
-        </body>
-      </method>      
-
       <!-- ///////////////// private listbox members ///////////////// -->
 
       <method name="_fireOnSelect">
         <body>
         <![CDATA[
-          if (!this._suppressOnSelect && this.getAttribute("suppressonselect") != "true") {
+          if (!this._suppressOnSelect && !this.suppressOnSelect) {
             var event = document.createEvent("Events");
             event.initEvent("select", true, true);
             this.dispatchEvent(event);
@@ -105,375 +595,51 @@
         </body>
       </method>
 
-      <method name="_selectTimeoutHandler">
-        <parameter name="me"/>
-        <body>
-        <![CDATA[
-          me._fireOnSelect();
-          me._selectTimeout = null;
-        ]]>
-        </body>
-      </method>      
-      
       <!-- ///////////////// nsIDOMXULSelectControlElement ///////////////// -->
 
-      <property name="selType"
-                onget="return this.getAttribute('seltype')"
-                onset="this.setAttribute('seltype', val); return val;"/>
-
-      <property name="selectedIndex">
-        <getter><![CDATA[
-          return this.selectedItems.length > 0 ? this.getIndexOfItem(this.selectedItems[0]) : -1;
-        ]]></getter>
-        <setter><![CDATA[
-          if (val >= 0)
-            this.selectItem(this.getItemAtIndex(val));
-          else
-            this.clearSelection();
-        ]]></setter>
-      </property>
-
-      <field name="selectedItems">[]</field>
-      <property name="selectedItem">
-        <getter><![CDATA[
-          return this.selectedItems.length > 0 ? this.selectedItems[0] : null;
-        ]]></getter>
-        <setter><![CDATA[
-          this.selectItem(val);
-        ]]></setter>
-      </property>
-
-      <property name="value">
-        <getter>
-          <![CDATA[
-            if (this.selectedItems.length > 0)
-              return this.selectedItem.value;
-            else
-              return null;
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            var kids = this.getElementsByAttribute("value", val);
-            if (kids && kids.item(0))
-              this.selectItem(kids[0]);
-            return val;
-          ]]>
-        </setter>
-      </property>
-
       <method name="appendItem">
-        <parameter name="label"/>
-        <parameter name="value"/>
+        <parameter name="aLabel"/>
+        <parameter name="aValue"/>
         <body>
-        <![CDATA[
-          var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-          var item = document.createElementNS(XULNS, "listitem");
-          item.setAttribute("label", label);
-          item.setAttribute("value", value);
+          const XULNS =
+            "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+          var item = this.ownerDocument.createElementNS(XULNS, "listitem");
+          item.setAttribute("label", aLabel);
+          item.setAttribute("value", aValue);
           this.appendChild(item);
           return item;
-        ]]>
         </body>
       </method>
-      
+
       <method name="insertItemAt">
-        <parameter name="index"/>
-        <parameter name="label"/>
-        <parameter name="value"/>
+        <parameter name="aIndex"/>
+        <parameter name="aLabel"/>
+        <parameter name="aValue"/>
         <body>
-        <![CDATA[
-          var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-          var item = document.createElementNS(XULNS, "listitem");
-          item.setAttribute("label", label);
-          item.setAttribute("value", value);
-          var before = this.getItemAtIndex(index);
+          const XULNS =
+            "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+          var item = this.ownerDocument.createElementNS(XULNS, "listitem");
+          item.setAttribute("label", aLabel);
+          item.setAttribute("value", aValue);
+          var before = this.getItemAtIndex(aIndex);
           if (before)
             this.insertBefore(item, before);
           else
             this.appendChild(item);
           return item;
-        ]]>
         </body>
       </method>
 
-      <method name="removeItemAt">
-        <parameter name="index"/>
-        <body>
-        <![CDATA[
-          var remove = this.getItemAtIndex(index);
-          if (remove)
-            this.removeChild(remove);
-          return remove;
-        ]]>
-        </body>
-      </method>
-      <!-- ///////////////// nsIDOMXULSelectMultipleControlElement ///////////////// -->
-
-      <property name="currentItem" onget="return this._currentItem;">
-        <setter>
-        <![CDATA[
-          if (this._currentItem)
-            this._currentItem.current = false;
-          this._currentItem = val;
-          if (val) {
-            val.current = true;  
-            var event = document.createEvent("Events");
-            event.initEvent("DOMMenuItemActive", true, true);
-            val.dispatchEvent(event);
-          }
-          return val;
-        ]]>
-        </setter>
-      </property>
-
-      <property name="currentIndex">
-        <getter><![CDATA[
-          return this.currentItem ? this.getIndexOfItem(this.currentItem) : -1;
-        ]]></getter>
-        <setter><![CDATA[
-          if (val >= 0)
-            this.currentItem = this.getItemAtIndex(val);
-          else
-            this.currentItem = null;
-        ]]></setter>
-      </property>
-
-      <property name="selectedCount" onget="return this.selectedItems.length;"/>
-      
-      <method name="getSelectedItem">
-        <parameter name="index"/>
-        <body>
-        <![CDATA[
-          return index < this.selectedItems.length ? this.selectedItems[index] : null;
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="addItemToSelection">
-        <parameter name="item"/>
-        <body>
-        <![CDATA[
-          if (this.selType != "multiple" && this.selectedCount)
-            return;
-
-          if (item.selected)
-            return;
-            
-          this.selectedItems.push(item);
-          item.selected = true;
-          
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="removeItemFromSelection">
-        <parameter name="item"/>
-        <body>
-        <![CDATA[
-          if (!item.selected)
-            return;
-            
-          for (var i = 0; i < this.selectedItems.length; ++i) {
-            if (this.selectedItems[i] == item) {
-              this.selectedItems.splice(i, 1);
-              item.selected = false;
-              break;
-            }
-          }
-              
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="toggleItemSelection">
-        <parameter name="item"/>
-        <body>
-        <![CDATA[
-          if (item.selected)
-            this.removeItemFromSelection(item);
-          else
-            this.addItemToSelection(item);
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="selectItem">
-        <parameter name="item"/>
-        <body>
-        <![CDATA[
-          if (!item)
-            return;
-            
-          if (this.selectedItems.length == 1 && this.selectedItems[0] == item)
-            return;
-          
-          this._selectionStart = null;
-          
-          var suppress = this._suppressOnSelect;
-          this._suppressOnSelect = true;
-
-          this.clearSelection();
-          this.addItemToSelection(item);
-          this.currentItem = item;
-          
-          this._suppressOnSelect = suppress;
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="selectItemRange">
-        <parameter name="startItem"/>
-        <parameter name="endItem"/>
-        <body>
-        <![CDATA[
-          if (this.selType != "multiple")
-            return;
-
-          if (!startItem)
-            startItem = this._selectionStart ? this._selectionStart : this.currentItem;
-          if (!startItem)
-            startItem = endItem;
-                      
-          var suppressSelect = this._suppressOnSelect;
-          this._suppressOnSelect = true;
-
-          this._selectionStart = startItem;
-          
-          var currentItem;
-          var startIndex = this.getIndexOfItem(startItem);
-          var endIndex = this.getIndexOfItem(endItem);
-          if (endIndex < startIndex) {
-            currentItem = endItem;
-            endItem = startItem;
-            startItem = currentItem;            
-          } else {
-            currentItem = startItem;
-          }
-
-          while (currentItem) {
-            if (currentItem.localName == "listitem")
-              this.addItemToSelection(currentItem);
-            if (currentItem == endItem) {
-              currentItem = this.getNextItem(currentItem, 1);
-              break;
-            }
-            currentItem = this.getNextItem(currentItem, 1);
-          }
-
-          // Clear around new selection
-          // Don't use clearSelection() because it causes a lot of noise
-          // with respect to selection removed notifications used by the
-          // accessibility API support.
-          for (; currentItem; currentItem = this.getNextItem(currentItem, 1))
-            this.removeItemFromSelection(currentItem);
-          for (currentItem = this.getItemAtIndex(0); currentItem != startItem;
-               currentItem = this.getNextItem(currentItem, 1))
-            this.removeItemFromSelection(currentItem);
-
-          this._suppressOnSelect = suppressSelect;
-
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="selectAll">
-        <body>
-        <![CDATA[
-          var suppress = this._suppressOnSelect;
-          this._suppressOnSelect = true;
-          
-          var item = this.getItemAtIndex(0);
-          while (item) {
-            this.addItemToSelection(item);
-            item = this.getNextItem(item, 1);  
-          }
-          
-          this._suppressOnSelect = suppress;
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="invertSelection">
-        <body>
-        <![CDATA[
-          var suppress = this._suppressOnSelect;
-          this._suppressOnSelect = true;
-          
-          var item = this.getItemAtIndex(0);
-          while (item) {
-            if (item.selected)
-              this.removeItemFromSelection(item);
-            else
-              this.addItemToSelection(item);
-            item = this.getNextItem(item, 1);  
-          }
-          
-          this._suppressOnSelect = suppress;
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
-      <method name="clearSelection">
-        <body>
-        <![CDATA[
-          if (this.selectedItems)
-          {
-            for (var i = this.selectedItems.length-1; i >= 0; --i)
-              this.selectedItems[i].selected = false;
-          
-            this.selectedItems.splice(0, this.selectedItems.length);
-          }
-          this._selectionStart = null;
-          this._fireOnSelect();
-        ]]>
-        </body>
-      </method>      
-      
       <!-- ///////////////// nsIListBoxObject ///////////////// -->
-      
-      <method name="getNextItem">
-        <parameter name="startItem"/>
-        <parameter name="delta"/>
-        <body><![CDATA[
-          while (startItem) {
-            startItem = startItem.nextSibling;
-            if (startItem && startItem.localName == "listitem") {
-              --delta;
-              if (delta == 0)
-                return startItem;
-            }
-          }
-          return null;
-        ]]></body>
-      </method>
-      <method name="getPreviousItem">
-        <parameter name="startItem"/>
-        <parameter name="delta"/>
-        <body><![CDATA[
-          while (startItem) {
-            startItem = startItem.previousSibling;
-            if (startItem && startItem.localName == "listitem") {
-              --delta;
-              if (delta == 0)
-                return startItem;
-            }
-          }
-          return null;
-        ]]></body>
-      </method>
       <method name="getIndexOfItem">
         <parameter name="item"/>
         <body>
           return this.listBoxObject.getIndexOfItem(item);
         </body>
       </method>
+
       <method name="getItemAtIndex">
         <parameter name="index"/>
         <body>
@@ -513,34 +679,7 @@
           return this.listBoxObject.getRowCount();
         </body>
       </method>
-      <method name="moveByOffset">
-        <parameter name="offset"/>
-        <parameter name="isSelecting"/>
-        <parameter name="isSelectingRange"/>
-        <body>
-          <![CDATA[
-            if ((isSelectingRange || !isSelecting) && this.selType != "multiple")
-              return;
-            var newIndex = this.currentIndex + offset;
-            if (newIndex < 0)
-              newIndex = 0;
-            var numItems = this.getRowCount();
-            if (newIndex > numItems - 1)
-              newIndex = numItems - 1;
-            var newItem = this.getItemAtIndex(newIndex);
-            if (newItem) {
-              this.ensureIndexIsVisible(newIndex);
-              if (isSelectingRange) {
-                this.selectItemRange(null, newItem);
-              }
-              else if (isSelecting) {
-                this.selectItem(newItem);
-              }
-              this.currentItem = newItem;
-            }
-          ]]>
-        </body>
-      </method>
+
       <method name="scrollOnePage">
         <parameter name="direction"/>  <!-- Must be -1 or 1 -->
         <body>      
@@ -590,6 +729,7 @@
           if (this.currentIndex == -1 && this.getRowCount() > 0) {
             this.currentIndex = this.getIndexOfFirstVisibleRow();
           }
+          this._lastKeyTime = 0;
         ]]>
       </handler>
       <handler event="keypress" key=" " modifiers="control" phase="target">
@@ -651,8 +791,12 @@
     </handlers>    
   </binding>
 
-  <binding id="listrows"
-           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+  <binding id="listrows">
+
+    <resources>
+      <stylesheet src="chrome://global/skin/listbox.css"/>
+    </resources>
+
     <handlers>
       <handler event="DOMMouseScroll" phase="capturing">
       <![CDATA[
@@ -689,6 +833,9 @@
             this.setAttribute("current", "true");
           else
             this.removeAttribute("current");
+
+          this._fireEvent(val ? "DOMMenuItemActive" : "DOMMenuItemInactive");
+
           return val;
         ]]></setter>
       </property>
@@ -717,10 +864,6 @@
           else
             this.removeAttribute("selected");
 
-          var event = document.createEvent("Events");
-          event.initEvent("DOMMenuItemActive", true, true);
-          this.dispatchEvent(event);
-
           return val;
         ]]></setter>
       </property>
@@ -729,25 +872,38 @@
         <getter><![CDATA[
           var parent = this.parentNode;
           while (parent) {
-            if (parent.localName == "listbox")
+            if (parent instanceof Components.interfaces.nsIDOMXULSelectControlElement)
               return parent;
             parent = parent.parentNode;
           }
           return null;
         ]]></getter>
       </property>
+
+      <method name="_fireEvent">
+        <parameter name="name"/>
+        <body>
+        <![CDATA[
+          var event = document.createEvent("Events");
+          event.initEvent(name, true, true);
+          this.dispatchEvent(event);
+        ]]>
+        </body>
+      </method>
     </implementation>
     <handlers>
       <!-- If there is no modifier key, we select on mousedown, not
            click, so that drags work correctly. -->
       <handler event="mousedown">
       <![CDATA[
-        if (this.parentNode.disabled) return;
+        var control = this.control;
+        if (!control || control.disabled)
+          return;
         if (!event.ctrlKey && !event.shiftKey && !event.metaKey) {
           if (!this.selected) {
-            parentNode.selectItem(this);
+            control.selectItem(this);
           }
-          parentNode.currentItem = this;
+          control.currentItem = this;
         }
       ]]>
       </handler>
@@ -756,17 +912,19 @@
            except this item. -->
       <handler event="click" button="0">
       <![CDATA[
-        if (this.parentNode.disabled) return;
-        if (parentNode.selType != "multiple") {
-          parentNode.selectItem(this);
+        var control = this.control;
+        if (!control || control.disabled)
+          return;
+        if (control.selType != "multiple") {
+          control.selectItem(this);
         }
         else if (event.ctrlKey || event.metaKey) {
-          parentNode.toggleItemSelection(this);
-          parentNode.currentItem = this;
+          control.toggleItemSelection(this);
+          control.currentItem = this;
         }
         else if (event.shiftKey) {
-          parentNode.selectItemRange(null, this);
-          parentNode.currentItem = this;
+          control.selectItemRange(null, this);
+          control.currentItem = this;
         }
         else {
           /* We want to deselect all the selected items except what was
@@ -774,24 +932,9 @@
             in click rather than mousedown so that you can drag a
             selected group of items */
 
-          var selectedItems = parentNode.selectedItems;
-          var didSuppressSelect = false;
-          var i = 0;
-          while (i < selectedItems.length) {
-            if (selectedItems[i] != this) {
-              if (!didSuppressSelect) {
-                parentNode._suppressOnSelect = true;
-                didSuppressSelect = true;
-              }
-              parentNode.removeItemFromSelection(selectedItems[i]);
-            }
-            else
-              i++;
-          }
-          if (didSuppressSelect) {
-            parentNode._suppressOnSelect = false;
-            parentNode._fireOnSelect();
-          }
+          // use selectItemRange instead of selectItem, because this
+          // doesn't de- and reselect this item if it is selected
+          control.selectItemRange(this, this);
         }
       ]]>
       </handler>
@@ -834,7 +977,7 @@
     <handlers> 
       <handler event="mousedown" button="0">
       <![CDATA[
-        if (!this.disabled && !this.parentNode.disabled)
+        if (!this.disabled && !this.control.disabled)
           this.checked = !this.checked;
       ]]>
       </handler>
@@ -851,7 +994,12 @@
   </binding>
   
   <binding id="listcell"
-           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+           extends="chrome://global/content/bindings/general.xml#basecontrol">
+
+    <resources>
+      <stylesheet src="chrome://global/skin/listbox.css"/>
+    </resources>
+
     <content>
       <children>
         <xul:label class="listcell-label" xbl:inherits="value=label,flex=flexlabel,crop,disabled" flex="1" crop="right"/>
@@ -890,8 +1038,12 @@
     </content>
   </binding>
 
-  <binding id="listhead"
-           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+  <binding id="listhead">
+
+    <resources>
+      <stylesheet src="chrome://global/skin/listbox.css"/>
+    </resources>
+
     <content>
       <xul:listheaditem>
         <children includes="listheader"/>
@@ -899,8 +1051,12 @@
     </content>
   </binding>
   
-  <binding id="listheader" display="xul:button"
-           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+  <binding id="listheader" display="xul:button">
+
+    <resources>
+      <stylesheet src="chrome://global/skin/listbox.css"/>
+    </resources>
+
     <content>
       <xul:image class="listheader-icon"/>
       <xul:label class="listheader-label" xbl:inherits="value=label,crop" flex="1" crop="right"/>
diff --git a/toolkit/content/widgets/richlistbox.xml b/toolkit/content/widgets/richlistbox.xml
index c0c72046064..0496913dbb1 100644
--- a/toolkit/content/widgets/richlistbox.xml
+++ b/toolkit/content/widgets/richlistbox.xml
@@ -22,6 +22,7 @@
    -
    - Contributor(s):
    -   Doron Rosenberg <doronr@us.ibm.com> (Original Author)
+   -   Simon Bünzli <zeniko@gmail.com>
    -
    - Alternatively, the contents of this file may be used under the terms of
    - either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -42,7 +43,12 @@
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
 
-  <binding id="richlistbox">
+  <binding id="richlistbox"
+           extends="chrome://global/content/bindings/listbox.xml#listbox-base">
+    <resources>
+      <stylesheet src="chrome://global/skin/richlistbox.css"/>
+    </resources>
+
     <content>
       <xul:scrollbox allowevents="true" orient="vertical" anonid="main-box"
                      flex="1" style="overflow: auto;">
@@ -50,11 +56,7 @@
       </xul:scrollbox>
     </content>
 
-    <resources>
-      <stylesheet src="chrome://global/skin/richlistbox.css"/>
-    </resources>
-
-    <implementation implements="nsIAccessibleProvider, nsIDOMXULSelectControlElement">
+    <implementation>
       <field name="scrollBoxObject">null</field>
       <constructor>
         <![CDATA[
@@ -74,187 +76,155 @@
           // remove the template build listener
           if (this.builder)
             this.builder.removeListener(this._builderListener);
-
-          this._selectedItem = null;
         ]]>
       </destructor>
 
-      <property name="accessibleType" readonly="true">
-        <getter>
-          <![CDATA[
-            return Components.interfaces.nsIAccessibleProvider.XULListbox;
-          ]]>
-        </getter>
-      </property>
-
-      <property name="children">
-        <getter>
-          <![CDATA[
-            var childNodes = [];
-            for (var i = 0; i < this.childNodes.length; ++i) {
-              if (this.childNodes[i] instanceof Components.interfaces.nsIDOMXULSelectControlItemElement)
-                childNodes.push(this.childNodes[i]);
-            }
-            return childNodes;
-          ]]>
-        </getter>
-      </property>
-
-      <field name="_builderListener">
-        <![CDATA[
-          ({
-            mOuter: this,
-            item: null,
-            willRebuild : function(builder) {},
-            didRebuild : function(builder) {
-              this.mOuter._refreshSelection();
-            }
-          });
-        ]]>
-      </field>
-
-      <method name="_refreshSelection">
+    <!-- Overriding baselistbox -->
+      <method name="_fireOnSelect">
         <body>
           <![CDATA[
-            // when this method is called, we know that either the selectedItem
-            // we have is null (ctor) or a reference to an element no longer in
-            // the DOM (template).
-
-            // fist look for a last-selected attribute
-            var lastSelected = this.getAttribute("last-selected");
-            if (lastSelected != "") {
-              var element = document.getElementById(lastSelected);
-
-              if (element) {
-                this.selectedItem = element;
-                if (!this._isItemVisible(this.selectedItem))
-                  this.scrollBoxObject.scrollToElement(this.selectedItem);
-                return;
-              }
-            }
-
-            // cache the selected index
-            var selectedIndex = this._selectedIndex;
-
-            // refreshes selection.  Called for example when a template rebuild
-            // happens.
-            if (this.selectedItem) {
-              if (this.selectedItem.hasAttribute("id")) {
-                var id = this.selectedItem.getAttribute("id");
-                var item = document.getElementById(id);
-
-                // if we find no item, clear selection so that the code at the bottom
-                // takes over
-                if (item) {
-                  this.selectedItem = item;
-                } else {
-                  this.clearSelection();
-                }
-              } else {
-                 // if no id, we clear selection so that the below code will select
-                 // based on the current index
-                 this.clearSelection();
-              }
-            }
-
-            // if we have no previously selected item or the above if check fails to
-            // find the previous node (which causes it to clear selection)
-            if (!this.selectedItem) {
-              // if the selectedIndex is larger than the row count, select the last
-              // item.
-              if (selectedIndex >= this.getRowCount())
-                this.selectedIndex = this.getRowCount() - 1;
-              else
-                this.selectedIndex = selectedIndex;
-
-              // XXX: downloadmanager needs the following line, else we scroll to
-              // the middle on inital load.
-              this.ensureSelectedElementIsVisible();
-            }
-          ]]>
-        </body>
-      </method>
-
-      <method name="fireActiveItemEvent">
-        <body>
-          <![CDATA[
-            if (this.selectedItem) {
-              var event = document.createEvent("Events");
-              event.initEvent("DOMMenuItemActive", true, true);
-              this.selectedItem.dispatchEvent(event);
-            }
-            return false;
-          ]]>
-        </body>
-      </method>
-
-      <field name="_selectedIndex">0</field>
-      <property name="selectedIndex">
-        <getter>
-          <![CDATA[
-            return this.getIndexOf(this.selectedItem);
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            if (val == -1) {
-              // clear selection
-              this.clearSelection();
-            } else if (val >= 0) {
-              // only set if we get an item returned
-              var item = this.getItemAtIndex(val);
-              if (item)
-                this.selectedItem = item;
-            }
-          ]]>
-        </setter>
-      </property>
-
-      <field name="_selectedItem">null</field>
-      <property name="selectedItem">
-        <getter>
-          return this._selectedItem;
-        </getter>
-        <setter>
-          <![CDATA[
-            if (this._selectedItem == val)
+            // make sure not to modify last-selected when suppressing select events
+            // (otherwise we'll lose the selection when a template gets rebuilt)
+            if (this._suppressOnSelect || this.suppressOnSelect)
               return;
 
-            this._setItemSelection(val);
+            // remember the current item and all selected items with IDs
+            var state = this.currentItem ? this.currentItem.id : "";
+            if (this.selType == "multiple" && this.selectedCount) {
+              function getId(aItem) { return aItem.id; }
+              state += " " + this.selectedItems.filter(getId).map(getId).join(" ");
+            }
+            if (state)
+              this.setAttribute("last-selected", state);
+            else
+              this.removeAttribute("last-selected");
 
-            if (val)
-              this.fireActiveItemEvent();
+            // preserve the index just in case no IDs are available
+            if (this.currentIndex > -1)
+              this._currentIndex = this.currentIndex + 1;
 
-            this._fireOnSelect();
+            var event = document.createEvent("Events");
+            event.initEvent("select", true, true);
+            this.dispatchEvent(event);
+
+            // always call this (allows a commandupdater without controller)
+            document.commandDispatcher.updateCommands("richlistbox-select");
           ]]>
-        </setter>
-      </property>
+        </body>
+      </method>
 
-      <!-- sets selection but doesn't cause any events -->
-      <method name="_setItemSelection">
+      <method name="appendItem">
+        <parameter name="aLabel"/>
+        <parameter name="aValue"/>
+        <body>
+          return this.insertItemAt(-1, aLabel, aValue);
+        </body>
+      </method>
+
+      <method name="insertItemAt">
+        <parameter name="aIndex"/>
+        <parameter name="aLabel"/>
+        <parameter name="aValue"/>
+        <body>
+          const XULNS =
+            "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+          var item =
+            this.ownerDocument.createElementNS(XULNS, "richlistitem");
+          item.setAttribute("value", aValue);
+
+          var label = this.ownerDocument.createElementNS(XULNS, "label");
+          label.setAttribute("value", aLabel);
+          label.setAttribute("flex", "1");
+          label.setAttribute("crop", "end");
+          item.appendChild(label);
+
+          var before = this.getItemAtIndex(aIndex);
+          if (!before)
+            this.appendChild(item);
+          else
+            this.insertBefore(item, before);
+
+          return item;
+        </body>
+      </method>
+
+      <method name="getIndexOfItem">
         <parameter name="aItem"/>
         <body>
           <![CDATA[
-            // unselect current item
-            if (this._selectedItem)
-              this._selectedItem.selected = false
+            // don't search the children, if we're looking for none of them
+            if (aItem == null)
+              return -1;
 
-            this._selectedItem = aItem;
-            this._selectedIndex = this.getIndexOf(aItem);
-            this.ensureSelectedElementIsVisible();
-
-            if (aItem) {
-              aItem.selected = true;
-              aItem.focus();
-            }
+            return this.children.indexOf(aItem);
           ]]>
         </body>
       </method>
 
-      <method name="clearSelection">
+      <method name="getItemAtIndex">
+        <parameter name="aIndex"/>
+        <body>
+          return this.children[aIndex] || null;
+        </body>
+      </method>
+
+      <method name="ensureIndexIsVisible">
+        <parameter name="aIndex"/>
         <body>
           <![CDATA[
-            this.selectedItem = null;
+            // work around missing implementation in scrollBoxObject
+            return this.ensureElementIsVisible(this.getItemAtIndex(aIndex));
+          ]]>
+        </body>
+      </method>
+
+      <method name="ensureElementIsVisible">
+        <parameter name="aElement"/>
+        <body>
+          <![CDATA[
+            if (aElement)
+              this.scrollBoxObject.ensureElementIsVisible(aElement);
+          ]]>
+        </body>
+      </method>
+
+      <method name="scrollToIndex">
+        <parameter name="aIndex"/>
+        <body>
+          <![CDATA[
+            var item = this.getItemAtIndex(aIndex);
+            if (item)
+              this.scrollBoxObject.scrollToElement(item);
+          ]]>
+        </body>
+      </method>
+
+      <method name="getNumberOfVisibleRows">
+        <!-- returns the number of currently visible rows                -->
+        <!-- don't rely on this function, if the items' height can vary! -->
+        <body>
+          <![CDATA[
+            var children = this.children;
+
+            for (var top = 0; top < children.length && !this._isItemVisible(children[top]); top++);
+            for (var ix = top; ix < children.length && this._isItemVisible(children[ix]); ix++);
+
+            return ix - top;
+          ]]>
+        </body>
+      </method>
+
+      <method name="getIndexOfFirstVisibleRow">
+        <body>
+          <![CDATA[
+            var children = this.children;
+
+            for (var ix = 0; ix < children.length; ix++)
+              if (this._isItemVisible(children[ix]))
+                return ix;
+
+            return -1;
           ]]>
         </body>
       </method>
@@ -267,34 +237,154 @@
         </body>
       </method>
 
-      <method name="goUp">
+      <method name="scrollOnePage">
+        <parameter name="aDirection"/> <!-- Must be -1 or 1 -->
         <body>
           <![CDATA[
-            // if nothing selected, we go from the bottom
-            for (var i = this.selectedItem ? this.selectedItem.previousSibling : this.lastChild; i; i = i.previousSibling) {
-              // could have a template element, which would be a sibling
-              if (i instanceof Components.interfaces.nsIDOMXULSelectControlItemElement) {
-                this.selectedItem = i;
-                return true;
-              }
+            var children = this.children;
+
+            if (children.length == 0)
+              return 0;
+
+            // If nothing is selected, we just select the first element
+            // at the extreme we're moving away from
+            if (!this.currentItem)
+              return aDirection == -1 ? children.length : 0;
+
+            // If the current item is visible, scroll by one page so that
+            // the new current item is at approximately the same position as
+            // the existing current item.
+            if (this._isItemVisible(this.currentItem))
+              this.scrollBoxObject.scrollBy(0, this.scrollBoxObject.height * aDirection);
+
+            // Figure out, how many items fully fit into the view port
+            // (including the currently selected one), and determine
+            // the index of the first one lying (partially) outside
+            var height = this.scrollBoxObject.height;
+            var border = this.currentItem.boxObject.y;
+            if (aDirection == -1)
+              border += this.currentItem.boxObject.height;
+            var index = this.currentIndex;
+            while (0 <= index && index < children.length) {
+              var border2 = children[index].boxObject.y;
+              if (aDirection == -1)
+                border2 += children[index].boxObject.height;
+              if ((border2 - border) * aDirection > height)
+                break;
+              index += aDirection;
             }
-            return false;
+            index -= aDirection;
+
+            return index != this.currentIndex ? index - this.currentIndex : aDirection;
           ]]>
         </body>
       </method>
 
-      <method name="goDown">
+    <!-- richlistbox specific -->
+      <property name="children" readonly="true">
+        <getter>
+          <![CDATA[
+            var childNodes = [];
+            for (var child = this.firstChild; child; child = child.nextSibling) {
+              if (child instanceof Components.interfaces.nsIDOMXULSelectControlItemElement)
+                childNodes.push(child);
+            }
+            return childNodes;
+          ]]>
+        </getter>
+      </property>
+
+      <field name="_builderListener" readonly="true">
+        <![CDATA[
+          ({
+            mOuter: this,
+            item: null,
+            willRebuild: function(builder) { },
+            didRebuild: function(builder) {
+              this.mOuter._refreshSelection();
+            }
+          });
+        ]]>
+      </field>
+
+      <method name="_refreshSelection">
         <body>
           <![CDATA[
-            // if nothing selected, we go from the top
-            for (var i = this.selectedItem ? this.selectedItem.nextSibling : this.firstChild; i; i = i.nextSibling) {
-              // could have a template element, which would be a sibling
-              if (i instanceof Components.interfaces.nsIDOMXULSelectControlItemElement) {
-                this.selectedItem = i;
-                return true;
+            // when this method is called, we know that either the currentItem
+            // and selectedItems we have are null (ctor) or a reference to an
+            // element no longer in the DOM (template).
+
+            // first look for the last-selected attribute
+            var state = this.getAttribute("last-selected");
+            if (state) {
+              var ids = state.split(" ");
+
+              var suppressSelect = this._suppressOnSelect;
+              this._suppressOnSelect = true;
+              this.clearSelection();
+              for (var i = 1; i < ids.length; i++) {
+                var selectedItem = document.getElementById(ids[i]);
+                if (selectedItem)
+                  this.addItemToSelection(selectedItem);
+              }
+
+              var currentItem = document.getElementById(ids[0]);
+              if (!currentItem && this._currentIndex)
+                currentItem = this.getItemAtIndex(Math.min(
+                  this._currentIndex - 1, this.getRowCount()));
+              if (currentItem) {
+                this.currentItem = currentItem;
+                if (this.selType != "multiple" && this.selectedCount == 0)
+                  this.selectedItem = currentItem;
+
+                if (this.scrollBoxObject.height)
+                  this.ensureElementIsVisible(currentItem);
+                else // XXX hack around a bug in ensureElementIsVisible
+                  this.ensureElementIsVisible(currentItem.previousSibling);
+              }
+              this._suppressOnSelect = suppressSelect;
+              // XXX actually it's just a refresh, but at least
+              // the Extensions manager expects this:
+              this._fireOnSelect();
+              return;
+            }
+
+            // try to restore the selected items according to their IDs
+            // (applies after a template rebuild, if last-selected was not set)
+            if (this.selectedItems) {
+              for (i = this.selectedCount - 1; i >= 0; i--) {
+                if (this.selectedItems[i] && this.selectedItems[i].id)
+                  this.selectedItems[i] = document.getElementById(this.selectedItems[i].id);
+                else
+                  this.selectedItems[i] = null;
+                if (!this.selectedItems[i])
+                  this.selectedItems.splice(i, 1);
               }
             }
-            return false;
+            if (this.currentItem && this.currentItem.id)
+              this.currentItem = document.getElementById(this.currentItem.id);
+            else
+              this.currentItem = null;
+
+            // if we have no previously current item or if the above check fails to
+            // find the previous nodes (which causes it to clear selection)
+            if (!this.currentItem && this.selectedCount == 0) {
+              this.currentIndex = this._currentIndex ? this._currentIndex - 1 : 0;
+
+              // cf. listbox constructor:
+              // select items according to their attributes
+              var els = this.getElementsByAttribute("selected", "true");
+              for (i = 0; i < els.length; i++)
+                this.selectedItems.push(els[i]);
+            }
+
+            if (this.selType != "multiple" && this.selectedCount == 0)
+              this.selectedItem = this.currentItem;
+
+            // XXX hack for the Downloads manager (better to focus the list than
+            // the individual items - these usually aren't tabbable anyway, and
+            // we need the keyboard focus for navigation), see bug 363271:
+            this.focus();
           ]]>
         </body>
       </method>
@@ -317,148 +407,88 @@
         </body>
       </method>
 
-      <method name="scrollOnePage">
-        <parameter name="aDirection"/> <!-- Must be -1 or 1 -->
-        <body>
-          <![CDATA[
-            var children = this.children;
-
-            if (children.length == 0)
-              return false;
-
-            var index = children.indexOf(this.selectedItem);
-
-            // If nothing is selected, we just select the first element
-            // at the extreme we're moving away from
-            if (index == -1) {
-              index = aDirection == -1 ? children.length - 1 : 0;
-              this.selectedItem = children[index];
-              return true;
-            }
-
-            // If the selected item is visible, we scroll by one page so that
-            // the newly selected item is at approximately the same position as
-            // the currently selected one
-            var currentItem = children[index];
-            if (this._isItemVisible(currentItem))
-              this.scrollBoxObject.scrollBy(0, this.scrollBoxObject.height * aDirection);
-
-            // Figure out, how many items fully fit into the view port
-            // (including the currently selected one), and determine
-            // the index of the first one lying (partially) outside
-            var height = this.scrollBoxObject.height;
-            var border = currentItem.boxObject.y;
-            if (aDirection == -1)
-              border += currentItem.boxObject.height;
-            while (index >= 0 && index < children.length) {
-              var border2 = children[index].boxObject.y;
-              if (aDirection == -1)
-                border2 += children[index].boxObject.height;
-              if ((border2 - border) * aDirection > height)
-                break;
-              index += aDirection;
-            }
-            index -= aDirection;
-
-            if (this.selectedItem != children[index]) {
-              this.selectedItem = children[index];
-              return true;
-            }
-
-            // Move by at least one item if the view port is too small
-            if (aDirection == -1)
-              return this.goUp();
-
-            return this.goDown();
-          ]]>
-        </body>
-      </method>
-
-      <method name="getItemAtIndex">
-        <parameter name="aIndex"/>
-        <body>
-          <![CDATA[
-            return this.children[aIndex];
-          ]]>
-        </body>
-      </method>
+      <field name="_currentIndex">null</field>
 
+      <!-- For backwards-compatibility and for convenience.
+        Use getIndexOfItem instead. -->
       <method name="getIndexOf">
         <parameter name="aElement"/>
         <body>
           <![CDATA[
-            // don't search the children, if we're looking for none of them
-            if (aElement == null)
-              return -1;
-
-            return this.children.indexOf(aElement);
-          ]]>
-        </body>
-      </method>
-
-      <method name="ensureElementIsVisible">
-        <parameter name="aElement"/>
-        <body>
-          <![CDATA[
-            if (aElement)
-              this.scrollBoxObject.ensureElementIsVisible(aElement);
+            return this.getIndexOfItem(aElement);
           ]]>
         </body>
       </method>
 
+      <!-- For backwards-compatibility and for convenience.
+        Use ensureElementIsVisible instead -->
       <method name="ensureSelectedElementIsVisible">
         <body>
           <![CDATA[
-	    if (this.selectedItem) {
-              this.ensureElementIsVisible(this.selectedItem);
-	    }
+            return this.ensureElementIsVisible(this.selectedItem);
           ]]>
         </body>
       </method>
 
-      <property name="suppressOnSelect">
-        <getter>
-          <![CDATA[
-            return this.getAttribute("suppressonselect") == "true";
-          ]]>
-        </getter>
-      </property>
-
-      <method name="_fireOnSelect">
+      <!-- For backwards-compatibility and for convenience.
+        Use moveByOffset instead. -->
+      <method name="goUp">
         <body>
           <![CDATA[
-            if (this.selectedItem)
-              this.setAttribute("last-selected", this.selectedItem.getAttribute("id"));
-            else
-              this.removeAttribute("last-selected");
-
-            if (!this.suppressOnSelect) {
-              var event = document.createEvent("Events");
-              event.initEvent("select", true, true);
-              this.dispatchEvent(event);
-
-              // if we have controllers, notify the command dispatcher
-              if (this.controllers.getControllerCount() > 0)
-                document.commandDispatcher.updateCommands("richlistbox-select");
-            }
+            var index = this.currentIndex;
+            this.moveByOffset(-1, true, false);
+            return index != this.currentIndex;
           ]]>
         </body>
       </method>
+      <method name="goDown">
+        <body>
+          <![CDATA[
+            var index = this.currentIndex;
+            this.moveByOffset(1, true, false);
+            return index != this.currentIndex;
+          ]]>
+        </body>
+      </method>
+
+      <!-- deprecated (is implied by currentItem and selectItem) -->
+      <method name="fireActiveItemEvent"><body/></method>
     </implementation>
 
     <handlers>
-      <handler event="keypress" keycode="VK_UP" action="goUp(); event.preventDefault();"/>
-      <handler event="keypress" keycode="VK_DOWN" action="goDown(); event.preventDefault();"/>
-      <handler event="keypress" keycode="VK_PAGE_UP" action="scrollOnePage(-1); event.preventDefault();"/>
-      <handler event="keypress" keycode="VK_PAGE_DOWN" action="scrollOnePage(1); event.preventDefault();"/>
-      <handler event="keypress" keycode="VK_HOME" action="clearSelection(); goDown(); event.preventDefault();"/>
-      <handler event="keypress" keycode="VK_END" action="clearSelection(); goUp(); event.preventDefault();"/>
+      <!-- handle keyboard navigation also when a child element has got the focus -->
+      <handler event="keypress" keycode="VK_UP"
+               modifiers="control shift any"
+               action="this.moveByOffset(-1, !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
+      <handler event="keypress" keycode="VK_DOWN"
+               modifiers="control shift any"
+               action="this.moveByOffset(1, !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
+      <handler event="keypress" keycode="VK_HOME"
+               modifiers="control shift any"
+               action="this.moveByOffset(-this.currentIndex, !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
+      <handler event="keypress" keycode="VK_END"
+               modifiers="control shift any"
+               action="this.moveByOffset(this.getRowCount(), !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
+      <handler event="keypress" keycode="VK_PAGE_UP"
+               modifiers="control shift any"
+               action="this.moveByOffset(this.scrollOnePage(-1), !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
+      <handler event="keypress" keycode="VK_PAGE_DOWN"
+               modifiers="control shift any"
+               action="this.moveByOffset(this.scrollOnePage(1), !event.ctrlKey, event.shiftKey);"
+               preventdefault="true"/>
 
       <handler event="click">
         <![CDATA[
           // clicking into nothing should unselect
-          if (event.originalTarget.getAttribute("anonid") == "main-box")
+          if (event.originalTarget.getAttribute("anonid") == "main-box") {
             this.clearSelection();
+            this.currentItem = null;
+          }
         ]]>
       </handler>
       <handler event="contextmenu">
@@ -468,119 +498,70 @@
           if (event.button != 2) {
             var popup = document.getElementById(this.getAttribute("context"));
             if (popup)
-              popup.showPopup(this.selectedItem, -1, -1, "context", "bottomleft", "topleft");
+              popup.showPopup(this.currentItem, -1, -1, "context", "bottomleft", "topleft");
           }
         ]]>
       </handler>
-      <handler event="focus">
-        <![CDATA[
-          if (event.target == this)
-            this.fireActiveItemEvent();
-        ]]>
-      </handler>
     </handlers>
   </binding>
 
   <binding id="richlistitem"
-           extends="chrome://global/content/bindings/general.xml#basecontrol">
+           extends="chrome://global/content/bindings/listbox.xml#listitem">
     <content>
-      <children />
+      <children/>
     </content>
 
     <resources>
       <stylesheet src="chrome://global/skin/richlistbox.css"/>
     </resources>
 
-    <implementation implements="nsIAccessibleProvider, nsIDOMXULSelectControlItemElement">
+    <implementation>
       <destructor>
         <![CDATA[
-          // When we are destructed and we are selected, unselect ourselves so
-          // that richlistbox's selection doesn't point to something not in the DOM.
-          // We don't want to reset last-selected, so we don't call clearSelection().
+          var control = this.control;
+          if (!control)
+            return;
+          // When we are destructed and we are current or selected, unselect ourselves
+          // so that richlistbox's selection doesn't point to something not in the DOM.
+          // We don't want to reset last-selected, so we set _suppressOnSelect.
           if (this.selected) {
-            this.control._setItemSelection(null);
+            var suppressSelect = control._suppressOnSelect;
+            control._suppressOnSelect = true;
+            control.removeItemFromSelection(this);
+            control._suppressOnSelect = suppressSelect;
           }
+          if (this.current)
+            control.currentItem = null;
         ]]>
       </destructor>
 
-      <!-- ///////////////// nsIAccessibleProvider ///////////////// -->
-      <property name="accessibleType" readonly="true">
-        <getter>
-          <![CDATA[
-            return Components.interfaces.nsIAccessibleProvider.XULListitem;
-          ]]>
-        </getter>
-      </property>
-      <!-- ///////////////// nsIDOMXULSelectControlItemElement ///////////////// -->
-
-      <property name="value" onget="return this.getAttribute('value');"
-                             onset="this.setAttribute('value', val); return val;"/>
-
-      <property name="label">
+      <property name="label" readonly="true">
         <!-- Setter purposely not implemented; the getter returns a
-             concatentation of label text to expose via accessibility APIs-->
+             concatentation of label text to expose via accessibility APIs -->
         <getter>
           <![CDATA[
+            const XULNS =
+              "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
             var labelText = "";
-            var startEl = document.getAnonymousNodes(this)[0];
-            if (startEl) {
-              var labels = 
-                startEl.getElementsByTagNameNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul',
-                                              'label');
-              var numLabels = labels.length;
-              for (count = 0; count < numLabels; count ++) {
-                var label = labels[count];
-                if (!label.collapsed && !label.hidden &&
-                    label.className != 'text-link') {
-                  labelText += label.value + ' ';
-                }
-              }
-            }
+            var startEl = document.getAnonymousNodes(this);
+            if (!startEl.length)
+              startEl = [this];
+            var labels = startEl[0].getElementsByTagNameNS(XULNS, "label");
+            for (var count = 0; count < labels.length; count++)
+              labelText += labels[count].value + " ";
             return labelText;
           ]]>
         </getter>
       </property>
-
-      <property name="selected"
-                onget="return this.getAttribute('selected') == 'true';"
-                onset="return this.setAttribute('selected',val);"/>
-
-      <property name="control">
-        <getter>
-          <![CDATA[
-            var parent = this.parentNode;
-            while (parent) {
-              if (parent instanceof Components.interfaces.nsIDOMXULSelectControlElement)
-                return parent;
-              parent = parent.parentNode;
-            }
-            return null;
-          ]]>
-        </getter>
-      </property>
     </implementation>
 
     <handlers>
-      <handler event="click">
-        <![CDATA[
-          var listbox = this.control;
-          if ((event.target == this) && event.ctrlKey && (listbox.selectedItem == this)) {
-            listbox.clearSelection();
-          } else {
-            listbox.selectedItem = this;
-          }
-        ]]>
-      </handler>
       <handler event="contextmenu" phase="capturing">
         <![CDATA[
-          // This needed to be called before the contextmenu gets shown to handle
-          // someone rightclicking on an unselected item
-          if (event.target == this) {
-            var listbox = this.control;
-            if (listbox) {
-              listbox.selectedItem = this;
-            }
-          }
+          // handle someone right-clicking on an item other than the current one
+          if (event.target == this && this.control)
+            this.control.currentItem = this;
         ]]>
       </handler>
     </handlers>
diff --git a/toolkit/themes/pinstripe/global/richlistbox.css b/toolkit/themes/pinstripe/global/richlistbox.css
index 2db665d1cc2..468b56de953 100644
--- a/toolkit/themes/pinstripe/global/richlistbox.css
+++ b/toolkit/themes/pinstripe/global/richlistbox.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Doron Rosenberg <doronr@us.ibm.com> (original author)
+ *   Simon Bünzli <zeniko@gmail.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -38,6 +39,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 richlistbox {
+  margin: 2px 4px;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
@@ -47,7 +49,21 @@ richlistbox[disabled="true"] {
 }
 
 richlistitem[selected="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+richlistbox:focus > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
 
+richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] {
+  outline: 1px dotted Highlight;
+  -moz-outline-offset: -1px;
+}
+
+richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] {
+  outline: 1px dotted #F3D982; /* TODO: find a suitable system color */
+}
+
diff --git a/toolkit/themes/winstripe/global/richlistbox.css b/toolkit/themes/winstripe/global/richlistbox.css
index 2db665d1cc2..468b56de953 100644
--- a/toolkit/themes/winstripe/global/richlistbox.css
+++ b/toolkit/themes/winstripe/global/richlistbox.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Doron Rosenberg <doronr@us.ibm.com> (original author)
+ *   Simon Bünzli <zeniko@gmail.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -38,6 +39,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 richlistbox {
+  margin: 2px 4px;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
@@ -47,7 +49,21 @@ richlistbox[disabled="true"] {
 }
 
 richlistitem[selected="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+richlistbox:focus > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
 
+richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] {
+  outline: 1px dotted Highlight;
+  -moz-outline-offset: -1px;
+}
+
+richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] {
+  outline: 1px dotted #F3D982; /* TODO: find a suitable system color */
+}
+