MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API)

third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js

 (function() {
-    var Utility = {
-      distance: function(x1, y1, x2, y2) {
-        var xDelta = (x1 - x2);
-        var yDelta = (y1 - y2);
 
-        return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
-      },
+var MAX_RADIUS = 300;

[dpapad, 2017/02/22 18:48:10]

Can we add units (px, ms), either in the variable name, or in a comment.

[Dan Beam, 2017/02/22 20:19:14]

Done.

+var MIN_DURATION = 800;
 
-      now: window.performance && window.performance.now ?
-          window.performance.now.bind(window.performance) : Date.now
+Polymer({

[dpapad, 2017/02/22 18:48:10]

Should this file be using JSDoc annotations similar to the rest of our Settings
code?

+  is: 'paper-ripple',
+
+  behaviors: [Polymer.IronA11yKeysBehavior],
+
+  properties: {
+    center: {type: Boolean, value: false},
+    holdDown: {type: Boolean, value: false, observer: '_holdDownChanged'},
+    recenters: {type: Boolean, value: false},
+    noink: {type: Boolean, value: false},
+  },
+
+  keyBindings: {
+    'enter:keydown': '_onEnterKeydown',
+    'space:keydown': '_onSpaceKeydown',
+    'space:keyup': '_onSpaceKeyup',
+  },
+
+  created: function() {
+    this.ripples = [];

[dpapad, 2017/02/22 18:48:10]

Should we be declaring properties before we assign to them (ripples,
keyEventTarget)? Augmenting an object in |created| is a bit odd. We talked about
this before but I don't remember if we reached a resolution.

[Dan Beam, 2017/02/22 20:19:14]

there's no functional difference to v8

where is the style rule you're referring to?

[dpapad, 2017/02/22 21:07:26]

That is arguable,
 1) see "hidden classes" at
https://github.com/v8/v8/wiki/Design%20Elements#fast-property-access.
 2) see the "why" section at
https://google.github.io/styleguide/javascriptguide.xml?showone=Method_and_pr...

+  },
+
+  attached: function() {
+    this.keyEventTarget = this.parentNode.nodeType == 11 ?
+        Polymer.dom(this).getOwnerRoot().host : this.parentNode;
+    this.listen(this.keyEventTarget, 'up', 'uiUpAction');
+    this.listen(this.keyEventTarget, 'down', 'uiDownAction');
+  },
+
+  detached: function() {
+    this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
+    this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
+    this.keyEventTarget = null;
+  },
+
+  simulatedRipple: function() {
+    this.downAction();
+    this.async(function() { this.upAction(); }.bind(this), 1);

[dpapad, 2017/02/22 18:48:10]

Nit: Can you add a comment explaining why the delay is 1 and not zero? Is there
a difference?

[Dan Beam, 2017/02/22 20:19:14]

Done.

+  },
+
+  uiDownAction: function(e) {
+    if (!this.noink)
+      this.downAction(e);
+  },
+
+  downAction: function(e) {
+    if (this.ripples.length && this.holdDown)
+      return;
+    // TODO(dbeam): some things (i.e. paper-icon-button-light) dynamically
+    // create ripples on 'up', Ripples register an event listener on their
+    // parent (or shadow DOM host) when attached().  This sometimes causes
+    // duplicate events to fire on us.
+    this.debounce('show ripple', function() { this._showRipple(e); }, 1);
+  },
+
+  _showRipple: function(e) {
+    var rect = this.getBoundingClientRect();
+
+    var roundedCenterX = function() { return Math.round(rect.width / 2); };
+    var roundedCenterY = function() { return Math.round(rect.height / 2); };
+
+    var centered = !e || this.center;
+    if (centered) {
+      var x = roundedCenterX();
+      var y = roundedCenterY();
+    } else {
+      var sourceEvent = e.detail.sourceEvent;
+      var x = Math.round(sourceEvent.clientX - rect.left);
+      var y = Math.round(sourceEvent.clientY - rect.top);
+    }
+
+    var distance = function(x1, y1, x2, y2) {

[dpapad, 2017/02/22 18:48:10]

Can this function be moved outside _showRipple? It is not referencing anything
from the outer scope anyway. This will make it such that it is not unnecessarily
redefined every time showRipple is called.

[Dan Beam, 2017/02/22 20:19:14]

Done.

+      var xDelta = x1 - x2;
+      var yDelta = y1 - y2;
+      return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
     };
 
-    /**
-     * @param {HTMLElement} element
-     * @constructor
-     */
-    function ElementMetrics(element) {
-      this.element = element;
-      this.width = this.boundingRect.width;
-      this.height = this.boundingRect.height;
+    var corners = [
+      {x: 0, y: 0},
+      {x: rect.width, y: 0},
+      {x: 0, y: rect.height},
+      {x: rect.width, y: rect.height},
+    ];
 
-      this.size = Math.max(this.width, this.height);
+    var cornerDistances = corners.map(function(corner) {
+      return Math.round(distance(x, y, corner.x, corner.y));
+    });
+
+    var radius = Math.min(MAX_RADIUS, Math.max.apply(Math, cornerDistances));
+
+    var startTranslate = (x - radius) + 'px, ' + (y - radius) + 'px';
+    if (this.recenters && !centered) {
+      var endTranslate = (roundedCenterX() - radius) + 'px, ' +

[dpapad, 2017/02/22 18:48:10]

Nit: This usage of var relies on JS's hoisting behavior, which makes
endTranslate available in the outer scope, but it would not work if you replace
var with let. Can we do the following which does not rely on hoisting?

var endTranslate;
if (...) {
  endTranslate = ...;
} else
  endTranslate = ...;
}

// use endTranslate here.

[Dan Beam, 2017/02/22 20:19:14]

but this doesn't use let and hoisting's not going to change.  the style guide
also says "always use var".[1]  by the same speculative logic, if somebody
removed the var they'd get globals.

[1] https://google.github.io/styleguide/javascriptguide.xml?showone=var#var

[dpapad, 2017/02/22 21:07:26]

Fair enough.

+                         (roundedCenterY() - radius) + 'px';
+    } else {
+      var endTranslate = startTranslate;
     }
 
-    ElementMetrics.prototype = {
-      get boundingRect () {
-        return this.element.getBoundingClientRect();
-      },
+    var ripple = document.createElement('div');
+    ripple.classList.add('ripple');
+    ripple.style.height = ripple.style.width = 2 * radius + 'px';

[dpapad, 2017/02/22 18:48:10]

Nit: Mixing arithmetic operators with numbers and strings is fragile.

Example:
'' + 2 + 3 + 'px'; // '23px'

Can we add parentheses to make it more robust? 
ripple.style.height = ripple.style.width = (2 * radius) + 'px';

[Dan Beam, 2017/02/22 20:19:14]

Done.

 
-      furthestCornerDistanceFrom: function(x, y) {
-        var topLeft = Utility.distance(x, y, 0, 0);
-        var topRight = Utility.distance(x, y, this.width, 0);
-        var bottomLeft = Utility.distance(x, y, 0, this.height);
-        var bottomRight = Utility.distance(x, y, this.width, this.height);
+    this.ripples.push(ripple);
+    this.shadowRoot.appendChild(ripple);
 
-        return Math.max(topLeft, topRight, bottomLeft, bottomRight);
-      }
-    };
+    ripple.animate({
+      // TODO(dbeam): scale to 90% of radius at .75 offset?
+      transform: ['translate(' + startTranslate + ') scale(0)',
+                  'translate(' + endTranslate + ') scale(1)'],
+    }, {
+      duration: Math.max(MIN_DURATION, Math.log(radius) * radius),
+      easing: 'cubic-bezier(.2, .9, .1, .9)',
+      fill: 'forwards',
+    });
+  },
 
-    /**
-     * @param {HTMLElement} element
-     * @constructor
-     */
-    function Ripple(element) {
-      this.element = element;
-      this.color = window.getComputedStyle(element).color;
+  uiUpAction: function(e) {
+    if (!this.noink)
+      this.upAction();
+  },
 
-      this.wave = document.createElement('div');
-      this.waveContainer = document.createElement('div');
-      this.wave.style.backgroundColor = this.color;
-      this.wave.classList.add('wave');
-      this.waveContainer.classList.add('wave-container');
-      Polymer.dom(this.waveContainer).appendChild(this.wave);
+  upAction: function() {
+    if (!this.holdDown)
+      this.debounce('hide ripple', function() { this._hideRipple(); }, 1);
+  },
 
-      this.resetInteractionState();
-    }
+  _hideRipple: function() {
+    this.ripples.forEach(function(ripple) {
+      var animation = ripple.animate({
+        opacity: [getComputedStyle(ripple).opacity, 0],
+      }, {
+        duration: 150,
+        fill: 'forwards',
+      });
+      var removeRipple = function() { ripple.remove(); };
+      animation.addEventListener('finish', removeRipple);
+      animation.addEventListener('cancel', removeRipple);
+    });
+    this.ripples = [];
+  },
 
-    Ripple.MAX_RADIUS = 300;
+  _onEnterKeydown: function() {
+    this.uiDownAction();
+    this.async(this.uiUpAction, 1);
+  },
 
-    Ripple.prototype = {
-      get recenters() {
-        return this.element.recenters;
-      },
+  _onSpaceKeydown: function() {
+    this.uiDownAction();
+  },
 
-      get center() {
-        return this.element.center;
-      },
+  _onSpaceKeyup: function() {
+    this.uiUpAction();
+  },
 
-      get mouseDownElapsed() {
-        var elapsed;
+  _holdDownChanged: function(newHoldDown, oldHoldDown) {
+    if (oldHoldDown === undefined)
+      return;
+    if (newHoldDown)
+      this.downAction();
+    else
+      this.upAction();
+  },
+});
 
-        if (!this.mouseDownStart) {
-          return 0;
-        }
-
-        elapsed = Utility.now() - this.mouseDownStart;
-
-        if (this.mouseUpStart) {
-          elapsed -= this.mouseUpElapsed;
-        }
-
-        return elapsed;
-      },
-
-      get mouseUpElapsed() {
-        return this.mouseUpStart ?
-          Utility.now () - this.mouseUpStart : 0;
-      },
-
-      get mouseDownElapsedSeconds() {
-        return this.mouseDownElapsed / 1000;
-      },
-
-      get mouseUpElapsedSeconds() {
-        return this.mouseUpElapsed / 1000;
-      },
-
-      get mouseInteractionSeconds() {
-        return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
-      },
-
-      get initialOpacity() {
-        return this.element.initialOpacity;
-      },
-
-      get opacityDecayVelocity() {
-        return this.element.opacityDecayVelocity;
-      },
-
-      get radius() {
-        var width2 = this.containerMetrics.width * this.containerMetrics.width;
-        var height2 = this.containerMetrics.height * this.containerMetrics.height;
-        var waveRadius = Math.min(
-          Math.sqrt(width2 + height2),
-          Ripple.MAX_RADIUS
-        ) * 1.1 + 5;
-
-        var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
-        var timeNow = this.mouseInteractionSeconds / duration;
-        var size = waveRadius * (1 - Math.pow(80, -timeNow));
-
-        return Math.abs(size);
-      },
-
-      get opacity() {
-        if (!this.mouseUpStart) {
-          return this.initialOpacity;
-        }
-
-        return Math.max(
-          0,
-          this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
-        );
-      },
-
-      get outerOpacity() {
-        // Linear increase in background opacity, capped at the opacity
-        // of the wavefront (waveOpacity).
-        var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
-        var waveOpacity = this.opacity;
-
-        return Math.max(
-          0,
-          Math.min(outerOpacity, waveOpacity)
-        );
-      },
-
-      get isOpacityFullyDecayed() {
-        return this.opacity < 0.01 &&
-          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
-      },
-
-      get isRestingAtMaxRadius() {
-        return this.opacity >= this.initialOpacity &&
-          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
-      },
-
-      get isAnimationComplete() {
-        return this.mouseUpStart ?
-          this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
-      },
-
-      get translationFraction() {
-        return Math.min(
-          1,
-          this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
-        );
-      },
-
-      get xNow() {
-        if (this.xEnd) {
-          return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
-        }
-
-        return this.xStart;
-      },
-
-      get yNow() {
-        if (this.yEnd) {
-          return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
-        }
-
-        return this.yStart;
-      },
-
-      get isMouseDown() {
-        return this.mouseDownStart && !this.mouseUpStart;
-      },
-
-      resetInteractionState: function() {
-        this.maxRadius = 0;
-        this.mouseDownStart = 0;
-        this.mouseUpStart = 0;
-
-        this.xStart = 0;
-        this.yStart = 0;
-        this.xEnd = 0;
-        this.yEnd = 0;
-        this.slideDistance = 0;
-
-        this.containerMetrics = new ElementMetrics(this.element);
-      },
-
-      draw: function() {
-        var scale;
-        var translateString;
-        var dx;
-        var dy;
-
-        this.wave.style.opacity = this.opacity;
-
-        scale = this.radius / (this.containerMetrics.size / 2);
-        dx = this.xNow - (this.containerMetrics.width / 2);
-        dy = this.yNow - (this.containerMetrics.height / 2);
-
-
-        // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
-        // https://bugs.webkit.org/show_bug.cgi?id=98538
-        this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
-        this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
-        this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
-        this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
-      },
-
-      /** @param {Event=} event */
-      downAction: function(event) {
-        var xCenter = this.containerMetrics.width / 2;
-        var yCenter = this.containerMetrics.height / 2;
-
-        this.resetInteractionState();
-        this.mouseDownStart = Utility.now();
-
-        if (this.center) {
-          this.xStart = xCenter;
-          this.yStart = yCenter;
-          this.slideDistance = Utility.distance(
-            this.xStart, this.yStart, this.xEnd, this.yEnd
-          );
-        } else {
-          this.xStart = event ?
-              event.detail.x - this.containerMetrics.boundingRect.left :
-              this.containerMetrics.width / 2;
-          this.yStart = event ?
-              event.detail.y - this.containerMetrics.boundingRect.top :
-              this.containerMetrics.height / 2;
-        }
-
-        if (this.recenters) {
-          this.xEnd = xCenter;
-          this.yEnd = yCenter;
-          this.slideDistance = Utility.distance(
-            this.xStart, this.yStart, this.xEnd, this.yEnd
-          );
-        }
-
-        this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
-          this.xStart,
-          this.yStart
-        );
-
-        this.waveContainer.style.top =
-          (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
-        this.waveContainer.style.left =
-          (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
-
-        this.waveContainer.style.width = this.containerMetrics.size + 'px';
-        this.waveContainer.style.height = this.containerMetrics.size + 'px';
-      },
-
-      /** @param {Event=} event */
-      upAction: function(event) {
-        if (!this.isMouseDown) {
-          return;
-        }
-
-        this.mouseUpStart = Utility.now();
-      },
-
-      remove: function() {
-        Polymer.dom(this.waveContainer.parentNode).removeChild(
-          this.waveContainer
-        );
-      }
-    };
-
-    Polymer({
-      is: 'paper-ripple',
-
-      behaviors: [
-        Polymer.IronA11yKeysBehavior
-      ],
-
-      properties: {
-        /**
-         * The initial opacity set on the wave.
-         *
-         * @attribute initialOpacity
-         * @type number
-         * @default 0.25
-         */
-        initialOpacity: {
-          type: Number,
-          value: 0.25
-        },
-
-        /**
-         * How fast (opacity per second) the wave fades out.
-         *
-         * @attribute opacityDecayVelocity
-         * @type number
-         * @default 0.8
-         */
-        opacityDecayVelocity: {
-          type: Number,
-          value: 0.8
-        },
-
-        /**
-         * If true, ripples will exhibit a gravitational pull towards
-         * the center of their container as they fade away.
-         *
-         * @attribute recenters
-         * @type boolean
-         * @default false
-         */
-        recenters: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * If true, ripples will center inside its container
-         *
-         * @attribute recenters
-         * @type boolean
-         * @default false
-         */
-        center: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * A list of the visual ripples.
-         *
-         * @attribute ripples
-         * @type Array
-         * @default []
-         */
-        ripples: {
-          type: Array,
-          value: function() {
-            return [];
-          }
-        },
-
-        /**
-         * True when there are visible ripples animating within the
-         * element.
-         */
-        animating: {
-          type: Boolean,
-          readOnly: true,
-          reflectToAttribute: true,
-          value: false
-        },
-
-        /**
-         * If true, the ripple will remain in the "down" state until `holdDown`
-         * is set to false again.
-         */
-        holdDown: {
-          type: Boolean,
-          value: false,
-          observer: '_holdDownChanged'
-        },
-
-        /**
-         * If true, the ripple will not generate a ripple effect
-         * via pointer interaction.
-         * Calling ripple's imperative api like `simulatedRipple` will
-         * still generate the ripple effect.
-         */
-        noink: {
-          type: Boolean,
-          value: false
-        },
-
-        _animating: {
-          type: Boolean
-        },
-
-        _boundAnimate: {
-          type: Function,
-          value: function() {
-            return this.animate.bind(this);
-          }
-        }
-      },
-
-      get target () {
-        return this.keyEventTarget;
-      },
-
-      keyBindings: {
-        'enter:keydown': '_onEnterKeydown',
-        'space:keydown': '_onSpaceKeydown',
-        'space:keyup': '_onSpaceKeyup'
-      },
-
-      attached: function() {
-        // Set up a11yKeysBehavior to listen to key events on the target,
-        // so that space and enter activate the ripple even if the target doesn't
-        // handle key events. The key handlers deal with `noink` themselves.
-        if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
-          this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host;
-        } else {
-          this.keyEventTarget = this.parentNode;
-        }
-        var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
-        this.listen(keyEventTarget, 'up', 'uiUpAction');
-        this.listen(keyEventTarget, 'down', 'uiDownAction');
-      },
-
-      detached: function() {
-        this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
-        this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
-        this.keyEventTarget = null;
-      },
-
-      get shouldKeepAnimating () {
-        for (var index = 0; index < this.ripples.length; ++index) {
-          if (!this.ripples[index].isAnimationComplete) {
-            return true;
-          }
-        }
-
-        return false;
-      },
-
-      simulatedRipple: function() {
-        this.downAction(null);
-
-        // Please see polymer/polymer#1305
-        this.async(function() {
-          this.upAction();
-        }, 1);
-      },
-
-      /**
-       * Provokes a ripple down effect via a UI event,
-       * respecting the `noink` property.
-       * @param {Event=} event
-       */
-      uiDownAction: function(event) {
-        if (!this.noink) {
-          this.downAction(event);
-        }
-      },
-
-      /**
-       * Provokes a ripple down effect via a UI event,
-       * *not* respecting the `noink` property.
-       * @param {Event=} event
-       */
-      downAction: function(event) {
-        if (this.holdDown && this.ripples.length > 0) {
-          return;
-        }
-
-        var ripple = this.addRipple();
-
-        ripple.downAction(event);
-
-        if (!this._animating) {
-          this._animating = true;
-          this.animate();
-        }
-      },
-
-      /**
-       * Provokes a ripple up effect via a UI event,
-       * respecting the `noink` property.
-       * @param {Event=} event
-       */
-      uiUpAction: function(event) {
-        if (!this.noink) {
-          this.upAction(event);
-        }
-      },
-
-      /**
-       * Provokes a ripple up effect via a UI event,
-       * *not* respecting the `noink` property.
-       * @param {Event=} event
-       */
-      upAction: function(event) {
-        if (this.holdDown) {
-          return;
-        }
-
-        this.ripples.forEach(function(ripple) {
-          ripple.upAction(event);
-        });
-
-        this._animating = true;
-        this.animate();
-      },
-
-      onAnimationComplete: function() {
-        this._animating = false;
-        this.$.background.style.backgroundColor = null;
-        this.fire('transitionend');
-      },
-
-      addRipple: function() {
-        var ripple = new Ripple(this);
-
-        Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
-        this.$.background.style.backgroundColor = ripple.color;
-        this.ripples.push(ripple);
-
-        this._setAnimating(true);
-
-        return ripple;
-      },
-
-      removeRipple: function(ripple) {
-        var rippleIndex = this.ripples.indexOf(ripple);
-
-        if (rippleIndex < 0) {
-          return;
-        }
-
-        this.ripples.splice(rippleIndex, 1);
-
-        ripple.remove();
-
-        if (!this.ripples.length) {
-          this._setAnimating(false);
-        }
-      },
-
-      /**
-       * This conflicts with Element#antimate().
-       * https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
-       * @suppress {checkTypes}
-       */
-      animate: function() {
-        if (!this._animating) {
-          return;
-        }
-        var index;
-        var ripple;
-
-        for (index = 0; index < this.ripples.length; ++index) {
-          ripple = this.ripples[index];
-
-          ripple.draw();
-
-          this.$.background.style.opacity = ripple.outerOpacity;
-
-          if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
-            this.removeRipple(ripple);
-          }
-        }
-
-        if (!this.shouldKeepAnimating && this.ripples.length === 0) {
-          this.onAnimationComplete();
-        } else {
-          window.requestAnimationFrame(this._boundAnimate);
-        }
-      },
-
-      _onEnterKeydown: function() {
-        this.uiDownAction();
-        this.async(this.uiUpAction, 1);
-      },
-
-      _onSpaceKeydown: function() {
-        this.uiDownAction();
-      },
-
-      _onSpaceKeyup: function() {
-        this.uiUpAction();
-      },
-
-      // note: holdDown does not respect noink since it can be a focus based
-      // effect.
-      _holdDownChanged: function(newVal, oldVal) {
-        if (oldVal === undefined) {
-          return;
-        }
-        if (newVal) {
-          this.downAction();
-        } else {
-          this.upAction();
-        }
-      }
-
-      /**
-      Fired when the animation finishes.
-      This is useful if you want to wait until
-      the ripple animation finishes to perform some action.
-
-      @event transitionend
-      @param {{node: Object}} detail Contains the animated node.
-      */
-    });
-  })();
+})();