From ec3d61fb3133c8d44a823ce4e20906d6e22beb7b Mon Sep 17 00:00:00 2001 From: JustOff Date: Tue, 1 May 2018 14:26:54 +0300 Subject: [PALEMOON] Use CSS transition instead of JS animation for hiding toolbox in fullscreen mode and simplify related code --- .../palemoon/base/content/browser-fullScreen.js | 143 ++++++++------------- application/palemoon/base/content/browser.css | 4 + application/palemoon/base/content/browser.js | 4 +- 3 files changed, 62 insertions(+), 89 deletions(-) (limited to 'application/palemoon/base') diff --git a/application/palemoon/base/content/browser-fullScreen.js b/application/palemoon/base/content/browser-fullScreen.js index d5df4a552..961699064 100644 --- a/application/palemoon/base/content/browser-fullScreen.js +++ b/application/palemoon/base/content/browser-fullScreen.js @@ -56,18 +56,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; @@ -140,8 +136,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 () { @@ -169,23 +164,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 @@ -239,47 +233,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.cancelAnimationFrame(this._animationHandle); - this._animationHandle = 0; - clearTimeout(this._animationTimeout); - this._isAnimating = false; - this._shouldAnimate = false; - }, cancelWarning: function(event) { if (!this.warningBox) @@ -433,38 +386,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, @@ -473,13 +406,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) diff --git a/application/palemoon/base/content/browser.css b/application/palemoon/base/content/browser.css index 658655970..05dd00997 100644 --- a/application/palemoon/base/content/browser.css +++ b/application/palemoon/base/content/browser.css @@ -760,3 +760,7 @@ toolbarbutton[pmkit-button="true"] > .toolbarbutton-badge-stack > .toolbarbutton #main-window[inFullscreen] #high-priority-global-notificationbox { visibility: collapse; } + +#navigator-toolbox[fullscreenShouldAnimate] { + transition: 1.5s margin-top ease-out; +} diff --git a/application/palemoon/base/content/browser.js b/application/palemoon/base/content/browser.js index 9f4d66c07..d22e7f140 100644 --- a/application/palemoon/base/content/browser.js +++ b/application/palemoon/base/content/browser.js @@ -1741,7 +1741,7 @@ function loadOneOrMoreURIs(aURIString) function focusAndSelectUrlBar() { if (gURLBar) { if (window.fullScreen) - FullScreen.mouseoverToggle(true); + FullScreen.showNavToolbox(); gURLBar.select(); if (document.activeElement == gURLBar.inputField) @@ -3015,7 +3015,7 @@ const BrowserSearch = { #endif var searchBar = this.searchBar; if (searchBar && window.fullScreen) - FullScreen.mouseoverToggle(true); + FullScreen.showNavToolbox(); if (searchBar) searchBar.select(); if (!searchBar || document.activeElement != searchBar.textbox.inputField) -- cgit v1.2.3