| Index: tools/perf/page_sets/key_silk_cases/ink-button.html
|
| diff --git a/tools/perf/page_sets/key_silk_cases/ink-button.html b/tools/perf/page_sets/key_silk_cases/ink-button.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..291642921bd95303e7607f4d654a2e523de4b291
|
| --- /dev/null
|
| +++ b/tools/perf/page_sets/key_silk_cases/ink-button.html
|
| @@ -0,0 +1,165 @@
|
| +<!doctype html>
|
| +<head>
|
| +<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
|
| +<script src="polymer.min.js"></script>
|
| +<script src="web-animations.js"></script>
|
| +
|
| +<body>
|
| +<div style="display: -webkit-flex; -webkit-flex-flow: column; width: 200px">
|
| + <ink-button>Here</ink-button>
|
| + <ink-button class="click-me">Are</ink-button>
|
| + <ink-button>Some</ink-button>
|
| + <ink-button>Buttons.</ink-button>
|
| + <ink-button duration="5">This one is slow.</ink-button>
|
| +<div/>
|
| +
|
| +<polymer-element name="ink-button" attributes="duration" touch-action="none">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + -webkit-user-select: none;
|
| + background: white;
|
| + color: white;
|
| + margin: 5px;
|
| + -webkit-transform-origin: 50% 50%;
|
| + }
|
| +
|
| + .layer {
|
| + height: 100%;
|
| + width: 100%;
|
| + position: absolute;
|
| + }
|
| +
|
| + #focus {
|
| + border: solid #4285F4 -2px;
|
| + background: #4285F4;
|
| + border-radius: 1.5px;
|
| + }
|
| +
|
| + #blur {
|
| + border: solid #56ADFF -2px;
|
| + background: #56ADFF;
|
| + border-radius: 1.5px;
|
| + }
|
| +
|
| + .active {
|
| + z-index: 1;
|
| + }
|
| +
|
| + #content {
|
| + position: relative;
|
| + margin: 10px;
|
| + z-index: 2;
|
| + -webkit-transform-origin: 50% 50%;
|
| + text-align: center;
|
| + text-transform: uppercase;
|
| + }
|
| + </style>
|
| + <div id="focus" class="layer"></div>
|
| + <div id="blur" class="layer"></div>
|
| + <div id="content">
|
| + <content></content>
|
| + </div>
|
| + </template>
|
| +</polymer-element>
|
| +
|
| +<script>
|
| +(function() {
|
| +function composite(target, timing) {
|
| + return new Animation(target, [
|
| + {transform: 'translateZ(0)'},
|
| + {transform: 'translateZ(0)'}
|
| + ], timing);
|
| +}
|
| +
|
| +function transform(target, frames, timing) {
|
| + return new Animation(target, frames.map(function(t) { return {transform: t}; }), timing);
|
| +}
|
| +
|
| +function clip(target, params, timing) {
|
| + return new Animation(target, {sample: function(t) {
|
| + target.style.webkitClipPath = 'circle(' +
|
| + params.x + 'px, ' +
|
| + params.y + 'px, ' +
|
| + (t * params.radius) + 'px)';
|
| + }}, timing);
|
| +}
|
| +
|
| +Polymer('ink-button', {
|
| + _down: false,
|
| + duration: '0.5',
|
| + ready: function() {
|
| + this.addEventListener('click', this.click.bind(this));
|
| + this.addEventListener('pointerdown', this.pointerDown.bind(this));
|
| + this.addEventListener('pointerup', this.pointerUp.bind(this));
|
| + this.addEventListener('pointerout', this.pointerUp.bind(this));
|
| + },
|
| + reset: function() {
|
| + this._player && (this._player.source = null);
|
| + this.$.focus.style.webkitClipPath = 'initial';
|
| + this.$.blur.style.webkitClipPath = 'initial';
|
| + },
|
| + click: function(e) {
|
| + var e = {x: this.offsetLeft + this.clientLeft + 0.5 * this.clientWidth,
|
| + y: this.offsetTop + this.clientTop + 0.5 * this.clientHeight};
|
| + this.pointerDown(e);
|
| + this.pointerUp(e);
|
| + },
|
| + pointerDown: function(e) {
|
| + this.$.focus.classList.add('active');
|
| + this.$.blur.classList.remove('active');
|
| + this._down = true;
|
| +
|
| + var target = this.$.focus;
|
| +
|
| + var x = e.x - this.clientLeft - this.offsetLeft;
|
| + var y = e.y - this.clientTop - this.offsetTop;
|
| +
|
| + var width = target.clientWidth;
|
| + var targetRadius = Math.max(x, width - x) + target.clientHeight;
|
| + var duration = Number(this.duration);
|
| +
|
| + this.reset();
|
| + this._player = document.timeline.play(new ParGroup([
|
| + composite(this.$.content, duration),
|
| + clip(target, {x: x, y: y, radius: targetRadius}, duration),
|
| + transform(this, ['scale(1)', 'scale(1.1)'], duration),
|
| + ], {easing: 'ease-out', fill: 'forwards'}));
|
| + },
|
| + pointerUp: function(e) {
|
| + if (!this._down) {
|
| + return;
|
| + }
|
| + this._down = false;
|
| +
|
| + this.$.focus.classList.remove('active');
|
| + this.$.blur.classList.add('active');
|
| +
|
| + var target = this.$.blur;
|
| +
|
| + var x = e.x - this.clientLeft - this.offsetLeft;
|
| + var y = e.y - this.clientTop - this.offsetTop;
|
| +
|
| + var width = target.clientWidth;
|
| + var targetRadius = Math.max(x, width - x) + target.clientHeight;
|
| + var duration = Number(this.duration);
|
| +
|
| + var transformDuration = duration * 0.25;
|
| + var transformElapsed = (duration - (this._player ? this._player.currentTime : 0)) * 0.25;
|
| + transformElapsed = Math.max(transformElapsed, 0);
|
| +
|
| + this.reset();
|
| + this._player = document.timeline.play(new ParGroup([
|
| + composite(this.$.content, duration),
|
| + clip(target, {x: x, y: y, radius: targetRadius},
|
| + {duration: duration, easing: 'ease-out'}),
|
| + transform(this, ['scale(1.1)', 'scale(1)'],
|
| + {delay: -transformElapsed, duration: transformDuration, easing: 'linear'}),
|
| + ], {fill: 'none'}));
|
| + },
|
| +});
|
| +
|
| +})();
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 117833002:
telemetry: extend key_silk_cases.json (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src