| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html id="t" jsvalues="dir:textdirection;firstview:firstview"> | 2 <html id="t" jsvalues="dir:textdirection;firstview:firstview"> |
| 3 <!-- | 3 <!-- |
| 4 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 |
| 5 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 |
| 6 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 |
| 7 designed to let Chrome do both of those things in parallel. | 7 designed to let Chrome do both of those things in parallel. |
| 8 | 8 |
| 9 1. Defines temporary content callback functions | 9 1. Defines temporary content callback functions |
| 10 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) |
| (...skipping 162 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 173 } | 173 } |
| 174 .most-visited-text { | 174 .most-visited-text { |
| 175 width:548px; /* thumbnail + td * 3 - 2*padding - 2*margin */ | 175 width:548px; /* thumbnail + td * 3 - 2*padding - 2*margin */ |
| 176 padding:20px; | 176 padding:20px; |
| 177 margin:15px; | 177 margin:15px; |
| 178 background-color:white; | 178 background-color:white; |
| 179 -webkit-box-shadow: 5px 5px 10px #ccc; | 179 -webkit-box-shadow: 5px 5px 10px #ccc; |
| 180 -webkit-transition:all 0.12s; | 180 -webkit-transition:all 0.12s; |
| 181 } | 181 } |
| 182 .thumbnail-title { | 182 .thumbnail-title { |
| 183 background-image:url(chrome-resource://favicon/); | 183 background-image:url(chrome://favicon/); |
| 184 display:block; | 184 display:block; |
| 185 background-repeat:no-repeat; | 185 background-repeat:no-repeat; |
| 186 background-size:16px; | 186 background-size:16px; |
| 187 background-position:0px 1px; | 187 background-position:0px 1px; |
| 188 width:172px; /* thumbnail - padding */ | 188 width:172px; /* thumbnail - padding */ |
| 189 margin-top:6px; /* line up favicons with search favicons */ | 189 margin-top:6px; /* line up favicons with search favicons */ |
| 190 padding:1px 0px 4px 22px; | 190 padding:1px 0px 4px 22px; |
| 191 overflow: hidden; | 191 overflow: hidden; |
| 192 text-overflow: ellipsis; | 192 text-overflow: ellipsis; |
| 193 text-decoration:none; | 193 text-decoration:none; |
| (...skipping 158 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 352 <td valign="top" width="230"> | 352 <td valign="top" width="230"> |
| 353 <div align="right"> | 353 <div align="right"> |
| 354 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" | 354 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" |
| 355 width="145" height="52" style="padding-bottom:8px;" /> | 355 width="145" height="52" style="padding-bottom:8px;" /> |
| 356 </div> | 356 </div> |
| 357 <div id="searches" class="sidebar"> | 357 <div id="searches" class="sidebar"> |
| 358 <div class="section-title" jscontent="searches"></div> | 358 <div class="section-title" jscontent="searches"></div> |
| 359 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> | 359 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> |
| 360 <input type="text" class="hint" | 360 <input type="text" class="hint" |
| 361 name="search" | 361 name="search" |
| 362 style="background-image:url(chrome-resource://favicon/);" | 362 style="background-image:url(chrome://favicon/);" |
| 363 jsvalues="value:searchhistory" | 363 jsvalues="value:searchhistory" |
| 364 onfocus="handleInputFocus.apply(this);" | 364 onfocus="handleInputFocus.apply(this);" |
| 365 onblur="handleInputBlur.apply(this);" /> | 365 onblur="handleInputBlur.apply(this);" /> |
| 366 </form> | 366 </form> |
| 367 <div id='searches-entries'></div> | 367 <div id='searches-entries'></div> |
| 368 </div> | 368 </div> |
| 369 | 369 |
| 370 <div id="recentlyBookmarked" class="sidebar" style="display:none"> | 370 <div id="recentlyBookmarked" class="sidebar" style="display:none"> |
| 371 <span class="section-title" jscontent="bookmarks"></span> | 371 <span class="section-title" jscontent="bookmarks"></span> |
| 372 <div id="recentlyBookmarkedContainer"></div> | 372 <div id="recentlyBookmarkedContainer"></div> |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 409 chrome.send("metrics", ["NTP_MostVisited" + number]) | 409 chrome.send("metrics", ["NTP_MostVisited" + number]) |
| 410 }, false); | 410 }, false); |
| 411 } else { | 411 } else { |
| 412 // Something went wrong; don't make it clickable. | 412 // Something went wrong; don't make it clickable. |
| 413 root = DOM('span'); | 413 root = DOM('span'); |
| 414 } | 414 } |
| 415 | 415 |
| 416 /* Create the thumbnail */ | 416 /* Create the thumbnail */ |
| 417 var img_thumbnail = DOM('img', {className:'thumbnail'}); | 417 var img_thumbnail = DOM('img', {className:'thumbnail'}); |
| 418 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); | 418 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); |
| 419 img_thumbnail.src = 'chrome-resource://thumb/' + page.url; | 419 img_thumbnail.src = 'chrome://thumb/' + page.url; |
| 420 | 420 |
| 421 /* Create the title */ | 421 /* Create the title */ |
| 422 var div_title = DOM('div', {className:'thumbnail-title'}); | 422 var div_title = DOM('div', {className:'thumbnail-title'}); |
| 423 div_title.style.backgroundImage = | 423 div_title.style.backgroundImage = |
| 424 'url("chrome-resource://favicon/' + page.url + '")'; | 424 'url("chrome://favicon/' + page.url + '")'; |
| 425 if (page.title) { | 425 if (page.title) { |
| 426 div_title.appendChild(document.createTextNode(page.title)); | 426 div_title.appendChild(document.createTextNode(page.title)); |
| 427 } else { | 427 } else { |
| 428 // Make the empty title at least push down the icon. | 428 // Make the empty title at least push down the icon. |
| 429 div_title.innerHTML = ' '; | 429 div_title.innerHTML = ' '; |
| 430 } | 430 } |
| 431 | 431 |
| 432 root.appendChild(div_title); | 432 root.appendChild(div_title); |
| 433 root.appendChild(img_thumbnail); | 433 root.appendChild(img_thumbnail); |
| 434 | 434 |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 477 table.appendChild(row); | 477 table.appendChild(row); |
| 478 } | 478 } |
| 479 | 479 |
| 480 logEvent('renderMostVisitedPages done'); | 480 logEvent('renderMostVisitedPages done'); |
| 481 } | 481 } |
| 482 | 482 |
| 483 function makeSearchURL(url) { | 483 function makeSearchURL(url) { |
| 484 /* The HTML we want looks like this: | 484 /* The HTML we want looks like this: |
| 485 <form> | 485 <form> |
| 486 <input type="text" class="hint" | 486 <input type="text" class="hint" |
| 487 style="background-image:url(chrome-resource://favicon/"+url+");" | 487 style="background-image:url(chrome://favicon/"+url+");" |
| 488 value="Search Wikipedia" | 488 value="Search Wikipedia" |
| 489 onfocus="handleInputFocus();" | 489 onfocus="handleInputFocus();" |
| 490 onblur="handleInputBlur();" /> | 490 onblur="handleInputBlur();" /> |
| 491 </form> | 491 </form> |
| 492 */ | 492 */ |
| 493 var input = DOM('input', {type:'text', | 493 var input = DOM('input', {type:'text', |
| 494 className:'hint', | 494 className:'hint', |
| 495 value:url.short_name}); | 495 value:url.short_name}); |
| 496 input.keyword = url.keyword; | 496 input.keyword = url.keyword; |
| 497 | 497 |
| 498 if (url.favIconURL) { | 498 if (url.favIconURL) { |
| 499 input.style.backgroundImage = | 499 input.style.backgroundImage = |
| 500 'url("chrome-resource://favicon/iconurl/' + url.favIconURL + '")'; | 500 'url("chrome://favicon/iconurl/' + url.favIconURL + '")'; |
| 501 } else { | 501 } else { |
| 502 input.style.backgroundImage = | 502 input.style.backgroundImage = |
| 503 'url("chrome-resource://favicon/http://' + url.short_name + '")'; | 503 'url("chrome://favicon/http://' + url.short_name + '")'; |
| 504 } | 504 } |
| 505 | 505 |
| 506 input.onfocus = handleInputFocus; | 506 input.onfocus = handleInputFocus; |
| 507 input.onblur = handleInputBlur; | 507 input.onblur = handleInputBlur; |
| 508 | 508 |
| 509 var form = DOM('form'); | 509 var form = DOM('form'); |
| 510 form.onsubmit = function() { | 510 form.onsubmit = function() { |
| 511 chrome.send('doSearch', [input.keyword, input.value]); | 511 chrome.send('doSearch', [input.keyword, input.value]); |
| 512 return false; | 512 return false; |
| 513 }; | 513 }; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 548 if (entries.length > 0) { | 548 if (entries.length > 0) { |
| 549 section.style.display = 'block'; | 549 section.style.display = 'block'; |
| 550 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { | 550 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { |
| 551 var link = DOM('a', {href: entry.url, | 551 var link = DOM('a', {href: entry.url, |
| 552 className:'recent-bookmark', | 552 className:'recent-bookmark', |
| 553 title:entry.title}); | 553 title:entry.title}); |
| 554 link.addEventListener("mousedown", function(event) { | 554 link.addEventListener("mousedown", function(event) { |
| 555 chrome.send("metrics", ["NTP_Bookmark" + i]) | 555 chrome.send("metrics", ["NTP_Bookmark" + i]) |
| 556 }, false); | 556 }, false); |
| 557 link.style.backgroundImage = | 557 link.style.backgroundImage = |
| 558 'url("chrome-resource://favicon/' + entry.url + '")'; | 558 'url("chrome://favicon/' + entry.url + '")'; |
| 559 link.appendChild(document.createTextNode(entry.title)); | 559 link.appendChild(document.createTextNode(entry.title)); |
| 560 container.appendChild(link); | 560 container.appendChild(link); |
| 561 } | 561 } |
| 562 } | 562 } |
| 563 | 563 |
| 564 logEvent('renderRecentlyBookmarked done'); | 564 logEvent('renderRecentlyBookmarked done'); |
| 565 } | 565 } |
| 566 | 566 |
| 567 /* This function adds incoming information about tabs to the new tab UI. */ | 567 /* This function adds incoming information about tabs to the new tab UI. */ |
| 568 function renderRecentlyClosedTabs(entries) { | 568 function renderRecentlyClosedTabs(entries) { |
| (...skipping 17 matching lines...) Expand all Loading... |
| 586 link.onclick = function(sessionId) { | 586 link.onclick = function(sessionId) { |
| 587 return function() { | 587 return function() { |
| 588 chrome.send("metrics", ["NTP_TabRestored" + i]); | 588 chrome.send("metrics", ["NTP_TabRestored" + i]); |
| 589 /* This is a hack because chrome.send is hardcoded to only | 589 /* This is a hack because chrome.send is hardcoded to only |
| 590 accept arrays of strings. */ | 590 accept arrays of strings. */ |
| 591 chrome.send('reopenTab', [sessionId.toString()]); | 591 chrome.send('reopenTab', [sessionId.toString()]); |
| 592 return false; | 592 return false; |
| 593 } | 593 } |
| 594 }(entry.sessionId); | 594 }(entry.sessionId); |
| 595 | 595 |
| 596 link.style.backgroundImage = 'url("chrome-resource://favicon/' + entry.url
+ '")'; | 596 link.style.backgroundImage = 'url("chrome://favicon/' + entry.url + '")'; |
| 597 link.appendChild(document.createTextNode(entry.title)); | 597 link.appendChild(document.createTextNode(entry.title)); |
| 598 container.appendChild(link); | 598 container.appendChild(link); |
| 599 } | 599 } |
| 600 } | 600 } |
| 601 | 601 |
| 602 logEvent('renderRecentlyClosedTabs done'); | 602 logEvent('renderRecentlyClosedTabs done'); |
| 603 } | 603 } |
| 604 | 604 |
| 605 function viewLog() { | 605 function viewLog() { |
| 606 var lines = []; | 606 var lines = []; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 622 processData(); | 622 processData(); |
| 623 | 623 |
| 624 // In case renderMostVisitedItems doesn't come back quickly enough, begin | 624 // In case renderMostVisitedItems doesn't come back quickly enough, begin |
| 625 // the first-run fade-in. If it has started or if this is not a first | 625 // the first-run fade-in. If it has started or if this is not a first |
| 626 // run new tab, this will be a no-op. | 626 // run new tab, this will be a no-op. |
| 627 setTimeout(function(){document.getElementById('main').className = 'visible'}, | 627 setTimeout(function(){document.getElementById('main').className = 'visible'}, |
| 628 1000); | 628 1000); |
| 629 </script> | 629 </script> |
| 630 </body> | 630 </body> |
| 631 </html> | 631 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 12418:
Implement History as HTML and add/change a bunch of stuff to make it easier t... (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/