Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-04-02 12:32:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 509525. Float the urlbar using position: fixed instead

Browse Source
This commit is contained in:
Vivien Nicolas 2009-08-14 13:02:23 -07:00
parent 7af3d0092b
commit e70db13288
5 changed files with 69 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mobile/chrome/content/browser-ui.js
View File

@ -294,6 +294,10 @@ var BrowserUI = {
popup.height = windowH - this.toolbarH; popup.height = windowH - this.toolbarH;
popup.width = windowW; popup.width = windowW;
// toolbar UI
document.getElementById("toolbar-container").height = this.toolbarH;
document.getElementById("toolbar-main").width = windowW;
// notification box // notification box
document.getElementById("notifications").width = windowW; document.getElementById("notifications").width = windowW;

64
mobile/chrome/content/browser.js
View File

@ -387,12 +387,8 @@ var Browser = {
let spacers = document.getElementsByClassName("sidebar-spacer"); let spacers = document.getElementsByClassName("sidebar-spacer");
for (let i = 0, len = spacers.length; i < len; i++) spacers[i].style.height = toolbarHeight + 'px'; for (let i = 0, len = spacers.length; i < len; i++) spacers[i].style.height = toolbarHeight + 'px';
let toolbarContainer = document.getElementById("toolbar-container"); // toolbar UI
let stackToolbarContainer = document.getElementById("stack-toolbar-container"); document.getElementById("toolbar-main").width = w;
toolbarContainer.style.width = w + 'px';
toolbarContainer.style.height = toolbarHeight + 'px';
stackToolbarContainer.style.width = w + 'px';
stackToolbarContainer.style.height = toolbarHeight + 'px';
// Tell the UI to resize the browser controls before calling updateSize // Tell the UI to resize the browser controls before calling updateSize
BrowserUI.sizeControls(w, h); BrowserUI.sizeControls(w, h);
@ -975,58 +971,26 @@ var Browser = {
}, },
tryFloatToolbar: function tryFloatToolbar() { tryFloatToolbar: function tryFloatToolbar() {
let stackToolbarContainer = document.getElementById("stack-toolbar-container"); if (this.floatedWhileDragging)
let toolbarMain = document.getElementById("toolbar-main"); return false;
if (toolbarMain.parentNode == stackToolbarContainer)
return true;
let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility(); let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility();
// XXX computeSideBarVisibility will normally return 0.0015... for ritevis // XXX computeSideBarVisibility will normally return 0.0015... for ritevis
if (leftvis > 0.002 || ritevis > 0.002) { if (leftvis > 0.002 || ritevis > 0.002) {
let toolbarContainer = document.getElementById("toolbar-container"); document.getElementById("toolbar-moveable-container").top = 0;
this.floatedWhileDragging = true;
// XXX Hack to reset the value of the textbox after the appendChild below
// removes and adds it back into the document
let urlbar = document.getElementById("urlbar-edit");
let url = urlbar.value;
setTimeout(function() { urlbar.value = url; }, 0);
// if the toolbar isn't already inside of the stack toolbar then we move it there
dump("moving toolbar to stack\n");
stackToolbarContainer.appendChild(toolbarMain);
stackToolbarContainer.setAttribute("hidden", false);
return true;
} }
return false;
}, },
tryUnfloatToolbar: function tryUnfloatToolbar() { tryUnfloatToolbar: function tryUnfloatToolbar() {
let toolbarContainer = document.getElementById("toolbar-container"); if (!this.floatedWhileDragging)
let toolbarMain = document.getElementById("toolbar-main"); return;
if (toolbarMain.parentNode == toolbarContainer)
return true;
let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility(); let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility();
if (leftvis <= 0.002 && ritevis <= 0.002) { if (leftvis <= 0.002 && ritevis <= 0.002) {
let stackToolbarContainer = document.getElementById("stack-toolbar-container"); document.getElementById("toolbar-moveable-container").top = "";
this.floatedWhileDragging = false;
// XXX Hack to reset the value of the textbox after the appendChild below
// removes and adds it back into the document
let urlbar = document.getElementById("urlbar-edit");
let url = urlbar.value;
setTimeout(function() { urlbar.value = url; }, 0);
dump("moving toolbar to scrollbox\n");
document.getElementById("urlbar-edit").boxObject.setProperty("value", "hello");
toolbarContainer.appendChild(toolbarMain);
stackToolbarContainer.setAttribute("hidden", true);
return true;
} }
return false;
}, },
zoom: function zoom(aDirection) { zoom: function zoom(aDirection) {
@ -1268,7 +1232,6 @@ Browser.MainDragger.prototype = {
} }
this.bv.pauseRendering(); this.bv.pauseRendering();
this.floatedWhileDragging = false;
}, },
dragStop: function dragStop(dx, dy, scroller) { dragStop: function dragStop(dx, dy, scroller) {
@ -1279,7 +1242,6 @@ Browser.MainDragger.prototype = {
Browser.tryUnfloatToolbar(); Browser.tryUnfloatToolbar();
this.bv.resumeRendering(); this.bv.resumeRendering();
this.floatedWhileDragging = false;
return (dx != 0) || (dy != 0); return (dx != 0) || (dy != 0);
}, },
@ -1323,8 +1285,7 @@ Browser.MainDragger.prototype = {
this.bv.onBeforeVisibleMove(dx, dy); this.bv.onBeforeVisibleMove(dx, dy);
if (!this.floatedWhileDragging) Browser.tryFloatToolbar();
this.floatedWhileDragging = Browser.tryFloatToolbar();
let [x0, y0] = Browser.getScrollboxPosition(scroller); let [x0, y0] = Browser.getScrollboxPosition(scroller);
scroller.scrollBy(dx, dy); scroller.scrollBy(dx, dy);
@ -1348,8 +1309,7 @@ Browser.MainDragger.prototype = {
outerDragMove: function outerDragMove(dx, dy, scroller, doReturnDX) { outerDragMove: function outerDragMove(dx, dy, scroller, doReturnDX) {
this.bv.onBeforeVisibleMove(dx, dy); this.bv.onBeforeVisibleMove(dx, dy);
if (!this.floatedWhileDragging) Browser.tryFloatToolbar();
this.floatedWhileDragging = Browser.tryFloatToolbar();
let [x0, y0] = Browser.getScrollboxPosition(scroller); let [x0, y0] = Browser.getScrollboxPosition(scroller);
scroller.scrollBy(dx, dy); scroller.scrollBy(dx, dy);

63
mobile/chrome/content/browser.xul
View File

@ -199,38 +199,40 @@
<scrollbox id="tile-container-container" style="-moz-box-orient: vertical; overflow: hidden;" flex="1"> <scrollbox id="tile-container-container" style="-moz-box-orient: vertical; overflow: hidden;" flex="1">
<!-- Main Toolbar --> <!-- Main Toolbar -->
<box id="toolbar-container"> <box id="toolbar-container" class="panel-dark">
<toolbar id="toolbar-main" class="panel-dark" flex="1"> <box id="toolbar-moveable-container">
<hbox id="urlbar-container" flex="1"> <toolbar id="toolbar-main" class="panel-dark">
<box id="identity-box" <hbox id="urlbar-container" flex="1">
onclick="getIdentityHandler().handleIdentityButtonEvent(event);" <box id="identity-box"
onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);"> onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
<box id="urlbar-image-box"> onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
<image id="urlbar-throbber"/> <box id="urlbar-image-box">
<image id="urlbar-favicon" hidden="true"/> <image id="urlbar-throbber"/>
<image id="urlbar-favicon" hidden="true"/>
</box>
</box> </box>
</box> <hbox id="urlbar-editarea" flex="1">
<hbox id="urlbar-editarea" flex="1"> <textbox id="urlbar-edit"
<textbox id="urlbar-edit" type="autocomplete"
type="autocomplete" autocompletesearch="history"
autocompletesearch="history" autocompletepopup="popup_autocomplete"
autocompletepopup="popup_autocomplete" enablehistory="false"
enablehistory="false" maxrows="6"
maxrows="6" completeselectedindex="true"
completeselectedindex="true" minresultsforpopup="0"
minresultsforpopup="0" flex="1"
flex="1" ontextentered="BrowserUI.goToURI();"
ontextentered="BrowserUI.goToURI();" clickSelectsAll="true"/>
clickSelectsAll="true"/> </hbox>
<hbox id="urlbar-icons" mode="view">
<toolbarbutton id="tool-reload" class="urlbar-cap-button" command="cmd_reload"/>
<toolbarbutton id="tool-stop" class="urlbar-cap-button" command="cmd_stop"/>
<toolbarbutton id="tool-go" class="urlbar-cap-button" command="cmd_go"/>
</hbox>
</hbox> </hbox>
<hbox id="urlbar-icons" mode="view"> <toolbarbutton id="tool-app-close" class="urlbar-button button-image" command="cmd_close"/>
<toolbarbutton id="tool-reload" class="urlbar-cap-button" command="cmd_reload"/> </toolbar>
<toolbarbutton id="tool-stop" class="urlbar-cap-button" command="cmd_stop"/> </box>
<toolbarbutton id="tool-go" class="urlbar-cap-button" command="cmd_go"/>
</hbox>
</hbox>
<toolbarbutton id="tool-app-close" class="urlbar-button button-image" command="cmd_close"/>
</toolbar>
</box> </box>
<notificationbox id="notifications"/> <notificationbox id="notifications"/>
@ -258,7 +260,6 @@
</hbox> </hbox>
</scrollbox> </scrollbox>
<box id="stack-toolbar-container" hidden="true" top="0" left="0"/>
<!-- popup for find toolbar --> <!-- popup for find toolbar -->
<hbox id="findbar-container" hidden="true" top="0" left="0"> <hbox id="findbar-container" hidden="true" top="0" left="0">
<findbar id="findbar" flex="1"/> <findbar id="findbar" flex="1"/>

11
mobile/themes/hildon/browser.css
View File

@ -48,6 +48,17 @@
border: none; border: none;
} }
#toolbar-moveable-container {
display: block;
}
#toolbar-moveable-container[top="0"] {
position: fixed;
left: 0;
z-index: 1000;
}
/* main toolbar buttons */ /* main toolbar buttons */
toolbarbutton.urlbar-button { toolbarbutton.urlbar-button {
/* space out the buttons a bit horizontally */ /* space out the buttons a bit horizontally */

10
mobile/themes/wince/browser.css
View File

@ -52,6 +52,16 @@
border: none; border: none;
} }
#toolbar-moveable-container {
display: block;
}
#toolbar-moveable-container[top="0"] {
position: fixed;
left: 0;
z-index: 1000;
}
/* main toolbar buttons */ /* main toolbar buttons */
toolbarbutton.urlbar-button { toolbarbutton.urlbar-button {
/* space out the buttons a bit horizontally */ /* space out the buttons a bit horizontally */