Bug 1302522 - remove CSS properties that slow down scrolling with find toolbar dimming enabled and listen to a singular scroll event. r?mstange draft
authorMike de Boer <mdeboer@mozilla.com>
Fri, 16 Sep 2016 12:05:00 +0200
changeset 414415 d703c0c9c002ff0de47f5744294c8ca081fc4884
parent 414402 d8aad5dec43e6e962cc39d2a78c1002c1872d1a7
child 531440 f61d4b6d8799dc79d576713b53872d2b6fcb54a0
push id29668
push usermdeboer@mozilla.com
push dateFri, 16 Sep 2016 10:05:22 +0000
reviewersmstange
bugs1302522
milestone51.0a1
Bug 1302522 - remove CSS properties that slow down scrolling with find toolbar dimming enabled and listen to a singular scroll event. r?mstange MozReview-Commit-ID: EuFMJNTNRC0
toolkit/modules/FinderHighlighter.jsm
--- a/toolkit/modules/FinderHighlighter.jsm
+++ b/toolkit/modules/FinderHighlighter.jsm
@@ -41,31 +41,28 @@ const kModalStyles = {
     ["background", "#ffc535"],
     ["border-radius", "3px"],
     ["box-shadow", "0 2px 0 0 rgba(0,0,0,.1)"],
     ["color", "#000"],
     ["display", "-moz-box"],
     ["margin", "-2px 0 0 -2px !important"],
     ["padding", "2px !important"],
     ["pointer-events", "none"],
-    ["transition-property", "opacity, transform, top, left"],
-    ["transition-duration", "50ms"],
-    ["transition-timing-function", "linear"],
     ["white-space", "nowrap"],
+    ["will-change", "transform"],
     ["z-index", 2]
   ],
   outlineNodeDebug: [ ["z-index", 2147483647] ],
   outlineText: [
     ["margin", "0 !important"],
     ["padding", "0 !important"],
     ["vertical-align", "top !important"]
   ],
   maskNode: [
     ["background", "#000"],
-    ["mix-blend-mode", "multiply"],
     ["opacity", ".35"],
     ["pointer-events", "none"],
     ["position", "absolute"],
     ["z-index", 1]
   ],
   maskNodeDebug: [
     ["z-index", 2147483646],
     ["top", 0],
@@ -111,16 +108,19 @@ function mockAnonymousContentNode(domNod
       if (!node.hasAttribute(attrName))
         return;
       node.removeAttribute(attrName);
     },
     remove() {
       try {
         domNode.parentNode.removeChild(domNode);
       } catch (ex) {}
+    },
+    setAnimationForElement(id, keyframes, duration) {
+      return (domNode.querySelector("#" + id) || domNode).animate(keyframes, duration);
     }
   };
 }
 
 let gWindows = new Map();
 
 /**
  * FinderHighlighter class that is used by Finder.jsm to take care of the
@@ -1153,18 +1153,17 @@ FinderHighlighter.prototype = {
       this._scheduleRepaintOfMask.bind(this, window, { contentChanged: true }),
       this._scheduleRepaintOfMask.bind(this, window, { updateAllRanges: true }),
       this._scheduleRepaintOfMask.bind(this, window, { scrollOnly: true }),
       this.hide.bind(this, window, null)
     ];
     let target = this.iterator._getDocShell(window).chromeEventHandler;
     target.addEventListener("MozAfterPaint", dict.highlightListeners[0]);
     target.addEventListener("resize", dict.highlightListeners[1]);
-    target.addEventListener("DOMMouseScroll", dict.highlightListeners[2]);
-    target.addEventListener("mousewheel", dict.highlightListeners[2]);
+    target.addEventListener("scroll", dict.highlightListeners[2]);
     target.addEventListener("click", dict.highlightListeners[3]);
   },
 
   /**
    * Remove event listeners from content.
    *
    * @param {nsIDOMWindow} window
    */
@@ -1172,18 +1171,17 @@ FinderHighlighter.prototype = {
     window = window.top;
     let dict = this.getForWindow(window);
     if (!dict.highlightListeners)
       return;
 
     let target = this.iterator._getDocShell(window).chromeEventHandler;
     target.removeEventListener("MozAfterPaint", dict.highlightListeners[0]);
     target.removeEventListener("resize", dict.highlightListeners[1]);
-    target.removeEventListener("DOMMouseScroll", dict.highlightListeners[2]);
-    target.removeEventListener("mousewheel", dict.highlightListeners[2]);
+    target.removeEventListener("scroll", dict.highlightListeners[2]);
     target.removeEventListener("click", dict.highlightListeners[3]);
 
     dict.highlightListeners = null;
   },
 
   /**
    * For a given node returns its editable parent or null if there is none.
    * It's enough to check if node is a text node and its parent's parent is