| 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 234 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 245 padding:1px 0px 4px 22px; | 245 padding:1px 0px 4px 22px; |
| 246 overflow: hidden; | 246 overflow: hidden; |
| 247 text-overflow: ellipsis; | 247 text-overflow: ellipsis; |
| 248 text-decoration:none; | 248 text-decoration:none; |
| 249 -webkit-transition:all 0.12s; | 249 -webkit-transition:all 0.12s; |
| 250 } | 250 } |
| 251 html[dir='rtl'] .thumbnail-title { | 251 html[dir='rtl'] .thumbnail-title { |
| 252 background-position:right; | 252 background-position:right; |
| 253 padding-left:0px; | 253 padding-left:0px; |
| 254 padding-right:22px; | 254 padding-right:22px; |
| 255 text-align:right; |
| 255 } | 256 } |
| 256 .thumbnail { | 257 .thumbnail { |
| 257 width:195px; | 258 width:195px; |
| 258 height:136px; | 259 height:136px; |
| 259 border:1px solid #ccc; | 260 border:1px solid #ccc; |
| 260 background-color:#eee; | 261 background-color:#eee; |
| 261 -webkit-transition:all 0.12s; | 262 -webkit-transition:all 0.12s; |
| 262 } | 263 } |
| 263 a.thumbnail { | 264 a.thumbnail { |
| 264 border:1px solid #abe; | 265 border:1px solid #abe; |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 346 padding:3px 10px 3px 9px; | 347 padding:3px 10px 3px 9px; |
| 347 -webkit-border-radius:5px 5px; | 348 -webkit-border-radius:5px 5px; |
| 348 margin-bottom:10px; | 349 margin-bottom:10px; |
| 349 } | 350 } |
| 350 #searches { | 351 #searches { |
| 351 background-color:#e1ecfe; | 352 background-color:#e1ecfe; |
| 352 } | 353 } |
| 353 #recentlyBookmarked { | 354 #recentlyBookmarked { |
| 354 background-color:#e1ecfe; | 355 background-color:#e1ecfe; |
| 355 } | 356 } |
| 357 html[dir='rtl'] #recentlyBookmarkedContainer { |
| 358 text-align:right; |
| 359 } |
| 356 #recentlyClosedContainer { | 360 #recentlyClosedContainer { |
| 357 position:relative; | 361 position:relative; |
| 358 } | 362 } |
| 363 html[dir='rtl'] #recentlyClosedContainer { |
| 364 text-align:right; |
| 365 } |
| 359 #searches input { | 366 #searches input { |
| 360 border:1px solid #7f9db9; | 367 border:1px solid #7f9db9; |
| 361 background-repeat: no-repeat; | 368 background-repeat: no-repeat; |
| 362 background-position:4px center; | 369 background-position:4px center; |
| 363 padding-left: 23px; | 370 padding-left: 23px; |
| 364 min-height:24px; | 371 min-height:24px; |
| 365 width:182px; | 372 width:182px; |
| 366 margin-bottom:8px; | 373 margin-bottom:8px; |
| 367 display:block; | 374 display:block; |
| 368 } | 375 } |
| (...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 507 function bind(fn, selfObj, var_args) { | 514 function bind(fn, selfObj, var_args) { |
| 508 var boundArgs = Array.prototype.slice.call(arguments, 2); | 515 var boundArgs = Array.prototype.slice.call(arguments, 2); |
| 509 return function() { | 516 return function() { |
| 510 var args = Array.prototype.slice.call(arguments); | 517 var args = Array.prototype.slice.call(arguments); |
| 511 args.unshift.apply(args, boundArgs); | 518 args.unshift.apply(args, boundArgs); |
| 512 return fn.apply(selfObj, args); | 519 return fn.apply(selfObj, args); |
| 513 } | 520 } |
| 514 } | 521 } |
| 515 | 522 |
| 516 /* Return the DOM element for a "most visited" entry. | 523 /* Return the DOM element for a "most visited" entry. |
| 517 |page| should be an object with "title" and "url" fields. */ | 524 |page| should be an object with "title", "url", and "direction" fields. */ |
| 518 function makeMostVisitedDOM(page, number) { | 525 function makeMostVisitedDOM(page, number) { |
| 519 /* The HTML we want looks like this: | 526 /* The HTML we want looks like this: |
| 520 <a class="most-visited-item" href="URL" title="gmail.com"> | 527 <a class="most-visited-item" href="URL" title="gmail.com"> |
| 521 <div class="thumbnail-title" style="background-image:url(faviconurl);">gma
il.com</div> | 528 <div class="thumbnail-title" |
| 529 style="background-image:url(faviconurl);direction:ltr">gmail.com</div
> |
| 522 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> | 530 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> |
| 523 </a> | 531 </a> |
| 524 */ | 532 */ |
| 525 var root; | 533 var root; |
| 526 if (page.url) { | 534 if (page.url) { |
| 527 root = DOM('a', {href:page.url, | 535 root = DOM('a', {href:page.url, |
| 528 title:page.title}); | 536 title:page.title}); |
| 529 root.addEventListener("mousedown", function(event) { | 537 root.addEventListener("mousedown", function(event) { |
| 530 chrome.send("metrics", ["NTP_MostVisited" + number]) | 538 chrome.send("metrics", ["NTP_MostVisited" + number]) |
| 531 }, false); | 539 }, false); |
| 532 } else { | 540 } else { |
| 533 // Something went wrong; don't make it clickable. | 541 // Something went wrong; don't make it clickable. |
| 534 root = DOM('span'); | 542 root = DOM('span'); |
| 535 } | 543 } |
| 536 | 544 |
| 537 /* Create the thumbnail */ | 545 /* Create the thumbnail */ |
| 538 var img_thumbnail = DOM('img', {className:'thumbnail'}); | 546 var img_thumbnail = DOM('img', {className:'thumbnail'}); |
| 539 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); | 547 img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); |
| 540 img_thumbnail.src = 'chrome-ui://thumb/' + page.url; | 548 img_thumbnail.src = 'chrome-ui://thumb/' + page.url; |
| 541 | 549 |
| 542 /* Create the title */ | 550 /* Create the title */ |
| 543 var div_title = DOM('div', {className:'thumbnail-title'}); | 551 var div_title = DOM('div', {className:'thumbnail-title'}); |
| 544 div_title.style.backgroundImage = | 552 div_title.style.backgroundImage = |
| 545 'url("chrome-ui://favicon/' + page.url + '")'; | 553 'url("chrome-ui://favicon/' + page.url + '")'; |
| 554 /* Set the title's directionality independently of the overall page |
| 555 directionality. We need to do this since a purely LTR title should always |
| 556 have it's direction set as ltr. We only set the title direction to rtl if |
| 557 it contains a strong RTL character. Please refer to http://crbug.com/5926 |
| 558 for more information. |
| 559 */ |
| 560 div_title.style.direction = page.direction; |
| 546 if (page.title) { | 561 if (page.title) { |
| 547 div_title.appendChild(document.createTextNode(page.title)); | 562 div_title.appendChild(document.createTextNode(page.title)); |
| 548 } else { | 563 } else { |
| 549 // Make the empty title at least push down the icon. | 564 // Make the empty title at least push down the icon. |
| 550 div_title.innerHTML = ' '; | 565 div_title.innerHTML = ' '; |
| 551 } | 566 } |
| 552 | 567 |
| 553 root.appendChild(div_title); | 568 root.appendChild(div_title); |
| 554 root.appendChild(img_thumbnail); | 569 root.appendChild(img_thumbnail); |
| 555 | 570 |
| 556 return root; | 571 return root; |
| 557 } | 572 } |
| 558 | 573 |
| 559 /* This function is called by the browser with the most visited pages list. | 574 /* This function is called by the browser with the most visited pages list. |
| 560 |pages| is a list of page objects, which have url and title attributes. */ | 575 |pages| is a list of page objects, which have url, title, and direction |
| 576 attributes. */ |
| 561 function renderMostVisitedPages(pages) { | 577 function renderMostVisitedPages(pages) { |
| 562 logEvent('renderMostVisitedPages called: ' + pages.length); | 578 logEvent('renderMostVisitedPages called: ' + pages.length); |
| 563 | 579 |
| 564 document.getElementById("main").className = 'visible'; | 580 document.getElementById("main").className = 'visible'; |
| 565 var table = document.getElementById("mostvisitedtable"); | 581 var table = document.getElementById("mostvisitedtable"); |
| 566 table.innerHTML = ''; | 582 table.innerHTML = ''; |
| 567 | 583 |
| 568 // Show the most visited helptext if most visited is still useless. This is | 584 // Show the most visited helptext if most visited is still useless. This is |
| 569 // a crappy heuristic. | 585 // a crappy heuristic. |
| 570 if (pages.length < 3) { | 586 if (pages.length < 3) { |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 647 document.getElementById('searches').style.display = 'block'; | 663 document.getElementById('searches').style.display = 'block'; |
| 648 for (var i = 0; i < urls.length; ++i) { | 664 for (var i = 0; i < urls.length; ++i) { |
| 649 container.appendChild(makeSearchURL(urls[i])); | 665 container.appendChild(makeSearchURL(urls[i])); |
| 650 } | 666 } |
| 651 } | 667 } |
| 652 | 668 |
| 653 logEvent('renderSearchURLs done'); | 669 logEvent('renderSearchURLs done'); |
| 654 } | 670 } |
| 655 | 671 |
| 656 /* This function is called by the browser when the list of recently bookmarked | 672 /* This function is called by the browser when the list of recently bookmarked |
| 657 URLs is available. |entries| is a list of objects with title and url | 673 URLs is available. |entries| is a list of objects with title, url, and |
| 658 attributes. */ | 674 direction attributes. */ |
| 659 function renderRecentlyBookmarked(entries) { | 675 function renderRecentlyBookmarked(entries) { |
| 660 logEvent('renderRecentlyBookmarked called: ' + entries.length); | 676 logEvent('renderRecentlyBookmarked called: ' + entries.length); |
| 661 var section = document.getElementById('recentlyBookmarked'); | 677 var section = document.getElementById('recentlyBookmarked'); |
| 662 var container = document.getElementById('recentlyBookmarkedContainer'); | 678 var container = document.getElementById('recentlyBookmarkedContainer'); |
| 663 | 679 |
| 664 /* recentlyBookmarked is called any time the bookmarks change. Remove existing | 680 /* recentlyBookmarked is called any time the bookmarks change. Remove existing |
| 665 entries before adding new ones. */ | 681 entries before adding new ones. */ |
| 666 section.style.display = 'none'; | 682 section.style.display = 'none'; |
| 667 container.innerHTML = ''; | 683 container.innerHTML = ''; |
| 668 | 684 |
| 669 if (entries.length > 0) { | 685 if (entries.length > 0) { |
| 670 section.style.display = 'block'; | 686 section.style.display = 'block'; |
| 671 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { | 687 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { |
| 672 var link = DOM('a', {href: entry.url, | 688 var link = DOM('a', {href: entry.url, |
| 673 className:'recent-bookmark', | 689 className:'recent-bookmark', |
| 674 title:entry.title}); | 690 title:entry.title}); |
| 675 link.addEventListener("mousedown", function(event) { | 691 link.addEventListener("mousedown", function(event) { |
| 676 chrome.send("metrics", ["NTP_Bookmark" + i]) | 692 chrome.send("metrics", ["NTP_Bookmark" + i]) |
| 677 }, false); | 693 }, false); |
| 678 link.style.backgroundImage = | 694 link.style.backgroundImage = |
| 679 'url("chrome-ui://favicon/' + entry.url + '")'; | 695 'url("chrome-ui://favicon/' + entry.url + '")'; |
| 696 /* Set the bookmark title's directionality independently of the page, see |
| 697 comment about setting div_title.style.direction above for details. |
| 698 */ |
| 699 link.style.direction = entry.direction; |
| 680 link.appendChild(document.createTextNode(entry.title)); | 700 link.appendChild(document.createTextNode(entry.title)); |
| 681 container.appendChild(link); | 701 container.appendChild(link); |
| 682 } | 702 } |
| 683 } | 703 } |
| 684 | 704 |
| 685 logEvent('renderRecentlyBookmarked done'); | 705 logEvent('renderRecentlyBookmarked done'); |
| 686 } | 706 } |
| 687 | 707 |
| 688 /* This function adds incoming information about tabs to the new tab UI. */ | 708 /* This function adds incoming information about tabs to the new tab UI. */ |
| 689 function renderRecentlyClosedTabs(entries) { | 709 function renderRecentlyClosedTabs(entries) { |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 752 } | 772 } |
| 753 } | 773 } |
| 754 | 774 |
| 755 logEvent('renderRecentlyClosedTabs done'); | 775 logEvent('renderRecentlyClosedTabs done'); |
| 756 } | 776 } |
| 757 | 777 |
| 758 /** | 778 /** |
| 759 * Creates an item to go in the recent bookmarks or recently closed lists. | 779 * Creates an item to go in the recent bookmarks or recently closed lists. |
| 760 * | 780 * |
| 761 * @param {String} tagName Tagname for the DOM element to create. | 781 * @param {String} tagName Tagname for the DOM element to create. |
| 762 * @param {Object} data Object with title and url to popuplate the element. | 782 * @param {Object} data Object with title, url, and direction to popuplate the e
lement. |
| 763 * | 783 * |
| 764 * @return {Node} The element containing the bookmark. | 784 * @return {Node} The element containing the bookmark. |
| 765 */ | 785 */ |
| 766 function createRecentBookmark(tagName, data) { | 786 function createRecentBookmark(tagName, data) { |
| 767 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); | 787 var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); |
| 768 if (tagName == 'a') | 788 if (tagName == 'a') |
| 769 link.href = data.url; | 789 link.href = data.url; |
| 770 link.style.backgroundImage = 'url("chrome-ui://favicon/' + data.url + '")'; | 790 link.style.backgroundImage = 'url("chrome-ui://favicon/' + data.url + '")'; |
| 791 /* Set the title's directionality independently of the page, see comment |
| 792 about setting div_title.style.direction above for details. |
| 793 */ |
| 794 link.style.direction = data.direction; |
| 771 link.appendChild(document.createTextNode(data.title)); | 795 link.appendChild(document.createTextNode(data.title)); |
| 772 return link; | 796 return link; |
| 773 } | 797 } |
| 774 | 798 |
| 775 /** | 799 /** |
| 776 * A hover card for windows in the recently closed list to show more details. | 800 * A hover card for windows in the recently closed list to show more details. |
| 777 * | 801 * |
| 778 * @param {Node} target The element the hover card is for. | 802 * @param {Node} target The element the hover card is for. |
| 779 * @param {Object} data Object containing all the data for the card. | 803 * @param {Object} data Object containing all the data for the card. |
| 780 */ | 804 */ |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 880 processData(); | 904 processData(); |
| 881 | 905 |
| 882 // In case renderMostVisitedItems doesn't come back quickly enough, begin | 906 // In case renderMostVisitedItems doesn't come back quickly enough, begin |
| 883 // the first-run fade-in. If it has started or if this is not a first | 907 // the first-run fade-in. If it has started or if this is not a first |
| 884 // run new tab, this will be a no-op. | 908 // run new tab, this will be a no-op. |
| 885 setTimeout(function(){document.getElementById('main').className = 'visible'}, | 909 setTimeout(function(){document.getElementById('main').className = 'visible'}, |
| 886 1000); | 910 1000); |
| 887 </script> | 911 </script> |
| 888 </body> | 912 </body> |
| 889 </html> | 913 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
