[Local NTP] Cleanup: Don't create HTML elements dynamically

chrome/browser/resources/local_ntp/local_ntp.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @fileoverview The local InstantExtended NTP.
  */
 
 
@@ skipping 106 matching lines @@
   FAKEBOX: 'fakebox',
   FAKEBOX_INPUT: 'fakebox-input',
   FAKEBOX_TEXT: 'fakebox-text',
   LOGO: 'logo',
   NOTIFICATION: 'mv-notice',
   NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x',
   NOTIFICATION_MESSAGE: 'mv-msg',
   NTP_CONTENTS: 'ntp-contents',
   RESTORE_ALL_LINK: 'mv-restore',
   TILES: 'mv-tiles',
+  TILES_IFRAME: 'mv-single',
   UNDO_LINK: 'mv-undo'
 };
 
 
 /**
  * Enum for keycodes.
  * @enum {number}
  * @const
  */
 var KEYCODE = {
@@ skipping 100 matching lines @@
   var luminance = 0.3 * rgba[0] + 0.59 * rgba[1] + 0.11 * rgba[2];
   return luminance >= 128;
 }
 
 
 /**
  * Updates the NTP based on the current theme.
  * @private
  */
 function renderTheme() {
-  var fakeboxText = $(IDS.FAKEBOX_TEXT);
-  if (fakeboxText) {
-    fakeboxText.innerHTML = '';
-    if (configData.translatedStrings.searchboxPlaceholder) {
-      fakeboxText.textContent =
-          configData.translatedStrings.searchboxPlaceholder;
-    }
-  }

[Marc Treib, 2017/02/07 14:37:11]

This block moved into init() where it belongs - it has nothing to do with the
theme.
Bonus: Before, the "Search Google or type URL" string would flicker on reload,
because it was set after the initial page load. Now it's all better.

-
   var info = ntpApiHandle.themeBackgroundInfo;
   var isThemeDark = getIsThemeDark(info);
   ntpContents.classList.toggle(CLASSES.DARK, isThemeDark);
   if (!info) {
     return;
   }
 
   var background = [convertToRGBAColor(info.backgroundColorRgba),
                     info.imageUrl,
                     info.imageTiling,
                     info.imageHorizontalAlignment,
                     info.imageVerticalAlignment].join(' ').trim();
 
   document.body.style.background = background;
   document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo);
   updateThemeAttribution(info.attributionUrl, info.imageHorizontalAlignment);
   setCustomThemeStyle(info);
 
+  // Inform the most visited iframe of the new theme.
   var themeinfo = {cmd: 'updateTheme'};
   if (!info.usingDefaultTheme) {
     themeinfo.tileBorderColor = convertToRGBAColor(info.sectionBorderColorRgba);
     themeinfo.tileHoverBorderColor = convertToRGBAColor(info.headerColorRgba);
   }
   themeinfo.isThemeDark = isThemeDark;
 
   var titleColor = NTP_DESIGN.titleColor;
   if (!info.usingDefaultTheme && info.textColorRgba) {
     titleColor = info.textColorRgba;
   } else if (isThemeDark) {
     titleColor = NTP_DESIGN.titleColorAgainstDark;
   }
   themeinfo.tileTitleColor = convertToRGBAColor(titleColor);
 
-  $('mv-single').contentWindow.postMessage(themeinfo, '*');
+  $(IDS.TILES_IFRAME).contentWindow.postMessage(themeinfo, '*');
 }
 
 
 /**
  * Updates the NTP based on the current theme, then rerenders all tiles.
  * @private
  */
 function onThemeChange() {
   renderTheme();
 }
@@ skipping 116 matching lines @@
  * Fetches new data, creates, and renders tiles.
  */
 function reloadTiles() {
   var pages = ntpApiHandle.mostVisited;
   var cmds = [];
   for (var i = 0; i < Math.min(MAX_NUM_TILES_TO_SHOW, pages.length); ++i) {
     cmds.push({cmd: 'tile', rid: pages[i].rid});
   }
   cmds.push({cmd: 'show', maxVisible: numColumnsShown * NUM_ROWS});
 
-  $('mv-single').contentWindow.postMessage(cmds, '*');
+  $(IDS.TILES_IFRAME).contentWindow.postMessage(cmds, '*');
 }
 
 
 /**
  * Shows the blacklist notification and triggers a delay to hide it.
  */
 function showNotification() {
   notification.classList.remove(CLASSES.HIDE_NOTIFICATION);
   notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION);
   notification.scrollTop;
@@ skipping 70 matching lines @@
 }
 
 
 /**
  * Resizes elements because the number of tile columns may need to change in
  * response to resizing. Also shows or hides extra tiles tiles according to the
  * new width of the page.
  */
 function onResize() {
   updateContentWidth();
-  $('mv-single').contentWindow.postMessage(
+  $(IDS.TILES_IFRAME).contentWindow.postMessage(
     {cmd: 'tilesVisible', maxVisible: numColumnsShown * NUM_ROWS}, '*');
 }
 
 
 /**
  * Handles new input by disposing the NTP, according to where the input was
  * entered.
  */
 function onInputStart() {
   if (fakebox && isFakeboxFocused()) {
@@ skipping 99 matching lines @@
 /**
  * Prepares the New Tab Page by adding listeners, the most visited pages
  * section, and Google-specific elements for a Google-provided page.
  */
 function init() {
   notification = $(IDS.NOTIFICATION);
   attribution = $(IDS.ATTRIBUTION);
   ntpContents = $(IDS.NTP_CONTENTS);
 
   if (configData.isGooglePage) {
-    var logo = document.createElement('div');
-    logo.id = IDS.LOGO;
-    logo.title = 'Google';
-
-    fakebox = document.createElement('div');
-    fakebox.id = IDS.FAKEBOX;
-    var fakeboxHtml = [];
-    fakeboxHtml.push('<div id="' + IDS.FAKEBOX_TEXT + '"></div>');
-    fakeboxHtml.push('<input id="' + IDS.FAKEBOX_INPUT +
-        '" autocomplete="off" tabindex="-1" type="url" aria-hidden="true">');
-    fakeboxHtml.push('<div id="cursor"></div>');
-    fakebox.innerHTML = fakeboxHtml.join('');
-
-    ntpContents.insertBefore(fakebox, ntpContents.firstChild);
-    ntpContents.insertBefore(logo, ntpContents.firstChild);
+    fakebox = $(IDS.FAKEBOX);
   } else {
     document.body.classList.add(CLASSES.NON_GOOGLE_PAGE);
   }
 
   // Hide notifications after fade out, so we can't focus on links via keyboard.
   notification.addEventListener('webkitTransitionEnd', hideNotification);
 
-  var notificationMessage = $(IDS.NOTIFICATION_MESSAGE);
-  notificationMessage.textContent =
+  $(IDS.NOTIFICATION_MESSAGE).textContent =
       configData.translatedStrings.thumbnailRemovedNotification;
 
   var undoLink = $(IDS.UNDO_LINK);
   undoLink.addEventListener('click', onUndo);
   registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo);
   undoLink.textContent = configData.translatedStrings.undoThumbnailRemove;
 
   var restoreAllLink = $(IDS.RESTORE_ALL_LINK);
   restoreAllLink.addEventListener('click', onRestoreAll);
   registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onRestoreAll);
@@ skipping 16 matching lines @@
 
   ntpApiHandle.oninputstart = onInputStart;
   ntpApiHandle.oninputcancel = onInputCancel;
 
   if (ntpApiHandle.isInputInProgress)
     onInputStart();
 
   searchboxApiHandle = topLevelHandle.searchBox;
 
   if (fakebox) {
+    $(IDS.FAKEBOX_TEXT).textContent =
+        configData.translatedStrings.searchboxPlaceholder;
+
     // Listener for updating the key capture state.
     document.body.onmousedown = function(event) {
       if (isFakeboxClick(event))
         searchboxApiHandle.startCapturingKeyStrokes();
       else if (isFakeboxFocused())
         searchboxApiHandle.stopCapturingKeyStrokes();
     };
     searchboxApiHandle.onkeycapturechange = function() {
       setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
     };
     var inputbox = $(IDS.FAKEBOX_INPUT);
-    if (inputbox) {
-      inputbox.onpaste = function(event) {
-        event.preventDefault();
-        // Send pasted text to Omnibox.
-        var text = event.clipboardData.getData('text/plain');
-        if (text)
-          searchboxApiHandle.paste(text);
-      };
-      inputbox.ondrop = function(event) {
-        event.preventDefault();
-        var text = event.dataTransfer.getData('text/plain');
-        if (text) {
-          searchboxApiHandle.paste(text);
-        }
-        setFakeboxDragFocus(false);
-      };
-      inputbox.ondragenter = function() {
-        setFakeboxDragFocus(true);
-      };
-      inputbox.ondragleave = function() {
-        setFakeboxDragFocus(false);
-      };
-    }
+    inputbox.onpaste = function(event) {
+      event.preventDefault();
+      // Send pasted text to Omnibox.
+      var text = event.clipboardData.getData('text/plain');
+      if (text)
+        searchboxApiHandle.paste(text);
+    };
+    inputbox.ondrop = function(event) {
+      event.preventDefault();
+      var text = event.dataTransfer.getData('text/plain');
+      if (text) {
+        searchboxApiHandle.paste(text);
+      }
+      setFakeboxDragFocus(false);
+    };
+    inputbox.ondragenter = function() {
+      setFakeboxDragFocus(true);
+    };
+    inputbox.ondragleave = function() {
+      setFakeboxDragFocus(false);
+    };
 
     // Update the fakebox style to match the current key capturing state.
     setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
   }
 
   if (searchboxApiHandle.rtl) {
     $(IDS.NOTIFICATION).dir = 'rtl';
     // Grabbing the root HTML element.
     document.documentElement.setAttribute('dir', 'rtl');
     // Add class for setting alignments based on language directionality.
     document.documentElement.classList.add(CLASSES.RTL);
   }
 
-  var iframe = document.createElement('iframe');
-  // Change the order of tabbing the page to start with NTP tiles.
-  iframe.setAttribute('tabindex', '1');
-  iframe.id = 'mv-single';
-
+  // Pass arguments to the most visited iframe.
   var args = [];
 
   if (searchboxApiHandle.rtl)
     args.push('rtl=1');
   if (NTP_DESIGN.numTitleLines > 1)
     args.push('ntl=' + NTP_DESIGN.numTitleLines);
 
   args.push('removeTooltip=' +
       encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip));
 
+  var iframe = $(IDS.TILES_IFRAME);
   iframe.src = '//most-visited/single.html?' + args.join('&');
-  $(IDS.TILES).appendChild(iframe);
-
   iframe.onload = function() {
     reloadTiles();
     renderTheme();
   };
 
   window.addEventListener('message', handlePostMessage);
 }
 
 
 /**
  * Binds event listeners.
  */
 function listen() {
   document.addEventListener('DOMContentLoaded', init);
 }
 
 return {
   init: init,
   listen: listen
 };
 }
 
 if (!window.localNTPUnitTest) {
   LocalNTP().listen();
 }