Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / tools / perf / page_sets / key_silk_cases / infinite_scrolling.html
blob12107186fa148b23d8d942783b87aafe8699fe98
1 <!doctype html>
2 <!--
3 Copyright 2013 The Polymer Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style
5 license that can be found in the LICENSE file.
6 -->
7 <html>
8 <head>
9 <title>infinite-scroll</title>
10 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
11 <style>
12 html {
13 height: 100%;
15 body {
16 display: block;
17 height: 100%;
18 margin: 0;
20 #container {
21 overflow-y: scroll;
22 height: 100%;
23 margin: 0;
25 #runway {
26 height: 100000px;
28 .item {
29 -webkit-transform: translate3d(0,0,0);
30 box-sizing: border-box;
31 overflow: hidden;
34 .conversation {
35 font-family: sans-serif;
36 height: 70px;
37 display: flex;
38 border-bottom: 1px solid lightgray;
40 .avatar {
41 display: flex;
42 flex-shrink: 0;
43 color: white;
44 align-items: center;
45 justify-content: center;
46 font-size: 40px;
47 width: 50px;
48 height: 50px;
49 margin: 10px;
50 background-color: lightblue;
52 .summary {
53 flex: 1;
54 flex-shrink: 0;
55 display: flex;
56 flex-direction: column;
57 padding: 10px 10px 10px 0px;
59 .topline {
60 display: flex;
61 flex-shrink: 0;
63 .participants {
64 flex: 1;
65 flex-shrink: 0;
66 font-weight: bold;
68 .time {
69 flex-shrink: 0;
70 font-size: 12px;
71 color: #444;
73 .bottomline {
74 flex-shrink: 0;
75 display: flex;
77 .preview {
78 flex: 1;
79 flex-shrink: 0;
80 font-size: 12px;
81 height: 2em;
82 text-overflow: ellipsis;
84 .subject {
85 font-weight: bold;
87 .snippet {
88 color: #444;
90 .trinkets {
91 flex-shrink: 0;
92 font-size: 20px;
94 </style>
95 </head>
96 <body>
97 <div id="container">
98 <div id="runway">
99 <template>
100 <div class="item conversation">
101 <div class="avatar">A</div>
102 <div class="summary">
103 <div class="topline">
104 <div class="participants">{{ participants }}</div>
105 <div class="time">{{ time }}</div>
106 </div>
107 <div class="bottomline">
108 <div class="preview"><span class="subject">{{ subject }}</span> &mdash;
109 <span class="snippet">{{ snippet }}</span></div>
110 <div class="trinkets">&#x2606;</div>
111 </div>
112 </div>
113 </div>
114 </template>
115 </div>
116 </div>
117 <script>
118 function getRandomItem(array) {
119 return array[Math.floor(Math.random() * array.length)];
121 function generateFakeData() {
122 var kNumberOfItems = 500;
123 var possibleParticipants = [
124 'Adam', 'Ojan', 'Elliot', 'Chris',
126 var possibleTimes = [
127 'Now', 'Yesterday', 'Last week',
129 var possibleSubjects = [
130 'Do you even bench?',
131 'I like to scroll forever',
132 'Lunch',
133 'What if my subject is really long? Longer than that. Like really, really, long?',
135 var possibleSnippets = [
136 'Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.',
137 'When, in disgrace with fortune and men\'s eyes, I all alone beweep my outcast state,',
138 'We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility',
140 var data = new Array(kNumberOfItems);
141 for (var i = 0; i < kNumberOfItems; ++i) {
142 data[i] = {
143 participants: getRandomItem(possibleParticipants),
144 time: getRandomItem(possibleTimes),
145 subject: getRandomItem(possibleSubjects),
146 snippet: getRandomItem(possibleSnippets),
148 console.log(data[i]);
150 return data;
153 var data = generateFakeData();
155 "use strict";
156 (function(exports) {
157 var kHeight = 70;
158 var kPhysicalCount = 30;
160 var container = document.getElementById('container');
161 var runway = document.getElementById('runway');
163 var template = runway.querySelector('template');
164 var items = new Array(kPhysicalCount);
165 for (var i = 0; i < kPhysicalCount; ++i) {
166 var fragment = template.content.cloneNode(true);
167 runway.appendChild(fragment);
168 var item = runway.lastElementChild;
169 items[i] = item;
170 item.transformValue_ = 0;
171 item.participants_ = item.querySelector('.participants').firstChild;
172 item.time_ = item.querySelector('.time').firstChild;
173 item.subject_ = item.querySelector('.subject').firstChild;
174 item.snippet_ = item.querySelector('.snippet').firstChild;
176 updateText(item, i);
179 var physicalHeight = kHeight * kPhysicalCount;
181 function updateText(item, index) {
182 var datum = data[index % data.length];
183 item.participants_.nodeValue = datum.participants;
184 item.time_.nodeValue = datum.time;
185 item.subject_.nodeValue = datum.subject;
186 item.snippet_.nodeValue = datum.snippet;
189 container.addEventListener('scroll', function(e) {
190 var scrollTop = container.scrollTop;
192 var firstVirtualIndex = Math.floor(scrollTop / kHeight);
193 var firstPhysicalIndex = firstVirtualIndex % kPhysicalCount;
195 var baseVirtualIndex = firstVirtualIndex - firstPhysicalIndex;
197 var baseTransformValue = kHeight * baseVirtualIndex;
198 var nextTransformValue = baseTransformValue + physicalHeight;
200 var baseTransformString = 'translate3d(0,' + baseTransformValue + 'px,0)';
201 var nextTransformString = 'translate3d(0,' + nextTransformValue + 'px,0)';
203 window.requestAnimationFrame(function() {
204 for (var i = 0; i < firstPhysicalIndex; ++i) {
205 var item = items[i];
206 if (item.transformValue_ != nextTransformValue) {
207 updateText(item, baseVirtualIndex + kPhysicalCount + i);
208 item.style.WebkitTransform = nextTransformString;
210 item.transformValue_ = nextTransformValue;
212 for (var i = firstPhysicalIndex; i < kPhysicalCount; ++i) {
213 var item = items[i];
214 if (item.transformValue_ != baseTransformValue) {
215 updateText(item, baseVirtualIndex + i);
216 item.style.WebkitTransform = baseTransformString;
218 item.transformValue_ = baseTransformValue;
222 })(window);
223 </script>
224 </body>
225 </html>