mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-03-09 04:25:38 +00:00
Bug 612900 - Cannot pan list of search engines when list is longer than viewable screen [r=mfinkle]
This commit is contained in:
parent
e35936a5ae
commit
6f95372eb3
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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">
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user