[NTP] Remove old Most Visited section styling

The Material Design style introduced in M69 is now default.

Bug: 893362
Change-Id: I17049cfb6b1c2b61aef2edd221645d77b5297fca
Reviewed-on: https://chromium-review.googlesource.com/c/1313868
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Ramya Nagarajan <ramyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612024}

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -23,12 +23,6 @@ html {
   --md-title-height: 24px;
 
 
-  /* Constants. */
-  --tile-height: 128px;
-  --tile-margin: 16px;
-  --tile-width: 154px;
-  --title-height: 32px;
-
   /* May be overridden by themes (on the body element). */
   --tile-title-color: #323232;
 }
@@ -55,333 +49,36 @@ a:visited {
 }
 
 #most-visited {
-  margin: 0;
+  margin: 10px 0;
   text-align: -webkit-center;
   user-select: none;
-}
-
-.md #most-visited {
-  margin: 10px 0;
   width: 100%
 }
 
 #mv-tiles,
 .mv-tiles-old {
-  font-size: 0;
-  /* Two rows of tiles of 128px each, and 16px of spacing between the rows.
-   * If you change this, also change the corresponding values in
-   * local_ntp.css. */
-  height: calc(2*var(--tile-height) + var(--tile-margin));
-  line-height: calc(var(--tile-height) + var(--tile-margin));
-  margin: 4px 0 8px 0;
-  opacity: 0;
-  position: absolute;
-  /* This align correctly for both LTR and RTL */
-  text-align: -webkit-auto;
-  transition: opacity 1s;
-  user-select: none;
-}
-
-.md #mv-tiles,
-.md .mv-tiles-old {
   display: flex;
   flex-wrap: wrap;
-  height: auto;
+  font-size: 0;
   justify-content: center;
-  line-height: normal;
-  margin: 0;
   /* 5 88px tiles per row. If you change this, also change the corresponding
    * values in local_ntp.css. */
   max-width: calc(var(--md-tile-width) * var(--md-max-tiles-row));
+  opacity: 0;
   position: static;
-  transition-duration: 300ms;
+  /* This align correctly for both LTR and RTL */
+  text-align: -webkit-auto;
+  transition: opacity 300ms;
+  user-select: none;
 }
 
