Few ideas for fluentRevealNavbar.uc.js

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"
     );
   }
-})();
+})();