Bug 580242 - Add a filter textbox in the select helper UI [r=mfinkle]
--- 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;
}