Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(66)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/animation/AnimationGroupPreviewUI.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 /**
5 * @unrestricted
6 */
7 WebInspector.AnimationGroupPreviewUI = class {
8 /**
9 * @param {!WebInspector.AnimationModel.AnimationGroup} model
10 */
11 constructor(model) {
12 this._model = model;
13 this.element = createElementWithClass('div', 'animation-buffer-preview');
14 this.element.createChild('div', 'animation-paused fill');
15 this._removeButton = this.element.createChild('div', 'animation-remove-butto n');
16 this._removeButton.textContent = '\u2715';
17 this._replayOverlayElement = this.element.createChild('div', 'animation-buff er-preview-animation');
18 this._svg = this.element.createSVGChild('svg');
19 this._svg.setAttribute('width', '100%');
20 this._svg.setAttribute('preserveAspectRatio', 'none');
21 this._svg.setAttribute('height', '100%');
22 this._viewBoxHeight = 32;
23 this._svg.setAttribute('viewBox', '0 0 100 ' + this._viewBoxHeight);
24 this._svg.setAttribute('shape-rendering', 'crispEdges');
25 this._render();
26 }
4 27
5 /** 28 /**
6 * @constructor 29 * @return {number}
7 * @param {!WebInspector.AnimationModel.AnimationGroup} model 30 */
8 */ 31 _groupDuration() {
9 WebInspector.AnimationGroupPreviewUI = function(model) 32 var duration = 0;
10 { 33 for (var anim of this._model.animations()) {
11 this._model = model; 34 var animDuration = anim.source().delay() + anim.source().duration();
12 this.element = createElementWithClass("div", "animation-buffer-preview"); 35 if (animDuration > duration)
13 this.element.createChild("div", "animation-paused fill"); 36 duration = animDuration;
14 this._removeButton = this.element.createChild("div", "animation-remove-butto n"); 37 }
15 this._removeButton.textContent = "\u2715"; 38 return duration;
16 this._replayOverlayElement = this.element.createChild("div", "animation-buff er-preview-animation"); 39 }
17 this._svg = this.element.createSVGChild("svg"); 40
18 this._svg.setAttribute("width", "100%"); 41 /**
19 this._svg.setAttribute("preserveAspectRatio", "none"); 42 * @return {!Element}
20 this._svg.setAttribute("height", "100%"); 43 */
21 this._viewBoxHeight = 32; 44 removeButton() {
22 this._svg.setAttribute("viewBox", "0 0 100 " + this._viewBoxHeight); 45 return this._removeButton;
23 this._svg.setAttribute("shape-rendering", "crispEdges"); 46 }
24 this._render(); 47
48 replay() {
49 this._replayOverlayElement.animate(
50 [
51 {offset: 0, width: '0%', opacity: 1}, {offset: 0.9, width: '100%', opa city: 1},
52 {offset: 1, width: '100%', opacity: 0}
53 ],
54 {duration: 200, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
55 }
56
57 _render() {
58 this._svg.removeChildren();
59 var maxToShow = 10;
60 var numberOfAnimations = Math.min(this._model.animations().length, maxToShow );
61 var timeToPixelRatio = 100 / Math.max(this._groupDuration(), 750);
62 for (var i = 0; i < numberOfAnimations; i++) {
63 var effect = this._model.animations()[i].source();
64 var line = this._svg.createSVGChild('line');
65 line.setAttribute('x1', effect.delay() * timeToPixelRatio);
66 line.setAttribute('x2', (effect.delay() + effect.duration()) * timeToPixel Ratio);
67 var y = Math.floor(this._viewBoxHeight / Math.max(6, numberOfAnimations) * i + 1);
68 line.setAttribute('y1', y);
69 line.setAttribute('y2', y);
70 line.style.stroke = WebInspector.AnimationUI.Color(this._model.animations( )[i]);
71 }
72 }
25 }; 73 };
26
27 WebInspector.AnimationGroupPreviewUI.prototype = {
28 /**
29 * @return {number}
30 */
31 _groupDuration: function()
32 {
33 var duration = 0;
34 for (var anim of this._model.animations()) {
35 var animDuration = anim.source().delay() + anim.source().duration();
36 if (animDuration > duration)
37 duration = animDuration;
38 }
39 return duration;
40 },
41
42 /**
43 * @return {!Element}
44 */
45 removeButton: function()
46 {
47 return this._removeButton;
48 },
49
50 replay: function()
51 {
52 this._replayOverlayElement.animate([
53 { offset: 0, width: "0%", opacity: 1 },
54 { offset: 0.9, width: "100%", opacity: 1 },
55 { offset: 1, width: "100%", opacity: 0 }
56 ], { duration : 200, easing: "cubic-bezier(0, 0, 0.2, 1)" });
57 },
58
59 _render: function()
60 {
61 this._svg.removeChildren();
62 var maxToShow = 10;
63 var numberOfAnimations = Math.min(this._model.animations().length, maxTo Show);
64 var timeToPixelRatio = 100 / Math.max(this._groupDuration(), 750);
65 for (var i = 0; i < numberOfAnimations; i++) {
66 var effect = this._model.animations()[i].source();
67 var line = this._svg.createSVGChild("line");
68 line.setAttribute("x1", effect.delay() * timeToPixelRatio);
69 line.setAttribute("x2", (effect.delay() + effect.duration()) * timeT oPixelRatio);
70 var y = Math.floor(this._viewBoxHeight / Math.max(6, numberOfAnimati ons) * i + 1);
71 line.setAttribute("y1", y);
72 line.setAttribute("y2", y);
73 line.style.stroke = WebInspector.AnimationUI.Color(this._model.anima tions()[i]);
74 }
75 }
76 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698