corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 947854 part 1 - Use CSS transition instead of JS animation for hiding toolbox in fullscreen mode and simplify related code. r=dao

Browse Source
This commit is contained in:
Xidorn Quan
2015-05-06 10:04:31 +12:00
parent 761e2c06f7
commit 2b93a898c5
3 changed files with 62 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
browser/base/content/browser-fullScreen.js
View File

@@ -70,18 +70,14 @@ var FullScreen = {
document.addEventListener("keypress", this._keyToggleCallback, false);
document.addEventListener("popupshown", this._setPopupOpen, false);
document.addEventListener("popuphidden", this._setPopupOpen, false);
this._shouldAnimate = true;
// We don't animate the toolbar collapse if in DOM full-screen mode,
// as the size of the content area would still be changing after the
// mozfullscreenchange event fired, which could confuse content script.
this._shouldAnimate = !document.mozFullScreen;
this.mouseoverToggle(false);
this.hideNavToolbox(document.mozFullScreen);
}
else {
// The user may quit fullscreen during an animation
this._cancelAnimation();
gNavToolbox.style.marginTop = "";
if (this._isChromeCollapsed)
this.mouseoverToggle(true);
this.showNavToolbox(false);
// This is needed if they use the context menu to quit fullscreen
this._isPopupOpen = false;
@@ -172,8 +168,7 @@ var FullScreen = {
// Cancel any "hide the toolbar" animation which is in progress, and make
// the toolbar hide immediately.
this._cancelAnimation();
this.mouseoverToggle(false);
this.hideNavToolbox(true);
},
cleanup: function () {
@@ -203,23 +198,22 @@ var FullScreen = {
// Event callbacks
_expandCallback: function()
{
FullScreen.mouseoverToggle(true);
FullScreen.showNavToolbox();
},
onMouseEnter: function()
{
FullScreen.mouseoverToggle(false);
FullScreen.hideNavToolbox();
},
_keyToggleCallback: function(aEvent)
{
// if we can use the keyboard (eg Ctrl+L or Ctrl+E) to open the toolbars, we
// should provide a way to collapse them too.
if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) {
FullScreen._shouldAnimate = false;
FullScreen.mouseoverToggle(false, true);
FullScreen.hideNavToolbox(true);
}
// F6 is another shortcut to the address bar, but its not covered in OpenLocation()
else if (aEvent.keyCode == aEvent.DOM_VK_F6)
FullScreen.mouseoverToggle(true);
FullScreen.showNavToolbox();
},
// Checks whether we are allowed to collapse the chrome
@@ -273,47 +267,6 @@ var FullScreen = {
// Animate the toolbars disappearing
_shouldAnimate: true,
_isAnimating: false,
_animationTimeout: 0,
_animationHandle: 0,
_animateUp: function() {
// check again, the user may have done something before the animation was due to start
if (!window.fullScreen || !this._safeToCollapse(false)) {
this._isAnimating = false;
this._shouldAnimate = true;
return;
}
this._animateStartTime = window.mozAnimationStartTime;
if (!this._animationHandle)
this._animationHandle = window.mozRequestAnimationFrame(this);
},
sample: function (timeStamp) {
const duration = 1500;
const timePassed = timeStamp - this._animateStartTime;
const pos = timePassed >= duration ? 1 :
1 - Math.pow(1 - timePassed / duration, 4);
if (pos >= 1) {
// We've animated enough
this._cancelAnimation();
gNavToolbox.style.marginTop = "";
this.mouseoverToggle(false);
return;
}
gNavToolbox.style.marginTop = (gNavToolbox.boxObject.height * pos * -1) + "px";
this._animationHandle = window.mozRequestAnimationFrame(this);
},
_cancelAnimation: function() {
window.mozCancelAnimationFrame(this._animationHandle);
this._animationHandle = 0;
clearTimeout(this._animationTimeout);
this._isAnimating = false;
this._shouldAnimate = false;
},
cancelWarning: function(event) {
if (!this.warningBox)
@@ -470,38 +423,18 @@ var FullScreen = {
3000);
},
mouseoverToggle: function(aShow, forceHide)
{
// Don't do anything if:
// a) we're already in the state we want,
// b) we're animating and will become collapsed soon, or
// c) we can't collapse because it would be undesirable right now
if (aShow != this._isChromeCollapsed || (!aShow && this._isAnimating) ||
(!aShow && !this._safeToCollapse(forceHide)))
return;
showNavToolbox: function(trackMouse = true) {
this._fullScrToggler.hidden = true;
gNavToolbox.removeAttribute("fullscreenShouldAnimate");
gNavToolbox.style.marginTop = "";
// browser.fullscreen.animateUp
// 0 - never animate up
// 1 - animate only for first collapse after entering fullscreen (default for perf's sake)
// 2 - animate every time it collapses
if (gPrefService.getIntPref("browser.fullscreen.animateUp") == 0)
this._shouldAnimate = false;
if (!aShow && this._shouldAnimate) {
this._isAnimating = true;
this._shouldAnimate = false;
this._animationTimeout = setTimeout(this._animateUp.bind(this), 800);
if (!this._isChromeCollapsed) {
return;
}
// Hiding/collapsing the toolbox interferes with the tab bar's scrollbox,
// so we just move it off-screen instead. See bug 430687.
gNavToolbox.style.marginTop =
aShow ? "" : -gNavToolbox.getBoundingClientRect().height + "px";
this._fullScrToggler.hidden = aShow || document.mozFullScreen;
if (aShow) {
// Track whether mouse is near the toolbox
this._isChromeCollapsed = false;
if (trackMouse) {
let rect = gBrowser.mPanelContainer.getBoundingClientRect();
this._mouseTargetRect = {
top: rect.top + 50,
@@ -510,13 +443,49 @@ var FullScreen = {
right: rect.right
};
MousePosTracker.addListener(this);
} else {
MousePosTracker.removeListener(this);
}
},
hideNavToolbox: function(forceHide = false) {
this._fullScrToggler.hidden = document.mozFullScreen;
if (this._isChromeCollapsed) {
if (forceHide) {
gNavToolbox.removeAttribute("fullscreenShouldAnimate");
}
return;
}
if (!this._safeToCollapse(forceHide)) {
this._fullScrToggler.hidden = true;
return;
}
this._isChromeCollapsed = !aShow;
if (gPrefService.getIntPref("browser.fullscreen.animateUp") == 2)
// browser.fullscreen.animateUp
// 0 - never animate up
// 1 - animate only for first collapse after entering fullscreen (default for perf's sake)
// 2 - animate every time it collapses
let animateUp = gPrefService.getIntPref("browser.fullscreen.animateUp");
if (animateUp == 0) {
this._shouldAnimate = false;
} else if (animateUp == 2) {
this._shouldAnimate = true;
}
if (this._shouldAnimate && !forceHide) {
gNavToolbox.setAttribute("fullscreenShouldAnimate", true);
this._shouldAnimate = false;
// Hide the fullscreen toggler until the transition ends.
let listener = () => {
gNavToolbox.removeEventListener("transitionend", listener, true);
if (this._isChromeCollapsed)
this._fullScrToggler.hidden = false;
};
gNavToolbox.addEventListener("transitionend", listener, true);
this._fullScrToggler.hidden = true;
}
gNavToolbox.style.marginTop =
-gNavToolbox.getBoundingClientRect().height + "px";
this._isChromeCollapsed = true;
MousePosTracker.removeListener(this);
},
showXULChrome: function(aTag, aShow)

4
browser/base/content/browser.css
View File

@@ -300,6 +300,10 @@ toolbar[customizing] > .overflow-button {
visibility: collapse;
}
#navigator-toolbox[fullscreenShouldAnimate] {
transition: 1.5s margin-top ease-out;
}
/* Rules to help integrate SDK widgets */
toolbaritem[sdkstylewidget="true"] > toolbarbutton,
toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe,

4
browser/base/content/browser.js
View File

@@ -1954,7 +1954,7 @@ function loadOneOrMoreURIs(aURIString)
function focusAndSelectUrlBar() {
if (gURLBar) {
if (window.fullScreen)
FullScreen.mouseoverToggle(true);
FullScreen.showNavToolbox();
gURLBar.select();
if (document.activeElement == gURLBar.inputField)
@@ -3417,7 +3417,7 @@ const BrowserSearch = {
}
if (searchBar) {
if (window.fullScreen)
FullScreen.mouseoverToggle(true);
FullScreen.showNavToolbox();
searchBar.select();
}
openSearchPageIfFieldIsNotActive(searchBar);