| 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-ui://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 176 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 370 window.addEventListener('resize', handleWindowResize, true); | 370 window.addEventListener('resize', handleWindowResize, true); |
| 371 document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); | 371 document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); |
| 372 </script> | 372 </script> |
| 373 | 373 |
| 374 <table id="main" cellpadding="0" cellspacing="0" border="0"> | 374 <table id="main" cellpadding="0" cellspacing="0" border="0"> |
| 375 <tr> | 375 <tr> |
| 376 <td valign="top"> | 376 <td valign="top"> |
| 377 <div id="mostvisitedsection" class="section"> | 377 <div id="mostvisitedsection" class="section"> |
| 378 <div id="mostvisited" style="position:relative;"> | 378 <div id="mostvisited" style="position:relative;"> |
| 379 <div> | 379 <div> |
| 380 » <span class="section-title non-edit-visible" jscontent="mostvisited"></s
pan> | 380 <span class="section-title non-edit-visible" jscontent="mostvisited"></s
pan> |
| 381 » <span class="section-title edit-visible" jseval="this.innerHTML = $this.
editmodeheading;"></span> | 381 <span class="section-title edit-visible" jseval="this.innerHTML = $this.
editmodeheading;"></span> |
| 382 </div> | 382 </div> |
| 383 <div id="mostvisitedintro" style="display:none;"> | 383 <div id="mostvisitedintro" style="display:none;"> |
| 384 <div class="most-visited-text" style="position:absolute;" jseval="this.i
nnerHTML = $this.mostvisitedintro;"></div> | 384 <div class="most-visited-text" style="position:absolute;" jseval="this.i
nnerHTML = $this.mostvisitedintro;"></div> |
| 385 <table> | 385 <table> |
| 386 <tr> | 386 <tr> |
| 387 <td><div class="thumbnail"> </div></td> | 387 <td><div class="thumbnail"> </div></td> |
| 388 <td><div class="thumbnail"></div></td> | 388 <td><div class="thumbnail"></div></td> |
| 389 <td><div class="thumbnail"> </div></td> | 389 <td><div class="thumbnail"> </div></td> |
| 390 </tr> | 390 </tr> |
| 391 <tr> | 391 <tr> |
| (...skipping 23 matching lines...) Expand all Loading... |
| 415 <div class="thumbnail"></div> | 415 <div class="thumbnail"></div> |
| 416 </td> | 416 </td> |
| 417 </tr> | 417 </tr> |
| 418 </table> | 418 </table> |
| 419 </div> | 419 </div> |
| 420 <a href="#" | 420 <a href="#" |
| 421 class="manage non-edit-visible" | 421 class="manage non-edit-visible" |
| 422 onClick="enterEditMode(); return false"> | 422 onClick="enterEditMode(); return false"> |
| 423 <span jscontent="editthumbnails"></span></a> | 423 <span jscontent="editthumbnails"></span></a> |
| 424 <button type="button" class="edit-visible" onClick="exitEditMode();" | 424 <button type="button" class="edit-visible" onClick="exitEditMode();" |
| 425 » jscontent="doneediting"></button> | 425 jscontent="doneediting"></button> |
| 426 <button type="button" class="edit-visible" onClick="cancelEdits();" | 426 <button type="button" class="edit-visible" onClick="cancelEdits();" |
| 427 » jscontent="cancelediting"></button> | 427 jscontent="cancelediting"></button> |
| 428 <a href="#" | 428 <a href="#" |
| 429 class="manage edit-visible" | 429 class="manage edit-visible" |
| 430 onClick="restoreThumbnails(); return false"> | 430 onClick="restoreThumbnails(); return false"> |
| 431 <span jscontent="restorethumbnails"></span></a> | 431 <span jscontent="restorethumbnails"></span></a> |
| 432 <a href="#" | 432 <a href="#" |
| 433 jsvalues="href:showhistoryurl" | 433 jsvalues="href:showhistoryurl" |
| 434 class="manage"> | 434 class="manage"> |
| 435 <span jscontent="showhistory"></span> »</a> | 435 <span jscontent="showhistory"></span> »</a> |
| 436 </div> | 436 </div> |
| 437 </td> | 437 </td> |
| 438 <td valign="top" width="230"> | 438 <td valign="top" width="230"> |
| 439 <div align="right"> | 439 <div align="right"> |
| 440 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" | 440 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" |
| 441 width="145" height="52" style="padding-bottom:8px;" /> | 441 width="145" height="52" style="padding-bottom:8px;" /> |
| 442 </div> | 442 </div> |
| 443 <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0" | 443 <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0" |
| 444 jsdisplay="p13nsrc" style="display:none;" | 444 jsdisplay="p13nsrc" style="display:none;" |
| 445 jsvalues="src:p13nsrc"></iframe> | 445 jsvalues="src:p13nsrc"></iframe> |
| 446 <div id="searches" class="sidebar"> | 446 <div id="searches" class="sidebar"> |
| 447 <div class="section-title" jscontent="searches"></div> | 447 <div class="section-title" jscontent="searches"></div> |
| 448 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> | 448 <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); ret
urn false;"> |
| 449 <input type="text" class="hint" | 449 <input type="text" class="hint" |
| 450 name="search" | 450 name="search" |
| 451 style="background-image:url(chrome-ui://favicon/);" | 451 style="background-image:url(chrome://favicon/);" |
| 452 jsvalues="placeholder:searchhistory"> | 452 jsvalues="placeholder:searchhistory"> |
| 453 </form> | 453 </form> |
| 454 <div id='searches-entries'></div> | 454 <div id='searches-entries'></div> |
| 455 </div> | 455 </div> |
| 456 | 456 |
| 457 <div id="recentlyBookmarked" class="sidebar" style="display:none"> | 457 <div id="recentlyBookmarked" class="sidebar" style="display:none"> |
| 458 <span class="section-title" jscontent="bookmarks"></span> | 458 <span class="section-title" jscontent="bookmarks"></span> |
| 459 <div id="recentlyBookmarkedContainer"></div> | 459 <div id="recentlyBookmarkedContainer"></div> |
| 460 </div> | 460 </div> |
| 461 | 461 |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 506 } | 506 } |
| 507 | 507 |
| 508 /* Return the DOM element for a "most visited" entry. | 508 /* Return the DOM element for a "most visited" entry. |
| 509 |page| should be an object with "title", "url", and "direction" fields. */ | 509 |page| should be an object with "title", "url", and "direction" fields. */ |
| 510 function makeMostVisitedDOM(page, number) { | 510 function makeMostVisitedDOM(page, number) { |
| 511 /* The HTML we want looks like this: | 511 /* The HTML we want looks like this: |
| 512 <a class="disabled-on-edit" href="URL" title="gmail.com"> | 512 <a class="disabled-on-edit" href="URL" title="gmail.com"> |
| 513 <div class="thumbnail-title disabled-on-edit" | 513 <div class="thumbnail-title disabled-on-edit" |
| 514 style="background-image:url(faviconurl);direction:ltr">gmail.com</div
> | 514 style="background-image:url(faviconurl);direction:ltr">gmail.com</div
> |
| 515 <img class="thumbnail disabled-on-edit" | 515 <img class="thumbnail disabled-on-edit" |
| 516 » style="background-image:url(thumbnailurl);" /> | 516 style="background-image:url(thumbnailurl);" /> |
| 517 </a> | 517 </a> |
| 518 */ | 518 */ |
| 519 var root; | 519 var root; |
| 520 if (page.url) { | 520 if (page.url) { |
| 521 root = DOM('a', {className:'disabled-on-edit', | 521 root = DOM('a', {className:'disabled-on-edit', |
| 522 href:page.url, | 522 href:page.url, |
| 523 title:page.title}); | 523 title:page.title}); |
| 524 root.addEventListener("mousedown", function(event) { | 524 root.addEventListener("mousedown", function(event) { |
| 525 chrome.send("metrics", ["NTP_MostVisited" + number]) | 525 chrome.send("metrics", ["NTP_MostVisited" + number]) |
| 526 }, false); | 526 }, false); |
| 527 } else { | 527 } else { |
| 528 // Something went wrong; don't make it clickable. | 528 // Something went wrong; don't make it clickable. |
| 529 root = DOM('span'); | 529 root = DOM('span'); |
| 530 } | 530 } |
| 531 | 531 |
| 532 /* Create the thumbnail */ | 532 /* Create the thumbnail */ |
| 533 var img_thumbnail = DOM('img', {className:'thumbnail disabled-on-edit'}); | 533 var img_thumbnail = DOM('img', {className:'thumbnail disabled-on-edit'}); |
| 534 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); | 534 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); |
| 535 img_thumbnail.src = 'chrome-ui://thumb/' + page.url; | 535 img_thumbnail.src = 'chrome://thumb/' + page.url; |
| 536 | 536 |
| 537 /* Create the title */ | 537 /* Create the title */ |
| 538 var div_title = DOM('div', {className:'thumbnail-title disabled-on-edit'}); | 538 var div_title = DOM('div', {className:'thumbnail-title disabled-on-edit'}); |
| 539 div_title.style.backgroundImage = | 539 div_title.style.backgroundImage = |
| 540 'url("chrome-ui://favicon/' + page.url + '")'; | 540 'url("chrome://favicon/' + page.url + '")'; |
| 541 /* Set the title's directionality independently of the overall page | 541 /* Set the title's directionality independently of the overall page |
| 542 directionality. We need to do this since a purely LTR title should always | 542 directionality. We need to do this since a purely LTR title should always |
| 543 have it's direction set as ltr. We only set the title direction to rtl if | 543 have it's direction set as ltr. We only set the title direction to rtl if |
| 544 it contains a strong RTL character. Please refer to http://crbug.com/5926 | 544 it contains a strong RTL character. Please refer to http://crbug.com/5926 |
| 545 for more information. | 545 for more information. |
| 546 */ | 546 */ |
| 547 div_title.style.direction = page.direction; | 547 div_title.style.direction = page.direction; |
| 548 /* The following if statement is a temporary workaround for | 548 /* The following if statement is a temporary workaround for |
| 549 http://crbug.com/7252 and http://crbug.com/7697. It should be removed | 549 http://crbug.com/7252 and http://crbug.com/7697. It should be removed |
| 550 before closing these bugs. | 550 before closing these bugs. |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 627 table.appendChild(row); | 627 table.appendChild(row); |
| 628 } | 628 } |
| 629 | 629 |
| 630 logEvent('renderMostVisitedPages done'); | 630 logEvent('renderMostVisitedPages done'); |
| 631 } | 631 } |
| 632 | 632 |
| 633 function makeSearchURL(url) { | 633 function makeSearchURL(url) { |
| 634 /* The HTML we want looks like this: | 634 /* The HTML we want looks like this: |
| 635 <form> | 635 <form> |
| 636 <input type="text" class="hint" | 636 <input type="text" class="hint" |
| 637 style="background-image:url(chrome-ui://favicon/"+url+");" | 637 style="background-image:url(chrome://favicon/"+url+");" |
| 638 placeholder="Search Wikipedia"> | 638 placeholder="Search Wikipedia"> |
| 639 </form> | 639 </form> |
| 640 */ | 640 */ |
| 641 var input = DOM('input', {type:'text', | 641 var input = DOM('input', {type:'text', |
| 642 className: 'hint'}); | 642 className: 'hint'}); |
| 643 // There is no DOM property for placeholder. | 643 // There is no DOM property for placeholder. |
| 644 input.setAttribute('placeholder', url.short_name); | 644 input.setAttribute('placeholder', url.short_name); |
| 645 input.keyword = url.keyword; | 645 input.keyword = url.keyword; |
| 646 | 646 |
| 647 if (url.favIconURL) { | 647 if (url.favIconURL) { |
| 648 input.style.backgroundImage = | 648 input.style.backgroundImage = |
| 649 'url("chrome-ui://favicon/iconurl/' + url.favIconURL + '")'; | 649 'url("chrome://favicon/iconurl/' + url.favIconURL + '")'; |
| 650 } else { | 650 } else { |
| 651 input.style.backgroundImage = | 651 input.style.backgroundImage = |
| 652 'url("chrome-ui://favicon/http://' + url.short_name + '")'; | 652 'url("chrome://favicon/http://' + url.short_name + '")'; |
| 653 } | 653 } |
| 654 | 654 |
| 655 var form = DOM('form'); | 655 var form = DOM('form'); |
| 656 form.onsubmit = function() { | 656 form.onsubmit = function() { |
| 657 chrome.send('doSearch', [input.keyword, input.value]); | 657 chrome.send('doSearch', [input.keyword, input.value]); |
| 658 return false; | 658 return false; |
| 659 }; | 659 }; |
| 660 form.appendChild(input); | 660 form.appendChild(input); |
| 661 | 661 |
| 662 return form; | 662 return form; |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 694 if (entries.length > 0) { | 694 if (entries.length > 0) { |
| 695 section.style.display = 'block'; | 695 section.style.display = 'block'; |
| 696 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { | 696 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { |
| 697 var link = DOM('a', {href: entry.url, | 697 var link = DOM('a', {href: entry.url, |
| 698 className:'recent-bookmark', | 698 className:'recent-bookmark', |
| 699 title:entry.title}); | 699 title:entry.title}); |
| 700 link.addEventListener("mousedown", function(event) { | 700 link.addEventListener("mousedown", function(event) { |
| 701 chrome.send("metrics", ["NTP_Bookmark" + i]) | 701 chrome.send("metrics", ["NTP_Bookmark" + i]) |
| 702 }, false); | 702 }, false); |
| 703 link.style.backgroundImage = | 703 link.style.backgroundImage = |
| 704 'url("chrome-ui://favicon/' + entry.url + '")'; | 704 'url("chrome://favicon/' + entry.url + '")'; |
| 705 /* Set the bookmark title's directionality independently of the page, see | 705 /* Set the bookmark title's directionality independently of the page, see |
| 706 comment about setting div_title.style.direction above for details. | 706 comment about setting div_title.style.direction above for details. |
| 707 */ | 707 */ |
| 708 link.style.direction = entry.direction; | 708 link.style.direction = entry.direction; |
| 709 /* The following if statement is a temporary workaround for | 709 /* The following if statement is a temporary workaround for |
| 710 http://crbug.com/7252 and http://crbug.com/7697. It should be removed | 710 http://crbug.com/7252 and http://crbug.com/7697. It should be removed |
| 711 before closing these bugs. | 711 before closing these bugs. |
| 712 */ | 712 */ |
| 713 if (entry.direction == 'rtl') { | 713 if (entry.direction == 'rtl') { |
| 714 link.style.textOverflow = 'clip'; | 714 link.style.textOverflow = 'clip'; |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 746 container.appendChild(link); | 746 container.appendChild(link); |
| 747 } else { | 747 } else { |
| 748 // Closed window. | 748 // Closed window. |
| 749 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); | 749 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); |
| 750 | 750 |
| 751 var linkSpan = DOM('span'); | 751 var linkSpan = DOM('span'); |
| 752 linkSpan.appendChild(document.createTextNode(" ")); | 752 linkSpan.appendChild(document.createTextNode(" ")); |
| 753 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { | 753 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { |
| 754 var tab = entry.tabs[windowIndex]; | 754 var tab = entry.tabs[windowIndex]; |
| 755 var tabImg = DOM('img', { | 755 var tabImg = DOM('img', { |
| 756 src:'url("chrome-ui://favicon/' + tab.url + '")', | 756 src:'url("chrome://favicon/' + tab.url + '")', |
| 757 width:16, | 757 width:16, |
| 758 height:16}); | 758 height:16}); |
| 759 tabImg.onmousedown = function() { return false; } | 759 tabImg.onmousedown = function() { return false; } |
| 760 linkSpan.appendChild(tabImg); | 760 linkSpan.appendChild(tabImg); |
| 761 } | 761 } |
| 762 | 762 |
| 763 link = DOM('span', { className: 'recently-closed-window-link' } ); | 763 link = DOM('span', { className: 'recently-closed-window-link' } ); |
| 764 windowSpan = DOM('span', {className: 'recently-close-window-text'}); | 764 windowSpan = DOM('span', {className: 'recently-close-window-text'}); |
| 765 windowSpan.appendChild(document.createTextNode( | 765 windowSpan.appendChild(document.createTextNode( |
| 766 recentlyClosedWindowText(entry.tabs.length))); | 766 recentlyClosedWindowText(entry.tabs.length))); |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 807 * | 807 * |
| 808 * @param {String} tagName Tagname for the DOM element to create. | 808 * @param {String} tagName Tagname for the DOM element to create. |
| 809 * @param {Object} data Object with title, url, and direction to popuplate the e
lement. | 809 * @param {Object} data Object with title, url, and direction to popuplate the e
lement. |
| 810 * | 810 * |
| 811 * @return {Node} The element containing the bookmark. | 811 * @return {Node} The element containing the bookmark. |
| 812 */ | 812 */ |
| 813 function createRecentBookmark(tagName, data) { | 813 function createRecentBookmark(tagName, data) { |
| 814 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); | 814 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); |
| 815 if (tagName == 'a') | 815 if (tagName == 'a') |
| 816 link.href = data.url; | 816 link.href = data.url; |
| 817 link.style.backgroundImage = 'url("chrome-ui://favicon/' + data.url + '")'; | 817 link.style.backgroundImage = 'url("chrome://favicon/' + data.url + '")'; |
| 818 /* Set the title's directionality independently of the page, see comment | 818 /* Set the title's directionality independently of the page, see comment |
| 819 about setting div_title.style.direction above for details. | 819 about setting div_title.style.direction above for details. |
| 820 */ | 820 */ |
| 821 link.style.direction = data.direction; | 821 link.style.direction = data.direction; |
| 822 /* The following if statement is a temporary workaround for | 822 /* The following if statement is a temporary workaround for |
| 823 http://crbug.com/7252 and http://crbug.com/7697. It should be removed | 823 http://crbug.com/7252 and http://crbug.com/7697. It should be removed |
| 824 before closing these bugs. | 824 before closing these bugs. |
| 825 */ | 825 */ |
| 826 if (data.direction == 'rtl') { | 826 if (data.direction == 'rtl') { |
| 827 link.style.textOverflow = 'clip'; | 827 link.style.textOverflow = 'clip'; |
| (...skipping 184 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1012 background: url('../../app/theme/closed_window.png'); | 1012 background: url('../../app/theme/closed_window.png'); |
| 1013 background-repeat: no-repeat; | 1013 background-repeat: no-repeat; |
| 1014 } | 1014 } |
| 1015 html[dir='rtl'] .recent-window-container { | 1015 html[dir='rtl'] .recent-window-container { |
| 1016 background-position: right; | 1016 background-position: right; |
| 1017 padding-right: 22px; | 1017 padding-right: 22px; |
| 1018 } | 1018 } |
| 1019 </style> | 1019 </style> |
| 1020 | 1020 |
| 1021 </html> | 1021 </html> |
| OLD | NEW |