зеркало из https://github.com/mozilla/pjs.git
b=444248, r=gavin. Add interactions and animations to nav controls
This commit is contained in:
Mark Finkle
Родитель
165f0823f5
Коммит
37aec24132
|
|
@ -135,6 +135,97 @@ var BrowserUI = {
|
|||
return items;
|
||||
},
|
||||
|
||||
_dragData : { dragging : false, sY : 0, sTop : 0 },
|
||||
|
||||
_scrollToolbar : function(aEvent) {
|
||||
if (this._dragData.dragging && Browser.content.scrollY == 0) {
|
||||
let toolbar = document.getElementById("toolbar-main");
|
||||
let browser = document.getElementById("browser");
|
||||
let dy = this._dragData.sY - aEvent.screenY;
|
||||
|
||||
let newTop = null;
|
||||
if (dy > 0 && toolbar.top > -toolbar.boxObject.height) {
|
||||
// Scroll the toolbar up unless it is already scrolled up
|
||||
newTop = this._dragData.sTop - dy;
|
||||
|
||||
// Clip the adjustment to just enough to hide the toolbar
|
||||
if (newTop < -toolbar.boxObject.height)
|
||||
newTop = -toolbar.boxObject.height;
|
||||
|
||||
// Reset the browser start point
|
||||
Browser.content.dragData.sX = aEvent.screenX;
|
||||
Browser.content.dragData.sY = aEvent.screenY;
|
||||
}
|
||||
else if (dy < 0 && toolbar.top < 0) {
|
||||
// Scroll the toolbar down unless it is already down
|
||||
newTop = this._dragData.sTop - dy;
|
||||
|
||||
// Clip the adjustment to just enough to fully show the toolbar
|
||||
if (newTop > 0)
|
||||
newTop = 0;
|
||||
}
|
||||
|
||||
// Update the toolbar and browser tops. Stop the mousemove from
|
||||
// getting to the deckbrowser.
|
||||
if (newTop != null) {
|
||||
toolbar.top = newTop;
|
||||
browser.top = newTop + toolbar.boxObject.height;
|
||||
|
||||
aEvent.stopPropagation();
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Reset our start point while the browser is doing its panning
|
||||
this._dragData.sY = aEvent.screenY;
|
||||
}
|
||||
},
|
||||
|
||||
// This function will always show the toolbar
|
||||
_showToolbar : function() {
|
||||
var toolbar = document.getElementById("toolbar-main");
|
||||
var browser = document.getElementById("browser");
|
||||
|
||||
if (toolbar.top == -toolbar.boxObject.height) {
|
||||
// Float the toolbar over content
|
||||
toolbar.top = 0;
|
||||
}
|
||||
else if (toolbar.top < 0) {
|
||||
// Partially showing, so show it completely
|
||||
toolbar.top = 0;
|
||||
browser.top = toolbar.boxObject.height;
|
||||
}
|
||||
},
|
||||
|
||||
// This function will only hide the toolbar if it was floated
|
||||
_hideToolbar : function() {
|
||||
var toolbar = document.getElementById("toolbar-main");
|
||||
var browser = document.getElementById("browser");
|
||||
|
||||
// If we are floating the toolbar, then hide it again
|
||||
if (browser.top == 0) {
|
||||
toolbar.top = -toolbar.boxObject.height;
|
||||
}
|
||||
},
|
||||
|
||||
_sizeControls : function (aEvent) {
|
||||
var rect = document.getElementById("browser-container").getBoundingClientRect();
|
||||
var containerW = rect.right - rect.left;
|
||||
var containerH = rect.bottom - rect.top;
|
||||
|
||||
var browser = document.getElementById("browser");
|
||||
browser.width = containerW;
|
||||
browser.height = containerH;
|
||||
|
||||
var toolbar = document.getElementById("toolbar-main");
|
||||
var sidebar = document.getElementById("browser-controls");
|
||||
var tablist = document.getElementById("tab-list-container");
|
||||
sidebar.left = toolbar.width = containerW;
|
||||
sidebar.height = tablist.height = containerH;
|
||||
|
||||
var popup = document.getElementById("popup_autocomplete");
|
||||
popup.height = containerH - toolbar.boxObject.height;
|
||||
},
|
||||
|
||||
init : function() {
|
||||
this._caption = document.getElementById("urlbar-caption");
|
||||
this._caption.addEventListener("click", this, false);
|
||||
|
|
@ -151,6 +242,12 @@ var BrowserUI = {
|
|||
getBrowser().addEventListener("DOMLinkAdded", this, true);
|
||||
Browser.content.addEventListener("overpan", this, false);
|
||||
Browser.content.addEventListener("pan", this, true);
|
||||
|
||||
Browser.content.addEventListener("mousedown", this, true);
|
||||
Browser.content.addEventListener("mouseup", this, true);
|
||||
Browser.content.addEventListener("mousemove", this, true);
|
||||
|
||||
window.addEventListener("resize", this, false);
|
||||
},
|
||||
|
||||
update : function(aState) {
|
||||
|
|
@ -164,12 +261,15 @@ var BrowserUI = {
|
|||
if (aState == TOOLBARSTATE_LOADING) {
|
||||
this.show(PANELMODE_URLVIEW);
|
||||
|
||||
toolbar.top = 0;
|
||||
toolbar.setAttribute("mode", "loading");
|
||||
this._throbber.setAttribute("src", "chrome://browser/skin/images/throbber.gif");
|
||||
this._favicon.setAttribute("src", "");
|
||||
this._faviconAdded = false;
|
||||
}
|
||||
else if (aState == TOOLBARSTATE_LOADED) {
|
||||
var browser = document.getElementById("browser");
|
||||
browser.top = toolbar.boxObject.height;
|
||||
toolbar.setAttribute("mode", "view");
|
||||
this._throbber.setAttribute("src", "");
|
||||
if (this._faviconAdded == false) {
|
||||
|
|
@ -236,13 +336,6 @@ var BrowserUI = {
|
|||
this.show(PANELMODE_URLVIEW);
|
||||
},
|
||||
|
||||
sizeAutocompletePopup : function () {
|
||||
var rect = document.getElementById("browser-container").getBoundingClientRect();
|
||||
var toolbar = document.getElementById("toolbar-main");
|
||||
var popup = document.getElementById("popup_autocomplete");
|
||||
popup.height = rect.bottom - rect.top - toolbar.boxObject.height;
|
||||
},
|
||||
|
||||
openDefaultHistory : function () {
|
||||
if (!this._edit.value) {
|
||||
this._autocompleteNavbuttons.hidden = true;
|
||||
|
|
@ -309,12 +402,13 @@ var BrowserUI = {
|
|||
var container = document.getElementById("browser-container");
|
||||
|
||||
// Make sure the UI elements are sized correctly since the window size can change
|
||||
sidebar.left = container.boxObject.width;
|
||||
sidebar.height = tablist.height = container.boxObject.height;
|
||||
//sidebar.left = toolbar.width = container.boxObject.width;
|
||||
//sidebar.height = tablist.height = container.boxObject.height;
|
||||
|
||||
if (aMode == PANELMODE_URLVIEW || aMode == PANELMODE_SIDEBAR ||
|
||||
aMode == PANELMODE_TABLIST || aMode == PANELMODE_FULL)
|
||||
{
|
||||
this._showToolbar();
|
||||
toolbar.setAttribute("mode", "view");
|
||||
this._edit.hidden = true;
|
||||
this._edit.reallyClosePopup();
|
||||
|
|
@ -332,6 +426,7 @@ var BrowserUI = {
|
|||
tablist.left = tablistTo;
|
||||
}
|
||||
else if (aMode == PANELMODE_URLEDIT) {
|
||||
this._showToolbar();
|
||||
toolbar.setAttribute("mode", "edit");
|
||||
this._caption.hidden = true;
|
||||
this._edit.hidden = false;
|
||||
|
|
@ -343,6 +438,7 @@ var BrowserUI = {
|
|||
tablist.left = -tablist.boxObject.width;
|
||||
}
|
||||
else if (aMode == PANELMODE_BOOKMARK) {
|
||||
this._showToolbar();
|
||||
toolbar.setAttribute("mode", "view");
|
||||
this._edit.hidden = true;
|
||||
this._edit.reallyClosePopup();
|
||||
|
|
@ -356,6 +452,7 @@ var BrowserUI = {
|
|||
bookmark.width = container.boxObject.width;
|
||||
}
|
||||
else if (aMode == PANELMODE_BOOKMARKLIST) {
|
||||
this._showToolbar();
|
||||
toolbar.setAttribute("mode", "view");
|
||||
this._edit.hidden = true;
|
||||
this._edit.reallyClosePopup();
|
||||
|
|
@ -370,6 +467,7 @@ var BrowserUI = {
|
|||
urllist.height = container.boxObject.height;
|
||||
}
|
||||
else if (aMode == PANELMODE_NONE) {
|
||||
this._hideToolbar();
|
||||
sidebar.left = toolbar.boxObject.width;
|
||||
tablist.left = -tablist.boxObject.width;
|
||||
|
||||
|
|
@ -480,6 +578,20 @@ var BrowserUI = {
|
|||
this.show(mode);
|
||||
break;
|
||||
}
|
||||
case "mousedown":
|
||||
this._dragData.dragging = true;
|
||||
this._dragData.sY = aEvent.screenY;
|
||||
this._dragData.sTop = document.getElementById("toolbar-main").top;
|
||||
break;
|
||||
case "mouseup":
|
||||
this._dragData.dragging = false;
|
||||
break;
|
||||
case "mousemove":
|
||||
this._scrollToolbar(aEvent);
|
||||
break;
|
||||
case "resize":
|
||||
this._sizeControls(aEvent);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
<window id="main-window"
|
||||
width="800" height="480"
|
||||
onload="Browser.startup();"
|
||||
onresize="BrowserUI.sizeAutocompletePopup();"
|
||||
windowtype="navigator:browser"
|
||||
title="&brandShortName;"
|
||||
titlemodifier="&brandShortName;"
|
||||
|
|
@ -176,46 +175,46 @@
|
|||
</panel>
|
||||
</popupset>
|
||||
|
||||
<toolbar id="toolbar-main">
|
||||
<hbox id="urlbar-container" flex="1">
|
||||
<box id="identity-box"
|
||||
onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
|
||||
onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
|
||||
<stack id="urlbar-image-stack">
|
||||
<image id="urlbar-throbber" src=""/>
|
||||
<image id="urlbar-favicon" src=""/>
|
||||
</stack>
|
||||
</box>
|
||||
<description id="urlbar-caption" crop="end" flex="1"/>
|
||||
<textbox id="urlbar-edit"
|
||||
type="autocomplete"
|
||||
autocompletesearch="history"
|
||||
enablehistory="false"
|
||||
maxrows="6"
|
||||
completeselectedindex="true"
|
||||
minresultsforpopup="0"
|
||||
flex="1"
|
||||
hidden="true"
|
||||
autocompletepopup="popup_autocomplete"
|
||||
ontextentered="BrowserUI.goToURI();"
|
||||
clickSelectsAll="true"/>
|
||||
</hbox>
|
||||
<hbox id="urlbar-icons">
|
||||
<toolbarbutton id="tool-reload" class="urlbar-icon-button" command="cmd_reload"/>
|
||||
<toolbarbutton id="tool-stop" class="urlbar-icon-button" command="cmd_stop"/>
|
||||
<toolbarbutton id="tool-go" class="urlbar-icon-button" command="cmd_go"/>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
|
||||
<stack id="browser-container" flex="1" style="overflow: hidden;">
|
||||
<vbox id="browser">
|
||||
<vbox id="browser" style="-moz-stack-sizing: ignore; width: 800px; height: 480px;" top="60">
|
||||
<notificationbox id="notifications" flex="1">
|
||||
<deckbrowser id="content" autocompletepopup="popup_autocomplete_content" flex="1"
|
||||
onnewtab="CommandUpdater.doCommand('cmd_newTab');"/>
|
||||
</notificationbox>
|
||||
</vbox>
|
||||
|
||||
<vbox id="browser-controls" style="-moz-stack-sizing: ignore; width: 80px;" top="0" left="0">
|
||||
<toolbar id="toolbar-main" style="-moz-stack-sizing: ignore; height: 60px" top="0" left="0">
|
||||
<hbox id="urlbar-container" flex="1">
|
||||
<box id="identity-box"
|
||||
onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
|
||||
onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
|
||||
<stack id="urlbar-image-stack">
|
||||
<image id="urlbar-throbber" src=""/>
|
||||
<image id="urlbar-favicon" src=""/>
|
||||
</stack>
|
||||
</box>
|
||||
<description id="urlbar-caption" crop="end" flex="1"/>
|
||||
<textbox id="urlbar-edit"
|
||||
type="autocomplete"
|
||||
autocompletesearch="history"
|
||||
enablehistory="false"
|
||||
maxrows="6"
|
||||
completeselectedindex="true"
|
||||
minresultsforpopup="0"
|
||||
flex="1"
|
||||
hidden="true"
|
||||
autocompletepopup="popup_autocomplete"
|
||||
ontextentered="BrowserUI.goToURI();"
|
||||
clickSelectsAll="true"/>
|
||||
</hbox>
|
||||
<hbox id="urlbar-icons">
|
||||
<toolbarbutton id="tool-reload" class="urlbar-icon-button" command="cmd_reload"/>
|
||||
<toolbarbutton id="tool-stop" class="urlbar-icon-button" command="cmd_stop"/>
|
||||
<toolbarbutton id="tool-go" class="urlbar-icon-button" command="cmd_go"/>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
|
||||
<vbox id="browser-controls" style="-moz-stack-sizing: ignore; width: 80px;" top="60" left="0">
|
||||
<toolbarbutton id="tool-back" class="browser-control-button" command="cmd_back"/>
|
||||
<toolbarbutton id="tool-forward" class="browser-control-button" command="cmd_forward"/>
|
||||
<toolbarbutton id="tool-star" class="browser-control-button" command="cmd_star"/>
|
||||
|
|
@ -223,18 +222,18 @@
|
|||
<toolbarbutton id="tool-actions" class="browser-control-button" command="cmd_actions"/>
|
||||
</vbox>
|
||||
|
||||
<vbox id="tab-list-container" style="-moz-stack-sizing: ignore;" top="0" left="0">
|
||||
<vbox id="tab-list-container" style="-moz-stack-sizing: ignore;" top="60" left="0">
|
||||
<richlistbox id="tab-list" onselect="BrowserUI.selectTab(this.selectedItem);"/>
|
||||
<button id="newtab-button" label="+" command="cmd_newTab"/>
|
||||
</vbox>
|
||||
|
||||
<vbox id="urllist-container" hidden="true" style="-moz-stack-sizing: ignore;" top="0" left="0">
|
||||
<vbox id="urllist-container" hidden="true" style="-moz-stack-sizing: ignore;" top="60" left="0">
|
||||
<hbox id="urllist-items-container" flex="1">
|
||||
<richlistbox id="urllist-items" flex="1"/>
|
||||
</hbox>
|
||||
</vbox>
|
||||
|
||||
<vbox id="bookmark-container" hidden="true" style="-moz-stack-sizing: ignore;" top="0" left="0">
|
||||
<vbox id="bookmark-container" hidden="true" style="-moz-stack-sizing: ignore;" top="60" left="0">
|
||||
<vbox id="bookmark-form">
|
||||
<hbox align="start">
|
||||
<image id="bookmark-image" src="chrome://browser/skin/images/starred48.png"/>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче