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

Side by Side Diff: chrome/browser/resources/local_ntp/local_ntp.js

Issue 447243003: [Local NTP] Adding NtpDesign class to parametrizing NTP design specs (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 6 years, 4 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 // Copyright 2013 The Chromium Authors. All rights reserved. 1 // Copyright 2013 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 5
6 /** 6 /**
7 * @fileoverview The local InstantExtended NTP. 7 * @fileoverview The local InstantExtended NTP.
8 */ 8 */
9 9
10 10
11 /** 11 /**
12 * Controls rendering the new tab page for InstantExtended. 12 * Controls rendering the new tab page for InstantExtended.
13 * @return {Object} A limited interface for testing the local NTP. 13 * @return {Object} A limited interface for testing the local NTP.
14 */ 14 */
15 function LocalNTP() { 15 function LocalNTP() {
16 <include src="../../../../ui/webui/resources/js/assert.js"> 16 <include src="../../../../ui/webui/resources/js/assert.js">
17 <include src="local_ntp_util.js"> 17 <include src="local_ntp_util.js">
18 <include src="local_ntp_design.js">
Mathieu 2014/08/07 18:07:05 alphabetize includes unless they depend on each ot
huangs 2014/08/07 20:15:19 I don't know if nested <include> would work, but i
18 <include src="window_disposition_util.js"> 19 <include src="window_disposition_util.js">
19 20
20 21
21 /** 22 /**
22 * Enum for classnames. 23 * Enum for classnames.
23 * @enum {string} 24 * @enum {string}
24 * @const 25 * @const
25 */ 26 */
26 var CLASSES = { 27 var CLASSES = {
27 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme 28 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
95 96
96 /** 97 /**
97 * The JavaScript button event value for a middle click. 98 * The JavaScript button event value for a middle click.
98 * @type {number} 99 * @type {number}
99 * @const 100 * @const
100 */ 101 */
101 var MIDDLE_MOUSE_BUTTON = 1; 102 var MIDDLE_MOUSE_BUTTON = 1;
102 103
103 104
104 /** 105 /**
106 * Specifications of NTP design.
Mathieu 2014/08/07 18:07:05 Specifications *for the NTP design.
huangs 2014/08/07 20:15:19 Done.
107 * @type {NtpDesign}
108 * @const
Mathieu 2014/08/07 18:07:05 @const {NtpDesign}
huangs 2014/08/07 20:15:19 Done.
109 */
110 var ntpDesign;
Mathieu 2014/08/07 18:07:05 since it's a const should it not be NTP_DESIGN?
Mathieu 2014/08/07 18:07:05 why not call getNtpDesign(configData.ntpDesignName
huangs 2014/08/07 20:15:19 Done.
huangs 2014/08/07 20:15:19 Done.
111
112
113 /**
105 * The container for the tile elements. 114 * The container for the tile elements.
106 * @type {Element} 115 * @type {Element}
107 */ 116 */
108 var tilesContainer; 117 var tilesContainer;
109 118
110 119
111 /** 120 /**
112 * The notification displayed when a page is blacklisted. 121 * The notification displayed when a page is blacklisted.
113 * @type {Element} 122 * @type {Element}
114 */ 123 */
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after
197 var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE; 206 var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE;
198 207
199 208
200 /** 209 /**
201 * The state of the NTP when a query is entered into the Fakebox. 210 * The state of the NTP when a query is entered into the Fakebox.
202 * @type {NTP_DISPOSE_STATE} 211 * @type {NTP_DISPOSE_STATE}
203 */ 212 */
204 var fakeboxInputBehavior = NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO; 213 var fakeboxInputBehavior = NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO;
205 214
206 215
207 /**
208 * Total tile width. Should be equal to mv-tile's width + 2 * border-width.
209 * @private {number}
210 * @const
211 */
212 var TILE_WIDTH = 140;
213
214
215 /**
216 * Margin between tiles. Should be equal to mv-tile's total horizontal margin.
217 * @private {number}
218 * @const
219 */
220 var TILE_MARGIN = 20;
221
222
223 /** @type {number} @const */ 216 /** @type {number} @const */
224 var MAX_NUM_TILES_TO_SHOW = 8; 217 var MAX_NUM_TILES_TO_SHOW = 8;
225 218
226 219
227 /** @type {number} @const */ 220 /** @type {number} @const */
228 var MIN_NUM_COLUMNS = 2; 221 var MIN_NUM_COLUMNS = 2;
229 222
230 223
231 /** @type {number} @const */ 224 /** @type {number} @const */
232 var MAX_NUM_COLUMNS = 4; 225 var MAX_NUM_COLUMNS = 4;
(...skipping 22 matching lines...) Expand all
255 248
256 /** 249 /**
257 * The filename for a most visited iframe src which shows a thumbnail image. 250 * The filename for a most visited iframe src which shows a thumbnail image.
258 * @type {string} 251 * @type {string}
259 * @const 252 * @const
260 */ 253 */
261 var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html'; 254 var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html';
262 255
263 256
264 /** 257 /**
265 * The hex color for most visited tile elements.
266 * @type {string}
267 * @const
268 */
269 var MOST_VISITED_COLOR = '777777';
270
271
272 /**
273 * The font family for most visited tile elements.
274 * @type {string}
275 * @const
276 */
277 var MOST_VISITED_FONT_FAMILY = 'arial, sans-serif';
278
279
280 /**
281 * The font size for most visited tile elements.
282 * @type {number}
283 * @const
284 */
285 var MOST_VISITED_FONT_SIZE = 11;
286
287
288 /**
289 * Hide most visited tiles for at most this many milliseconds while painting. 258 * Hide most visited tiles for at most this many milliseconds while painting.
290 * @type {number} 259 * @type {number}
291 * @const 260 * @const
292 */ 261 */
293 var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500; 262 var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500;
294 263
295 264
296 /** 265 /**
297 * A Tile is either a rendering of a Most Visited page or "filler" used to 266 * A Tile is either a rendering of a Most Visited page or "filler" used to
298 * pad out the section when not enough pages exist. 267 * pad out the section when not enough pages exist.
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after
363 '}' + 332 '}' +
364 '#mv-notice-links span {' + 333 '#mv-notice-links span {' +
365 ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + 334 ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
366 '}' + 335 '}' +
367 '#mv-notice-x {' + 336 '#mv-notice-x {' +
368 ' -webkit-filter: drop-shadow(0 0 0 ' + 337 ' -webkit-filter: drop-shadow(0 0 0 ' +
369 convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' + 338 convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' +
370 '}' + 339 '}' +
371 '.mv-page-ready {' + 340 '.mv-page-ready {' +
372 ' border: 1px solid ' + 341 ' border: 1px solid ' +
373 convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + 342 convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
374 '}' + 343 '}' +
375 '.mv-page-ready:hover, .mv-page-ready:focus {' + 344 '.mv-page-ready:hover, .mv-page-ready:focus {' +
376 ' border-color: ' + 345 ' border-color: ' +
377 convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' + 346 convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' +
378 '}'; 347 '}';
379 348
380 if (customStyleElement) { 349 if (customStyleElement) {
381 customStyleElement.textContent = themeStyle; 350 customStyleElement.textContent = themeStyle;
382 } else { 351 } else {
383 customStyleElement = document.createElement('style'); 352 customStyleElement = document.createElement('style');
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after
553 for (var i = 0; i < numDesired; ++i) 522 for (var i = 0; i < numDesired; ++i)
554 tiles[i].elem.style.display = 'inline-block'; 523 tiles[i].elem.style.display = 'inline-block';
555 // If |numDesired| < |numExisting| then hide extra tiles (e.g., this occurs 524 // If |numDesired| < |numExisting| then hide extra tiles (e.g., this occurs
556 // when window is downsized). 525 // when window is downsized).
557 for (; i < numExisting; ++i) 526 for (; i < numExisting; ++i)
558 tiles[i].elem.style.display = 'none'; 527 tiles[i].elem.style.display = 'none';
559 } 528 }
560 529
561 530
562 /** 531 /**
563 * Builds a URL to display a most visited tile component in an iframe. 532 * Builds a URL to display a most visited tile title in an iframe.
564 * @param {string} filename The desired most visited component filename.
565 * @param {number} rid The restricted ID. 533 * @param {number} rid The restricted ID.
566 * @param {string} color The text color for text in the iframe.
567 * @param {string} fontFamily The font family for text in the iframe.
568 * @param {number} fontSize The font size for text in the iframe.
569 * @param {number} position The position of the iframe in the UI. 534 * @param {number} position The position of the iframe in the UI.
570 * @return {string} An URL to display the most visited component in an iframe. 535 * @return {string} An URL to display the most visited title in an iframe.
571 */ 536 */
572 function getMostVisitedIframeUrl(filename, rid, color, fontFamily, fontSize, 537 function getMostVisitedTitleIframeUrl(rid, position) {
573 position) { 538 var url = 'chrome-search://most-visited/' +
574 return 'chrome-search://most-visited/' + encodeURIComponent(filename) + '?' + 539 encodeURIComponent(MOST_VISITED_TITLE_IFRAME);
575 ['rid=' + encodeURIComponent(rid), 540 var params = [
576 'c=' + encodeURIComponent(color), 541 'rid=' + encodeURIComponent(rid),
577 'f=' + encodeURIComponent(fontFamily), 542 'f=' + encodeURIComponent(ntpDesign.fontFamily),
578 'fs=' + encodeURIComponent(fontSize), 543 'fs=' + encodeURIComponent(ntpDesign.fontSize),
579 'pos=' + encodeURIComponent(position)].join('&'); 544 'c=' + encodeURIComponent(ntpDesign.titleColor),
545 'ta=' + encodeURIComponent(ntpDesign.titleTextAlign),
Mathieu 2014/08/07 18:07:05 Default is center, why not make it optional simila
Mathieu 2014/08/07 18:07:05 bring to last line to follow ordering consistent w
huangs 2014/08/07 20:15:19 Done.
huangs 2014/08/07 20:15:19 Moot as 'ta' is now optional.
546 'pos=' + encodeURIComponent(position)];
547 if (ntpDesign.titleTextFade)
548 params.push('tf=' + ntpDesign.titleTextFade);
549 return url + '?' + params.join('&');
580 } 550 }
581 551
582 552
553 /**
554 * Builds a URL to display a most visited tile thumbnail in an iframe.
555 * @param {number} rid The restricted ID.
556 * @param {number} position The position of the iframe in the UI.
557 * @return {string} An URL to display the most visited thumbnail in an iframe.
558 */
559 function getMostVisitedThumbnailIframeUrl(rid, position) {
560 var url = 'chrome-search://most-visited/' +
561 encodeURIComponent(MOST_VISITED_THUMBNAIL_IFRAME);
562 var params = [
563 'rid=' + encodeURIComponent(rid),
564 'f=' + encodeURIComponent(ntpDesign.fontFamily),
565 'fs=' + encodeURIComponent(ntpDesign.fontSize),
566 'c=' + encodeURIComponent(ntpDesign.thumbnailTextColor),
567 'pos=' + encodeURIComponent(position)];
568 return url + '?' + params.join('&');
569 }
570
571
583 /** 572 /**
584 * Creates a Tile with the specified page data. If no data is provided, a 573 * Creates a Tile with the specified page data. If no data is provided, a
585 * filler Tile is created. 574 * filler Tile is created.
586 * @param {Object} page The page data. 575 * @param {Object} page The page data.
587 * @param {number} position The position of the tile. 576 * @param {number} position The position of the tile.
588 * @return {Tile} The new Tile. 577 * @return {Tile} The new Tile.
589 */ 578 */
590 function createTile(page, position) { 579 function createTile(page, position) {
591 var tileElement = document.createElement('div'); 580 var tileElement = document.createElement('div');
592 tileElement.classList.add(CLASSES.TILE); 581 tileElement.classList.add(CLASSES.TILE);
(...skipping 29 matching lines...) Expand all
622 // 611 //
623 // Giving iframes distinct ids seems to cause some invalidation and prevent 612 // Giving iframes distinct ids seems to cause some invalidation and prevent
624 // associating the incorrect data. 613 // associating the incorrect data.
625 // 614 //
626 // TODO(jered): Find and fix the root (probably Blink) bug. 615 // TODO(jered): Find and fix the root (probably Blink) bug.
627 616
628 // Keep this ID here. See comment above. 617 // Keep this ID here. See comment above.
629 titleElement.id = 'title-' + rid; 618 titleElement.id = 'title-' + rid;
630 titleElement.className = CLASSES.TITLE; 619 titleElement.className = CLASSES.TITLE;
631 titleElement.hidden = true; 620 titleElement.hidden = true;
632 titleElement.src = getMostVisitedIframeUrl( 621 titleElement.style.width = ntpDesign.titleWidth + 'px';
633 MOST_VISITED_TITLE_IFRAME, rid, MOST_VISITED_COLOR, 622 titleElement.style.height = ntpDesign.titleHeight + 'px';
634 MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position); 623 titleElement.src = getMostVisitedTitleIframeUrl(rid, position);
635 tileElement.appendChild(titleElement); 624 tileElement.appendChild(titleElement);
636 625
637 // The iframe which renders either a thumbnail or domain element. 626 // The iframe which renders either a thumbnail or domain element.
638 var thumbnailElement = document.createElement('iframe'); 627 var thumbnailElement = document.createElement('iframe');
639 thumbnailElement.tabIndex = '-1'; 628 thumbnailElement.tabIndex = '-1';
640 // Keep this ID here. See comment above. 629 // Keep this ID here. See comment above.
641 thumbnailElement.id = 'thumb-' + rid; 630 thumbnailElement.id = 'thumb-' + rid;
642 thumbnailElement.className = CLASSES.THUMBNAIL; 631 thumbnailElement.className = CLASSES.THUMBNAIL;
643 thumbnailElement.hidden = true; 632 thumbnailElement.hidden = true;
644 thumbnailElement.src = getMostVisitedIframeUrl( 633 thumbnailElement.style.width = ntpDesign.thumbnailWidth + 'px';
645 MOST_VISITED_THUMBNAIL_IFRAME, rid, MOST_VISITED_COLOR, 634 thumbnailElement.style.height = ntpDesign.thumbnailHeight + 'px';
646 MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position); 635 thumbnailElement.src = getMostVisitedThumbnailIframeUrl(rid, position);
647 tileElement.appendChild(thumbnailElement); 636 tileElement.appendChild(thumbnailElement);
648 637
649 // A mask to darken the thumbnail on focus. 638 // A mask to darken the thumbnail on focus.
650 var maskElement = createAndAppendElement( 639 var maskElement = createAndAppendElement(
651 tileElement, 'div', CLASSES.THUMBNAIL_MASK); 640 tileElement, 'div', CLASSES.THUMBNAIL_MASK);
652 641
653 // The button used to blacklist this page. 642 // The button used to blacklist this page.
654 var blacklistButton = createAndAppendElement( 643 var blacklistButton = createAndAppendElement(
655 tileElement, 'div', CLASSES.BLACKLIST_BUTTON); 644 tileElement, 'div', CLASSES.BLACKLIST_BUTTON);
656 var blacklistFunction = generateBlacklistFunction(rid); 645 var blacklistFunction = generateBlacklistFunction(rid);
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
736 ntpApiHandle.undoAllMostVisitedDeletions(); 725 ntpApiHandle.undoAllMostVisitedDeletions();
737 } 726 }
738 727
739 728
740 /** 729 /**
741 * Resizes elements because the number of tile columns may need to change in 730 * Resizes elements because the number of tile columns may need to change in
742 * response to resizing. Also shows or hides extra tiles tiles according to the 731 * response to resizing. Also shows or hides extra tiles tiles according to the
743 * new width of the page. 732 * new width of the page.
744 */ 733 */
745 function onResize() { 734 function onResize() {
735 var tileRequiredWidth = ntpDesign.tileWidth + ntpDesign.tileMargin;
746 // If innerWidth is zero, then use the maximum snap size. 736 // If innerWidth is zero, then use the maximum snap size.
737 var maxSnapSize = MAX_NUM_COLUMNS * tileRequiredWidth - ntpDesign.tileMargin +
738 MIN_TOTAL_HORIZONTAL_PADDING;
747 var innerWidth = window.innerWidth || 820; 739 var innerWidth = window.innerWidth || 820;
748 // Each tile has left and right margins that sum to TILE_MARGIN. 740 // Each tile has left and right margins that sum to ntpDesign.tileMargin.
749 var tileRequiredWidth = TILE_WIDTH + TILE_MARGIN; 741 var availableWidth = innerWidth + ntpDesign.tileMargin -
750 var availableWidth = innerWidth + TILE_MARGIN - MIN_TOTAL_HORIZONTAL_PADDING; 742 MIN_TOTAL_HORIZONTAL_PADDING;
751 var newNumColumns = Math.floor(availableWidth / tileRequiredWidth); 743 var newNumColumns = Math.floor(availableWidth / tileRequiredWidth);
752 if (newNumColumns < MIN_NUM_COLUMNS) 744 if (newNumColumns < MIN_NUM_COLUMNS)
753 newNumColumns = MIN_NUM_COLUMNS; 745 newNumColumns = MIN_NUM_COLUMNS;
754 else if (newNumColumns > MAX_NUM_COLUMNS) 746 else if (newNumColumns > MAX_NUM_COLUMNS)
755 newNumColumns = MAX_NUM_COLUMNS; 747 newNumColumns = MAX_NUM_COLUMNS;
756 748
757 if (numColumnsShown != newNumColumns) { 749 if (numColumnsShown != newNumColumns) {
758 numColumnsShown = newNumColumns; 750 numColumnsShown = newNumColumns;
759 var tilesContainerWidth = numColumnsShown * tileRequiredWidth; 751 var tilesContainerWidth = numColumnsShown * tileRequiredWidth;
760 tilesContainer.style.width = tilesContainerWidth + 'px'; 752 tilesContainer.style.width = tilesContainerWidth + 'px';
761 if (fakebox) // -2 to account for border. 753 if (fakebox) {
762 fakebox.style.width = (tilesContainerWidth - TILE_MARGIN - 2) + 'px'; 754 // -2 to account for border.
755 fakebox.style.width =
756 (tilesContainerWidth - ntpDesign.tileMargin - 2) + 'px';
757 }
763 // Render without clearing tiles. 758 // Render without clearing tiles.
764 renderAndShowTiles(); 759 renderAndShowTiles();
765 } 760 }
766 } 761 }
767 762
768 763
769 /** 764 /**
770 * Returns the tile corresponding to the specified page RID. 765 * Returns the tile corresponding to the specified page RID.
771 * @param {number} rid The page RID being looked up. 766 * @param {number} rid The page RID being looked up.
772 * @return {Tile} The corresponding tile. 767 * @return {Tile} The corresponding tile.
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after
927 return null; 922 return null;
928 } 923 }
929 924
930 925
931 /** 926 /**
932 * Prepares the New Tab Page by adding listeners, rendering the current 927 * Prepares the New Tab Page by adding listeners, rendering the current
933 * theme, the most visited pages section, and Google-specific elements for a 928 * theme, the most visited pages section, and Google-specific elements for a
934 * Google-provided page. 929 * Google-provided page.
935 */ 930 */
936 function init() { 931 function init() {
932 ntpDesign = getNtpDesign(configData.ntpDesignName);
937 tilesContainer = $(IDS.TILES); 933 tilesContainer = $(IDS.TILES);
938 notification = $(IDS.NOTIFICATION); 934 notification = $(IDS.NOTIFICATION);
939 attribution = $(IDS.ATTRIBUTION); 935 attribution = $(IDS.ATTRIBUTION);
940 ntpContents = $(IDS.NTP_CONTENTS); 936 ntpContents = $(IDS.NTP_CONTENTS);
941 937
938 ntpDesign.classToAdd.forEach(function(v, idx) {
939 ntpContents.classList.add(v);
940 });
941
942 if (configData.isGooglePage) { 942 if (configData.isGooglePage) {
943 var logo = document.createElement('div'); 943 var logo = document.createElement('div');
944 logo.id = IDS.LOGO; 944 logo.id = IDS.LOGO;
945 945
946 fakebox = document.createElement('div'); 946 fakebox = document.createElement('div');
947 fakebox.id = IDS.FAKEBOX; 947 fakebox.id = IDS.FAKEBOX;
948 fakebox.innerHTML = 948 fakebox.innerHTML =
949 '<input id="' + IDS.FAKEBOX_INPUT + 949 '<input id="' + IDS.FAKEBOX_INPUT +
950 '" autocomplete="off" tabindex="-1" aria-hidden="true">' + 950 '" autocomplete="off" tabindex="-1" aria-hidden="true">' +
951 '<div id="cursor"></div>'; 951 '<div id="cursor"></div>';
952 952
953 ntpContents.insertBefore(fakebox, ntpContents.firstChild); 953 ntpContents.insertBefore(fakebox, ntpContents.firstChild);
954 ntpContents.insertBefore(logo, ntpContents.firstChild); 954 ntpContents.insertBefore(logo, ntpContents.firstChild);
955 } else { 955 } else {
956 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); 956 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE);
957 } 957 }
958 958
959 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE); 959 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE);
960 notificationMessage.textContent = 960 notificationMessage.textContent =
961 configData.translatedStrings.thumbnailRemovedNotification; 961 configData.translatedStrings.thumbnailRemovedNotification;
962
962 var undoLink = $(IDS.UNDO_LINK); 963 var undoLink = $(IDS.UNDO_LINK);
963 undoLink.addEventListener('click', onUndo); 964 undoLink.addEventListener('click', onUndo);
964 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo); 965 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo);
965 undoLink.textContent = configData.translatedStrings.undoThumbnailRemove; 966 undoLink.textContent = configData.translatedStrings.undoThumbnailRemove;
967
966 var restoreAllLink = $(IDS.RESTORE_ALL_LINK); 968 var restoreAllLink = $(IDS.RESTORE_ALL_LINK);
967 restoreAllLink.addEventListener('click', onRestoreAll); 969 restoreAllLink.addEventListener('click', onRestoreAll);
968 registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo); 970 registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo);
969 restoreAllLink.textContent = 971 restoreAllLink.textContent =
970 configData.translatedStrings.restoreThumbnailsShort; 972 configData.translatedStrings.restoreThumbnailsShort;
973
971 $(IDS.ATTRIBUTION_TEXT).textContent = 974 $(IDS.ATTRIBUTION_TEXT).textContent =
972 configData.translatedStrings.attributionIntro; 975 configData.translatedStrings.attributionIntro;
973 976
974 var notificationCloseButton = $(IDS.NOTIFICATION_CLOSE_BUTTON); 977 var notificationCloseButton = $(IDS.NOTIFICATION_CLOSE_BUTTON);
975 notificationCloseButton.addEventListener('click', hideNotification); 978 notificationCloseButton.addEventListener('click', hideNotification);
976 979
977 window.addEventListener('resize', onResize); 980 window.addEventListener('resize', onResize);
978 onResize(); 981 onResize();
979 982
980 var topLevelHandle = getEmbeddedSearchApiHandle(); 983 var topLevelHandle = getEmbeddedSearchApiHandle();
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
1025 setFakeboxDragFocus(false); 1028 setFakeboxDragFocus(false);
1026 }; 1029 };
1027 } 1030 }
1028 1031
1029 // Update the fakebox style to match the current key capturing state. 1032 // Update the fakebox style to match the current key capturing state.
1030 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); 1033 setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
1031 } 1034 }
1032 1035
1033 if (searchboxApiHandle.rtl) { 1036 if (searchboxApiHandle.rtl) {
1034 $(IDS.NOTIFICATION).dir = 'rtl'; 1037 $(IDS.NOTIFICATION).dir = 'rtl';
1038 document.body.setAttribute('dir', 'rtl');
1035 // Add class for setting alignments based on language directionality. 1039 // Add class for setting alignments based on language directionality.
1036 document.body.classList.add(CLASSES.RTL); 1040 document.body.classList.add(CLASSES.RTL);
1037 $(IDS.TILES).dir = 'rtl'; 1041 $(IDS.TILES).dir = 'rtl';
1038 } 1042 }
1039 } 1043 }
1040 1044
1041 1045
1042 /** 1046 /**
1043 * Binds event listeners. 1047 * Binds event listeners.
1044 */ 1048 */
1045 function listen() { 1049 function listen() {
1046 document.addEventListener('DOMContentLoaded', init); 1050 document.addEventListener('DOMContentLoaded', init);
1047 } 1051 }
1048 1052
1049 return { 1053 return {
1050 init: init, 1054 init: init,
1051 listen: listen 1055 listen: listen
1052 }; 1056 };
1053 } 1057 }
1054 1058
1055 if (!window.localNTPUnitTest) { 1059 if (!window.localNTPUnitTest) {
1056 LocalNTP().listen(); 1060 LocalNTP().listen();
1057 } 1061 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698