| OLD | NEW |
| 1 <!DOCTYPE HTML> |
| 1 <html id="t" jsvalues="dir:textdirection;firstview:firstview"> | 2 <html id="t" jsvalues="dir:textdirection;firstview:firstview"> |
| 2 <!-- | 3 <!-- |
| 3 This page is optimized for perceived performance. Our enemies are the time | 4 This page is optimized for perceived performance. Our enemies are the time |
| 4 taken for the backend to generate our data, and the time taken to parse | 5 taken for the backend to generate our data, and the time taken to parse |
| 5 and render the starting HTML/CSS content of the page. This page is | 6 and render the starting HTML/CSS content of the page. This page is |
| 6 designed to let Chrome do both of those things in parallel. | 7 designed to let Chrome do both of those things in parallel. |
| 7 | 8 |
| 8 1. Defines temporary content callback functions | 9 1. Defines temporary content callback functions |
| 9 2. Fires off requests for content (these can come back 20-150ms later) | 10 2. Fires off requests for content (these can come back 20-150ms later) |
| 10 3. Defines basic functions (handlers) | 11 3. Defines basic functions (handlers) |
| (...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 117 } | 118 } |
| 118 } | 119 } |
| 119 | 120 |
| 120 function handleDOMContentLoaded() { | 121 function handleDOMContentLoaded() { |
| 121 logEvent('domcontentloaded fired'); | 122 logEvent('domcontentloaded fired'); |
| 122 } | 123 } |
| 123 | 124 |
| 124 logEvent('log start'); | 125 logEvent('log start'); |
| 125 </script> | 126 </script> |
| 126 <head> | 127 <head> |
| 128 <meta charset="utf-8"> |
| 127 <title jscontent="title"></title> | 129 <title jscontent="title"></title> |
| 128 <style type="text/css"> | 130 <style type="text/css"> |
| 129 body { | 131 body { |
| 130 font-family:arial; | 132 font-family:arial; |
| 131 background-color:white; | 133 background-color:white; |
| 132 font-size:84%; | 134 font-size:84%; |
| 133 margin:0px; | 135 margin:0px; |
| 134 } | 136 } |
| 135 html[firstview='true'] #main { | 137 html[firstview='true'] #main { |
| 136 opacity:0.0; | 138 opacity:0.0; |
| 137 -webkit-transition:all 0.4s; | 139 -webkit-transition:all 0.4s; |
| 138 } | 140 } |
| 139 html[firstview='true'] #main.visible { | 141 html[firstview='true'] #main.visible { |
| 140 /* unfortunately, 1.0 results in no animation */ | 142 /* unfortunately, 1.0 results in no animation */ |
| 141 opacity:0.999; | 143 opacity:0.999; |
| 142 } | 144 } |
| 143 #main { | 145 #main { |
| 144 margin-left:auto; | 146 margin-left:auto; |
| 145 margin-right:auto; | 147 margin-right:auto; |
| 146 margin-top:10px; | 148 margin-top:10px; |
| 147 } | 149 } |
| 148 td { | |
| 149 font-size:84%; | |
| 150 } | |
| 151 form { | 150 form { |
| 152 padding: 0; | 151 padding: 0; |
| 153 margin: 0; | 152 margin: 0; |
| 154 } | 153 } |
| 155 .section { | 154 .section { |
| 156 padding:3px 0px 5px 0px; | 155 padding:3px 0px 5px 0px; |
| 157 margin-bottom:30px; | 156 margin-bottom:30px; |
| 158 } | 157 } |
| 159 .section-title { | 158 .section-title { |
| 160 color:#000; | 159 color:#000; |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 243 } | 242 } |
| 244 a { | 243 a { |
| 245 color:#0000cc; | 244 color:#0000cc; |
| 246 text-decoration:underline; | 245 text-decoration:underline; |
| 247 white-space: nowrap; | 246 white-space: nowrap; |
| 248 } | 247 } |
| 249 a.manage { | 248 a.manage { |
| 250 color:#77c; | 249 color:#77c; |
| 251 margin-left: 5px; | 250 margin-left: 5px; |
| 252 margin-right: 5px; | 251 margin-right: 5px; |
| 253 font-size:84%; | |
| 254 line-height:19pt; | 252 line-height:19pt; |
| 255 text-decoration:underline; | 253 text-decoration:underline; |
| 256 } | 254 } |
| 257 html[dir='rtl'] #managesearcheslink { | 255 html[dir='rtl'] #managesearcheslink { |
| 258 float: left; | 256 float: left; |
| 259 } | 257 } |
| 260 .sidebar { | 258 .sidebar { |
| 261 width: 207px; | 259 width: 207px; |
| 262 padding:3px 10px 3px 9px; | 260 padding:3px 10px 3px 9px; |
| 263 -webkit-border-radius:5px 5px; | 261 -webkit-border-radius:5px 5px; |
| 264 margin-bottom:10px; | 262 margin-bottom:10px; |
| 265 } | 263 } |
| 266 #searches { | 264 #searches { |
| 267 background-color:#e1ecfe; | 265 background-color:#e1ecfe; |
| 268 } | 266 } |
| 269 #recentlyBookmarked { | 267 #recentlyBookmarked { |
| 270 background-color:#e1ecfe; | 268 background-color:#e1ecfe; |
| 271 } | 269 } |
| 272 #searches input { | 270 #searches input { |
| 273 border:1px solid #7f9db9; | 271 border:1px solid #7f9db9; |
| 274 background-repeat: no-repeat; | 272 background-repeat: no-repeat; |
| 275 background-position:4px center; | 273 background-position:4px center; |
| 276 padding-left: 23px; | 274 padding-left: 23px; |
| 277 min-height:24px; | 275 min-height:24px; |
| 278 width:206px; | 276 width:182px; |
| 279 margin-bottom:8px; | 277 margin-bottom:8px; |
| 280 display:block; | 278 display:block; |
| 281 } | 279 } |
| 282 html[dir='rtl'] #searches input { | 280 html[dir='rtl'] #searches input { |
| 283 background-position: right; | 281 background-position: right; |
| 284 padding-right: 23px; | 282 padding-right: 23px; |
| 285 } | 283 } |
| 286 #searches input.hint { | 284 #searches input.hint { |
| 287 color:#aaa; | 285 color:#aaa; |
| 288 } | 286 } |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 345 </table> | 343 </table> |
| 346 </div> | 344 </div> |
| 347 <a href="#" | 345 <a href="#" |
| 348 class="manage" | 346 class="manage" |
| 349 onclick="chrome.send('showHistoryPage'); return false"> | 347 onclick="chrome.send('showHistoryPage'); return false"> |
| 350 <span jscontent="showhistory"></span> »</a> | 348 <span jscontent="showhistory"></span> »</a> |
| 351 </div> | 349 </div> |
| 352 </td> | 350 </td> |
| 353 <td valign="top" width="230"> | 351 <td valign="top" width="230"> |
| 354 <div align="right"> | 352 <div align="right"> |
| 355 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" | 353 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" |
| 356 width="145" height="52" style="padding-bottom:8px;" /> | 354 width="145" height="52" style="padding-bottom:8px;" /> |
| 357 </div> | 355 </div> |
| 358 <div id="searches" class="sidebar"> | 356 <div id="searches" class="sidebar"> |
| 359 <div class="section-title" jscontent="searches"></div> | 357 <div class="section-title" jscontent="searches"></div> |
| 360 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> | 358 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> |
| 361 <input type="text" class="hint" | 359 <input type="text" class="hint" |
| 362 name="search" | 360 name="search" |
| 363 style="background-image:url(chrome-resource://favicon/);" | 361 style="background-image:url(chrome-resource://favicon/);" |
| 364 jsvalues="value:searchhistory" | 362 jsvalues="value:searchhistory" |
| 365 onfocus="handleInputFocus.apply(this);" | 363 onfocus="handleInputFocus.apply(this);" |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 402 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> | 400 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> |
| 403 </a> | 401 </a> |
| 404 */ | 402 */ |
| 405 var root; | 403 var root; |
| 406 if (page.url) { | 404 if (page.url) { |
| 407 root = DOM('a', {href:page.url, title:page.title}); | 405 root = DOM('a', {href:page.url, title:page.title}); |
| 408 } else { | 406 } else { |
| 409 // Something went wrong; don't make it clickable. | 407 // Something went wrong; don't make it clickable. |
| 410 root = DOM('span'); | 408 root = DOM('span'); |
| 411 } | 409 } |
| 412 | |
| 413 | 410 |
| 414 /* Create the thumbnail */ | 411 /* Create the thumbnail */ |
| 415 var img_thumbnail = DOM('img', {className:'thumbnail'}); | 412 var img_thumbnail = DOM('img', {className:'thumbnail'}); |
| 416 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); | 413 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); |
| 417 img_thumbnail.src = 'chrome-resource://thumb/' + page.url; | 414 img_thumbnail.src = 'chrome-resource://thumb/' + page.url; |
| 418 | 415 |
| 419 /* Create the title */ | 416 /* Create the title */ |
| 420 var div_title = DOM('div', {className:'thumbnail-title'}); | 417 var div_title = DOM('div', {className:'thumbnail-title'}); |
| 421 div_title.style.backgroundImage = | 418 div_title.style.backgroundImage = |
| 422 'url("chrome-resource://favicon/' + page.url + '")'; | 419 'url("chrome-resource://favicon/' + page.url + '")'; |
| (...skipping 191 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 614 processData(); | 611 processData(); |
| 615 | 612 |
| 616 // In case renderMostVisitedItems doesn't come back quickly enough, begin | 613 // In case renderMostVisitedItems doesn't come back quickly enough, begin |
| 617 // the first-run fade-in. If it has started or if this is not a first | 614 // the first-run fade-in. If it has started or if this is not a first |
| 618 // run new tab, this will be a no-op. | 615 // run new tab, this will be a no-op. |
| 619 setTimeout(function(){document.getElementById('main').className = 'visible'}, | 616 setTimeout(function(){document.getElementById('main').className = 'visible'}, |
| 620 1000); | 617 1000); |
| 621 </script> | 618 </script> |
| 622 </body> | 619 </body> |
| 623 </html> | 620 </html> |
| OLD | NEW |