Bug 612900 - Cannot pan list of search engines when list is longer than viewable screen [r=mfinkle]

This commit is contained in:
Vivien Nicolas 2010-12-09 10:08:14 -05:00
parent e35936a5ae
commit 6f95372eb3
4 changed files with 69 additions and 16 deletions

View File

@ -43,34 +43,68 @@
<binding id="arrowbox" extends="xul:box">
<content orient="vertical">
<xul:box anonid="container" class="panel-arrowcontainer">
<xul:box anonid="container" class="panel-arrowcontainer" flex="1">
<xul:box anonid="arrowbox" class="panel-arrowbox" dir="ltr">
<xul:image anonid="arrow" class="panel-arrow"/>
</xul:box>
<xul:box class="panel-arrowcontent" flex="1">
<xul:scrollbox anonid="arrowcontent" class="panel-arrowcontent" flex="1">
<xul:box class="panel-inner-arrowcontent" xbl:inherits="align,dir,orient,pack,flex">
<children/>
</xul:box>
</xul:box>
</xul:scrollbox>
</xul:box>
</content>
<implementation>
<field name="_fadeTimer"/>
<implementation implements="nsIDOMEventListener">
<constructor>
<![CDATA[
window.addEventListener("resize", this._eventHandler, false);
]]>
</constructor>
<desctructor>
<![CDATA[
window.removeEventListener("resize", this._eventHandler, false);
]]>
</desctructor>
<property name="scrollBoxObject" readonly="true">
<getter><![CDATA[
let content = document.getAnonymousElementByAttribute(this, "anonid", "arrowcontent");
if (content.style.overflow == "hidden")
return content.boxObject.QueryInterface(Ci.nsIScrollBoxObject);
return null;
]]></getter>
</property>
<property name="offset" onget="return parseInt(this.getAttribute('offset')) || 0;"
onset="this.setAttribute('offset', val); return val;"/>
<field name="anchorNode">null</field>
<method name="anchorTo">
<parameter name="aAnchorNode"/>
<body>
<![CDATA[
if (!aAnchorNode) {
this.arrow.hidden = true;
return;
}
this.anchorNode = aAnchorNode;
let container = document.getAnonymousElementByAttribute(this, "anonid", "container");
let content = document.getAnonymousElementByAttribute(this, "anonid", "arrowcontent");
let arrowbox = document.getAnonymousElementByAttribute(this, "anonid", "arrowbox");
let arrow = document.getAnonymousElementByAttribute(this, "anonid", "arrow");
if (!aAnchorNode) {
arrow.hidden = true;
return;
// If the content of the arrowbox if taller than the available
// screen space, force a maximum height
this.style.minHeight = "";
content.style.overflow = "visible";
const kBottomMargin = 64;
let contentRect = content.firstChild.getBoundingClientRect();
if ((contentRect.height + contentRect.top + kBottomMargin) > window.innerHeight) {
content.style.overflow = "hidden";
this.style.minHeight = (window.innerHeight - parseInt(this.top) - kBottomMargin) + "px";
}
let anchorRect = aAnchorNode.getBoundingClientRect();
@ -120,6 +154,25 @@
]]>
</body>
</method>
<field name="_eventHandler"><![CDATA[
({
self: this,
handleEvent: function handleEvent(aEvent) {
// We need to reset the margins because the previous values could
// cause the arrowbox to size incorrectly.
let self = this.self;
switch (aEvent.type) {
case "resize":
let arrowbox = document.getAnonymousElementByAttribute(self, "anonid", "arrowbox");
arrowbox.style.marginLeft = "0px";
arrowbox.style.marginTop = "0px";
self.anchorTo(self.anchorNode);
break;
}
}
})
]]></field>
</implementation>
</binding>
</bindings>

View File

@ -1297,6 +1297,7 @@ const BrowserSearch = {
let button = document.createElement("button");
button.className = "prompt-button";
button.setAttribute("label", aEngine.name);
button.setAttribute("crop", "end");
button.setAttribute("pack", "start");
button.setAttribute("image", aEngine.iconURI ? aEngine.iconURI.spec : null);
button.onclick = function() {
@ -1311,21 +1312,15 @@ const BrowserSearch = {
popup.anchorTo(document.getElementById("tool-search"));
document.getElementById("urlbar-icons").setAttribute("open", "true");
window.addEventListener("resize", this, true);
BrowserUI.pushPopup(this, [popup, this._button]);
},
hide: function bs_hide() {
this._popup.hidden = true;
document.getElementById("urlbar-icons").removeAttribute("open");
window.removeEventListener("resize", this, true);
BrowserUI.popPopup(this);
},
handleEvent: function handleEvent(aEvent) {
this._popup.anchorTo(document.getElementById("tool-search"));
},
observe: function bs_observe(aSubject, aTopic, aData) {
if (aTopic != "browser-search-engine-modified")
return;

View File

@ -567,8 +567,8 @@
</vbox>
#endif
<arrowbox id="search-engines-popup" hidden="true" class="window-width" offset="18">
<hbox id="search-engines-list" class="prompt-buttons window-width"/>
<arrowbox id="search-engines-popup" hidden="true" offset="18" flex="1">
<hbox id="search-engines-list" class="prompt-buttons" flex="1"/>
</arrowbox>
<vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">

View File

@ -1164,6 +1164,11 @@ pageaction:not([image]) > hbox >.pageaction-image {
visibility: collapse;
}
/* Needed for the crop attribute to have an effect */
#search-engines-list > .prompt-button > .button-box > .button-text {
-moz-box-flex: 1;
}
#search-engines-list > .prompt-button > .button-box > .button-icon {
width: 32px;
height: 32px;