Few ideas for fluentRevealNavbar.uc.js

JS/fluentRevealNavbar.uc.js

@@ -16,16 +16,32 @@
       // if true, show the effect on bookmarks on the toolbar
       includeBookmarks: true,
 
+      // if ture, show the effect on the urlbar as well
+      includeUrlBar: 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)",
+      // lightColor: "hsla(224, 100%, 80%, 0.15)",
+
+      // the color of the gradient. default is the browser's color of navbar button's hover 
+      lightColor: "var(--button-hover-bgcolor)",
 
       // 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: true,
+
+      // looks for all toolbar buttons only once on script startup — reduces system load, but requires browser restart if toolbar buttons were changed
+      cacheButtons: false,
     };
 
+    // store cached navbar buttons
+    static buttons;
+
     // instantiate the handler for a given window
     constructor() {
       this._options = FluentRevealEffect.options;
@@ -38,15 +54,20 @@
 
     // 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.buttons || this._options.cacheButtons == false) {
+        this.buttons = Array.from(
+          gNavToolbox.querySelectorAll(".toolbarbutton-1")
         );
+        if (this._options.includeUrlBar) {
+          this.buttons.push(gNavToolbox.querySelector("#urlbar-background"));
+        }
+        if (this._options.includeBookmarks) {
+          this.buttons = this.buttons.concat(
+            Array.from(this.placesToolbarItems.querySelectorAll(".bookmark-item"))
+          );
+        }
       }
-      return buttons;
+      return this.buttons;
     }
 
     get placesToolbarItems() {
@@ -63,6 +84,13 @@
      * @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._options.gradientSize + 25) {
+        if (this.someEffectsApplied) this.clearEffectsForAll();
+        return;
+      }
+
       requestAnimationFrame(time => {
         switch (e.type) {
           case "scroll":
@@ -139,6 +167,13 @@
         ? el
         : el.querySelector(".toolbarbutton-badge-stack") ||
           el.querySelector(".toolbarbutton-icon");
+      if (!area) area = el;
+
+      // don't apply effect to focused url bar
+      if (this._options.includeUrlBar && el.id == 'urlbar-background' && window.gURLBar.focused) {
+        return this.clearEffect(area);
+      }
+
       let areaStyle = getComputedStyle(area);
       if (
         areaStyle.display == "none" ||
@@ -149,7 +184,9 @@
         area = el.querySelector(".toolbarbutton-text");
       }
 
-      if (el.disabled || areaStyle.pointerEvents == "none") {
+      // previous pointerEvents check may break the effect in FF 115
+      //if (el.disabled || areaStyle.pointerEvents == "none") {
+      if (el.disabled) {
         return this.clearEffect(area);
       }
 
@@ -232,6 +269,17 @@
       this._options.is_pressed = false;
       el.style.removeProperty("background-image");
     }
+
+    /**
+    * invoked once when {filterDy} option enabled, and cursor leaves the interactive area
+    */
+    clearEffectsForAll() {
+      console.log('clear all effects');
+      this.someEffectsApplied = false;
+      this.toolbarButtons.forEach(button =>
+        this.clearEffect(button)
+      );
+    }
   }
 
   function init() {