Bug 580242 - Add a filter textbox in the select helper UI [r=mfinkle]
authorVivien Nicolas <21@vingtetun.org>
Thu, 22 Jul 2010 01:39:43 +0200
changeset 66379 235a53d21a91b3449939e539a87142cd67b2aaea
parent 66378 396e74a708a6c1dac95bf479aba674ecbc225393
child 66380 61024744dcae3077b471de995ad9d21e63b62ede
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs580242
Bug 580242 - Add a filter textbox in the select helper UI [r=mfinkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.xul
mobile/themes/core/browser.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -1817,16 +1817,21 @@ var SelectHelperUI = {
   _list: null,
   _selectedIndexes: null,
 
   get _panel() {
     delete this._panel;
     return this._panel = document.getElementById("select-container");
   },
 
+  get _textbox() {
+    delete this._textbox;
+    return this._textbox = document.getElementById("select-helper-textbox");
+  },
+
   show: function(aList) {
     this._list = aList;
 
     this._container = document.getElementById("select-list");
     this._container.setAttribute("multiple", aList.multiple ? "true" : "false");
 
     this._selectedIndexes = this._getSelectedIndexes();
     let firstSelected = null;
@@ -1853,28 +1858,31 @@ var SelectHelperUI = {
 
       if (choice.selected) {
         item.setAttribute("selected", "true");
         firstSelected = firstSelected || item;
       }
     }
 
     this._panel.hidden = false;
+    this._panel.height = this._panel.getBoundingClientRect().height;
 
     if (!this._docked)
       BrowserUI.pushPopup(this, this._panel);
 
     this._scrollElementIntoView(firstSelected);
 
     this._container.addEventListener("click", this, false);
   },
 
   dock: function dock(aContainer) {
     aContainer.insertBefore(this._panel, aContainer.lastChild);
     this._panel.style.maxHeight = (window.innerHeight / 1.8) + "px";
+    this._textbox.hidden = false;
+
     this._docked = true;
   },
 
   undock: function undock() {
     let rootNode = Elements.stack;
     rootNode.insertBefore(this._panel, rootNode.lastChild);
     this._panel.style.maxHeight = "";
     this._docked = false;
@@ -1882,30 +1890,42 @@ var SelectHelperUI = {
 
   reset: function() {
     this._updateControl();
     let empty = this._container.cloneNode(false);
     this._container.parentNode.replaceChild(empty, this._container);
     this._container = empty;
     this._list = null;
     this._selectedIndexes = null;
+    this._panel.height = "";
+    this._textbox.value = "";
   },
 
   hide: function() {
     this._container.removeEventListener("click", this, false);
-    this._panel.hidden = true;
+    this._panel.hidden = this._textbox.hidden = true;
 
     if (this._docked)
       this.undock();
     else
       BrowserUI.popPopup();
 
     this.reset();
   },
 
+  filter: function(aValue) {
+    let reg = new RegExp(aValue, "gi");
+    let options = this._container.childNodes;
+    for (let i = 0; i < options.length; i++) {
+      let option = options[i];
+      option.getAttribute("label").match(reg) ? option.removeAttribute("filtered")
+                                              : option.setAttribute("filtered", "true");
+    }
+  },
+
   unselectAll: function() {
     let choices = this._list.choices;
     this._forEachOption(function(aItem, aIndex) {
       aItem.selected = false;
       choices[aIndex].selected = false;
     });
   },
 
@@ -2072,17 +2092,17 @@ var ContextHelper = {
       }
       command.hidden = true;
     }
 
     if (!first) {
       this.popupState = null;
       return;
     }
-    
+
     first.setAttribute("selector", "first-child");
     last.setAttribute("selector", "last-child");
 
     let label = document.getElementById("context-hint");
     if (this.popupState.onImage)
       label.value = this.popupState.mediaURL;
     if (this.popupState.onLink)
       label.value = this.popupState.linkURL;
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -272,16 +272,17 @@
             </vbox>
           </vbox>
         </scrollbox>
 
         <!-- popup for content navigator helper -->
         <vbox id="content-navigator" class="window-width" top="0" spacer="content-navigator-spacer">
           <arrowscrollbox id="form-helper-autofill" collapsed="true" align="center" flex="1" orient="horizontal"
                           onclick="FormHelperUI.doAutoComplete(event.target);"/>
+          <textbox id="select-helper-textbox" oncommand="SelectHelperUI.filter(this.value)" type="search" flex="1"/>
           <textbox id="find-helper-textbox" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search" flex="1"/>
         </vbox>
       </stack>
 
       <!-- Right toolbar -->
       <vbox class="panel-dark">
         <!-- Because of the stack + fixed position of the urlbar when it is in
              locked mode the event on the top-right part of the urlbar are
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1109,16 +1109,17 @@ pageaction .pageaction-desc[value=""] {
   display: -moz-box;
 }
 
 #content-navigator:not([type="form"]) > #form-helper-autofill {
   visibility: collapse;
 }
 
 #content-navigator:not([type="form"]) > #select-container,
+#content-navigator:not([type="form"]) > #select-helper-textbox,
 #content-navigator:not([type="find"]) > #find-helper-textbox {
   display: none;
 }
 
 #content-navigator > #select-container > #select-container-inner {
   border-width: 0;
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-topright: 8px;
@@ -1247,16 +1248,20 @@ pageaction .pageaction-desc[value=""] {
   background-color: #fff;
   padding: 5px;
   border-bottom: 1px solid rgb(207,207,207);
   min-height: 70px; /* row size */
   max-height: 70px; /* row size */
   -moz-box-align: center;
 }
 
+#select-list > option[filtered="true"] {
+  display: none;
+}
+
 #select-list > option[selected="true"] {
   background-color: #8db8d8;
 }
 
 #select-list > option.optgroup {
   font-weight: bold;
   font-style: italic;
 }