michael@0: <?xml version="1.0"?>
michael@0: 
michael@0: # -*- Mode: HTML -*-
michael@0: # This Source Code Form is subject to the terms of the Mozilla Public
michael@0: # License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0: # file, You can obtain one at http://mozilla.org/MPL/2.0/.
michael@0: 
michael@0: <!DOCTYPE bindings [
michael@0: <!ENTITY % actionsDTD SYSTEM "chrome://global/locale/actions.dtd">
michael@0: %actionsDTD;
michael@0: ]>
michael@0: 
michael@0: <bindings id="autocompleteBindings"
michael@0:           xmlns="http://www.mozilla.org/xbl"
michael@0:           xmlns:html="http://www.w3.org/1999/xhtml"
michael@0:           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:           xmlns:xbl="http://www.mozilla.org/xbl">
michael@0: 
michael@0:   <binding id="autocomplete" role="xul:combobox"
michael@0:            extends="chrome://global/content/bindings/textbox.xml#textbox">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/autocomplete.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content sizetopopup="pref">
michael@0:       <xul:hbox class="autocomplete-textbox-container" flex="1" xbl:inherits="focused">
michael@0:         <children includes="image|deck|stack|box">
michael@0:           <xul:image class="autocomplete-icon" allowevents="true"/>
michael@0:         </children>
michael@0: 
michael@0:         <xul:hbox anonid="textbox-input-box" class="textbox-input-box" flex="1" xbl:inherits="tooltiptext=inputtooltiptext">
michael@0:           <children/>
michael@0:           <html:input anonid="input" class="autocomplete-textbox textbox-input"
michael@0:                       allowevents="true"
michael@0:                       xbl:inherits="tooltiptext=inputtooltiptext,value,type,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,mozactionhint"/>
michael@0:         </xul:hbox>
michael@0:         <children includes="hbox"/>
michael@0:       </xul:hbox>
michael@0: 
michael@0:       <xul:dropmarker anonid="historydropmarker" class="autocomplete-history-dropmarker"
michael@0:                       allowevents="true"
michael@0:                       xbl:inherits="open,enablehistory,parentfocused=focused"/>
michael@0: 
michael@0:       <xul:popupset anonid="popupset" class="autocomplete-result-popupset"/>
michael@0: 
michael@0:       <children includes="toolbarbutton"/>
michael@0:     </content>
michael@0: 
michael@0:     <implementation implements="nsIAutoCompleteInput, nsIDOMXULMenuListElement">
michael@0:       <field name="mController">null</field>
michael@0:       <field name="mSearchNames">null</field>
michael@0:       <field name="mIgnoreInput">false</field>
michael@0:       <field name="mEnterEvent">null</field>
michael@0: 
michael@0:       <field name="_searchBeginHandler">null</field>
michael@0:       <field name="_searchCompleteHandler">null</field>
michael@0:       <field name="_textEnteredHandler">null</field>
michael@0:       <field name="_textRevertedHandler">null</field>
michael@0: 
michael@0:       <constructor><![CDATA[
michael@0:         this.mController = Components.classes["@mozilla.org/autocomplete/controller;1"].
michael@0:           getService(Components.interfaces.nsIAutoCompleteController);
michael@0: 
michael@0:         this._searchBeginHandler = this.initEventHandler("searchbegin");
michael@0:         this._searchCompleteHandler = this.initEventHandler("searchcomplete");
michael@0:         this._textEnteredHandler = this.initEventHandler("textentered");
michael@0:         this._textRevertedHandler = this.initEventHandler("textreverted");
michael@0: 
michael@0:         // For security reasons delay searches on pasted values.
michael@0:         this.inputField.controllers.insertControllerAt(0, this._pasteController);
michael@0:       ]]></constructor>
michael@0: 
michael@0:       <destructor><![CDATA[
michael@0:         this.inputField.controllers.removeController(this._pasteController);
michael@0:       ]]></destructor>
michael@0: 
michael@0:       <!-- =================== nsIAutoCompleteInput =================== -->
michael@0: 
michael@0:       <field name="popup"><![CDATA[
michael@0:         // Wrap in a block so that the let statements don't
michael@0:         // create properties on 'this' (bug 635252).
michael@0:         {
michael@0:           let popup = null;
michael@0:           let popupId = this.getAttribute("autocompletepopup");
michael@0:           if (popupId)
michael@0:             popup = document.getElementById(popupId);
michael@0:           if (!popup) {
michael@0:             popup = document.createElement("panel");
michael@0:             popup.setAttribute("type", "autocomplete");
michael@0:             popup.setAttribute("noautofocus", "true");
michael@0: 
michael@0:             let popupset = document.getAnonymousElementByAttribute(this, "anonid", "popupset");
michael@0:             popupset.appendChild(popup);
michael@0:           }
michael@0:           popup.mInput = this;
michael@0:           popup;
michael@0:         }
michael@0:       ]]></field>
michael@0: 
michael@0:       <property name="controller" onget="return this.mController;" readonly="true"/>
michael@0: 
michael@0:       <property name="popupOpen"
michael@0:                 onget="return this.popup.popupOpen;"
michael@0:                 onset="if (val) this.openPopup(); else this.closePopup();"/>
michael@0: 
michael@0:       <property name="disableAutoComplete"
michael@0:                 onset="this.setAttribute('disableautocomplete', val); return val;"
michael@0:                 onget="return this.getAttribute('disableautocomplete') == 'true';"/>
michael@0: 
michael@0:       <property name="completeDefaultIndex"
michael@0:                 onset="this.setAttribute('completedefaultindex', val); return val;"
michael@0:                 onget="return this.getAttribute('completedefaultindex') == 'true';"/>
michael@0: 
michael@0:       <property name="completeSelectedIndex"
michael@0:                 onset="this.setAttribute('completeselectedindex', val); return val;"
michael@0:                 onget="return this.getAttribute('completeselectedindex') == 'true';"/>
michael@0: 
michael@0:       <property name="forceComplete"
michael@0:                 onset="this.setAttribute('forcecomplete', val); return val;"
michael@0:                 onget="return this.getAttribute('forcecomplete') == 'true';"/>
michael@0: 
michael@0:       <property name="minResultsForPopup"
michael@0:                 onset="this.setAttribute('minresultsforpopup', val); return val;"
michael@0:                 onget="var m = parseInt(this.getAttribute('minresultsforpopup')); return isNaN(m) ? 1 : m;"/>
michael@0: 
michael@0:       <property name="showCommentColumn"
michael@0:                 onset="this.setAttribute('showcommentcolumn', val); return val;"
michael@0:                 onget="return this.getAttribute('showcommentcolumn') == 'true';"/>
michael@0: 
michael@0:       <property name="showImageColumn"
michael@0:                 onset="this.setAttribute('showimagecolumn', val); return val;"
michael@0:                 onget="return this.getAttribute('showimagecolumn') == 'true';"/>
michael@0: 
michael@0:       <property name="timeout"
michael@0:                 onset="this.setAttribute('timeout', val); return val;">
michael@0:         <getter><![CDATA[
michael@0:           // For security reasons delay searches on pasted values. 
michael@0:           if (this._valueIsPasted) {
michael@0:             let t = parseInt(this.getAttribute('pastetimeout'));
michael@0:             return isNaN(t) ? 1000 : t;
michael@0:           }
michael@0: 
michael@0:           let t = parseInt(this.getAttribute('timeout'));
michael@0:           return isNaN(t) ? 50 : t;
michael@0:         ]]></getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="searchParam"
michael@0:                 onget="return this.getAttribute('autocompletesearchparam') || '';"
michael@0:                 onset="this.setAttribute('autocompletesearchparam', val); return val;"/>
michael@0: 
michael@0:       <property name="searchCount" readonly="true"
michael@0:                 onget="this.initSearchNames(); return this.mSearchNames.length;"/>
michael@0: 
michael@0:       <field name="PrivateBrowsingUtils" readonly="true">
michael@0:         let utils = {};
michael@0:         Components.utils.import("resource://gre/modules/PrivateBrowsingUtils.jsm", utils);
michael@0:         utils.PrivateBrowsingUtils
michael@0:       </field>
michael@0: 
michael@0:       <property name="inPrivateContext" readonly="true"
michael@0:                 onget="return this.PrivateBrowsingUtils.isWindowPrivate(window);"/>
michael@0: 
michael@0:       <!-- This is the maximum number of drop-down rows we get when we
michael@0:             hit the drop marker beside fields that have it (like the URLbar).-->
michael@0:       <field name="maxDropMarkerRows" readonly="true">14</field>
michael@0: 
michael@0:       <method name="getSearchAt">
michael@0:         <parameter name="aIndex"/>
michael@0:         <body><![CDATA[
michael@0:           this.initSearchNames();
michael@0:           return this.mSearchNames[aIndex];
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <property name="textValue"
michael@0:                 onget="return this.value;">
michael@0:         <setter><![CDATA[
michael@0:           // Completing a result should simulate the user typing the result,
michael@0:           // so fire an input event.
michael@0:           // Trim popup selected values, but never trim results coming from
michael@0:           // autofill.
michael@0:           if (this.popup.selectedIndex == -1)
michael@0:             this._disableTrim = true;
michael@0:           this.value = val;
michael@0:           this._disableTrim = false;
michael@0: 
michael@0:           var evt = document.createEvent("UIEvents");
michael@0:           evt.initUIEvent("input", true, false, window, 0);
michael@0:           this.mIgnoreInput = true;
michael@0:           this.dispatchEvent(evt);
michael@0:           this.mIgnoreInput = false;
michael@0:           return this.value;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="selectTextRange">
michael@0:         <parameter name="aStartIndex"/>
michael@0:         <parameter name="aEndIndex"/>
michael@0:         <body><![CDATA[
michael@0:           this.inputField.setSelectionRange(aStartIndex, aEndIndex);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onSearchBegin">
michael@0:         <body><![CDATA[
michael@0:           if (this._searchBeginHandler)
michael@0:             this._searchBeginHandler();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onSearchComplete">
michael@0:         <body><![CDATA[
michael@0:           if (this.mController.matchCount == 0)
michael@0:             this.setAttribute("nomatch", "true");
michael@0:           else
michael@0:             this.removeAttribute("nomatch");
michael@0: 
michael@0:           if (this._searchCompleteHandler)
michael@0:             this._searchCompleteHandler();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onTextEntered">
michael@0:         <body><![CDATA[
michael@0:           let rv = false;
michael@0:           if (this._textEnteredHandler)
michael@0:             rv = this._textEnteredHandler(this.mEnterEvent);
michael@0:           this.mEnterEvent = null;
michael@0:           return rv;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onTextReverted">
michael@0:         <body><![CDATA[
michael@0:           if (this._textRevertedHandler)
michael@0:             return this._textRevertedHandler();
michael@0:           return false;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- =================== nsIDOMXULMenuListElement =================== -->
michael@0: 
michael@0:       <property name="editable" readonly="true"
michael@0:                 onget="return true;" />
michael@0: 
michael@0:       <property name="crop"
michael@0:                 onset="this.setAttribute('crop',val); return val;"
michael@0:                 onget="return this.getAttribute('crop');"/>
michael@0: 
michael@0:       <property name="open"
michael@0:                 onget="return this.getAttribute('open') == 'true';">
michael@0:         <setter><![CDATA[
michael@0:           if (val)
michael@0:             this.showHistoryPopup();
michael@0:           else
michael@0:             this.closePopup();
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <!-- =================== PUBLIC MEMBERS =================== -->
michael@0: 
michael@0:       <field name="valueIsTyped">false</field>
michael@0:       <field name="_disableTrim">false</field>
michael@0:       <property name="value">
michael@0:         <getter><![CDATA[
michael@0:           if (typeof this.onBeforeValueGet == "function") {
michael@0:             var result = this.onBeforeValueGet();
michael@0:             if (result)
michael@0:               return result.value;
michael@0:           }
michael@0:           return this.inputField.value;
michael@0:         ]]></getter>
michael@0:         <setter><![CDATA[
michael@0:           this.mIgnoreInput = true;
michael@0: 
michael@0:           if (typeof this.onBeforeValueSet == "function")
michael@0:             val = this.onBeforeValueSet(val);
michael@0: 
michael@0:           if (typeof this.trimValue == "function" && !this._disableTrim)
michael@0:             val = this.trimValue(val);
michael@0: 
michael@0:           this.valueIsTyped = false;
michael@0:           this.inputField.value = val;
michael@0: 
michael@0:           if (typeof this.formatValue == "function")
michael@0:             this.formatValue();
michael@0: 
michael@0:           this.mIgnoreInput = false;
michael@0:           var event = document.createEvent('Events');
michael@0:           event.initEvent('ValueChange', true, true);
michael@0:           this.inputField.dispatchEvent(event);
michael@0:           return val;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="focused" readonly="true"
michael@0:                 onget="return this.getAttribute('focused') == 'true';"/>
michael@0: 
michael@0:       <!-- maximum number of rows to display at a time -->
michael@0:       <property name="maxRows"
michael@0:                 onset="this.setAttribute('maxrows', val); return val;"
michael@0:                 onget="return parseInt(this.getAttribute('maxrows')) || 0;"/>
michael@0: 
michael@0:       <!-- option to allow scrolling through the list via the tab key, rather than
michael@0:            tab moving focus out of the textbox -->
michael@0:       <property name="tabScrolling"
michael@0:                 onset="return this.setAttribute('tabscrolling', val); return val;"
michael@0:                 onget="return this.getAttribute('tabscrolling') == 'true';"/>
michael@0: 
michael@0:       <!-- disable key navigation handling in the popup results -->
michael@0:       <property name="disableKeyNavigation"
michael@0:                 onset="this.setAttribute('disablekeynavigation', val); return val;"
michael@0:                 onget="return this.getAttribute('disablekeynavigation') == 'true';"/>
michael@0: 
michael@0:       <!-- option to completely ignore any blur events while
michael@0:            searches are still going on.  This is useful so that nothing
michael@0:            gets autopicked if the window is required to lose focus for
michael@0:            some reason (eg in LDAP autocomplete, another window may be
michael@0:            brought up so that the user can enter a password to authenticate
michael@0:            to an LDAP server).  -->
michael@0:       <property name="ignoreBlurWhileSearching"
michael@0:                 onset="this.setAttribute('ignoreblurwhilesearching', val); return val;"
michael@0:                 onget="return this.getAttribute('ignoreblurwhilesearching') == 'true';"/>
michael@0: 
michael@0:       <!-- option to highlight entries that don't have any matches -->
michael@0:       <property name="highlightNonMatches"
michael@0:                 onset="this.setAttribute('highlightnonmatches', val); return val;"
michael@0:                 onget="return this.getAttribute('highlightnonmatches') == 'true';"/>
michael@0: 
michael@0:       <!-- =================== PRIVATE MEMBERS =================== -->
michael@0: 
michael@0:       <!-- ::::::::::::: autocomplete controller ::::::::::::: -->
michael@0: 
michael@0:       <method name="attachController">
michael@0:         <body><![CDATA[
michael@0:           this.mController.input = this;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="detachController">
michael@0:         <body><![CDATA[
michael@0:           try {
michael@0:             if  (this.mController.input == this)
michael@0:             this.mController.input = null;
michael@0:           } catch (ex) {
michael@0:             // nothing really to do.
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- ::::::::::::: popup opening ::::::::::::: -->
michael@0: 
michael@0:       <method name="openPopup">
michael@0:         <body><![CDATA[
michael@0:           this.popup.openAutocompletePopup(this, this);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="closePopup">
michael@0:         <body><![CDATA[
michael@0:           this.popup.setAttribute("consumeoutsideclicks", "false");
michael@0:           this.popup.closePopup();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="showHistoryPopup">
michael@0:         <body><![CDATA[
michael@0:           // history dropmarker pushed state
michael@0:           function cleanup(popup) {
michael@0:             popup.removeEventListener("popupshowing", onShow, false);
michael@0:           }
michael@0:           function onShow(event) {
michael@0:             var popup = event.target, input = popup.input;
michael@0:             cleanup(popup);
michael@0:             input.setAttribute("open", "true");
michael@0:             function onHide() {
michael@0:               input.removeAttribute("open");
michael@0:               popup.setAttribute("consumeoutsideclicks", "false");
michael@0:               popup.removeEventListener("popuphiding", onHide, false);
michael@0:             }
michael@0:             popup.addEventListener("popuphiding", onHide, false);
michael@0:           }
michael@0:           this.popup.addEventListener("popupshowing", onShow, false);
michael@0:           setTimeout(cleanup, 1000, this.popup);
michael@0: 
michael@0:           // Store our "normal" maxRows on the popup, so that it can reset the
michael@0:           // value when the popup is hidden.
michael@0:           this.popup._normalMaxRows = this.maxRows;
michael@0: 
michael@0:           // Increase our maxRows temporarily, since we want the dropdown to
michael@0:           // be bigger in this case. The popup's popupshowing/popuphiding
michael@0:           // handlers will take care of resetting this.
michael@0:           this.maxRows = this.maxDropMarkerRows;
michael@0: 
michael@0:           // Ensure that we have focus.
michael@0:           if (!this.focused)
michael@0:             this.focus();
michael@0:           this.popup.setAttribute("consumeoutsideclicks", "true");
michael@0:           this.attachController();
michael@0:           this.mController.startSearch("");
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="toggleHistoryPopup">
michael@0:         <body><![CDATA[
michael@0:           if (!this.popup.popupOpen)
michael@0:             this.showHistoryPopup();
michael@0:           else
michael@0:             this.closePopup();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- ::::::::::::: event dispatching ::::::::::::: -->
michael@0: 
michael@0:       <method name="initEventHandler">
michael@0:         <parameter name="aEventType"/>
michael@0:         <body><![CDATA[
michael@0:           let handlerString = this.getAttribute("on" + aEventType);
michael@0:           if (handlerString) {
michael@0:             return (new Function("eventType", "param", handlerString)).bind(this, aEventType);
michael@0:           }
michael@0:           return null;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- ::::::::::::: key handling ::::::::::::: -->
michael@0: 
michael@0:       <method name="onKeyPress">
michael@0:         <parameter name="aEvent"/>
michael@0:         <body><![CDATA[
michael@0:           if (aEvent.target.localName != "textbox")
michael@0:             return true; // Let child buttons of autocomplete take input
michael@0: 
michael@0:           //XXXpch this is so bogus...
michael@0:           if (aEvent.defaultPrevented)
michael@0:             return false;
michael@0: 
michael@0:           var cancel = false;
michael@0: 
michael@0:           // Catch any keys that could potentially move the caret. Ctrl can be
michael@0:           // used in combination with these keys on Windows and Linux; and Alt
michael@0:           // can be used on OS X, so make sure the unused one isn't used.
michael@0:           if (!this.disableKeyNavigation &&
michael@0: #ifdef XP_MACOSX
michael@0:               !aEvent.ctrlKey) {
michael@0: #else
michael@0:               !aEvent.altKey) {
michael@0: #endif
michael@0:             switch (aEvent.keyCode) {
michael@0:               case KeyEvent.DOM_VK_LEFT:
michael@0:               case KeyEvent.DOM_VK_RIGHT:
michael@0:               case KeyEvent.DOM_VK_HOME:
michael@0:                 cancel = this.mController.handleKeyNavigation(aEvent.keyCode);
michael@0:                 break;
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           // Handle keys that are not part of a keyboard shortcut (no Ctrl or Alt)
michael@0:           if (!this.disableKeyNavigation && !aEvent.ctrlKey && !aEvent.altKey) {
michael@0:             switch (aEvent.keyCode) {
michael@0:               case KeyEvent.DOM_VK_TAB:
michael@0:                 if (this.tabScrolling && this.popup.popupOpen)
michael@0:                   cancel = this.mController.handleKeyNavigation(aEvent.shiftKey ?
michael@0:                                                                 KeyEvent.DOM_VK_UP :
michael@0:                                                                 KeyEvent.DOM_VK_DOWN);
michael@0:                 else if (this.forceComplete && this.mController.matchCount >= 1)
michael@0:                   this.mController.handleTab();
michael@0:                 break;
michael@0:               case KeyEvent.DOM_VK_UP:
michael@0:               case KeyEvent.DOM_VK_DOWN:
michael@0:               case KeyEvent.DOM_VK_PAGE_UP:
michael@0:               case KeyEvent.DOM_VK_PAGE_DOWN:
michael@0:                 cancel = this.mController.handleKeyNavigation(aEvent.keyCode);
michael@0:                 break;
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           // Handle keys we know aren't part of a shortcut, even with Alt or
michael@0:           // Ctrl.
michael@0:           switch (aEvent.keyCode) {
michael@0:             case KeyEvent.DOM_VK_ESCAPE:
michael@0:               cancel = this.mController.handleEscape();
michael@0:               break;
michael@0:             case KeyEvent.DOM_VK_RETURN:
michael@0: #ifdef XP_MACOSX
michael@0:               // Prevent the default action, since it will beep on Mac
michael@0:               if (aEvent.metaKey)
michael@0:                 aEvent.preventDefault();
michael@0: #endif
michael@0:               this.mEnterEvent = aEvent;
michael@0:               cancel = this.mController.handleEnter(false);
michael@0:               break;
michael@0:             case KeyEvent.DOM_VK_DELETE:
michael@0: #ifdef XP_MACOSX
michael@0:             case KeyEvent.DOM_VK_BACK_SPACE:
michael@0:               if (aEvent.shiftKey)
michael@0: #endif
michael@0:               cancel = this.mController.handleDelete();
michael@0:               break;
michael@0:             case KeyEvent.DOM_VK_DOWN:
michael@0:             case KeyEvent.DOM_VK_UP:
michael@0:               if (aEvent.altKey)
michael@0:                 this.toggleHistoryPopup();
michael@0:               break;
michael@0: #ifndef XP_MACOSX
michael@0:             case KeyEvent.DOM_VK_F4:
michael@0:               this.toggleHistoryPopup();
michael@0:               break;
michael@0: #endif
michael@0:           }
michael@0: 
michael@0:           if (cancel) {
michael@0:             aEvent.stopPropagation();
michael@0:             aEvent.preventDefault();
michael@0:           }
michael@0: 
michael@0:           return true;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- ::::::::::::: miscellaneous ::::::::::::: -->
michael@0: 
michael@0:       <method name="initSearchNames">
michael@0:         <body><![CDATA[
michael@0:           if (!this.mSearchNames) {
michael@0:             var names = this.getAttribute("autocompletesearch");
michael@0:             if (!names)
michael@0:               this.mSearchNames = [];
michael@0:             else
michael@0:               this.mSearchNames = names.split(" ");
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_focus">
michael@0:         <!-- doesn't reset this.mController -->
michael@0:         <body><![CDATA[
michael@0:           this._dontBlur = true;
michael@0:           this.focus();
michael@0:           this._dontBlur = false;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="resetActionType">
michael@0:         <body><![CDATA[
michael@0:           if (this.mIgnoreInput)
michael@0:             return;
michael@0:           this.removeAttribute("actiontype");
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <field name="_valueIsPasted">false</field>
michael@0:       <field name="_pasteController"><![CDATA[
michael@0:         ({
michael@0:           _autocomplete: this,
michael@0:           _kGlobalClipboard: Components.interfaces.nsIClipboard.kGlobalClipboard,
michael@0:           supportsCommand: function(aCommand) aCommand == "cmd_paste",
michael@0:           doCommand: function(aCommand) {
michael@0:             this._autocomplete._valueIsPasted = true;
michael@0:             this._autocomplete.editor.paste(this._kGlobalClipboard);
michael@0:             this._autocomplete._valueIsPasted = false;
michael@0:           },
michael@0:           isCommandEnabled: function(aCommand) {
michael@0:             return this._autocomplete.editor.isSelectionEditable &&
michael@0:                    this._autocomplete.editor.canPaste(this._kGlobalClipboard);
michael@0:           },
michael@0:           onEvent: function() {}
michael@0:         })
michael@0:       ]]></field>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="input"><![CDATA[
michael@0:         if (!this.mIgnoreInput && this.mController.input == this) {
michael@0:           this.valueIsTyped = true;
michael@0:           this.mController.handleText();
michael@0:         }
michael@0:         this.resetActionType();
michael@0:       ]]></handler>
michael@0: 
michael@0:       <handler event="keypress" phase="capturing"
michael@0:                action="return this.onKeyPress(event);"/>
michael@0: 
michael@0:       <handler event="compositionstart" phase="capturing"
michael@0:                action="if (this.mController.input == this) this.mController.handleStartComposition();"/>
michael@0: 
michael@0:       <handler event="compositionend" phase="capturing"
michael@0:                action="if (this.mController.input == this) this.mController.handleEndComposition();"/>
michael@0: 
michael@0:       <handler event="focus" phase="capturing"
michael@0:                action="this.attachController();"/>
michael@0: 
michael@0:       <handler event="blur" phase="capturing"
michael@0:                action="if (!this._dontBlur) this.detachController();"/>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-result-popup" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-base-popup">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/tree.css"/>
michael@0:       <stylesheet src="chrome://global/skin/autocomplete.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content ignorekeys="true" level="top" consumeoutsideclicks="false">
michael@0:       <xul:tree anonid="tree" class="autocomplete-tree plain" hidecolumnpicker="true" flex="1" seltype="single">
michael@0:         <xul:treecols anonid="treecols">
michael@0:           <xul:treecol id="treecolAutoCompleteValue" class="autocomplete-treecol" flex="1" overflow="true"/>
michael@0:         </xul:treecols>
michael@0:         <xul:treechildren class="autocomplete-treebody"/>
michael@0:       </xul:tree>
michael@0:     </content>
michael@0: 
michael@0:     <implementation>
michael@0:       <field name="mShowCommentColumn">false</field>
michael@0:       <field name="mShowImageColumn">false</field>
michael@0: 
michael@0:       <property name="showCommentColumn"
michael@0:                    onget="return this.mShowCommentColumn;">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           if (!val && this.mShowCommentColumn) {
michael@0:             // reset the flex on the value column and remove the comment column
michael@0:             document.getElementById("treecolAutoCompleteValue").setAttribute("flex", 1);
michael@0:             this.removeColumn("treecolAutoCompleteComment");
michael@0:           } else if (val && !this.mShowCommentColumn) {
michael@0:             // reset the flex on the value column and add the comment column
michael@0:             document.getElementById("treecolAutoCompleteValue").setAttribute("flex", 2);
michael@0:             this.addColumn({id: "treecolAutoCompleteComment", flex: 1});
michael@0:           }
michael@0:           this.mShowCommentColumn = val;
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="showImageColumn"
michael@0:                 onget="return this.mShowImageColumn;">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           if (!val && this.mShowImageColumn) {
michael@0:             // remove the image column
michael@0:             this.removeColumn("treecolAutoCompleteImage");
michael@0:           } else if (val && !this.mShowImageColumn) {
michael@0:             // add the image column
michael@0:             this.addColumn({id: "treecolAutoCompleteImage", flex: 1});
michael@0:           }
michael@0:           this.mShowImageColumn = val;
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0: 
michael@0:       <method name="addColumn">
michael@0:         <parameter name="aAttrs"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           var col = document.createElement("treecol");
michael@0:           col.setAttribute("class", "autocomplete-treecol");
michael@0:           for (var name in aAttrs)
michael@0:             col.setAttribute(name, aAttrs[name]);
michael@0:           this.treecols.appendChild(col);
michael@0:           return col;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="removeColumn">
michael@0:         <parameter name="aColId"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           return this.treecols.removeChild(document.getElementById(aColId));
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <property name="selectedIndex"
michael@0:                 onget="return this.tree.currentIndex;">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           this.tree.view.selection.select(val);
michael@0:           if (this.tree.treeBoxObject.height > 0)
michael@0:             this.tree.treeBoxObject.ensureRowIsVisible(val < 0 ? 0 : val);
michael@0:           // Fire select event on xul:tree so that accessibility API
michael@0:           // support layer can fire appropriate accessibility events.
michael@0:           var event = document.createEvent('Events');
michael@0:           event.initEvent("select", true, true);
michael@0:           this.tree.dispatchEvent(event);
michael@0:           return val;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="adjustHeight">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // detect the desired height of the tree
michael@0:           var bx = this.tree.treeBoxObject;
michael@0:           var view = this.tree.view;
michael@0:           if (!view)
michael@0:             return;
michael@0:           var rows = this.maxRows;
michael@0:           if (!view.rowCount || (rows && view.rowCount < rows))
michael@0:             rows = view.rowCount;
michael@0: 
michael@0:           var height = rows * bx.rowHeight;
michael@0: 
michael@0:           if (height == 0)
michael@0:             this.tree.setAttribute("collapsed", "true");
michael@0:           else {
michael@0:             if (this.tree.hasAttribute("collapsed"))
michael@0:               this.tree.removeAttribute("collapsed");
michael@0: 
michael@0:             this.tree.setAttribute("height", height);
michael@0:           }
michael@0:           this.tree.setAttribute("hidescrollbar", view.rowCount <= rows);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="openAutocompletePopup">
michael@0:         <parameter name="aInput"/>
michael@0:         <parameter name="aElement"/>
michael@0:         <body><![CDATA[
michael@0:           // until we have "baseBinding", (see bug #373652) this allows
michael@0:           // us to override openAutocompletePopup(), but still call
michael@0:           // the method on the base class
michael@0:           this._openAutocompletePopup(aInput, aElement);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_openAutocompletePopup">
michael@0:         <parameter name="aInput"/>
michael@0:         <parameter name="aElement"/>
michael@0:         <body><![CDATA[
michael@0:           if (!this.mPopupOpen) {
michael@0:             this.mInput = aInput;
michael@0:             this.view = aInput.controller.QueryInterface(Components.interfaces.nsITreeView);
michael@0:             this.invalidate();
michael@0: 
michael@0:             this.showCommentColumn = this.mInput.showCommentColumn;
michael@0:             this.showImageColumn = this.mInput.showImageColumn;
michael@0: 
michael@0:             var rect = aElement.getBoundingClientRect();
michael@0:             var nav = aElement.ownerDocument.defaultView.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
michael@0:                               .getInterface(Components.interfaces.nsIWebNavigation);
michael@0:             var docShell = nav.QueryInterface(Components.interfaces.nsIDocShell);
michael@0:             var docViewer = docShell.contentViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
michael@0:             var width = (rect.right - rect.left) * docViewer.fullZoom;
michael@0:             this.setAttribute("width", width > 100 ? width : 100);
michael@0: 
michael@0:             // Adjust the direction of the autocomplete popup list based on the textbox direction, bug 649840
michael@0:             var popupDirection = aElement.ownerDocument.defaultView.getComputedStyle(aElement).direction;
michael@0:             this.style.direction = popupDirection;
michael@0: 
michael@0:             this.openPopup(aElement, "after_start", 0, 0, false, false);
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="invalidate">
michael@0:         <body><![CDATA[
michael@0:           this.adjustHeight();
michael@0:           this.tree.treeBoxObject.invalidate();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="selectBy">
michael@0:         <parameter name="aReverse"/>
michael@0:         <parameter name="aPage"/>
michael@0:         <body><![CDATA[
michael@0:           try {
michael@0:             var amount = aPage ? 5 : 1;
michael@0:             this.selectedIndex = this.getNextIndex(aReverse, amount, this.selectedIndex, this.tree.view.rowCount-1);
michael@0:             if (this.selectedIndex == -1) {
michael@0:               this.input._focus();
michael@0:             }
michael@0:           } catch (ex) {
michael@0:             // do nothing - occasionally timer-related js errors happen here
michael@0:             // e.g. "this.selectedIndex has no properties", when you type fast and hit a
michael@0:             // navigation key before this popup has opened
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- =================== PUBLIC MEMBERS =================== -->
michael@0: 
michael@0:       <field name="tree">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "tree");
michael@0:       </field>
michael@0: 
michael@0:       <field name="treecols">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "treecols");
michael@0:       </field>
michael@0: 
michael@0:       <property name="view"
michael@0:                 onget="return this.mView;">
michael@0:         <setter><![CDATA[
michael@0:           // We must do this by hand because the tree binding may not be ready yet
michael@0:           this.mView = val;
michael@0:           var bx = this.tree.boxObject;
michael@0:           bx = bx.QueryInterface(Components.interfaces.nsITreeBoxObject);
michael@0:           bx.view = val;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-base-popup" role="none"
michael@0: extends="chrome://global/content/bindings/popup.xml#popup">
michael@0:     <implementation implements="nsIAutoCompletePopup">
michael@0:       <field name="mInput">null</field>
michael@0:       <field name="mPopupOpen">false</field>
michael@0: 
michael@0:       <!-- =================== nsIAutoCompletePopup =================== -->
michael@0: 
michael@0:       <property name="input" readonly="true"
michael@0:                 onget="return this.mInput"/>
michael@0: 
michael@0:       <property name="overrideValue" readonly="true"
michael@0:                 onget="return null;"/>
michael@0: 
michael@0:       <property name="popupOpen" readonly="true"
michael@0:                 onget="return this.mPopupOpen;"/>
michael@0: 
michael@0:       <method name="closePopup">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           if (this.mPopupOpen) {
michael@0:             this.hidePopup();
michael@0:             this.removeAttribute("width");
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <!-- This is the default number of rows that we give the autocomplete
michael@0:            popup when the textbox doesn't have a "maxrows" attribute
michael@0:            for us to use. -->
michael@0:       <field name="defaultMaxRows" readonly="true">6</field>
michael@0: 
michael@0:       <!-- In some cases (e.g. when the input's dropmarker button is clicked),
michael@0:            the input wants to display a popup with more rows. In that case, it
michael@0:            should increase its maxRows property and store the "normal" maxRows
michael@0:            in this field. When the popup is hidden, we restore the input's
michael@0:            maxRows to the value stored in this field.
michael@0: 
michael@0:            This field is set to -1 between uses so that we can tell when it's
michael@0:            been set by the input and when we need to set it in the popupshowing
michael@0:            handler. -->
michael@0:       <field name="_normalMaxRows">-1</field>
michael@0: 
michael@0:       <property name="maxRows" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           return (this.mInput && this.mInput.maxRows) || this.defaultMaxRows;
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="getNextIndex">
michael@0:         <parameter name="aReverse"/>
michael@0:         <parameter name="aAmount"/>
michael@0:         <parameter name="aIndex"/>
michael@0:         <parameter name="aMaxRow"/>
michael@0:         <body><![CDATA[
michael@0:           if (aMaxRow < 0)
michael@0:             return -1;
michael@0: 
michael@0:           var newIdx = aIndex + (aReverse?-1:1)*aAmount;
michael@0:           if (aReverse && aIndex == -1 || newIdx > aMaxRow && aIndex != aMaxRow)
michael@0:             newIdx = aMaxRow;
michael@0:           else if (!aReverse && aIndex == -1 || newIdx < 0 && aIndex != 0)
michael@0:             newIdx = 0;
michael@0: 
michael@0:           if (newIdx < 0 && aIndex == 0 || newIdx > aMaxRow && aIndex == aMaxRow)
michael@0:             aIndex = -1;
michael@0:           else
michael@0:             aIndex = newIdx;
michael@0: 
michael@0:           return aIndex;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onPopupClick">
michael@0:         <parameter name="aEvent"/>
michael@0:         <body><![CDATA[
michael@0:           var controller = this.view.QueryInterface(Components.interfaces.nsIAutoCompleteController);
michael@0:           controller.handleEnter(true);
michael@0:         ]]></body>
michael@0:       </method>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="popupshowing"><![CDATA[
michael@0:         // If normalMaxRows wasn't already set by the input, then set it here
michael@0:         // so that we restore the correct number when the popup is hidden.
michael@0:         if (this._normalMaxRows < 0)
michael@0:           this._normalMaxRows = this.mInput.maxRows;
michael@0: 
michael@0:         this.mPopupOpen = true;
michael@0:       ]]></handler>
michael@0: 
michael@0:       <handler event="popuphiding"><![CDATA[
michael@0:         var isListActive = true;
michael@0:         if (this.selectedIndex == -1)
michael@0:           isListActive = false;
michael@0:         var controller = this.view.QueryInterface(Components.interfaces.nsIAutoCompleteController);
michael@0:         controller.stopSearch();
michael@0: 
michael@0:         this.mPopupOpen = false;
michael@0: 
michael@0:         // Reset the maxRows property to the cached "normal" value, and reset
michael@0:         // _normalMaxRows so that we can detect whether it was set by the input
michael@0:         // when the popupshowing handler runs.
michael@0:         this.mInput.maxRows = this._normalMaxRows;
michael@0:         this._normalMaxRows = -1;
michael@0:         // If the list was being navigated and then closed, make sure
michael@0:         // we fire accessible focus event back to textbox
michael@0:         if (isListActive) {
michael@0:           this.mInput.mIgnoreFocus = true;
michael@0:           this.mInput._focus();
michael@0:           this.mInput.mIgnoreFocus = false;
michael@0:         }
michael@0:       ]]></handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-rich-result-popup" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-base-popup">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/autocomplete.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content ignorekeys="true" level="top" consumeoutsideclicks="false">
michael@0:       <xul:richlistbox anonid="richlistbox" class="autocomplete-richlistbox" flex="1"/>
michael@0:       <xul:hbox>
michael@0:         <children/>
michael@0:       </xul:hbox>
michael@0:     </content>
michael@0: 
michael@0:     <implementation implements="nsIAutoCompletePopup">
michael@0:       <field name="_currentIndex">0</field>
michael@0:       <field name="_rowHeight">0</field>
michael@0: 
michael@0:       <!-- =================== nsIAutoCompletePopup =================== -->
michael@0: 
michael@0:       <property name="selectedIndex"
michael@0:                 onget="return this.richlistbox.selectedIndex;">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           this.richlistbox.selectedIndex = val;
michael@0: 
michael@0:           // when clearing the selection (val == -1, so selectedItem will be
michael@0:           // null), we want to scroll back to the top.  see bug #406194
michael@0:           this.richlistbox.ensureElementIsVisible(
michael@0:             this.richlistbox.selectedItem || this.richlistbox.firstChild);
michael@0: 
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="openAutocompletePopup">
michael@0:         <parameter name="aInput"/>
michael@0:         <parameter name="aElement"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // until we have "baseBinding", (see bug #373652) this allows
michael@0:           // us to override openAutocompletePopup(), but still call
michael@0:           // the method on the base class
michael@0:           this._openAutocompletePopup(aInput, aElement);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_openAutocompletePopup">
michael@0:         <parameter name="aInput"/>
michael@0:         <parameter name="aElement"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           if (!this.mPopupOpen) {
michael@0:             this.mInput = aInput;
michael@0:             // clear any previous selection, see bugs 400671 and 488357
michael@0:             this.selectedIndex = -1;
michael@0: 
michael@0:             var width = aElement.getBoundingClientRect().width;
michael@0:             this.setAttribute("width", width > 100 ? width : 100);
michael@0:             // invalidate() depends on the width attribute
michael@0:             this._invalidate();
michael@0: 
michael@0:             this.openPopup(aElement, "after_start", 0, 0, false, false);
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="invalidate">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Don't bother doing work if we're not even showing
michael@0:           if (!this.mPopupOpen)
michael@0:             return;
michael@0: 
michael@0:           this._invalidate();
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_invalidate">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           if (!this.hasAttribute("height")) {
michael@0:             // collapsed if no matches
michael@0:             this.richlistbox.collapsed = (this._matchCount == 0);
michael@0: 
michael@0:             // Dynamically update height until richlistbox.rows works (bug 401939)
michael@0:             // Adjust the height immediately and after the row contents update
michael@0:             this.adjustHeight();
michael@0:             setTimeout(function(self) self.adjustHeight(), 0, this);
michael@0:           }
michael@0: 
michael@0:           // make sure to collapse any existing richlistitems
michael@0:           // that aren't going to be used
michael@0:           var existingItemsCount = this.richlistbox.childNodes.length;
michael@0:           for (var i = this._matchCount; i < existingItemsCount; i++)
michael@0:             this.richlistbox.childNodes[i].collapsed = true;
michael@0: 
michael@0:           this._currentIndex = 0;
michael@0:           this._appendCurrentResult();
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <property name="maxResults" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             // this is how many richlistitems will be kept around
michael@0:             // (note, this getter may be overridden)
michael@0:             return 20;
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="_matchCount" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           return Math.min(this.mInput.controller.matchCount, this.maxResults);
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="adjustHeight">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Figure out how many rows to show
michael@0:           let rows = this.richlistbox.childNodes;
michael@0:           let numRows = Math.min(this._matchCount, this.maxRows, rows.length);
michael@0: 
michael@0:           // Default the height to 0 if we have no rows to show
michael@0:           let height = 0;
michael@0:           if (numRows) {
michael@0:             if (!this._rowHeight) {
michael@0:               let firstRowRect = rows[0].getBoundingClientRect();
michael@0:               this._rowHeight = firstRowRect.height;
michael@0:             }
michael@0: 
michael@0:             // Calculate the height to have the first row to last row shown
michael@0:             height = this._rowHeight * numRows;
michael@0:           }
michael@0: 
michael@0:           // Only update the height if we have a non-zero height and if it
michael@0:           // changed (the richlistbox is collapsed if there are no results)
michael@0:           if (height && height != this.richlistbox.height)
michael@0:             this.richlistbox.height = height;
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_appendCurrentResult">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           var controller = this.mInput.controller;
michael@0:           var matchCount = this._matchCount;
michael@0:           var existingItemsCount = this.richlistbox.childNodes.length;
michael@0: 
michael@0:           // Process maxRows per chunk to improve performance and user experience
michael@0:           for (let i = 0; i < this.maxRows; i++) {
michael@0:             if (this._currentIndex >= matchCount)
michael@0:               return;
michael@0: 
michael@0:             var item;
michael@0: 
michael@0:             // trim the leading/trailing whitespace
michael@0:             var trimmedSearchString = controller.searchString.replace(/^\s+/, "").replace(/\s+$/, "");
michael@0: 
michael@0:             // Unescape the URI spec for showing as an entry in the popup
michael@0:             let url = Components.classes["@mozilla.org/intl/texttosuburi;1"].
michael@0:               getService(Components.interfaces.nsITextToSubURI).
michael@0:               unEscapeURIForUI("UTF-8", controller.getValueAt(this._currentIndex));
michael@0: 
michael@0:             if (typeof this.input.trimValue == "function")
michael@0:               url = this.input.trimValue(url);
michael@0: 
michael@0:             if (this._currentIndex < existingItemsCount) {
michael@0:               // re-use the existing item
michael@0:               item = this.richlistbox.childNodes[this._currentIndex];
michael@0: 
michael@0:               // Completely re-use the existing richlistitem if it's the same
michael@0:               if (item.getAttribute("text") == trimmedSearchString &&
michael@0:                   item.getAttribute("url") == url) {
michael@0:                 item.collapsed = false;
michael@0:                 this._currentIndex++;
michael@0:                 continue;
michael@0:               }
michael@0:             }
michael@0:             else {
michael@0:               // need to create a new item
michael@0:               item = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "richlistitem");
michael@0:             }
michael@0: 
michael@0:             // set these attributes before we set the class
michael@0:             // so that we can use them from the constructor
michael@0:             item.setAttribute("image", controller.getImageAt(this._currentIndex));
michael@0:             item.setAttribute("url", url);
michael@0:             item.setAttribute("title", controller.getCommentAt(this._currentIndex));
michael@0:             item.setAttribute("type", controller.getStyleAt(this._currentIndex));
michael@0:             item.setAttribute("text", trimmedSearchString);
michael@0: 
michael@0:             if (this._currentIndex < existingItemsCount) {
michael@0:               // re-use the existing item
michael@0:               item._adjustAcItem();
michael@0:               item.collapsed = false;
michael@0:             }
michael@0:             else {
michael@0:               // set the class at the end so we can use the attributes
michael@0:               // in the xbl constructor
michael@0:               item.className = "autocomplete-richlistitem";
michael@0:               this.richlistbox.appendChild(item);
michael@0:             }
michael@0: 
michael@0:             this._currentIndex++;
michael@0:           }
michael@0: 
michael@0:           // yield after each batch of items so that typing the url bar is responsive
michael@0:           setTimeout(function (self) { self._appendCurrentResult(); }, 0, this);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="selectBy">
michael@0:         <parameter name="aReverse"/>
michael@0:         <parameter name="aPage"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           try {
michael@0:             var amount = aPage ? 5 : 1;
michael@0: 
michael@0:             // because we collapsed unused items, we can't use this.richlistbox.getRowCount(), we need to use the matchCount
michael@0:             this.selectedIndex = this.getNextIndex(aReverse, amount, this.selectedIndex, this._matchCount - 1);
michael@0:             if (this.selectedIndex == -1) {
michael@0:               this.input._focus();
michael@0:             }
michael@0:           } catch (ex) {
michael@0:             // do nothing - occasionally timer-related js errors happen here
michael@0:             // e.g. "this.selectedIndex has no properties", when you type fast and hit a
michael@0:             // navigation key before this popup has opened
michael@0:           }
michael@0:             ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <field name="richlistbox">
michael@0:         document.getAnonymousElementByAttribute(this, "anonid", "richlistbox");
michael@0:       </field>
michael@0: 
michael@0:       <property name="view"
michael@0:                 onget="return this.mInput.controller;"
michael@0:                 onset="return val;"/>
michael@0: 
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-richlistitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
michael@0:     <content>
michael@0:       <xul:hbox align="center" class="ac-title-box">
michael@0:         <xul:image xbl:inherits="src=image" class="ac-site-icon"/>
michael@0:         <xul:hbox anonid="title-box" class="ac-title" flex="1"
michael@0:                   onunderflow="_doUnderflow('_title');"
michael@0:                   onoverflow="_doOverflow('_title');">
michael@0:           <xul:description anonid="title" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
michael@0:         </xul:hbox>
michael@0:         <xul:label anonid="title-overflow-ellipsis" xbl:inherits="selected"
michael@0:                    class="ac-ellipsis-after ac-comment"/>
michael@0:         <xul:hbox anonid="extra-box" class="ac-extra" align="center" hidden="true">
michael@0:           <xul:image class="ac-result-type-tag"/>
michael@0:           <xul:label class="ac-normal-text ac-comment" xbl:inherits="selected" value=":"/>
michael@0:           <xul:description anonid="extra" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
michael@0:         </xul:hbox>
michael@0:         <xul:image anonid="type-image" class="ac-type-icon"/>
michael@0:       </xul:hbox>
michael@0:       <xul:hbox align="center" class="ac-url-box">
michael@0:         <xul:spacer class="ac-site-icon"/>
michael@0:         <xul:image class="ac-action-icon"/>
michael@0:         <xul:hbox anonid="url-box" class="ac-url" flex="1"
michael@0:                   onunderflow="_doUnderflow('_url');"
michael@0:                   onoverflow="_doOverflow('_url');">
michael@0:           <xul:description anonid="url" class="ac-normal-text ac-url-text"
michael@0:                            xbl:inherits="selected type"/>
michael@0:           <xul:description anonid="action" class="ac-normal-text ac-action-text"
michael@0:                            xbl:inherits="selected type"/>
michael@0:         </xul:hbox>
michael@0:         <xul:label anonid="url-overflow-ellipsis" xbl:inherits="selected"
michael@0:                    class="ac-ellipsis-after ac-url-text"/>
michael@0:         <xul:spacer class="ac-type-icon"/>
michael@0:       </xul:hbox>
michael@0:     </content>
michael@0:     <implementation implements="nsIDOMXULSelectControlItemElement">
michael@0:       <constructor>
michael@0:         <![CDATA[
michael@0:             let ellipsis = "\u2026";
michael@0:             try {
michael@0:               ellipsis = Components.classes["@mozilla.org/preferences-service;1"].
michael@0:                 getService(Components.interfaces.nsIPrefBranch).
michael@0:                 getComplexValue("intl.ellipsis",
michael@0:                   Components.interfaces.nsIPrefLocalizedString).data;
michael@0:             } catch (ex) {
michael@0:               // Do nothing.. we already have a default
michael@0:             }
michael@0: 
michael@0:             this._urlOverflowEllipsis = document.getAnonymousElementByAttribute(this, "anonid", "url-overflow-ellipsis");
michael@0:             this._titleOverflowEllipsis = document.getAnonymousElementByAttribute(this, "anonid", "title-overflow-ellipsis");
michael@0: 
michael@0:             this._urlOverflowEllipsis.value = ellipsis;
michael@0:             this._titleOverflowEllipsis.value = ellipsis;
michael@0: 
michael@0:             this._typeImage = document.getAnonymousElementByAttribute(this, "anonid", "type-image");
michael@0: 
michael@0:             this._urlBox = document.getAnonymousElementByAttribute(this, "anonid", "url-box");
michael@0:             this._url = document.getAnonymousElementByAttribute(this, "anonid", "url");
michael@0:             this._action = document.getAnonymousElementByAttribute(this, "anonid", "action");
michael@0: 
michael@0:             this._titleBox = document.getAnonymousElementByAttribute(this, "anonid", "title-box");
michael@0:             this._title = document.getAnonymousElementByAttribute(this, "anonid", "title");
michael@0: 
michael@0:             this._extraBox = document.getAnonymousElementByAttribute(this, "anonid", "extra-box");
michael@0:             this._extra = document.getAnonymousElementByAttribute(this, "anonid", "extra");
michael@0: 
michael@0:             this._adjustAcItem();
michael@0:           ]]>
michael@0:       </constructor>
michael@0: 
michael@0:       <property name="label" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             var title = this.getAttribute("title");
michael@0:             var url = this.getAttribute("url");
michael@0:             var panel = this.parentNode.parentNode;
michael@0: 
michael@0:             // allow consumers that have extended popups to override
michael@0:             // the label values for the richlistitems
michael@0:             if (panel.createResultLabel)
michael@0:               return panel.createResultLabel(title, url, this.getAttribute("type"));
michael@0: 
michael@0:             // aType (ex: "ac-result-type-<aType>") is related to the class of the image,
michael@0:             // and is not "visible" text so don't use it for the label (for accessibility).
michael@0:             return title + " " + url;
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <field name="_boundaryCutoff">null</field>
michael@0: 
michael@0:       <property name="boundaryCutoff" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           if (!this._boundaryCutoff) {
michael@0:             this._boundaryCutoff =
michael@0:               Components.classes["@mozilla.org/preferences-service;1"].
michael@0:               getService(Components.interfaces.nsIPrefBranch).
michael@0:               getIntPref("toolkit.autocomplete.richBoundaryCutoff");
michael@0:           }
michael@0:           return this._boundaryCutoff;
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="_getBoundaryIndices">
michael@0:         <parameter name="aText"/>
michael@0:         <parameter name="aSearchTokens"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Short circuit for empty search ([""] == "")
michael@0:           if (aSearchTokens == "")
michael@0:             return [0, aText.length];
michael@0: 
michael@0:           // Find which regions of text match the search terms
michael@0:           let regions = [];
michael@0:           for each (let search in aSearchTokens) {
michael@0:             let matchIndex;
michael@0:             let startIndex = 0;
michael@0:             let searchLen = search.length;
michael@0: 
michael@0:             // Find all matches of the search terms, but stop early for perf
michael@0:             let lowerText = aText.toLowerCase().substr(0, this.boundaryCutoff);
michael@0:             while ((matchIndex = lowerText.indexOf(search, startIndex)) >= 0) {
michael@0:               // Start the next search from where this one finished
michael@0:               startIndex = matchIndex + searchLen;
michael@0:               regions.push([matchIndex, startIndex]);
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           // Sort the regions by start position then end position
michael@0:           regions = regions.sort(function(a, b) let (start = a[0] - b[0])
michael@0:             start == 0 ? a[1] - b[1] : start);
michael@0: 
michael@0:           // Generate the boundary indices from each region
michael@0:           let start = 0;
michael@0:           let end = 0;
michael@0:           let boundaries = [];
michael@0:           let len = regions.length;
michael@0:           for (let i = 0; i < len; i++) {
michael@0:             // We have a new boundary if the start of the next is past the end
michael@0:             let region = regions[i];
michael@0:             if (region[0] > end) {
michael@0:               // First index is the beginning of match
michael@0:               boundaries.push(start);
michael@0:               // Second index is the beginning of non-match
michael@0:               boundaries.push(end);
michael@0: 
michael@0:               // Track the new region now that we've stored the previous one
michael@0:               start = region[0];
michael@0:             }
michael@0: 
michael@0:             // Push back the end index for the current or new region
michael@0:             end = Math.max(end, region[1]);
michael@0:           }
michael@0: 
michael@0:           // Add the last region
michael@0:           boundaries.push(start);
michael@0:           boundaries.push(end);
michael@0: 
michael@0:           // Put on the end boundary if necessary
michael@0:           if (end < aText.length)
michael@0:             boundaries.push(aText.length);
michael@0: 
michael@0:           // Skip the first item because it's always 0
michael@0:           return boundaries.slice(1);
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_getSearchTokens">
michael@0:         <parameter name="aSearch"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           let search = aSearch.toLowerCase();
michael@0:           return search.split(/\s+/);
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_setUpDescription">
michael@0:         <parameter name="aDescriptionElement"/>
michael@0:         <parameter name="aText"/>
michael@0:         <parameter name="aNoEmphasis"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Get rid of all previous text
michael@0:           while (aDescriptionElement.hasChildNodes())
michael@0:             aDescriptionElement.removeChild(aDescriptionElement.firstChild);
michael@0: 
michael@0:           // If aNoEmphasis is specified, don't add any emphasis
michael@0:           if (aNoEmphasis) {
michael@0:             aDescriptionElement.appendChild(document.createTextNode(aText));
michael@0:             return;
michael@0:           }
michael@0: 
michael@0:           // Get the indices that separate match and non-match text
michael@0:           let search = this.getAttribute("text");
michael@0:           let tokens = this._getSearchTokens(search);
michael@0:           let indices = this._getBoundaryIndices(aText, tokens);
michael@0: 
michael@0:           let next;
michael@0:           let start = 0;
michael@0:           let len = indices.length;
michael@0:           // Even indexed boundaries are matches, so skip the 0th if it's empty
michael@0:           for (let i = indices[0] == 0 ? 1 : 0; i < len; i++) {
michael@0:             next = indices[i];
michael@0:             let text = aText.substr(start, next - start);
michael@0:             start = next;
michael@0: 
michael@0:             if (i % 2 == 0) {
michael@0:               // Emphasize the text for even indices
michael@0:               let span = aDescriptionElement.appendChild(
michael@0:                 document.createElementNS("http://www.w3.org/1999/xhtml", "span"));
michael@0:               span.className = "ac-emphasize-text";
michael@0:               span.textContent = text;
michael@0:             } else {
michael@0:               // Otherwise, it's plain text
michael@0:               aDescriptionElement.appendChild(document.createTextNode(text));
michael@0:             }
michael@0:           }
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_adjustAcItem">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           var url = this.getAttribute("url");
michael@0:           var title = this.getAttribute("title");
michael@0:           var type = this.getAttribute("type");
michael@0: 
michael@0:           this.removeAttribute("actiontype");
michael@0: 
michael@0:           // The ellipses are hidden via their visibility so that they always
michael@0:           // take up space and don't pop in on top of text when shown.  For
michael@0:           // keyword searches, however, the title ellipsis should not take up
michael@0:           // space when hidden.  Setting the hidden property accomplishes that.
michael@0:           this._titleOverflowEllipsis.hidden = false;
michael@0: 
michael@0:           // If the type includes an action, set up the item appropriately.
michael@0:           var types = type.split(/\s+/);
michael@0:           var actionIndex = types.indexOf("action");
michael@0:           if (actionIndex >= 0) {
michael@0:             let [,action, param] = url.match(/^moz-action:([^,]+),(.*)$/);
michael@0:             this.setAttribute("actiontype", action);
michael@0:             url = param;
michael@0:             let desc = "]]>&action.switchToTab.label;<![CDATA[";
michael@0:             this._setUpDescription(this._action, desc, true);
michael@0: 
michael@0:             // Remove the "action" substring so that the correct style, if any,
michael@0:             // is applied below.
michael@0:             types.splice(actionIndex, 1);
michael@0:             type = types.join(" ");
michael@0:           }
michael@0: 
michael@0:           // If we have a tag match, show the tags and icon
michael@0:           if (type == "tag") {
michael@0:             // Configure the extra box for tags display
michael@0:             this._extraBox.hidden = false;
michael@0:             this._extraBox.childNodes[0].hidden = false;
michael@0:             this._extraBox.childNodes[1].hidden = true;
michael@0:             this._extraBox.pack = "end";
michael@0:             this._titleBox.flex = 1;
michael@0: 
michael@0:             // The title is separated from the tags by an endash
michael@0:             let tags;
michael@0:             [, title, tags] = title.match(/^(.+) \u2013 (.+)$/);
michael@0: 
michael@0:             // Each tag is split by a comma in an undefined order, so sort it
michael@0:             let sortedTags = tags.split(",").sort().join(", ");
michael@0: 
michael@0:             // Emphasize the matching text in the tags
michael@0:             this._setUpDescription(this._extra, sortedTags);
michael@0: 
michael@0:             // Treat tagged matches as bookmarks for the star
michael@0:             type = "bookmark";
michael@0:           } else if (type == "keyword") {
michael@0:             // Configure the extra box for keyword display
michael@0:             this._extraBox.hidden = false;
michael@0:             this._extraBox.childNodes[0].hidden = true;
michael@0:             this._extraBox.childNodes[1].hidden = false;
michael@0:             this._extraBox.pack = "start";
michael@0:             this._titleBox.flex = 0;
michael@0: 
michael@0:             // Hide the ellipsis so it doesn't take up space.
michael@0:             this._titleOverflowEllipsis.hidden = true;
michael@0: 
michael@0:             // Put the parameters next to the title if we have any
michael@0:             let search = this.getAttribute("text");
michael@0:             let params = "";
michael@0:             let paramsIndex = search.indexOf(' ');
michael@0:             if (paramsIndex != -1)
michael@0:               params = search.substr(paramsIndex + 1);
michael@0: 
michael@0:             // Emphasize the keyword parameters
michael@0:             this._setUpDescription(this._extra, params);
michael@0: 
michael@0:             // Don't emphasize keyword searches in the title or url
michael@0:             this.setAttribute("text", "");
michael@0:           } else {
michael@0:             // Hide the title's extra box if we don't need extra stuff
michael@0:             this._extraBox.hidden = true;
michael@0:             this._titleBox.flex = 1;
michael@0:           }
michael@0: 
michael@0:           // Give the image the icon style and a special one for the type
michael@0:           this._typeImage.className = "ac-type-icon" +
michael@0:             (type ? " ac-result-type-" + type : "");
michael@0: 
michael@0:           // Show the url as the title if we don't have a title
michael@0:           if (title == "")
michael@0:             title = url;
michael@0: 
michael@0:           // Emphasize the matching search terms for the description
michael@0:           this._setUpDescription(this._title, title);
michael@0:           this._setUpDescription(this._url, url);
michael@0: 
michael@0:           // Set up overflow on a timeout because the contents of the box
michael@0:           // might not have a width yet even though we just changed them
michael@0:           setTimeout(this._setUpOverflow, 0, this._titleBox, this._titleOverflowEllipsis);
michael@0:           setTimeout(this._setUpOverflow, 0, this._urlBox, this._urlOverflowEllipsis);
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_setUpOverflow">
michael@0:         <parameter name="aParentBox"/>
michael@0:         <parameter name="aEllipsis"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Hide the ellipsis incase there's just enough to not underflow
michael@0:           aEllipsis.style.visibility = "hidden";
michael@0: 
michael@0:           // Start with the parent's width and subtract off its children
michael@0:           let tooltip = [];
michael@0:           let children = aParentBox.childNodes;
michael@0:           let widthDiff = aParentBox.boxObject.width;
michael@0: 
michael@0:           for (let i = 0; i < children.length; i++) {
michael@0:             // Only consider a child if it actually takes up space
michael@0:             let childWidth = children[i].boxObject.width;
michael@0:             if (childWidth > 0) {
michael@0:               // Subtract a little less to account for subpixel rounding
michael@0:               widthDiff -= childWidth - .5;
michael@0: 
michael@0:               // Add to the tooltip if it's not hidden and has text
michael@0:               let childText = children[i].textContent;
michael@0:               if (childText)
michael@0:                 tooltip.push(childText);
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           // If the children take up more space than the parent.. overflow!
michael@0:           if (widthDiff < 0) {
michael@0:             // Re-show the ellipsis now that we know it's needed
michael@0:             aEllipsis.style.visibility = "visible";
michael@0: 
michael@0:             // Separate text components with a ndash --
michael@0:             aParentBox.tooltipText = tooltip.join(" \u2013 ");
michael@0:           }
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_doUnderflow">
michael@0:         <parameter name="aName"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           // Hide the ellipsis right when we know we're underflowing instead of
michael@0:           // waiting for the timeout to trigger the _setUpOverflow calculations
michael@0:           this[aName + "Box"].tooltipText = "";
michael@0:           this[aName + "OverflowEllipsis"].style.visibility = "hidden";
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_doOverflow">
michael@0:         <parameter name="aName"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           this._setUpOverflow(this[aName + "Box"],
michael@0:                               this[aName + "OverflowEllipsis"]);
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:     </implementation>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-tree" extends="chrome://global/content/bindings/tree.xml#tree">
michael@0:     <content>
michael@0:       <children includes="treecols"/>
michael@0:       <xul:treerows class="autocomplete-treerows tree-rows" xbl:inherits="hidescrollbar" flex="1">
michael@0:         <children/>
michael@0:       </xul:treerows>
michael@0:     </content>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-richlistbox" extends="chrome://global/content/bindings/richlistbox.xml#richlistbox">
michael@0:     <implementation>
michael@0:       <field name="mLastMoveTime">Date.now()</field>
michael@0:     </implementation>
michael@0:     <handlers>
michael@0:       <handler event="mouseup">
michael@0:         <![CDATA[
michael@0:         // don't call onPopupClick for the scrollbar buttons, thumb, slider, etc.
michael@0:         var item = event.originalTarget;
michael@0: 
michael@0:         while (item && item.localName != "richlistitem")
michael@0:           item = item.parentNode;
michael@0: 
michael@0:         if (!item)
michael@0:           return;
michael@0: 
michael@0:         this.parentNode.onPopupClick(event);
michael@0:       ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="mousemove">
michael@0:         <![CDATA[
michael@0:         if (Date.now() - this.mLastMoveTime > 30) {
michael@0:          var item = event.target;
michael@0: 
michael@0:          while (item && item.localName != "richlistitem")
michael@0:            item = item.parentNode;
michael@0: 
michael@0:          if (!item)
michael@0:            return;
michael@0: 
michael@0:          var rc = this.getIndexOfItem(item);
michael@0:          if (rc != this.selectedIndex)
michael@0:             this.selectedIndex = rc;
michael@0: 
michael@0:          this.mLastMoveTime = Date.now();
michael@0:         }
michael@0:       ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-treebody">
michael@0:     <implementation>
michael@0:       <field name="mLastMoveTime">Date.now()</field>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="mouseup" action="this.parentNode.parentNode.onPopupClick(event);"/>
michael@0: 
michael@0:       <handler event="mousedown"><![CDATA[
michael@0:          var rc = this.parentNode.treeBoxObject.getRowAt(event.clientX, event.clientY);
michael@0:          if (rc != this.parentNode.currentIndex)
michael@0:             this.parentNode.view.selection.select(rc);
michael@0:       ]]></handler>
michael@0: 
michael@0:       <handler event="mousemove"><![CDATA[
michael@0:         if (Date.now() - this.mLastMoveTime > 30) {
michael@0:          var rc = this.parentNode.treeBoxObject.getRowAt(event.clientX, event.clientY);
michael@0:          if (rc != this.parentNode.currentIndex)
michael@0:             this.parentNode.view.selection.select(rc);
michael@0:          this.mLastMoveTime = Date.now();
michael@0:         }
michael@0:       ]]></handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="autocomplete-treerows">
michael@0:     <content>
michael@0:       <xul:hbox flex="1" class="tree-bodybox">
michael@0:         <children/>
michael@0:       </xul:hbox>
michael@0:       <xul:scrollbar xbl:inherits="collapsed=hidescrollbar" orient="vertical" class="tree-scrollbar"/>
michael@0:     </content>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="history-dropmarker" extends="chrome://global/content/bindings/general.xml#dropmarker">
michael@0:     <implementation>
michael@0:       <method name="showPopup">
michael@0:         <body><![CDATA[
michael@0:           var textbox = document.getBindingParent(this);
michael@0:           textbox.showHistoryPopup();
michael@0:         ]]></body>
michael@0:       </method>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="mousedown" button="0"><![CDATA[
michael@0:         this.showPopup();
michael@0:       ]]></handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0: </bindings>