-.md .mv-tiles-old {
+.mv-tiles-old {
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
 }
 
-.mv-tile,
-.mv-empty-tile {
-  border-radius: 2px;
-  box-sizing: border-box;
-  display: none;
-  font-family: arial, sans-serif;
-  font-size: 12px;
-  height: var(--tile-height);
-  line-height: 100%;
-  margin: 0 calc(var(--tile-margin) / 2);
-  opacity: 1;
-  position: relative;
-  vertical-align: top;
-  white-space: nowrap;
-  width: var(--tile-width);
-}
-
-/* Minimal layout: 2 columns; only first 4 tiles are visible. */
-.mv-tile:nth-child(-n+4),
-.mv-empty-tile:nth-child(-n+4) {
-  display: inline-block;
-}
-
-/* width >= (3 cols * (16px + 154px))
- * 3 columns; first 6 tiles are visible. */
-@media (min-width: 510px) {
-  .mv-tile:nth-child(-n+6),
-  .mv-empty-tile:nth-child(-n+6) {
-    display: inline-block;
-  }
-}
-/* width >= (4 cols * (16px + 154px))
- * 4 columns; first 8 tiles are visible. */
-@media (min-width: 680px) {
-  .mv-tile:nth-child(-n+8),
-  .mv-empty-tile:nth-child(-n+8) {
-    display: inline-block;
-  }
-}
-
-.mv-tile {
-  background: rgb(250,250,250);
-}
-
-.mv-empty-tile {
-  background: rgb(245,245,245);
-}
-
-body.dark-theme .mv-tile,
-body.dark-theme .mv-empty-tile {
-  background: rgb(51,51,51);
-}
-
-.mv-tile {
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
-  cursor: pointer;
-  transition-duration: 200ms;
-  transition-property: transform, box-shadow, margin, opacity, width;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.mv-tile:hover:not(:active),
-.mv-tile:focus-within:not(:active) {
-  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
-}
-
-.mv-tile:focus,
-.mv-tile:focus-within {
-  filter: brightness(92%);
-}
-
-.mv-tile:active {
-  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.12);
-  filter: brightness(88%);
-}
-
-.mv-tile.blacklisted {
-  margin: 0;
-  transform: scale(0, 0);
-  width: 0;
-}
-
-.mv-title {
-  height: 15px;
-  left: 31px;
-  line-height: 14px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 9px;
-  width: 120px;
-}
-
-.mv-title.multiline {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-html:not([dir=rtl]) .mv-title[style*='direction: rtl'] {
-  -webkit-mask-image:
-    linear-gradient(to left, black, black, 100px, transparent);
-  left: auto;
-  right: 8px;
-  text-align: right;
-}
-
-html[dir=rtl] .mv-title {
-  left: 8px;
-  text-align: left;
-}
-
-html[dir=rtl] .mv-title[style*='direction: rtl'] {
-  -webkit-mask-image:
-    linear-gradient(to left, black, black, 100px, transparent);
-  right: 31px;
-  text-align: right;
-}
-
-.mv-thumb {
-  border-radius: 0 0 2px 2px;
-  cursor: pointer;
-  display: block;
-  height: calc(var(--tile-height) - var(--title-height));
-  overflow: hidden;
-  position: absolute;
-  top: var(--title-height);
-  width: var(--tile-width);
-}
-
-.mv-thumb img {
-  height: auto;
-  min-height: 100%;
-  width: 100%;
-}
-
-.mv-thumb.failed-img {
-  background-color: rgb(245,245,245);
-}
-
-body.dark-theme .mv-thumb.failed-img {
-  background-color: #555;
-}
-
-/* We use ::after without content to provide an additional element on top of the
- * thumbnail. */
-.mv-thumb.failed-img::after {
-  border: 8px solid rgb(215,215,215);
-  border-radius: 50%;
-  content: '';
-  display: block;
-  height: 0;
-  margin: 39px 66px;
-  width: 0;
-}
-
-body.dark-theme .mv-thumb.failed-img::after {
-  border-color: #333;
-}
-
-.mv-x {
-  background: linear-gradient(to left, rgb(250,250,250) 60%, transparent);
-  border: none;
-  cursor: pointer;
-  height: var(--title-height);
-  opacity: 0;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity 150ms;
-  width: 40px;
-}
-
-body.dark-theme .mv-x {
-  background: linear-gradient(to left, rgb(51,51,51) 60%, transparent);
-}
-
-/* We use ::after without content to provide the masked X element. The "bottom"
- * div is actually just the gradient. */
-.mv-x::after {
-  --mask-offset: calc((var(--title-height) - var(--mask-width)) / 2);
-  --mask-width: 10px;
-  -webkit-mask-image: -webkit-image-set(
-      url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
-      url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
-  -webkit-mask-position: var(--mask-offset) var(--mask-offset);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-size: var(--mask-width);
-  background-color: rgba(90,90,90,0.7);
-  content: '';
-  display: block;
-  height: var(--title-height);
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: var(--title-height);
-}
-
-body.dark-theme .mv-x.mv-x::after {
-  background-color: rgba(255,255,255,0.7);
-}
-
-html[dir=rtl] .mv-x {
-  background: linear-gradient(to right, rgb(250,250,250) 60%, transparent);
-  left: -1px;
-  right: auto;
-}
-
-body.dark-theme body.dark-theme .mv-x {
-  background: linear-gradient(to right, rgb(51,51,51) 60%, transparent);
-}
-
-html[dir=rtl] .mv-x::after {
-  left: -1px;
-  right: auto;
-}
-
-.mv-x:hover::after {
-  background-color: rgb(90,90,90);
-}
-
-body.dark-theme .mv-x:hover::after {
-  background-color: #fff;
-}
-
-.mv-x:active::after {
-  background-color: rgb(66,133,244);
-}
-
-body.dark-theme .mv-x:active::after {
-  background-color: rgba(255,255,255,0.5);
-}
-
-.mv-tile:hover .mv-x,
-.mv-tile:focus .mv-x {
-  opacity: 1;
-  transition-delay: 500ms;
-}
-
-.mv-x:hover,
-.mv-x:focus {
-  opacity: 1;
-  transition: none;
-}
-
-.mv-favicon {
-  background-size: 16px;
-  height: 16px;
-  left: 7px;
-  margin: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 8px;
-  width: 16px;
-}
-
-html[dir=rtl] .mv-favicon {
-  left: auto;
-  right: 7px;
-}
-
-.mv-favicon.failed-favicon {
-  background-image: -webkit-image-set(
-      url(chrome-search://local-ntp/images/ntp_default_favicon.png) 1x,
-      url(chrome-search://local-ntp/images/ntp_default_favicon.png@2x) 2x);
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-}
-
-.mv-favicon img {
-  height: 100%;
-  width: 100%;
-}
-
-.mv-favicon.failed-favicon img {
-  display: none;
-}
-
 .mouse-navigation {
   outline: none;
 }

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -31,6 +31,7 @@ const KEYCODES = {
  * @const
  */
 const IDS = {
+  MOST_VISITED: 'most-visited',  // Container for all tilesets.
   MV_TILES: 'mv-tiles',          // Most Visited tiles container.
 };
 
@@ -45,13 +46,11 @@ const CLASSES = {
   REORDER: 'reorder',  // Applied to the tile being moved while reordering.
   REORDERING: 'reordering',  // Applied while we are reordering.
   // Material Design classes.
-  MATERIAL_DESIGN: 'md',  // Applies Material Design styles to the page.
   MD_EMPTY_TILE: 'md-empty-tile',
   MD_FALLBACK_BACKGROUND: 'md-fallback-background',
   MD_FALLBACK_LETTER: 'md-fallback-letter',
   MD_FAVICON: 'md-favicon',
   MD_ICON: 'md-icon',
-  MD_ICON_BACKGROUND: 'md-icon-background',
   MD_ADD_ICON: 'md-add-icon',
   MD_ADD_BACKGROUND: 'md-add-background',
   MD_MENU: 'md-menu',
@@ -152,13 +151,6 @@ const MD_TILE_WIDTH = 112;
 const MD_NUM_TILES_ALWAYS_VISIBLE = 6;
 
 
-/**
- * Number of lines to display in titles.
- * @type {number}
- */
-var NUM_TITLE_LINES = 1;
-
-
 /**
  * The origin of this request, i.e. 'https://www.google.TLD' for the remote NTP,
  * or 'chrome-search://local-ntp' for the local NTP.
@@ -215,13 +207,6 @@ let reordering = false;
 let elementToReorder = null;
 
 
-/**
- * True if Material Design styles should be applied.
- * @type {boolean}
- */
-let isMDEnabled = false;
-
-
 /**
  * True if custom links is enabled.
  * @type {boolean}
@@ -384,10 +369,10 @@ var focusTileMenu = function(info) {
 
 
 /**
- * Removes all old instances of #mv-tiles that are pending for deletion.
+ * Removes all old instances of |IDS.MV_TILES| that are pending for deletion.
  */
 var removeAllOldTiles = function() {
-  var parent = document.querySelector('#most-visited');
+  var parent = document.querySelector('#' + IDS.MOST_VISITED);
   var oldList = parent.querySelectorAll('.mv-tiles-old');
   for (var i = 0; i < oldList.length; ++i) {
     parent.removeChild(oldList[i]);
@@ -416,19 +401,11 @@ var swapInNewTiles = function() {
     tiles.appendChild(renderMaterialDesignTile(data));
   }
 
-  // Create empty tiles until we have |maxNumTiles|. This is not required for
-  // the Material Design style tiles.
-  if (!isMDEnabled) {
-    while (cur.childNodes.length < maxNumTiles) {
-      addTile({});
-    }
-  }
-
-  var parent = document.querySelector('#most-visited');
+  var parent = document.querySelector('#' + IDS.MOST_VISITED);
 
   // Only fade in the new tiles if there were tiles before.
   var fadeIn = false;
-  var old = parent.querySelector('#mv-tiles');
+  var old = parent.querySelector('#' + IDS.MV_TILES);
   if (old) {
     fadeIn = true;
     // Mark old tile DIV for removal after the transition animation is done.
@@ -443,12 +420,11 @@ var swapInNewTiles = function() {
   }
 
   // Add new tileset.
-  cur.id = 'mv-tiles';
+  cur.id = IDS.MV_TILES;
   parent.appendChild(cur);
 
-  // If this is Material Design, re-balance the tiles if there are more than
-  // |MD_MAX_TILES_PER_ROW| in order to make even rows.
-  if (isMDEnabled) {
+  // Re-balance the tiles if there are more than |MD_MAX_TILES_PER_ROW| in order
+  // to make even rows.
   if (cur.childNodes.length > MD_MAX_TILES_PER_ROW) {
     cur.style.maxWidth = 'calc(var(--md-tile-width) * ' +
         Math.ceil(cur.childNodes.length / 2) + ')';
@@ -456,7 +432,6 @@ var swapInNewTiles = function() {
 
   // Prevent keyboard navigation to tiles that are not visible.
   updateTileVisibility();
-  }
 
   // getComputedStyle causes the initial style (opacity 0) to be applied, so
   // that when we then set it to 1, that triggers the CSS transition.
@@ -476,8 +451,8 @@ var swapInNewTiles = function() {
  * navigation.
  */
 function updateTileVisibility() {
-  const allTiles =
-      document.querySelectorAll('#mv-tiles .' + CLASSES.MD_TILE_CONTAINER);
+  const allTiles = document.querySelectorAll(
+      '#' + IDS.MV_TILES + ' .' + CLASSES.MD_TILE_CONTAINER);
   if (allTiles.length === 0)
     return;
 
@@ -522,8 +497,7 @@ var addTile = function(args) {
  * @param {Element} tile DOM node of the tile we want to remove.
  */
 var blacklistTile = function(tile) {
-  let tid = isMDEnabled ? Number(tile.firstChild.getAttribute('data-tid')) :
-                          Number(tile.getAttribute('data-tid'));
+  let tid = Number(tile.firstChild.getAttribute('data-tid'));
 
   if (isCustomLinksEnabled) {
     chrome.embeddedSearch.newTabPage.deleteMostVisitedItem(tid);
@@ -656,162 +630,7 @@ function setupReorder(tile) {
  *     empty tile. isAddButton can only be set if custom links is enabled.
  */
 var renderTile = function(data) {
-  if (isMDEnabled) {
   return renderMaterialDesignTile(data);
-  }
-  return renderMostVisitedTile(data);
-};
-
-
-/**
- * @param {object} data Object containing rid, url, title, favicon, thumbnail.
- *     data is null if you want to construct an empty tile.
- * @return {Element}
- */
-var renderMostVisitedTile = function(data) {
-  var tile = document.createElement('a');
-
-  if (data == null) {
-    tile.className = 'mv-empty-tile';
-    return tile;
-  }
-
-  // The tile will be appended to tiles.
-  var position = tiles.children.length;
-
-  // This is set in the load/error event for the thumbnail image.
-  var tileType = TileVisualType.NONE;
-
-  tile.className = 'mv-tile';
-  tile.setAttribute('data-tid', data.tid);
-
-  if (utils.isSchemeAllowed(data.url)) {
-    tile.href = data.url;
-  }
-  tile.setAttribute('aria-label', data.title);
-  tile.title = data.title;
-
-  tile.addEventListener('click', function(ev) {
-    logMostVisitedNavigation(
-        position, data.tileTitleSource, data.tileSource, tileType,
-        data.dataGenerationTime);
-  });
-
-  tile.addEventListener('keydown', function(event) {
-    if (event.keyCode === KEYCODES.DELETE ||
-        event.keyCode === KEYCODES.BACKSPACE) {
-      event.preventDefault();
-      event.stopPropagation();
-      blacklistTile(this);
-    } else if (
-        event.keyCode === KEYCODES.ENTER|| event.keyCode === KEYCODES.SPACE) {
-      event.preventDefault();
-      this.click();
-    } else if (event.keyCode >= 37 && event.keyCode <= 40 /* ARROWS */) {
-      // specify the direction of movement
-      var inArrowDirection = function(origin, target) {
-        return (event.keyCode === KEYCODES.LEFT &&
-                origin.offsetTop === target.offsetTop &&
-                origin.offsetLeft > target.offsetLeft) ||
-            (event.keyCode === KEYCODES.UP &&
-             origin.offsetTop > target.offsetTop &&
-             origin.offsetLeft === target.offsetLeft) ||
-            (event.keyCode === KEYCODES.RIGHT &&
-             origin.offsetTop === target.offsetTop &&
-             origin.offsetLeft < target.offsetLeft) ||
-            (event.keyCode === KEYCODES.DOWN &&
-             origin.offsetTop < target.offsetTop &&
-             origin.offsetLeft === target.offsetLeft);
-      };
-
-      var nonEmptyTiles = document.querySelectorAll('#mv-tiles .mv-tile');
-      var nextTile = null;
-      // Find the closest tile in the appropriate direction.
-      for (var i = 0; i < nonEmptyTiles.length; i++) {
-        if (inArrowDirection(this, nonEmptyTiles[i]) &&
-            (!nextTile || inArrowDirection(nonEmptyTiles[i], nextTile))) {
-          nextTile = nonEmptyTiles[i];
-        }
-      }
-      if (nextTile) {
-        nextTile.focus();
-      }
-    }
-  });
-
-  var favicon = document.createElement('div');
-  favicon.className = 'mv-favicon';
-  var fi = document.createElement('img');
-  fi.src = data.faviconUrl;
-  // Set title and alt to empty so screen readers won't say the image name.
-  fi.title = '';
-  fi.alt = '';
-  loadedCounter += 1;
-  fi.addEventListener('load', countLoad);
-  fi.addEventListener('error', countLoad);
-  fi.addEventListener('error', function(ev) {
-    favicon.classList.add(CLASSES.FAILED_FAVICON);
-  });
-  favicon.appendChild(fi);
-  tile.appendChild(favicon);
-
-  var title = document.createElement('div');
-  title.className = 'mv-title';
-  title.innerText = data.title;
-  title.style.direction = data.direction || 'ltr';
-  if (NUM_TITLE_LINES > 1) {
-    title.classList.add('multiline');
-  }
-  tile.appendChild(title);
-
-  var thumb = document.createElement('div');
-  thumb.className = 'mv-thumb';
-  var img = document.createElement('img');
-  img.title = data.title;
-  img.src = data.thumbnailUrl;
-  loadedCounter += 1;
-  img.addEventListener('load', function(ev) {
-    // Store the type for a potential later navigation.
-    tileType = TileVisualType.THUMBNAIL;
-    logMostVisitedImpression(
-        position, data.tileTitleSource, data.tileSource, tileType,
-        data.dataGenerationTime);
-    // Note: It's important to call countLoad last, because that might emit the
-    // NTP_ALL_TILES_LOADED event, which must happen after the impression log.
-    countLoad();
-  });
-  img.addEventListener('error', function(ev) {
-    thumb.classList.add('failed-img');
-    thumb.removeChild(img);
-    // Store the type for a potential later navigation.
-    tileType = TileVisualType.THUMBNAIL_FAILED;
-    logMostVisitedImpression(
-        position, data.tileTitleSource, data.tileSource, tileType,
-        data.dataGenerationTime);
-    // Note: It's important to call countLoad last, because that might emit the
-    // NTP_ALL_TILES_LOADED event, which must happen after the impression log.
-    countLoad();
-  });
-  thumb.appendChild(img);
-  tile.appendChild(thumb);
-
-  var mvx = document.createElement('button');
-  mvx.className = 'mv-x';
-  mvx.title = queryArgs['removeTooltip'] || '';
-  mvx.addEventListener('click', function(ev) {
-    removeAllOldTiles();
-    blacklistTile(tile);
-    ev.preventDefault();
-    ev.stopPropagation();
-  });
-  // Don't allow the event to bubble out to the containing tile, as that would
-  // trigger navigation to the tile URL.
-  mvx.addEventListener('keydown', function(event) {
-    event.stopPropagation();
-  });
-  tile.appendChild(mvx);
-
-  return tile;
 };
 
 
@@ -870,10 +689,12 @@ function renderMaterialDesignTile(data) {
       event.preventDefault();
       this.click();
     } else if (event.keyCode === KEYCODES.LEFT) {
-      const tiles = document.querySelectorAll('#mv-tiles .' + CLASSES.MD_TILE);
+      const tiles = document.querySelectorAll(
+          '#' + IDS.MV_TILES + ' .' + CLASSES.MD_TILE);
       tiles[Math.max(Number(this.getAttribute('data-pos')) - 1, 0)].focus();
     } else if (event.keyCode === KEYCODES.RIGHT) {
-      const tiles = document.querySelectorAll('#mv-tiles .' + CLASSES.MD_TILE);
+      const tiles = document.querySelectorAll(
+          '#' + IDS.MV_TILES + ' .' + CLASSES.MD_TILE);
       tiles[Math.min(
                 Number(this.getAttribute('data-pos')) + 1, tiles.length - 1)]
           .focus();
@@ -1031,24 +852,12 @@ var init = function() {
 
   document.title = queryArgs['title'];
 
-  if ('ntl' in queryArgs) {
-    var ntl = parseInt(queryArgs['ntl'], 10);
-    if (isFinite(ntl))
-      NUM_TITLE_LINES = ntl;
-  }
-
   // Enable RTL.
   if (queryArgs['rtl'] == '1') {
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
-  // Enable Material Design.
-  if (queryArgs['enableMD'] == '1') {
-    isMDEnabled = true;
-    document.body.classList.add(CLASSES.MATERIAL_DESIGN);
-  }
-
   // Enable custom links.
   if (queryArgs['enableCustomLinks'] == '1') {
     isCustomLinksEnabled = true;

chrome/browser/ui/search/local_ntp_browsertest.cc

@@ -426,8 +426,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, GoogleNTPLoadsWithoutError) {
   histograms.ExpectBucketCount("NewTabPage.SuggestionsImpression", 0, 1);
   histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.client", 1);
   // The material design NTP shouldn't have any thumbnails.
-  histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail",
-                              features::IsMDIconsEnabled() ? 0 : 1);
+  histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail", 0);
   histograms.ExpectTotalCount("NewTabPage.TileTitle", 1);
   histograms.ExpectTotalCount("NewTabPage.TileTitle.client", 1);
   histograms.ExpectTotalCount("NewTabPage.TileType", 1);
@@ -479,8 +478,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, NonGoogleNTPLoadsWithoutError) {
   histograms.ExpectBucketCount("NewTabPage.SuggestionsImpression", 0, 1);
   histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.client", 1);
   // The material design NTP shouldn't have any thumbnails.
-  histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail",
-                              features::IsMDIconsEnabled() ? 0 : 1);
+  histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail", 0);
   histograms.ExpectTotalCount("NewTabPage.TileTitle", 1);
   histograms.ExpectTotalCount("NewTabPage.TileTitle.client", 1);
   histograms.ExpectTotalCount("NewTabPage.TileType", 1);
@@ -564,12 +562,8 @@ IN_PROC_BROWSER_TEST_F(LocalNTPMDTest, LoadsMDIframe) {
   // Get the iframe and check that the tiles loaded correctly.
   content::RenderFrameHost* iframe = GetMostVisitedIframe(active_tab);
 
-  // Get the total number of (non-empty) tiles from the iframe and tiles with
-  // thumbnails. There should be no thumbnails in Material Design.
-  int total_thumbs = 0;
+  // Get the total number of (non-empty) tiles from the iframe.
   int total_favicons = 0;
-  ASSERT_TRUE(instant_test_utils::GetIntFromJS(
-      iframe, "document.querySelectorAll('.mv-thumb').length", &total_thumbs));
   ASSERT_TRUE(instant_test_utils::GetIntFromJS(
       iframe, "document.querySelectorAll('.md-favicon').length",
       &total_favicons));
@@ -591,8 +585,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPMDTest, LoadsMDIframe) {
   // Since we're in a non-signed-in, fresh profile with no history, there should
   // be the default TopSites tiles (see history::PrepopulatedPage).
   // Check that there is at least one tile, and that all of them loaded their
-  // images successfully. Also check that no thumbnails have loaded.
-  EXPECT_EQ(total_thumbs, 0);
+  // images successfully.
   EXPECT_EQ(total_favicons, succeeded_favicons);
   EXPECT_EQ(0, failed_favicons);
 }
@@ -830,50 +823,4 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, InterstitialsAreNotNTPs) {
   EXPECT_TRUE(search::IsInstantNTP(active_tab));
 }
 
-class LocalNTPNonMDTest : public LocalNTPTest {
- public:
-  LocalNTPNonMDTest()
-      : LocalNTPTest(
-            /*enabled_features=*/{features::kUseGoogleLocalNtp},
-            /*disabled_features=*/{
-                features::kNtpUIMd, features::kNtpBackgrounds,
-                features::kNtpIcons, ntp_tiles::kNtpCustomLinks}) {}
-};
-
-IN_PROC_BROWSER_TEST_F(LocalNTPNonMDTest, LoadsNonMDIframe) {
-  content::WebContents* active_tab =
-      local_ntp_test_utils::OpenNewTab(browser(), GURL("about:blank"));
-  local_ntp_test_utils::NavigateToNTPAndWaitUntilLoaded(browser());
-
-  // Get the iframe and check that the tiles loaded correctly.
-  content::RenderFrameHost* iframe = GetMostVisitedIframe(active_tab);
-
-  // Get the total number of (non-empty) tiles from the iframe.
-  int total_thumbs = 0;
-  ASSERT_TRUE(instant_test_utils::GetIntFromJS(
-      iframe, "document.querySelectorAll('.mv-thumb').length", &total_thumbs));
-  // Also get how many of the tiles succeeded and failed in loading their
-  // thumbnail images.
-  int succeeded_imgs = 0;
-  ASSERT_TRUE(instant_test_utils::GetIntFromJS(
-      iframe, "document.querySelectorAll('.mv-thumb img').length",
-      &succeeded_imgs));
-  int failed_imgs = 0;
-  ASSERT_TRUE(instant_test_utils::GetIntFromJS(
-      iframe, "document.querySelectorAll('.mv-thumb.failed-img').length",
-      &failed_imgs));
-
-  // First, sanity check that the numbers line up (none of the css classes was
-  // renamed, etc).
-  EXPECT_EQ(total_thumbs, succeeded_imgs + failed_imgs);
-
-  // Since we're in a non-signed-in, fresh profile with no history, there should
-  // be the default TopSites tiles (see history::PrepopulatedPage).
-  // Check that there is at least one tile, and that all of them loaded their
-  // images successfully.
-  EXPECT_GT(total_thumbs, 0);
-  EXPECT_EQ(total_thumbs, succeeded_imgs);
-  EXPECT_EQ(0, failed_imgs);
-}
-
 }  // namespace