diff --git a/JS/fluentRevealNavbar.uc.js b/JS/fluentRevealNavbar.uc.js index 1921af6b..7ec2d076 100644 --- a/JS/fluentRevealNavbar.uc.js +++ b/JS/fluentRevealNavbar.uc.js @@ -16,14 +16,25 @@ // if true, show the effect on bookmarks on the toolbar includeBookmarks: true, - // the color of the gradient. default is sort of a faint baby blue. you may prefer just white, e.g. hsla(0, 0%, 100%, 0.05) - lightColor: "hsla(224, 100%, 80%, 0.15)", + // if true, show the effect on the urlbar + includeUrlBar: true, + + // the color of the gradient. default is the browser's color on navbar button hover, or a faint baby blue if it's not available. + // you may prefer just white, e.g. hsla(0, 0%, 100%, 0.05) + lightColor: "var(--button-hover-bgcolor, hsla(224, 100%, 80%, 0.15))", // how wide the radial gradient is. gradientSize: 50, // whether to show an additional light burst when clicking an element. (not recommended) clickEffect: false, + + // don't process mouse movements greater than {gradientSize}px from top of the screen, in order to reduce system load. + // disable if you modified the ui to have toolbar buttons on different side of the screen (left, right or bottom) + filterDy: false, + + // looks for all toolbar buttons only once on script startup — reduces system load, but requires browser restart if toolbar buttons were changed + cacheButtons: false, }; // instantiate the handler for a given window @@ -38,23 +49,37 @@ // get all the toolbar buttons in the navbar, in iterable form get toolbarButtons() { - let buttons = Array.from( - gNavToolbox.querySelectorAll(".toolbarbutton-1") - ); - if (this._options.includeBookmarks) { - buttons = buttons.concat( - Array.from(this.placesToolbarItems.querySelectorAll(".bookmark-item")) + if (!this._toolbarButtons || !this._options.cacheButtons) { + this._toolbarButtons = Array.from( + gNavToolbox.querySelectorAll(".toolbarbutton-1") ); + if (this._options.includeUrlBar) { + this._toolbarButtons.push(gNavToolbox.querySelector("#urlbar-background")); + } + if (this._options.includeBookmarks) { + this._toolbarButtons = this._toolbarButtons.concat( + Array.from( + this.personalToolbar.querySelectorAll( + ".toolbarbutton-1, .bookmark-item" + ) + ) + ); + } } - return buttons; + return this._toolbarButtons; } - get placesToolbarItems() { + get personalToolbar() { return ( - this._placesToolbarItems || - (this._placesToolbarItems = document.getElementById( - "PlacesToolbarItems" - )) + this._personalToolbar || + (this._personalToolbar = document.getElementById("PersonalToolbar")) + ); + } + + get browser() { + return ( + this._browser || + (this._browser = document.getElementById("browser")) ); } @@ -63,6 +88,18 @@ * @param {object} e (event) */ handleEvent(e) { + /// filter out mouse events which are too far from toolbar to cause any actual redraw + /// value is {gradientSize} + some additional padding to make sure effect fully clears out + if ( + this._options.filterDy && + e.clientY > + this.browser.getBoundingClientRect().y + + this._options.gradientSize + ) { + if (this._someEffectsApplied) this.clearEffectsForAll(); + return; + } + requestAnimationFrame(time => { switch (e.type) { case "scroll": @@ -137,8 +174,15 @@ el.id === "PlacesChevron" || el.classList.contains("bookmark-item"); let area = isBookmark ? el - : el.querySelector(".toolbarbutton-badge-stack") || - el.querySelector(".toolbarbutton-icon"); + : el.querySelector(".toolbarbutton-badge-stack") || + el.querySelector(".toolbarbutton-icon"); + if (el.id == "urlbar-background") area = el; + + // don't apply effect to focused url bar + if (this._options.includeUrlBar && el.id == 'urlbar-background' && gURLBar.focused) { + return this.clearEffect(area); + } + let areaStyle = getComputedStyle(area); if ( areaStyle.display == "none" || @@ -149,7 +193,7 @@ area = el.querySelector(".toolbarbutton-text"); } - if (el.disabled || areaStyle.pointerEvents == "none") { + if (el.disabled || getComputedStyle(el).pointerEvents == "none") { return this.clearEffect(area); } @@ -183,6 +227,7 @@ this.toolbarButtons.forEach(button => this.generateToolbarButtonEffect(button, e, click) ); + this._someEffectsApplied = true; } /** @@ -232,6 +277,16 @@ this._options.is_pressed = false; el.style.removeProperty("background-image"); } + + /** + * invoked once when {filterDy} option enabled, and cursor leaves the interactive area + */ + clearEffectsForAll() { + this.toolbarButtons.forEach(button => + this.clearEffect(button) + ); + this._someEffectsApplied = false; + } } function init() { @@ -256,4 +311,4 @@ "browser-delayed-startup-finished" ); } -})(); +})(); \ No newline at end of file