NTP Cleanup: Remove support for "icons" layout

chrome/browser/resources/local_ntp/most_visited_single.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. */
 
  // Single iframe for NTP tiles.
 (function() {
 'use strict';
 
 
 /**
@@ skipping 26 matching lines @@
 
 /**
  * Total number of tiles to show at any time. If the host page doesn't send
  * enough tiles, we fill them blank.
  * @const {number}
  */
 var NUMBER_OF_TILES = 8;
 
 
 /**
- * Whether to use icons instead of thumbnails.
- * @type {boolean}
- */
-var USE_ICONS = false;
-
-
-/**
  * Number of lines to display in titles.
  * @type {number}
  */
 var NUM_TITLE_LINES = 1;
 
 
 /**
  * The origin of this request.
  * @const {string}
  */
@@ skipping 127 matching lines @@
         'rgb(51,51,51) 60%, transparent); }');
     themeStyle.push('html[dir=rtl] .thumb-ntp .mv-x { ' +
         'background: linear-gradient(to right, ' +
         'rgb(51,51,51) 60%, transparent); }');
     themeStyle.push('.thumb-ntp .mv-x::after { ' +
         'background-color: rgba(255,255,255,0.7); }');
     themeStyle.push('.thumb-ntp .mv-x:hover::after { ' +
         'background-color: #fff; }');
     themeStyle.push('.thumb-ntp .mv-x:active::after { ' +
         'background-color: rgba(255,255,255,0.5); }');
-    themeStyle.push('.icon-ntp .mv-tile:focus { ' +
-        'background: rgba(255,255,255,0.2); }');
   }
   if (info.tileTitleColor) {
     themeStyle.push('body { color: ' + info.tileTitleColor + '; }');
   }
 
   document.querySelector('#custom-theme').textContent = themeStyle.join('\n');
 };
 
 
 /**
@@ skipping 141 matching lines @@
     return tile;
   }
 
   // The tile will be appended to tiles.
   var position = tiles.children.length;
   logMostVisitedImpression(position, data.tileSource);
 
   tile.className = 'mv-tile';
   tile.setAttribute('data-tid', data.tid);
   var html = [];
-  if (!USE_ICONS) {
-    html.push('<div class="mv-favicon"></div>');
-  }
+  html.push('<div class="mv-favicon"></div>');
   html.push('<div class="mv-title"></div><div class="mv-thumb"></div>');
   html.push('<div class="mv-x" role="button"></div>');
   tile.innerHTML = html.join('');
   tile.lastElementChild.title = queryArgs['removeTooltip'] || '';
 
   if (isSchemeAllowed(data.url)) {
     tile.href = data.url;
   }
   tile.setAttribute('aria-label', data.title);
   tile.title = data.title;
@@ skipping 44 matching lines @@
     }
   });
 
   var title = tile.querySelector('.mv-title');
   title.innerText = data.title;
   title.style.direction = data.direction || 'ltr';
   if (NUM_TITLE_LINES > 1) {
     title.classList.add('multiline');
   }
 
-  if (USE_ICONS) {
-    var thumb = tile.querySelector('.mv-thumb');
-    if (data.largeIconUrl) {
-      var img = document.createElement('img');
-      img.title = data.title;
-      img.src = data.largeIconUrl;
-      img.classList.add('large-icon');
-      loadedCounter += 1;
-      img.addEventListener('load', countLoad);
-      img.addEventListener('load', function(ev) {
-        thumb.classList.add('large-icon-outer');
-      });
-      img.addEventListener('error', countLoad);
-      img.addEventListener('error', function(ev) {
-        thumb.classList.add('failed-img');
-        thumb.removeChild(img);
-      });
-      thumb.appendChild(img);
-    } else {
-      thumb.classList.add('failed-img');
+  // We keep track of the outcome of loading possible thumbnails for this
+  // tile. Possible values:
+  //   - null: waiting for load/error
+  //   - false: error
+  //   - a string: URL that loaded correctly.
+  // This is populated by acceptImage/rejectImage and loadBestImage
+  // decides the best one to load.
+  var results = [];
+  var thumb = tile.querySelector('.mv-thumb');
+  var img = document.createElement('img');
+  var loaded = false;
+
+  var loadBestImage = function() {
+    if (loaded) {
+      return;
     }
-  } else { // THUMBNAILS
-    // We keep track of the outcome of loading possible thumbnails for this
-    // tile. Possible values:
-    //   - null: waiting for load/error
-    //   - false: error
-    //   - a string: URL that loaded correctly.
-    // This is populated by acceptImage/rejectImage and loadBestImage
-    // decides the best one to load.
-    var results = [];
-    var thumb = tile.querySelector('.mv-thumb');
-    var img = document.createElement('img');
-    var loaded = false;
-
-    var loadBestImage = function() {
-      if (loaded) {
+    for (var i = 0; i < results.length; ++i) {
+      if (results[i] === null) {
         return;
       }
-      for (var i = 0; i < results.length; ++i) {
-        if (results[i] === null) {
-          return;
-        }
-        if (results[i] != false) {
-          img.src = results[i];
-          loaded = true;
-          return;
-        }
-      }
-      thumb.classList.add('failed-img');
-      thumb.removeChild(img);
-      countLoad();
-    };
-
-    var acceptImage = function(idx, url) {
-      return function(ev) {
-        results[idx] = url;
-        loadBestImage();
-      };
-    };
-
-    var rejectImage = function(idx) {
-      return function(ev) {
-        results[idx] = false;
-        loadBestImage();
-      };
-    };
-
-    img.title = data.title;
-    img.classList.add('thumbnail');
-    loadedCounter += 1;
-    img.addEventListener('load', countLoad);
-    img.addEventListener('error', countLoad);
-    img.addEventListener('error', function(ev) {
-      thumb.classList.add('failed-img');
-      thumb.removeChild(img);
-    });
-    thumb.appendChild(img);
-
-    if (data.thumbnailUrl) {
-      img.src = data.thumbnailUrl;
-    } else {
-      // Get all thumbnailUrls for the tile.
-      // They are ordered from best one to be used to worst.
-      for (var i = 0; i < data.thumbnailUrls.length; ++i) {
-        results.push(null);
-      }
-      for (var i = 0; i < data.thumbnailUrls.length; ++i) {
-        if (data.thumbnailUrls[i]) {
-          var image = new Image();
-          image.src = data.thumbnailUrls[i];
-          image.onload = acceptImage(i, data.thumbnailUrls[i]);
-          image.onerror = rejectImage(i);
-        } else {
-          rejectImage(i)(null);
-        }
+      if (results[i] != false) {
+        img.src = results[i];
+        loaded = true;
+        return;
       }
     }
+    thumb.classList.add('failed-img');
+    thumb.removeChild(img);
+    countLoad();
+  };
 
-    var favicon = tile.querySelector('.mv-favicon');
-    if (data.faviconUrl) {
-      var fi = document.createElement('img');
-      fi.src = data.faviconUrl;
-      // Set the title to empty so screen readers won't say the image name.
-      fi.title = '';
-      loadedCounter += 1;
-      fi.addEventListener('load', countLoad);
-      fi.addEventListener('error', countLoad);
-      fi.addEventListener('error', function(ev) {
-        favicon.classList.add('failed-favicon');
-      });
-      favicon.appendChild(fi);
-    } else {
-      favicon.classList.add('failed-favicon');
+  var acceptImage = function(idx, url) {
+    return function(ev) {
+      results[idx] = url;
+      loadBestImage();
+    };
+  };
+
+  var rejectImage = function(idx) {
+    return function(ev) {
+      results[idx] = false;
+      loadBestImage();
+    };
+  };
+
+  img.title = data.title;
+  img.classList.add('thumbnail');
+  loadedCounter += 1;
+  img.addEventListener('load', countLoad);
+  img.addEventListener('error', countLoad);
+  img.addEventListener('error', function(ev) {
+    thumb.classList.add('failed-img');
+    thumb.removeChild(img);
+  });
+  thumb.appendChild(img);
+
+  if (data.thumbnailUrl) {
+    img.src = data.thumbnailUrl;
+  } else {
+    // Get all thumbnailUrls for the tile.
+    // They are ordered from best one to be used to worst.
+    for (var i = 0; i < data.thumbnailUrls.length; ++i) {
+      results.push(null);
+    }
+    for (var i = 0; i < data.thumbnailUrls.length; ++i) {
+      if (data.thumbnailUrls[i]) {
+        var image = new Image();
+        image.src = data.thumbnailUrls[i];
+        image.onload = acceptImage(i, data.thumbnailUrls[i]);
+        image.onerror = rejectImage(i);
+      } else {
+        rejectImage(i)(null);
+      }
     }
   }
 
+  var favicon = tile.querySelector('.mv-favicon');
+  if (data.faviconUrl) {
+    var fi = document.createElement('img');
+    fi.src = data.faviconUrl;
+    // Set the title to empty so screen readers won't say the image name.
+    fi.title = '';
+    loadedCounter += 1;
+    fi.addEventListener('load', countLoad);
+    fi.addEventListener('error', countLoad);
+    fi.addEventListener('error', function(ev) {
+      favicon.classList.add('failed-favicon');
+    });
+    favicon.appendChild(fi);
+  } else {
+    favicon.classList.add('failed-favicon');
+  }
+
   var mvx = tile.querySelector('.mv-x');
   mvx.addEventListener('click', function(ev) {
     removeAllOldTiles();
     blacklistTile(tile);
     ev.preventDefault();
     ev.stopPropagation();
   });
 
   return tile;
 };
 
 
 /**
  * Do some initialization and parses the query arguments passed to the iframe.
  */
 var init = function() {
   // Creates a new DOM element to hold the tiles.
   tiles = document.createElement('div');
 
   // Parse query arguments.
   var query = window.location.search.substring(1).split('&');
   queryArgs = {};
   for (var i = 0; i < query.length; ++i) {
     var val = query[i].split('=');
     if (val[0] == '') continue;
     queryArgs[decodeURIComponent(val[0])] = decodeURIComponent(val[1]);
   }
 
-  // Apply class for icon NTP, if specified.
-  USE_ICONS = queryArgs['icons'] == '1';
   if ('ntl' in queryArgs) {
     var ntl = parseInt(queryArgs['ntl'], 10);
     if (isFinite(ntl))
       NUM_TITLE_LINES = ntl;
   }
 
-  // Duplicating NTP_DESIGN.mainClass.
-  document.querySelector('#most-visited').classList.add(
-      USE_ICONS ? 'icon-ntp' : 'thumb-ntp');
+  document.querySelector('#most-visited').classList.add('thumb-ntp');
 
   // Enable RTL.
   if (queryArgs['rtl'] == '1') {
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
   window.addEventListener('message', handlePostMessage);
 };
 
 
 window.addEventListener('DOMContentLoaded', init);
 })();