| 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 28 matching lines...) Expand all Loading... |
| 39 /////////////////////////////////////////////////////////////////////////////// | 39 /////////////////////////////////////////////////////////////////////////////// |
| 40 // localStrings: | 40 // localStrings: |
| 41 /** | 41 /** |
| 42 * We get strings into the page by using JSTemplate to populate some elements | 42 * We get strings into the page by using JSTemplate to populate some elements |
| 43 * with localized content, then reading the content of those elements into | 43 * with localized content, then reading the content of those elements into |
| 44 * this global strings object. | 44 * this global strings object. |
| 45 * @param {Node} node The DOM node containing all our strings. | 45 * @param {Node} node The DOM node containing all our strings. |
| 46 */ | 46 */ |
| 47 function LocalStrings(node) { | 47 function LocalStrings(node) { |
| 48 this.strings_ = {}; | 48 this.strings_ = {}; |
| 49 | 49 |
| 50 var children = node.childNodes; | 50 var children = node.childNodes; |
| 51 for (var i = 0, child; child = children[i]; i++) { | 51 for (var i = 0, child; child = children[i]; i++) { |
| 52 var id = child.id; | 52 var id = child.id; |
| 53 if (id) { | 53 if (id) { |
| 54 this.strings_[id] = child.innerHTML; | 54 this.strings_[id] = child.innerHTML; |
| 55 } | 55 } |
| 56 } | 56 } |
| 57 } | 57 } |
| 58 | 58 |
| 59 /** | 59 /** |
| 60 * Gets a localized string by its id. | 60 * Gets a localized string by its id. |
| 61 * @param {string} s The id of the string we want | 61 * @param {string} s The id of the string we want |
| 62 * @return {string} The localized string | 62 * @return {string} The localized string |
| 63 */ | 63 */ |
| 64 LocalStrings.prototype.getString = function(s) { | 64 LocalStrings.prototype.getString = function(s) { |
| 65 return (s in this.strings_) ? this.strings_[s] : ''; | 65 return (s in this.strings_) ? this.strings_[s] : ''; |
| 66 } | 66 } |
| 67 | 67 |
| 68 /** | 68 /** |
| 69 * Returns a formatted localized string (where all %s contents are replaced | 69 * Returns a formatted localized string (where all %s contents are replaced |
| 70 * by the second argument). | 70 * by the second argument). |
| 71 * @param {string} s The id of the string we want | 71 * @param {string} s The id of the string we want |
| 72 * @param {string} d The string to include in the formatted string | 72 * @param {string} d The string to include in the formatted string |
| 73 * @return {string} The formatted string. | 73 * @return {string} The formatted string. |
| 74 */ | 74 */ |
| 75 LocalStrings.prototype.formatString = function(s, d) { | 75 LocalStrings.prototype.formatString = function(s, d) { |
| 76 return (s in this.strings_) ? this.strings_[s].replace(/\%s/, d) : ''; | 76 return (s in this.strings_) ? this.strings_[s].replace(/\%s/, d) : ''; |
| 77 } | 77 } |
| 78 | 78 |
| 79 function $(o) {return document.getElementById(o);} | 79 function $(o) {return document.getElementById(o);} |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 126 unprocessedData.recentlyClosedTabs = data; | 126 unprocessedData.recentlyClosedTabs = data; |
| 127 processData(); | 127 processData(); |
| 128 } | 128 } |
| 129 | 129 |
| 130 function resizeP13N(new_height) { | 130 function resizeP13N(new_height) { |
| 131 var childf = document.getElementById('p13n'); | 131 var childf = document.getElementById('p13n'); |
| 132 if (new_height < 1) { | 132 if (new_height < 1) { |
| 133 childf.style.display = "none"; | 133 childf.style.display = "none"; |
| 134 return; | 134 return; |
| 135 } | 135 } |
| 136 childf.height = new_height; | 136 childf.height = new_height; |
| 137 childf.style.display = "block"; | 137 childf.style.display = "block"; |
| 138 } | 138 } |
| 139 | 139 |
| 140 chrome.send("getMostVisited"); | 140 chrome.send("getMostVisited"); |
| 141 chrome.send("getMostSearched"); | 141 chrome.send("getMostSearched"); |
| 142 chrome.send("getRecentlyBookmarked"); | 142 chrome.send("getRecentlyBookmarked"); |
| 143 chrome.send("getRecentlyClosedTabs"); | 143 chrome.send("getRecentlyClosedTabs"); |
| 144 | 144 |
| 145 function handleWindowResize() { | 145 function handleWindowResize() { |
| 146 if (!document.body || document.body.clientWidth < 10) { | 146 if (!document.body || document.body.clientWidth < 10) { |
| (...skipping 292 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 439 <div class="thumbnail"></div> | 439 <div class="thumbnail"></div> |
| 440 </td> | 440 </td> |
| 441 <td> | 441 <td> |
| 442 <div class="thumbnail-title"> </div> | 442 <div class="thumbnail-title"> </div> |
| 443 <div class="thumbnail"></div> | 443 <div class="thumbnail"></div> |
| 444 </td> | 444 </td> |
| 445 </tr> | 445 </tr> |
| 446 </table> | 446 </table> |
| 447 </div> | 447 </div> |
| 448 <a href="#" | 448 <a href="#" |
| 449 class="manage" | 449 jsvalues="href:showhistoryurl" |
| 450 onclick="chrome.send('showHistoryPage'); return false"> | 450 class="manage"> |
| 451 <span jscontent="showhistory"></span> »</a> | 451 <span jscontent="showhistory"></span> »</a> |
| 452 </div> | 452 </div> |
| 453 </td> | 453 </td> |
| 454 <td valign="top" width="230"> | 454 <td valign="top" width="230"> |
| 455 <div align="right"> | 455 <div align="right"> |
| 456 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" | 456 <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" |
| 457 width="145" height="52" style="padding-bottom:8px;" /> | 457 width="145" height="52" style="padding-bottom:8px;" /> |
| 458 </div> | 458 </div> |
| 459 <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0" | 459 <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0" |
| 460 jsdisplay="p13nsrc" style="display:none;" | 460 jsdisplay="p13nsrc" style="display:none;" |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 505 * Remaining arguments specified at call-time are appended to the pre- | 505 * Remaining arguments specified at call-time are appended to the pre- |
| 506 * specified ones.<br><br> | 506 * specified ones.<br><br> |
| 507 * | 507 * |
| 508 * @param {Function} fn A function to partially apply. | 508 * @param {Function} fn A function to partially apply. |
| 509 * @param {Object} selfObj Specifies the object which |this| should point to | 509 * @param {Object} selfObj Specifies the object which |this| should point to |
| 510 * when the function is run. | 510 * when the function is run. |
| 511 * @param {Object} var_args Additional arguments that are partially | 511 * @param {Object} var_args Additional arguments that are partially |
| 512 * applied to the function. | 512 * applied to the function. |
| 513 * | 513 * |
| 514 * @return {!Function} A partially-applied form of the function bind() was | 514 * @return {!Function} A partially-applied form of the function bind() was |
| 515 * invoked as a method of. | 515 * invoked as a method of. |
| 516 */ | 516 */ |
| 517 function bind(fn, selfObj, var_args) { | 517 function bind(fn, selfObj, var_args) { |
| 518 var boundArgs = Array.prototype.slice.call(arguments, 2); | 518 var boundArgs = Array.prototype.slice.call(arguments, 2); |
| 519 return function() { | 519 return function() { |
| 520 var args = Array.prototype.slice.call(arguments); | 520 var args = Array.prototype.slice.call(arguments); |
| 521 args.unshift.apply(args, boundArgs); | 521 args.unshift.apply(args, boundArgs); |
| 522 return fn.apply(selfObj, args); | 522 return fn.apply(selfObj, args); |
| 523 } | 523 } |
| 524 } | 524 } |
| 525 | 525 |
| 526 /* Return the DOM element for a "most visited" entry. | 526 /* Return the DOM element for a "most visited" entry. |
| 527 |page| should be an object with "title", "url", and "direction" fields. */ | 527 |page| should be an object with "title", "url", and "direction" fields. */ |
| 528 function makeMostVisitedDOM(page, number) { | 528 function makeMostVisitedDOM(page, number) { |
| 529 /* The HTML we want looks like this: | 529 /* The HTML we want looks like this: |
| 530 <a class="most-visited-item" href="URL" title="gmail.com"> | 530 <a class="most-visited-item" href="URL" title="gmail.com"> |
| 531 <div class="thumbnail-title" | 531 <div class="thumbnail-title" |
| 532 style="background-image:url(faviconurl);direction:ltr">gmail.com</div
> | 532 style="background-image:url(faviconurl);direction:ltr">gmail.com</div
> |
| 533 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> | 533 <img class="thumbnail" style="background-image:url(thumbnailurl);" /> |
| 534 </a> | 534 </a> |
| 535 */ | 535 */ |
| 536 var root; | 536 var root; |
| 537 if (page.url) { | 537 if (page.url) { |
| 538 root = DOM('a', {href:page.url, | 538 root = DOM('a', {href:page.url, |
| 539 title:page.title}); | 539 title:page.title}); |
| 540 root.addEventListener("mousedown", function(event) { | 540 root.addEventListener("mousedown", function(event) { |
| 541 chrome.send("metrics", ["NTP_MostVisited" + number]) | 541 chrome.send("metrics", ["NTP_MostVisited" + number]) |
| 542 }, false); | 542 }, false); |
| 543 } else { | 543 } else { |
| 544 // Something went wrong; don't make it clickable. | 544 // Something went wrong; don't make it clickable. |
| 545 root = DOM('span'); | 545 root = DOM('span'); |
| 546 } | 546 } |
| 547 | 547 |
| 548 /* Create the thumbnail */ | 548 /* Create the thumbnail */ |
| (...skipping 132 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 681 var container = document.getElementById('recentlyBookmarkedContainer'); | 681 var container = document.getElementById('recentlyBookmarkedContainer'); |
| 682 | 682 |
| 683 /* recentlyBookmarked is called any time the bookmarks change. Remove existing | 683 /* recentlyBookmarked is called any time the bookmarks change. Remove existing |
| 684 entries before adding new ones. */ | 684 entries before adding new ones. */ |
| 685 section.style.display = 'none'; | 685 section.style.display = 'none'; |
| 686 container.innerHTML = ''; | 686 container.innerHTML = ''; |
| 687 | 687 |
| 688 if (entries.length > 0) { | 688 if (entries.length > 0) { |
| 689 section.style.display = 'block'; | 689 section.style.display = 'block'; |
| 690 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { | 690 for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { |
| 691 var link = DOM('a', {href: entry.url, | 691 var link = DOM('a', {href: entry.url, |
| 692 className:'recent-bookmark', | 692 className:'recent-bookmark', |
| 693 title:entry.title}); | 693 title:entry.title}); |
| 694 link.addEventListener("mousedown", function(event) { | 694 link.addEventListener("mousedown", function(event) { |
| 695 chrome.send("metrics", ["NTP_Bookmark" + i]) | 695 chrome.send("metrics", ["NTP_Bookmark" + i]) |
| 696 }, false); | 696 }, false); |
| 697 link.style.backgroundImage = | 697 link.style.backgroundImage = |
| 698 'url("chrome-ui://favicon/' + entry.url + '")'; | 698 'url("chrome-ui://favicon/' + entry.url + '")'; |
| 699 /* Set the bookmark title's directionality independently of the page, see | 699 /* Set the bookmark title's directionality independently of the page, see |
| 700 comment about setting div_title.style.direction above for details. | 700 comment about setting div_title.style.direction above for details. |
| 701 */ | 701 */ |
| 702 link.style.direction = entry.direction; | 702 link.style.direction = entry.direction; |
| (...skipping 16 matching lines...) Expand all Loading... |
| 719 date. Therefore, reset the recentlyClosedTabs state on every | 719 date. Therefore, reset the recentlyClosedTabs state on every |
| 720 call. */ | 720 call. */ |
| 721 section.style.display = 'none'; | 721 section.style.display = 'none'; |
| 722 container.innerHTML = ''; | 722 container.innerHTML = ''; |
| 723 | 723 |
| 724 if (entries.length > 0) { | 724 if (entries.length > 0) { |
| 725 section.style.display = 'block'; | 725 section.style.display = 'block'; |
| 726 | 726 |
| 727 for (var i = 0; entry = entries[i]; ++i) { | 727 for (var i = 0; entry = entries[i]; ++i) { |
| 728 var link; | 728 var link; |
| 729 | 729 |
| 730 if (entry.type == "tab") { | 730 if (entry.type == "tab") { |
| 731 // Closed tab. | 731 // Closed tab. |
| 732 link = createRecentBookmark('a', entry); | 732 link = createRecentBookmark('a', entry); |
| 733 container.appendChild(link); | 733 container.appendChild(link); |
| 734 } else { | 734 } else { |
| 735 // Closed window. | 735 // Closed window. |
| 736 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); | 736 var linkSpanContainer = DOM('div', { className: 'recent-window-container
'}); |
| 737 | 737 |
| 738 var linkSpan = DOM('span'); | 738 var linkSpan = DOM('span'); |
| 739 linkSpan.appendChild(document.createTextNode(" (")); | 739 linkSpan.appendChild(document.createTextNode(" (")); |
| 740 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { | 740 for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++
) { |
| 741 var tab = entry.tabs[windowIndex]; | 741 var tab = entry.tabs[windowIndex]; |
| 742 var tabImg = DOM('img', { | 742 var tabImg = DOM('img', { |
| 743 src:'url("chrome-ui://favicon/' + tab.url + '")', | 743 src:'url("chrome-ui://favicon/' + tab.url + '")', |
| 744 width:16, | 744 width:16, |
| 745 height:16}); | 745 height:16}); |
| 746 tabImg.onmousedown = function() { return false; } | 746 tabImg.onmousedown = function() { return false; } |
| 747 linkSpan.appendChild(tabImg); | 747 linkSpan.appendChild(tabImg); |
| 748 } | 748 } |
| 749 linkSpan.appendChild(document.createTextNode(")")); | 749 linkSpan.appendChild(document.createTextNode(")")); |
| 750 | 750 |
| 751 link = DOM('span', { className: 'recently-closed-window-link' } ); | 751 link = DOM('span', { className: 'recently-closed-window-link' } ); |
| 752 windowSpan = DOM('span', {className: 'recently-close-window-text'}); | 752 windowSpan = DOM('span', {className: 'recently-close-window-text'}); |
| 753 windowSpan.appendChild( | 753 windowSpan.appendChild( |
| 754 document.createTextNode(localStrings.getString('closedwindow'))); | 754 document.createTextNode(localStrings.getString('closedwindow'))); |
| 755 link.appendChild(windowSpan); | 755 link.appendChild(windowSpan); |
| 756 link.appendChild(linkSpan); | 756 link.appendChild(linkSpan); |
| 757 linkSpanContainer.appendChild(link); | 757 linkSpanContainer.appendChild(link); |
| 758 container.appendChild(linkSpanContainer); | 758 container.appendChild(linkSpanContainer); |
| 759 | 759 |
| 760 // The card takes care of appending itself to the DOM, so no need to | 760 // The card takes care of appending itself to the DOM, so no need to |
| 761 // keep a reference to it. | 761 // keep a reference to it. |
| 762 new RecentlyClosedHoverCard(linkSpanContainer, entry); | 762 new RecentlyClosedHoverCard(linkSpanContainer, entry); |
| 763 } | 763 } |
| 764 | 764 |
| 765 link.onclick = function(sessionId) { | 765 link.onclick = function(sessionId) { |
| 766 return function() { | 766 return function() { |
| 767 chrome.send("metrics", ["NTP_TabRestored" + i]); | 767 chrome.send("metrics", ["NTP_TabRestored" + i]); |
| 768 /* This is a hack because chrome.send is hardcoded to only | 768 /* This is a hack because chrome.send is hardcoded to only |
| 769 accept arrays of strings. */ | 769 accept arrays of strings. */ |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 864 */ | 864 */ |
| 865 RecentlyClosedHoverCard.prototype.setShowTimeout_ = function() { | 865 RecentlyClosedHoverCard.prototype.setShowTimeout_ = function() { |
| 866 if (this.container && this.container_.style.display != 'none') { | 866 if (this.container && this.container_.style.display != 'none') { |
| 867 // If we're already showing the hovercard, make sure we don't hide it again | 867 // If we're already showing the hovercard, make sure we don't hide it again |
| 868 // onmouseover. | 868 // onmouseover. |
| 869 RecentlyClosedHoverCard.clearHideTimeout_(); | 869 RecentlyClosedHoverCard.clearHideTimeout_(); |
| 870 return; | 870 return; |
| 871 } | 871 } |
| 872 | 872 |
| 873 RecentlyClosedHoverCard.clearOpenTimeout_(); | 873 RecentlyClosedHoverCard.clearOpenTimeout_(); |
| 874 RecentlyClosedHoverCard.openTimeout_ = | 874 RecentlyClosedHoverCard.openTimeout_ = |
| 875 setTimeout(bind(this.show_, this), 200); | 875 setTimeout(bind(this.show_, this), 200); |
| 876 }; | 876 }; |
| 877 | 877 |
| 878 /** | 878 /** |
| 879 * Clears the open timer and sets the close one. | 879 * Clears the open timer and sets the close one. |
| 880 */ | 880 */ |
| 881 RecentlyClosedHoverCard.prototype.setHideTimeout_ = function() { | 881 RecentlyClosedHoverCard.prototype.setHideTimeout_ = function() { |
| 882 RecentlyClosedHoverCard.clearOpenTimeout_(); | 882 RecentlyClosedHoverCard.clearOpenTimeout_(); |
| 883 RecentlyClosedHoverCard.closeTimeout_ = | 883 RecentlyClosedHoverCard.closeTimeout_ = |
| 884 setTimeout(bind(this.hide_, this), 200); | 884 setTimeout(bind(this.hide_, this), 200); |
| 885 }; | 885 }; |
| 886 | 886 |
| 887 function viewLog() { | 887 function viewLog() { |
| 888 var lines = []; | 888 var lines = []; |
| 889 var start = log[0][1]; | 889 var start = log[0][1]; |
| 890 | 890 |
| 891 for (var i = 0; i < log.length; i++) { | 891 for (var i = 0; i < log.length; i++) { |
| 892 lines.push((log[i][1] - start) + ': ' + log[i][0]); | 892 lines.push((log[i][1] - start) + ': ' + log[i][0]); |
| 893 } | 893 } |
| (...skipping 12 matching lines...) Expand all Loading... |
| 906 processData(); | 906 processData(); |
| 907 | 907 |
| 908 // In case renderMostVisitedItems doesn't come back quickly enough, begin | 908 // In case renderMostVisitedItems doesn't come back quickly enough, begin |
| 909 // the first-run fade-in. If it has started or if this is not a first | 909 // the first-run fade-in. If it has started or if this is not a first |
| 910 // run new tab, this will be a no-op. | 910 // run new tab, this will be a no-op. |
| 911 setTimeout(function(){document.getElementById('main').className = 'visible'}, | 911 setTimeout(function(){document.getElementById('main').className = 'visible'}, |
| 912 1000); | 912 1000); |
| 913 </script> | 913 </script> |
| 914 </body> | 914 </body> |
| 915 </html> | 915 </html> |
| OLD | NEW |