| 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 207 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 218 } | 218 } |
| 219 .most-visited-text { | 219 .most-visited-text { |
| 220 width:548px; /* thumbnail + td * 3 - 2*padding - 2*margin */ | 220 width:548px; /* thumbnail + td * 3 - 2*padding - 2*margin */ |
| 221 padding:20px; | 221 padding:20px; |
| 222 margin:15px; | 222 margin:15px; |
| 223 background-color:white; | 223 background-color:white; |
| 224 -webkit-box-shadow: 5px 5px 10px #ccc; | 224 -webkit-box-shadow: 5px 5px 10px #ccc; |
| 225 -webkit-transition:all 0.12s; | 225 -webkit-transition:all 0.12s; |
| 226 } | 226 } |
| 227 .thumbnail-title { | 227 .thumbnail-title { |
| 228 background-image:url(chrome://favicon/); | 228 background-image:url(chrome-ui://favicon/); |
| 229 display:block; | 229 display:block; |
| 230 background-repeat:no-repeat; | 230 background-repeat:no-repeat; |
| 231 background-size:16px; | 231 background-size:16px; |
| 232 background-position:0px 1px; | 232 background-position:0px 1px; |
| 233 width:172px; /* thumbnail - padding */ | 233 width:172px; /* thumbnail - padding */ |
| 234 margin-top:6px; /* line up favicons with search favicons */ | 234 margin-top:6px; /* line up favicons with search favicons */ |
| 235 padding:1px 0px 4px 22px; | 235 padding:1px 0px 4px 22px; |
| 236 overflow: hidden; | 236 overflow: hidden; |
| 237 text-overflow: ellipsis; | 237 text-overflow: ellipsis; |
| 238 text-decoration:none; | 238 text-decoration:none; |
| (...skipping 195 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 434 <td valign="top" width="230"> | 434 <td valign="top" width="230"> |
| 435 <div align="right"> | 435 <div align="right"> |
| 436 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" | 436 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" |
| 437 width="145" height="52" style="padding-bottom:8px;" /> | 437 width="145" height="52" style="padding-bottom:8px;" /> |
| 438 </div> | 438 </div> |
| 439 <div id="searches" class="sidebar"> | 439 <div id="searches" class="sidebar"> |
| 440 <div class="section-title" jscontent="searches"></div> | 440 <div class="section-title" jscontent="searches"></div> |
| 441 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> | 441 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> |
| 442 <input type="text" class="hint" | 442 <input type="text" class="hint" |
| 443 name="search" | 443 name="search" |
| 444 style="background-image:url(chrome://favicon/);" | 444 style="background-image:url(chrome-ui://favicon/);" |
| 445 jsvalues="value:searchhistory" | 445 jsvalues="value:searchhistory" |
| 446 onfocus="handleInputFocus.apply(this);" | 446 onfocus="handleInputFocus.apply(this);" |
| 447 onblur="handleInputBlur.apply(this);" /> | 447 onblur="handleInputBlur.apply(this);" /> |
| 448 </form> | 448 </form> |
| 449 <div id='searches-entries'></div> | 449 <div id='searches-entries'></div> |
| 450 </div> | 450 </div> |
| 451 | 451 |
| 452 <div id="recentlyBookmarked" class="sidebar" style="display:none"> | 452 <div id="recentlyBookmarked" class="sidebar" style="display:none"> |
| 453 <span class="section-title" jscontent="bookmarks"></span> | 453 <span class="section-title" jscontent="bookmarks"></span> |
| 454 <div id="recentlyBookmarkedContainer"></div> | 454 <div id="recentlyBookmarkedContainer"></div> |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 517 chrome.send("metrics", ["NTP_MostVisited" + number]) | 517 chrome.send("metrics", ["NTP_MostVisited" + number]) |
| 518 }, false); | 518 }, false); |
| 519 } else { | 519 } else { |
| 520 // Something went wrong; don't make it clickable. | 520 // Something went wrong; don't make it clickable. |
| 521 root = DOM('span'); | 521 root = DOM('span'); |
| 522 } | 522 } |
| 523 | 523 |
| 524 /* Create the thumbnail */ | 524 /* Create the thumbnail */ |
| 525 var img_thumbnail = DOM('img', {className:'thumbnail'}); | 525 var img_thumbnail = DOM('img', {className:'thumbnail'}); |
| 526 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); | 526 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); |
| 527 img_thumbnail.src = 'chrome://thumb/' + page.url; | 527 img_thumbnail.src = 'chrome-ui://thumb/' + page.url; |
| 528 | 528 |
| 529 /* Create the title */ | 529 /* Create the title */ |
| 530 var div_title = DOM('div', {className:'thumbnail-title'}); | 530 var div_title = DOM('div', {className:'thumbnail-title'}); |
| 531 div_title.style.backgroundImage = | 531 div_title.style.backgroundImage = |
| 532 'url("chrome://favicon/' + page.url + '")'; | 532 'url("chrome-ui://favicon/' + page.url + '")'; |
| 533 if (page.title) { | 533 if (page.title) { |
| 534 div_title.appendChild(document.createTextNode(page.title)); | 534 div_title.appendChild(document.createTextNode(page.title)); |
| 535 } else { | 535 } else { |
| 536 // Make the empty title at least push down the icon. | 536 // Make the empty title at least push down the icon. |
| 537 div_title.innerHTML = ' '; | 537 div_title.innerHTML = ' '; |
| 538 } | 538 } |
| 539 | 539 |
| 540 root.appendChild(div_title); | 540 root.appendChild(div_title); |
| 541 root.appendChild(img_thumbnail); | 541 root.appendChild(img_thumbnail); |
| 542 | 542 |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 585 table.appendChild(row); | 585 table.appendChild(row); |
| 586 } | 586 } |
| 587 | 587 |
| 588 logEvent('renderMostVisitedPages done'); | 588 logEvent('renderMostVisitedPages done'); |
| 589 } | 589 } |
| 590 | 590 |
| 591 function makeSearchURL(url) { | 591 function makeSearchURL(url) { |
| 592 /* The HTML we want looks like this: | 592 /* The HTML we want looks like this: |
| 593 <form> | 593 <form> |
| 594 <input type="text" class="hint" | 594 <input type="text" class="hint" |
| 595 style="background-image:url(chrome://favicon/"+url+");" | 595 style="background-image:url(chrome-ui://favicon/"+url+");" |
| 596 value="Search Wikipedia" | 596 value="Search Wikipedia" |
| 597 onfocus="handleInputFocus();" | 597 onfocus="handleInputFocus();" |
| 598 onblur="handleInputBlur();" /> | 598 onblur="handleInputBlur();" /> |
| 599 </form> | 599 </form> |
| 600 */ | 600 */ |
| 601 var input = DOM('input', {type:'text', | 601 var input = DOM('input', {type:'text', |
| 602 className:'hint', | 602 className:'hint', |
| 603 value:url.short_name}); | 603 value:url.short_name}); |
| 604 input.keyword = url.keyword; | 604 input.keyword = url.keyword; |
| 605 | 605 |
| 606 if (url.favIconURL) { | 606 if (url.favIconURL) { |
| 607 input.style.backgroundImage = | 607 input.style.backgroundImage = |
| 608 'url("chrome://favicon/iconurl/' + url.favIconURL + '")'; | 608 'url("chrome-ui://favicon/iconurl/' + url.favIconURL + '")'; |
| 609 } else { | 609 } else { |
| 610 input.style.backgroundImage = | 610 input.style.backgroundImage = |
| 611 'url("chrome://favicon/http://' + url.short_name + '")'; | 611 'url("chrome-ui://favicon/http://' + url.short_name + '")'; |
| 612 } | 612 } |
| 613 | 613 |
| 614 input.onfocus = handleInputFocus; | 614 input.onfocus = handleInputFocus; |
| 615 input.onblur = handleInputBlur; | 615 input.onblur = handleInputBlur; |
| 616 | 616 |
| 617 var form = DOM('form'); | 617 var form = DOM('form'); |
| 618 form.onsubmit = function() { | 618 form.onsubmit = function() { |
| 619 chrome.send('doSearch', [input.keyword, input.value]); | 619 chrome.send('doSearch', [input.keyword, input.value]); |
| 620 return false; | 620 return false; |
| 621 }; | 621 }; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 656 if (entries.length > 0) { | 656 if (entries.length > 0) { |
| 657 section.style.display = 'block'; | 657 section.style.display = 'block'; |
| 658 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { | 658 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { |
| 659 var link = DOM('a', {href: entry.url, | 659 var link = DOM('a', {href: entry.url, |
| 660 className:'recent-bookmark', | 660 className:'recent-bookmark', |
| 661 title:entry.title}); | 661 title:entry.title}); |
| 662 link.addEventListener("mousedown", function(event) { | 662 link.addEventListener("mousedown", function(event) { |
| 663 chrome.send("metrics", ["NTP_Bookmark" + i]) | 663 chrome.send("metrics", ["NTP_Bookmark" + i]) |
| 664 }, false); | 664 }, false); |
| 665 link.style.backgroundImage = | 665 link.style.backgroundImage = |
| 666 'url("chrome://favicon/' + entry.url + '")'; | 666 'url("chrome-ui://favicon/' + entry.url + '")'; |
| 667 link.appendChild(document.createTextNode(entry.title)); | 667 link.appendChild(document.createTextNode(entry.title)); |
| 668 container.appendChild(link); | 668 container.appendChild(link); |
| 669 } | 669 } |
| 670 } | 670 } |
| 671 | 671 |
| 672 logEvent('renderRecentlyBookmarked done'); | 672 logEvent('renderRecentlyBookmarked done'); |
| 673 } | 673 } |
| 674 | 674 |
| 675 /* This function adds incoming information about tabs to the new tab UI. */ | 675 /* This function adds incoming information about tabs to the new tab UI. */ |
| 676 function renderRecentlyClosedTabs(entries) { | 676 function renderRecentlyClosedTabs(entries) { |
| (...skipping 19 matching lines...) Expand all Loading... |
| 696 link = createRecentBookmark('a', entry); | 696 link = createRecentBookmark('a', entry); |
| 697 container.appendChild(link); | 697 container.appendChild(link); |
| 698 } else { | 698 } else { |
| 699 // Closed window. | 699 // Closed window. |
| 700 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); | 700 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); |
| 701 | 701 |
| 702 var linkSpan = DOM('span'); | 702 var linkSpan = DOM('span'); |
| 703 linkSpan.appendChild(document.createTextNode(" (")); | 703 linkSpan.appendChild(document.createTextNode(" (")); |
| 704 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { | 704 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { |
| 705 var tab = entry.tabs[windowIndex]; | 705 var tab = entry.tabs[windowIndex]; |
| 706 var tabImg = DOM('img', {src:'url("chrome://favicon/' + tab.url + '")'
, width:16, height:16, }); | 706 var tabImg = DOM('img', { |
| 707 src:'url("chrome-ui://favicon/' + tab.url + '")', |
| 708 width:16, |
| 709 height:16}); |
| 707 linkSpan.appendChild(tabImg); | 710 linkSpan.appendChild(tabImg); |
| 708 } | 711 } |
| 709 linkSpan.appendChild(document.createTextNode(")")); | 712 linkSpan.appendChild(document.createTextNode(")")); |
| 710 | 713 |
| 711 link = DOM('a', { href: 'window', | 714 link = DOM('a', { href: 'window', |
| 712 className: 'recently-closed-window-link', | 715 className: 'recently-closed-window-link', |
| 713 title: localStrings.getString('closedWindow') } ); | 716 title: localStrings.getString('closedWindow') } ); |
| 714 windowSpan = DOM('span', {className: 'recently-close-window-text'}); | 717 windowSpan = DOM('span', {className: 'recently-close-window-text'}); |
| 715 windowSpan.appendChild( | 718 windowSpan.appendChild( |
| 716 document.createTextNode(localStrings.getString('closedwindow'))); | 719 document.createTextNode(localStrings.getString('closedwindow'))); |
| (...skipping 27 matching lines...) Expand all Loading... |
| 744 * | 747 * |
| 745 * @param {String} tagName Tagname for the DOM element to create. | 748 * @param {String} tagName Tagname for the DOM element to create. |
| 746 * @param {Object} data Object with title and url to popuplate the element. | 749 * @param {Object} data Object with title and url to popuplate the element. |
| 747 * | 750 * |
| 748 * @return {Node} The element containing the bookmark. | 751 * @return {Node} The element containing the bookmark. |
| 749 */ | 752 */ |
| 750 function createRecentBookmark(tagName, data) { | 753 function createRecentBookmark(tagName, data) { |
| 751 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); | 754 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); |
| 752 if (tagName == 'a') | 755 if (tagName == 'a') |
| 753 link.href = data.url; | 756 link.href = data.url; |
| 754 link.style.backgroundImage = 'url("chrome://favicon/' + data.url + '")'; | 757 link.style.backgroundImage = 'url("chrome-ui://favicon/' + data.url + '")'; |
| 755 link.appendChild(document.createTextNode(data.title)); | 758 link.appendChild(document.createTextNode(data.title)); |
| 756 return link; | 759 return link; |
| 757 } | 760 } |
| 758 | 761 |
| 759 /** | 762 /** |
| 760 * A hover card for windows in the recently closed list to show more details. | 763 * A hover card for windows in the recently closed list to show more details. |
| 761 * | 764 * |
| 762 * @param {Node} target The element the hover card is for. | 765 * @param {Node} target The element the hover card is for. |
| 763 * @param {Object} data Object containing all the data for the card. | 766 * @param {Object} data Object containing all the data for the card. |
| 764 */ | 767 */ |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 864 processData(); | 867 processData(); |
| 865 | 868 |
| 866 // In case renderMostVisitedItems doesn't come back quickly enough, begin | 869 // In case renderMostVisitedItems doesn't come back quickly enough, begin |
| 867 // the first-run fade-in. If it has started or if this is not a first | 870 // the first-run fade-in. If it has started or if this is not a first |
| 868 // run new tab, this will be a no-op. | 871 // run new tab, this will be a no-op. |
| 869 setTimeout(function(){document.getElementById('main').className = 'visible'}, | 872 setTimeout(function(){document.getElementById('main').className = 'visible'}, |
| 870 1000); | 873 1000); |
| 871 </script> | 874 </script> |
| 872 </body> | 875 </body> |
| 873 </html> | 876 </html> |
| OLD | NEW |