Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(150)

Side by Side Diff: chrome/browser/resources/new_tab.html

Issue 101026: Change chrome-ui to chrome. I didn't go too far in converting existing string... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 11 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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">&nbsp;</div></td> 387 <td><div class="thumbnail">&nbsp;</div></td>
388 <td><div class="thumbnail"></div></td> 388 <td><div class="thumbnail"></div></td>
389 <td><div class="thumbnail">&nbsp;</div></td> 389 <td><div class="thumbnail">&nbsp;</div></td>
390 </tr> 390 </tr>
391 <tr> 391 <tr>
(...skipping 23 matching lines...) Expand all
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> &raquo;</a> 435 <span jscontent="showhistory"></span> &raquo;</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
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
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
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
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
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
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>
OLDNEW
« no previous file with comments | « chrome/browser/resources/history.html ('k') | chrome/browser/tab_contents/render_view_context_menu.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698