Remove unused ntp_search.

Since this is just removal of unused code, I TBR James for the OWNER's review...

TBR=jhawkins@chromium.org
BUG=175850

Review URL: https://chromiumcodereview.appspot.com/12207138

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@182191 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/browser_resources.grd

@@ -42,8 +42,6 @@
       <if expr="not pp_ifdef('android')">
         <structure name="IDR_NEW_TAB_4_HTML" file="resources\ntp4\new_tab.html" flattenhtml="true" type="chrome_html" />
         <structure name="IDR_NEW_TAB_4_THEME_CSS" file="resources\ntp4\new_tab_theme.css" flattenhtml="true" type="chrome_html" />
-        <structure name="IDR_NEW_TAB_SEARCH_HTML" file="resources\ntp_search\new_tab.html" flattenhtml="true" type="chrome_html" />
-        <structure name="IDR_NEW_TAB_SEARCH_THEME_CSS" file="resources\ntp_search\new_tab_theme.css" flattenhtml="true" type="chrome_html" />
       </if>
       <if expr="pp_ifdef('android')">
         <structure name="IDR_NEW_TAB_ANDROID_HTML" file="resources\ntp_android\new_tab.html" flattenhtml="true" type="chrome_html" />
@@ -240,8 +238,8 @@
         <include name="IDR_TASK_MANAGER_PRELOAD_JS" file="resources\task_manager\preload.js" type="BINDATA" />
         <!-- The following main.js uses flattenhtml feature to remove the platform-dependent code at complie-time. -->
         <include name="IDR_TASK_MANAGER_JS" file="resources\task_manager\main.js" flattenhtml="true" type="BINDATA" />
-        <include name="IDR_TASK_MANAGER_MEASURE_TIME_JS" file="resources\task_manager\measure_time.js" type="BINDATA" /> 
-        <include name="IDR_TASK_MANAGER_MEASURE_TIME_END_JS" file="resources\task_manager\measure_time_end.js" type="BINDATA" /> 
+        <include name="IDR_TASK_MANAGER_MEASURE_TIME_JS" file="resources\task_manager\measure_time.js" type="BINDATA" />
+        <include name="IDR_TASK_MANAGER_MEASURE_TIME_END_JS" file="resources\task_manager\measure_time_end.js" type="BINDATA" />
       </if>
       <if expr="not pp_ifdef('chromeos')">
         <include name="IDR_SYNC_PROMO_JS" file="resources\sync_promo\sync_promo.js" flattenhtml="true" type="BINDATA" />

chrome/browser/resources/ntp_search/OWNERS

-estade@chromium.org
-rbyers@chromium.org
-dbeam@chromium.org

chrome/browser/resources/ntp_search/apps_page.css

-/* Copyright (c) 2012 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. */
-
-.apps-page .tile-cell {
-  -webkit-margin-start: 20px;
-  height: 70px;
-  margin-bottom: 12px;
-  width: 70px;
-}
-
-.apps-page .tile-cell:first-child {
-  -webkit-margin-start: 0;
-}
-
-.apps-page .app {
-  display: block;
-  height: 70px;
-  margin-top: 8px;
-  outline: none;
-  text-align: center;
-  width: 70px;
-}
-
-.apps-page .app .title {
-  color: #777;
-  font-size: 0.9166em;
-  left: -7px;
-  margin-top: 4px;
-  position: relative;
-  width: 84px;
-}
-
-.app-contents {
-  -webkit-transition: -webkit-transform 100ms;
-}
-
-.app-contents:active:not(.suppress-active),
-.app:not(.click-focus):focus .app-contents:not(.suppress-active),
-.drag-representation:not(.placing) .app-contents {
-  -webkit-transform: scale(1.1);
-}
-
-/* Don't animate the initial scaling.  */
-.app-contents:active:not(.suppress-active),
-/* Active gets applied right before .suppress-active, so to avoid flicker
- * we need to make the scale go back to normal without an animation. */
-.app-contents.suppress-active {
-  -webkit-transition-duration: 0;
-}
-
-.app-contents > span {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.app-img-container {
-  /* -webkit-mask-image set by JavaScript to the image source. */
-  -webkit-mask-size: 100% 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.app-img-container > * {
-  height: 100%;
-  width: 100%;
-}
-
-.app-icon-div {
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-  background-color: white;
-  border: 1px solid #d5d5d5;
-  border-radius: 5px;
-  display: -webkit-box;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  vertical-align: middle;
-  z-index: 0;
-}
-
-.animate-tile-repositioning .app.small-icon {
-  margin-top: 0;
-}
-
-.small-icon .app-icon-div {
-  height: 50px;
-  margin: 18px 9px 12px;
-  width: 50px;
-}
-
-.small-icon .app-img-container {
-  bottom: 7px;
-  height: 16px;
-  left: 5px;
-  position: absolute;
-  width: 16px;
-}
-
-.small-icon .color-stripe {
-  border-bottom-left-radius: 5px 5px;
-  border-bottom-right-radius: 5px 5px;
-  bottom: 0;
-  height: 3px;
-  opacity: 1.0;
-  position: absolute;
-  width: 100%;
-  z-index: 100;
-}
-
-.app-context-menu > button:first-child {
-  font-weight: bold;
-}
-
-.app-context-menu {
-  z-index: 1000;
-}
-
-.app-context-menu > [checked]::before {
-  height: 5px;
-}
-
-.launch-click-target {
-  cursor: pointer;
-}
-
-/* Notifications */
-
-.app-notification {
-  -webkit-transition: color 150ms linear;
-  color: #999;
-  display: block;
-  font-size: 0.9em;
-  white-space: nowrap;
-}
-
-.app-notification:hover {
-  text-decoration: underline;
-}
-
-.app-img-container > img:first-child {
-  display: block;
-}
-
-.app .invisible {
-  visibility: hidden;
-}
-
-/* Move the notification lower on apps pages to account for the 16px of
- * transparency each app icon should have. */
-.apps-page #notification-container {
-  bottom: 15px;
-}

chrome/browser/resources/ntp_search/dot_list.js

-// Copyright (c) 2012 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 DotList implementation
- */
-
-cr.define('ntp', function() {
-  'use strict';
-
-  /**
-   * Live list of the navigation dots.
-   * @type {!NodeList|undefined}
-   */
-  var navDots;
-
-  /**
-   * Creates a new DotList object.
-   * @constructor
-   * @extends {HTMLUListElement}
-   */
-  var DotList = cr.ui.define('ul');
-
-  DotList.prototype = {
-    __proto__: HTMLUListElement.prototype,
-
-    /** @override */
-    decorate: function() {
-      this.addEventListener('keydown', this.onKeyDown_.bind(this));
-      navDots = this.getElementsByClassName('dot');
-    },
-
-    /**
-     * Live list of the navigation dots.
-     * @type {!NodeList|undefined}
-     */
-    get dots() {
-      return navDots;
-    },
-
-    /**
-     * Handler for key events on the dot list. These keys will change the focus
-     * element.
-     * @param {Event} e The KeyboardEvent.
-     */
-    onKeyDown_: function(e) {
-      if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey)
-        return;
-
-      var direction = 0;
-      if (e.keyIdentifier == 'Left')
-        direction = -1;
-      else if (e.keyIdentifier == 'Right')
-        direction = 1;
-      else
-        return;
-
-      var focusDot = this.querySelector('.dot:focus');
-      if (!focusDot)
-        return;
-      var focusIndex = Array.prototype.indexOf.call(navDots, focusDot);
-      var newFocusIndex = focusIndex + direction;
-      if (focusIndex == newFocusIndex)
-        return;
-
-      newFocusIndex = (newFocusIndex + navDots.length) % navDots.length;
-      navDots[newFocusIndex].tabIndex = 3;
-      navDots[newFocusIndex].focus();
-      focusDot.tabIndex = -1;
-
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  };
-
-  return {
-    DotList: DotList
-  };
-});

chrome/browser/resources/ntp_search/mock/debug.css

-/* Copyright (c) 2012 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. */
-
-/* =========================================================================
-   TODO(pedrosimonetti): Work around. The following rules are being used
-   to temporarily hide elements we are not using, and reset the styling
-   according to the new specification.
-   ========================================================================= */
-
-#ntp5 .tile-page-scrollbar,
-#ntp5 .top-margin {
-  display: none;
-}
-
-/* =========================================================================
-   End of work around
-   ========================================================================= */
-
-/* -----------------------------------------------------------------------------
-   Debug
------------------------------------------------------------------------------ */
-
-.debug #bottom-panel {
-  background: rgb(250, 255, 255);
-  outline: 1px solid rgb(111, 255, 255);
-}
-
-.debug #card-slider-frame {
-  background: rgb(227, 255, 255);
-  outline: 1px solid rgb(171, 255, 255);
-}
-
-.debug #bottom-panel-toolbar {
-  background: rgb(255, 170, 255);
-}
-
-.debug #dot-list,
-.debug .tile-page-content {
-  background: rgb(119, 255, 255);
-}
-
-.debug .tile-row {
-  background: rgb(255, 255, 119);
-}
-
-.debug #bookmark-bar-spacer {
-  background: rgb(255, 255, 119);
-}
-
-.debug .hide-col-0 .tile-col-0,
-.debug .hide-col-1 .tile-col-1,
-.debug .hide-col-2 .tile-col-2,
-.debug .hide-col-3 .tile-col-3,
-.debug .hide-col-4 .tile-col-4,
-.debug .hide-col-5 .tile-col-5,
-.debug .hide-col-6 .tile-col-6,
-.debug .hide-col-7 .tile-col-7,
-.debug .hide-col-8 .tile-col-8,
-.debug .hide-col-9 .tile-col-9 {
-  background-color: lightgray;
-}

chrome/browser/resources/ntp_search/mock/mock.html

-<!DOCTYPE html>
-<html>
-<head>
-  <title></title>
-  <style>
-    html, body {
-      height: 100%;
-    }
-
-    body {
-      margin: 0;
-      overflow: hidden;
-    }
-
-    #chrome {
-      height: 100%;
-    }
-
-    #top-panel {
-      height: 298px;
-      position: absolute;
-      width: 100%;
-      z-index: 2;
-    }
-
-    #top-spacer {
-      padding: 139px 100px 0;
-    }
-
-    #provider-logo {
-      background: red;
-      height: 94px;
-      margin: 0 auto 26px;
-      width: 344px;
-    }
-
-    #omnibox {
-      background: white;
-      border: 1px solid #cbdef0;
-      border-radius: 2px;
-      box-shadow: 0 0 0 1px #84a5c4;
-      height: 36px;
-      margin: 0 auto;
-      max-width: 748px;
-    }
-
-    #bottom-panel {
-      border: none;
-      height: 100%;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-    }
-  </style>
-  <script src="mock.js" type="text/javascript"></script>
-  <script>
-    if (chrome.debugArgs && chrome.debugArgs.background)
-      document.body.style.background = chrome.debugArgs.background;
-
-    window.onload = function() {
-      // Propagates the debug args to the iframe.
-      var bottomPanel = document.getElementById('bottom-panel');
-      var parts = location.href.split('?');
-      var args = parts[1] ? '?' + parts[1] : '';
-      bottomPanel.src = '../new_tab.html' + args;
-    };
-  </script>
-</head>
-<body>
-<div id="chrome">
-  <div id="top-panel">
-    <div id="top-spacer">
-      <div id="provider-logo"></div>
-      <div id="omnibox"></div>
-    </div>
-  </div>
-  <iframe id="bottom-panel"></iframe>
-</div>
-</body>
-</html>
\ No newline at end of file

chrome/browser/resources/ntp_search/most_visited_page.css

-/* Copyright (c) 2012 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. */
-
-.close-button {
-  background: no-repeat;
-  background-color: transparent;
-  /* TODO(estade): this should animate between states. */
-  background-image: -webkit-image-set(
-      url('../../../../ui/resources/default_100_percent/close_bar.png') 1x,
-      url('../../../../ui/resources/default_200_percent/close_bar.png') 2x);
-  border: 0;
-  cursor: default;
-  display: inline-block;
-  height: 16px;
-  padding: 0;
-  width: 16px;
-  z-index: 999;
-}
-
-.close-button:hover,
-.close-button:focus {
-  background-image: -webkit-image-set(
-      url('../../../../ui/resources/default_100_percent/close_bar_hover.png')
-          1x,
-      url('../../../../ui/resources/default_200_percent/close_bar_hover.png')
-          2x);
-}
-
-.close-button:active {
-  background-image: -webkit-image-set(
-      url('../../../../ui/resources/default_100_percent/close_bar_pressed.png')
-          1x,
-      url('../../../../ui/resources/default_200_percent/close_bar_pressed.png')
-          2x);
-}
-
-/* TODO(pedrosimonetti): Organize these rules. */
-.thumbnail .close-button {
-  -webkit-transition: opacity 500ms ease-in-out;
-  opacity: 0;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-}
-
-html[dir=rtl] .thumbnail .close-button {
-  left: 0;
-  right: auto;
-}
-
-.thumbnail:hover .close-button {
-  -webkit-transition-delay: 500ms;
-  opacity: 1;
-}
-
-.thumbnail .close-button:hover {
-  -webkit-transition: none;
-}

chrome/browser/resources/ntp_search/most_visited_page.js

-// Copyright (c) 2012 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.
-
-cr.define('ntp', function() {
-  'use strict';
-
-  var Thumbnail = ntp.Thumbnail;
-  var ThumbnailPage = ntp.ThumbnailPage;
-
-  /**
-   * Creates a new Most Visited object for tiling.
-   * @param {Object=} opt_data The data representing the most visited page.
-   * @constructor
-   * @extends {Thumbnail}
-   * @extends {HTMLAnchorElement}
-   */
-  function MostVisited(opt_data) {
-    var el = cr.doc.createElement('a');
-    el.__proto__ = MostVisited.prototype;
-    el.initialize();
-
-    if (opt_data)
-      el.data = opt_data;
-
-    return el;
-  }
-
-  MostVisited.prototype = {
-    __proto__: Thumbnail.prototype,
-
-    /**
-     * Initializes a MostVisited Thumbnail.
-     */
-    initialize: function() {
-      Thumbnail.prototype.initialize.apply(this, arguments);
-
-      this.addEventListener('click', this.handleClick_);
-      this.addEventListener('keydown', this.handleKeyDown_);
-      this.addEventListener('carddeselected', this.handleCardDeselected_);
-      this.addEventListener('cardselected', this.handleCardSelected_);
-    },
-
-    /**
-     * Clears the DOM hierarchy for this node, setting it back to the default
-     * for a blank thumbnail.
-     */
-    reset: function() {
-      Thumbnail.prototype.reset.apply(this, arguments);
-
-      var closeButton = cr.doc.createElement('div');
-      closeButton.className = 'close-button';
-      closeButton.title = loadTimeData.getString('removethumbnailtooltip');
-      this.appendChild(closeButton);
-    },
-
-    /**
-     * Update the appearance of this tile according to |data|.
-     * @param {Object} data A dictionary of relevant data for the page.
-     */
-    set data(data) {
-      Object.getOwnPropertyDescriptor(Thumbnail.prototype, 'data').set.apply(
-          this, arguments);
-
-      if (this.classList.contains('blacklisted') && data) {
-        // Animate appearance of new tile.
-        this.classList.add('new-tile-contents');
-      }
-      this.classList.remove('blacklisted');
-    },
-    get data() {
-      return this.data_;
-    },
-
-    /**
-     * Handles a click on the tile.
-     * @param {Event} e The click event.
-     * @private
-     */
-    handleClick_: function(e) {
-      if (e.target.classList.contains('close-button')) {
-        this.blacklist_();
-        e.preventDefault();
-      } else {
-        ntp.logTimeToClickAndHoverCount('MostVisited');
-        // Records an app launch from the most visited page (Chrome will decide
-        // whether the url is an app). TODO(estade): this only works for clicks;
-        // other actions like "open in new tab" from the context menu won't be
-        // recorded. Can this be fixed?
-        chrome.send('recordAppLaunchByURL',
-                    [encodeURIComponent(this.href),
-                     ntp.APP_LAUNCH.NTP_MOST_VISITED]);
-        // Records the index of this tile.
-        chrome.send('metricsHandler:recordInHistogram',
-                    ['NewTabPage.MostVisited', this.index, 8]);
-        chrome.send('mostVisitedAction',
-                    [ntp.NtpFollowAction.CLICKED_TILE]);
-      }
-    },
-
-    /**
-     * Allow blacklisting most visited site using the keyboard.
-     * @private
-     */
-    handleKeyDown_: function(e) {
-      if (!cr.isMac && e.keyCode == 46 || // Del
-          cr.isMac && e.metaKey && e.keyCode == 8) { // Cmd + Backspace
-        this.blacklist_();
-      }
-    },
-
-    /**
-     * Permanently removes a page from Most Visited.
-     * @private
-     */
-    blacklist_: function() {
-      this.tileCell.tilePage.setTileRepositioningState(this.index, true);
-      this.showUndoNotification_();
-      chrome.send('blacklistURLFromMostVisited', [this.data_.url]);
-      this.classList.add('blacklisted');
-    },
-
-    /**
-     * Shows the undo notification when blacklisting a most visited site.
-     * @private
-     */
-    showUndoNotification_: function() {
-      var data = this.data_;
-      var tilePage = this.tileCell.tilePage;
-      var index = this.index;
-      var doUndo = function() {
-        tilePage.setTileRepositioningState(index, false);
-        chrome.send('removeURLsFromMostVisitedBlacklist', [data.url]);
-      };
-
-      var undo = {
-        action: doUndo,
-        text: loadTimeData.getString('undothumbnailremove'),
-      };
-
-      var undoAll = {
-        action: function() {
-          chrome.send('clearMostVisitedURLsBlacklist');
-        },
-        text: loadTimeData.getString('restoreThumbnailsShort'),
-      };
-
-      ntp.showNotification(
-          loadTimeData.getString('thumbnailremovednotification'),
-          [undo, undoAll]);
-    },
-
-    /**
-     * Returns whether this element can be 'removed' from chrome.
-     * @return {boolean} True, since most visited pages can always be
-     *     blacklisted.
-     */
-    canBeRemoved: function() {
-      return true;
-    },
-  };
-
-  /**
-   * Creates a new MostVisitedPage object.
-   * @constructor
-   * @extends {ThumbnailPage}
-   */
-  function MostVisitedPage() {
-    var el = new ThumbnailPage();
-    el.__proto__ = MostVisitedPage.prototype;
-    el.initialize();
-
-    return el;
-  }
-
-  MostVisitedPage.prototype = {
-    __proto__: ThumbnailPage.prototype,
-
-    TileClass: MostVisited,
-
-    /**
-     * Initializes a MostVisitedPage.
-     */
-    initialize: function() {
-      ThumbnailPage.prototype.initialize.apply(this, arguments);
-
-      this.classList.add('most-visited-page');
-    },
-
-    /**
-     * Handles the 'card deselected' event (i.e. the user clicked to another
-     * pane).
-     * @private
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardDeselected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up')) {
-        chrome.send('mostVisitedAction',
-                    [ntp.NtpFollowAction.CLICKED_OTHER_NTP_PANE]);
-      }
-    },
-
-    /**
-     * Handles the 'card selected' event (i.e. the user clicked to select the
-     * this page's pane).
-     * @private
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardSelected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up'))
-        chrome.send('mostVisitedSelected');
-    },
-
-    /** @override */
-    setDataList: function(dataList) {
-      var startTime = Date.now();
-      ThumbnailPage.prototype.setDataList.apply(this, arguments);
-      this.updateGrid();
-      logEvent('mostVisited.layout: ' + (Date.now() - startTime));
-    },
-  };
-
-  /**
-   * Executed once the NTP has loaded. Checks if the Most Visited pane is
-   * shown or not. If it is shown, the 'mostVisitedSelected' message is sent
-   * to the C++ code, to record the fact that the user has seen this pane.
-   */
-  MostVisitedPage.onLoaded = function() {
-    if (ntp.getCardSlider() &&
-        ntp.getCardSlider().currentCardValue &&
-        ntp.getCardSlider().currentCardValue.classList
-        .contains('most-visited-page')) {
-      chrome.send('mostVisitedSelected');
-    }
-  };
-
-  return {
-    MostVisitedPage: MostVisitedPage,
-  };
-});
-
-document.addEventListener('ntpLoaded', ntp.MostVisitedPage.onLoaded);

chrome/browser/resources/ntp_search/nav_dot.css

-/* Copyright (c) 2012 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. */
-
-#dot-list {
-  height: 15px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-}
-
-.dot {
-  -webkit-transition: color 200ms;
-  color: #666;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 1.0833em;
-  margin: 0 1em;
-  min-width: 55px;
-  outline: none;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
-  white-space: nowrap;
-}
-
-.dot.selected {
-  color: rgb(221, 75, 57);
-}

chrome/browser/resources/ntp_search/nav_dot.js

-// Copyright (c) 2012 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 Nav dot
- * This is the class for the navigation controls that appear along the bottom
- * of the NTP.
- */
-
-cr.define('ntp', function() {
-  'use strict';
-
-  /**
-   * Creates a new navigation dot.
-   * @param {TilePage} page The associated TilePage.
-   * @param {string} title The title of the navigation dot.
-   * @constructor
-   * @extends {HTMLLIElement}
-   */
-  function NavDot(page, title) {
-    var dot = cr.doc.createElement('li');
-    dot.__proto__ = NavDot.prototype;
-    dot.initialize(page, title);
-
-    return dot;
-  }
-
-  NavDot.prototype = {
-    __proto__: HTMLLIElement.prototype,
-
-    initialize: function(page, title) {
-      this.className = 'dot';
-      this.page_ = page;
-      this.textContent = title;
-
-      this.addEventListener('keydown', this.onKeyDown_);
-      this.addEventListener('click', this.onClick_);
-    },
-
-    /**
-     * @return {TilePage} The associated TilePage.
-     */
-    get page() {
-      return this.page_;
-    },
-
-    /**
-     * Removes the dot from the page.
-     */
-    remove: function() {
-      this.parentNode.removeChild(this);
-    },
-
-    /**
-     * Navigates the card slider to the page for this dot.
-     */
-    switchToPage: function() {
-      ntp.getCardSlider().selectCardByValue(this.page_, true);
-    },
-
-    /**
-     * Handler for keydown event on the dot.
-     * @param {Event} e The KeyboardEvent.
-     */
-    onKeyDown_: function(e) {
-      if (e.keyIdentifier == 'Enter') {
-        this.onClick_(e);
-        e.stopPropagation();
-      }
-    },
-
-    /**
-     * Clicking causes the associated page to show.
-     * @param {Event} e The click event.
-     * @private
-     */
-    onClick_: function(e) {
-      this.switchToPage();
-      e.stopPropagation();
-    },
-
-  };
-
-  return {
-    NavDot: NavDot,
-  };
-});

chrome/browser/resources/ntp_search/new_tab.css

-/* Copyright (c) 2012 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. */
-
-/* -----------------------------------------------------------------------------
-   General Styles
------------------------------------------------------------------------------ */
-
-html {
-  /* It's necessary to put this here instead of in body in order to get the
-     background-size of 100% to work properly */
-  height: 100%;
-  overflow: hidden;
-}
-
-body {
-  /* Don't highlight links when they're tapped. Safari has bugs here that
-     show up as flicker when dragging in some situations */
-  -webkit-tap-highlight-color: transparent;
-  /* Don't allow selecting text - can occur when dragging */
-  -webkit-user-select: none;
-  background-size: auto 100%;
-  /* TODO(pedrosimonetti): Confirm with designers/engineers what do we want
-   * to do regarding font family, once AFAIK we want to use Arial always. */
-  font-family: Arial;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-}
-
-/* [hidden] does display:none, but its priority is too low in some cases. */
-[hidden] {
-  display: none !important;
-}
-
-#notification-container {
-  height: 18px;
-  padding: 10px 0;
-}
-
-#notification {
-  display: inline-block;
-  font-weight: bold;
-  white-space: nowrap;
-}
-
-#notification > div > div,
-#notification > div {
-  display: inline-block;
-}
-
-/* NOTE: This is in the probable case that we start stuffing 16x16 data URI'd
- * icons in the promo notification responses. */
-#notification > span > img {
-  margin-bottom: -3px;
-}
-
-#notification .close-button {
-  -webkit-margin-start: 8px;
-  vertical-align: top;
-}
-
-.link-button {
-  -webkit-margin-start: 0.5em;
-}
-
-#bottom-panel {
-  -webkit-transition: opacity 200ms;
-  position: absolute;
-  top: 300px;
-  visibility: hidden;
-  width: 100%;
-}
-
-.hide-bottom-panel {
-  opacity: 0;
-}
-
-#card-slider-frame {
-  height: 100px;
-  overflow: hidden;
-}
-
-#page-list {
-  display: -webkit-box;
-  height: 100%;
-  position: static;
-}
-
-#bottom-panel-header,
-#bottom-panel-footer,
-#bottom-panel-toolbar {
-  margin: 0 auto;
-  text-align: center;
-}
-
-#bottom-panel-header {
-  padding: 10px 0 20px;
-}
-
-#bookmark-bar-spacer {
-  height: 48px;
-}
-
-#promo-bubble-anchor {
-  bottom: 50px;
-  height: 10px;
-  left: 0;
-  position: absolute;
-  width: 90px;
-}
-
-.bubble .bubble-arrow {
-  display: none;
-}
-
-/* TODO(jeremycho): Figure out if we need this. */
-#attribution {
-  bottom: 0;
-  left: auto;
-  margin-left: 8px;
-  /* Leave room for the scrollbar. */
-  margin-right: 13px;
-  position: absolute;
-  right: 0;
-  text-align: left;
-  z-index: -5;
-}
-
-/* For themes that right-align their images, we flip the attribution to the
- * left to avoid conflicts. We also do this for bare-minimum mode since there
- * can be conflicts with the recently closed menu. */
-html[themegravity='right'] #attribution,
-body.bare-minimum #attribution,
-html[dir='rtl'] #attribution {
-  left: 0;
-  right: auto;
-  text-align: right;
-}
-
-#attribution > span {
-  display: block;
-}
-
-.starting-up * {
-  -webkit-transition: none !important;
-}

chrome/browser/resources/ntp_search/new_tab.html

-<!DOCTYPE html>
-<html i18n-values="
-    dir:textdirection;
-    hasattribution:hasattribution;
-    themegravity:themegravity;
-    bookmarkbarattached:bookmarkbarattached;"
-  class="starting-up">
-<head>
-<meta charset="utf-8">
-<title i18n-content="title"></title>
-<!-- Don't scale the viewport in either portrait or landscape mode.
-     Note that this means apps will be reflowed when rotated (like iPad).
-     If we wanted to maintain position we could remove 'maximum-scale' so
-     that we'd zoom out in portrait mode, but then there would be a bunch
-     of unusable space at the bottom.
--->
-<meta name="viewport"
-      content="user-scalable=no, width=device-width, maximum-scale=1.0">
-
-<!-- It's important that this be the first script loaded. -->
-<script src="../ntp4/logging.js"></script>
-
-<!-- TODO(jeremycho): This is only used for notifications.  Discuss with UX. -->
-<link rel="stylesheet" href="../../../../ui/webui/resources/css/bubble.css">
-<link rel="stylesheet" href="../../../../ui/webui/resources/css/expandable_bubble.css">
-<link rel="stylesheet" href="../../../../ui/webui/resources/css/menu.css">
-<link rel="stylesheet" href="../../../../ui/webui/resources/css/menu_button.css">
-<link rel="stylesheet" href="../../../../ui/webui/resources/css/widgets.css">
-
-<link rel="stylesheet" href="most_visited_page.css">
-<link rel="stylesheet" href="nav_dot.css">
-<link rel="stylesheet" href="new_tab.css">
-<link rel="stylesheet" href="thumbnail_page.css">
-<link rel="stylesheet" href="tile_page.css">
-<link rel="stylesheet" href="apps_page.css">
-
-<link id="themecss" rel="stylesheet">
-
-<script src="../../../../ui/webui/resources/js/event_tracker.js"></script>
-<script src="../../../../ui/webui/resources/js/load_time_data.js"></script>
-<script src="../../../../ui/webui/resources/js/parse_html_subset.js"></script>
-<script src="../../../../ui/webui/resources/js/util.js"></script>
-<script src="../../../../ui/webui/resources/js/cr.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/bubble.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/card_slider.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/context_menu_handler.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/drag_wrapper.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/expandable_bubble.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/menu.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/menu_item.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/position_util.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/menu_button.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/context_menu_button.js"></script>
-<script src="../../../../ui/webui/resources/js/cr/ui/touch_handler.js"></script>
-
-<script src="position_util.js"></script>
-<script src="new_tab.js"></script>
-<script src="dot_list.js"></script>
-<script src="nav_dot.js"></script>
-<script src="tile_page.js"></script>
-<script src="thumbnail_page.js"></script>
-<script src="most_visited_page.js"></script>
-<script src="apps_page.js"></script>
-</head>
-
-<body id="ntp5" i18n-values=".style.fontSize:fontsize">
-  <div id="bottom-panel">
-    <div id="bottom-panel-header">
-      <ul id="dot-list" hidden></ul>
-    </div>
-    <div id="card-slider-frame">
-      <div id="page-list"></div>
-      <div id="attribution">
-        <span i18n-content="attributionintro"></span>
-        <img id="attribution-img">
-      </div>
-    </div>
-    <div id="bottom-panel-footer">
-      <div id="bottom-panel-toolbar">
-        <div id="notification-container" hidden>
-          <div id="notification">
-            <span></span>
-            <div id="notificationLinks"></div>
-            <button class="close-button custom-appearance"></button>
-          </div>
-        </div>
-      </div>
-      <div id="bookmark-bar-spacer"></div>
-    </div>
-  </div>
-  <div id="promo-bubble-anchor"></div>
-</body>
-
-<!-- A div to hold all the templates, and in the darkness bind them. -->
-<div hidden>
-
-<!-- NTP4 intro bubble -->
-<div id="ntp4-intro-bubble-contents">
-  <div></div>
-  <a i18n-content="learn_more" target="_blank"></a>
-</div>
-
-<!-- App Contents w/ Large Icon -->
-<div id="app-large-icon-template" class="app-contents">
-  <div class="app-img-container">
-    <img class="invisible">
-  </div>
-  <span class="title"></span>
-</div>
-
-<!-- App Contents w/ Small Icon -->
-<div id="app-small-icon-template" class="app-contents">
-  <div class="app-icon-div" aria-hidden="true">
-    <div class="app-img-container">
-      <img class="invisible" alt="">
-    </div>
-    <div class="color-stripe"></div>
-  </div>
-  <span class="title"></span>
-</div>
-
-</div>
-
-</html>

chrome/browser/resources/ntp_search/new_tab_theme.css

-/* Copyright (c) 2012 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. */
-
-html {
-  background-attachment: fixed;
-  background-color: $2;  /* COLOR_NTP_BACKGROUND */
-  background-image: -webkit-image-set(
-    url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1) 1x);
-  background-position: $3;
-  background-repeat: $5;
-}
-
-html[bookmarkbarattached='true'] {
-  background-position: $4;
-}
-
-body {
-  color: $8;  /* COLOR_NTP_TEXT */
-  height: 100%;
-  overflow: auto;
-}
-
-#attribution,
-.link-button,
-.link-span {
-  color: $21;  /* COLOR_NTP_TEXT_LIGHT */
-}
-
-.link-button:active {
-  color: $8;  /* COLOR_NTP_TEXT */
-}
-
-.page-switcher {
-  color: rgba($23, 0.5);  /* COLOR_NTP_TEXT */
-}
-
-.page-switcher:hover,
-.page-switcher:focus,
-.page-switcher.drag-target {
-  background-color: rgba($23, 0.06);  /* COLOR_NTP_TEXT */
-}
-
-/* Only change the background to a gradient when a promo is showing. */
-.showing-login-area #page-switcher-end:hover,
-.showing-login-area #page-switcher-end:focus,
-.showing-login-area #page-switcher-end.drag-target {
-  background:
-      -webkit-linear-gradient(top, rgba($23, 0) 0,
-                                   rgba($23, .01) 60px,
-                                   rgba($23, .06) 183px);  /* COLOR_NTP_TEXT */
-}
-
-.tile-page-scrollbar {
-  background-color: $21;  /* COLOR_NTP_TEXT_LIGHT */
-}
-
-/* Footer *********************************************************************/
-
-#footer-border {
-  background: -webkit-linear-gradient(left,
-      rgba($22, 0.2),  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.3) 20%,  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.3) 80%,  /* COLOR_NTP_SECTION_BORDER */
-      rgba($22, 0.2));  /* COLOR_NTP_SECTION_BORDER */
-}
-
-.dot input:focus {
-  background-color: $2;  /* COLOR_NTP_BACKGROUND */
-}
-
-.bare-minimum #footer {
-  color: $8;  /* COLOR_NTP_TEXT */
-}
-
-.bare-minimum .disclosure-triangle {
-  background-color: $8;  /* COLOR_NTP_TEXT */
-}
-
-.bare-minimum .footer-menu-button:hover,
-.bare-minimum .footer-menu-button[menu-shown],
-.bare-minimum #chrome-web-store-link:hover {
-  color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
-}
-
-.bare-minimum .footer-menu-button:hover .disclosure-triangle,
-.bare-minimum .footer-menu-button[menu-shown] .disclosure-triangle {
-  background-color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
-}
-
-/* Most Visited ***************************************************************/
-
-.most-visited,
-.most-visited > .title {
-  color: $8;  /* COLOR_NTP_TEXT */
-}
-
-.most-visited:focus:not(.filler) .thumbnail-wrapper,
-.most-visited:hover:not(.filler) .thumbnail-wrapper {
-  background-color: $6;  /* COLOR_NTP_HEADER */
-}
-
-.thumbnail-wrapper {
-  /* This shows through at the (rounded) thumbnail's corners. */
-  background-color: $11;  /* COLOR_NTP_SECTION_BORDER */
-}
-
-.filler .thumbnail {
-  border-color: $2;  /* COLOR_NTP_BACKGROUND */
-}

chrome/browser/resources/ntp_search/position_util.js

-// Copyright (c) 2012 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 This file provides utility functions for position popups.
- */
-
-cr.define('cr.ui', function() {
-
-  /**
-   * Type def for rects as returned by getBoundingClientRect.
-   * @typedef { {left: number, top: number, width: number, height: number,
-   *             right: number, bottom: number}}
-   */
-  var Rect;
-
-  /** @const */
-  var AnchorType = cr.ui.AnchorType;
-
-  /**
-   * @type {number}
-   * @const
-   */
-  var BOOKMARK_BAR_HEIGHT = 48;
-
-  /**
-   * Helper function for positionPopupAroundElement and positionPopupAroundRect.
-   * @param {!Rect} anchorRect The rect for the anchor.
-   * @param {!HTMLElement} popupElement The element used for the popup.
-   * @param {AnchorType} type The type of anchoring to do.
-   * @param {boolean} invertLeftRight Whether to invert the right/left
-   *     alignment.
-   */
-  function positionPopupAroundRect(anchorRect, popupElement, type,
-                                   invertLeftRight) {
-    var popupRect = popupElement.getBoundingClientRect();
-    var availRect;
-    var ownerDoc = popupElement.ownerDocument;
-    var cs = ownerDoc.defaultView.getComputedStyle(popupElement);
-    var docElement = ownerDoc.documentElement;
-
-    if (cs.position == 'fixed') {
-      // For 'fixed' positioned popups, the available rectangle should be based
-      // on the viewport rather than the document.
-      availRect = {
-        height: docElement.clientHeight,
-        width: docElement.clientWidth,
-        top: 0,
-        bottom: docElement.clientHeight,
-        left: 0,
-        right: docElement.clientWidth
-      };
-    } else {
-      availRect = popupElement.offsetParent.getBoundingClientRect();
-    }
-
-    if (cs.direction == 'rtl')
-      invertLeftRight = !invertLeftRight;
-
-    // Flip BEFORE, AFTER based on alignment.
-    if (invertLeftRight) {
-      if (type == AnchorType.BEFORE)
-        type = AnchorType.AFTER;
-      else if (type == AnchorType.AFTER)
-        type = AnchorType.BEFORE;
-    }
-
-    // Flip type based on available size
-    switch (type) {
-      case AnchorType.BELOW:
-        // Do not flip when the type is below to avoid crbug.com/164113.
-        break;
-      case AnchorType.ABOVE:
-        if (popupRect.height > anchorRect.top &&
-            anchorRect.bottom + popupRect.height <= availRect.height) {
-          type = AnchorType.BELOW;
-        }
-        break;
-      case AnchorType.AFTER:
-        if (anchorRect.right + popupRect.width > availRect.width &&
-            popupRect.width <= anchorRect.left) {
-          type = AnchorType.BEFORE;
-        }
-        break;
-      case AnchorType.BEFORE:
-        if (popupRect.width > anchorRect.left &&
-            anchorRect.right + popupRect.width <= availRect.width) {
-          type = AnchorType.AFTER;
-        }
-        break;
-      default:
-        assert(false, 'unknown type');
-    }
-    // flipping done
-
-    var style = popupElement.style;
-    // Reset all directions.
-    style.left = style.right = style.top = style.bottom = 'auto';
-
-    // Primary direction
-    switch (type) {
-      case AnchorType.BELOW:
-        if (anchorRect.bottom + popupRect.height <= availRect.height -
-            BOOKMARK_BAR_HEIGHT) {
-          style.top = anchorRect.bottom + 'px';
-        } else {
-          style.bottom = BOOKMARK_BAR_HEIGHT + 'px';
-        }
-        break;
-      case AnchorType.ABOVE:
-        if (availRect.height - anchorRect.top >= 0)
-          style.bottom = availRect.height - anchorRect.top + 'px';
-        else
-          style.top = '0';
-        break;
-      case AnchorType.AFTER:
-        if (anchorRect.right + popupRect.width <= availRect.width)
-          style.left = anchorRect.right + 'px';
-        else
-          style.right = '0';
-        break;
-      case AnchorType.BEFORE:
-        if (availRect.width - anchorRect.left >= 0)
-          style.right = availRect.width - anchorRect.left + 'px';
-        else
-          style.left = '0';
-        break;
-    }
-
-    // Secondary direction
-    switch (type) {
-      case AnchorType.BELOW:
-      case AnchorType.ABOVE:
-        if (invertLeftRight) {
-          // align right edges
-          if (anchorRect.right - popupRect.width >= 0) {
-            style.right = availRect.width - anchorRect.right + 'px';
-
-          // align left edges
-          } else if (anchorRect.left + popupRect.width <= availRect.width) {
-            style.left = anchorRect.left + 'px';
-
-          // not enough room on either side
-          } else {
-            style.right = '0';
-          }
-        } else {
-          // align left edges
-          if (anchorRect.left + popupRect.width <= availRect.width) {
-            style.left = anchorRect.left + 'px';
-
-          // align right edges
-          } else if (anchorRect.right - popupRect.width >= 0) {
-            style.right = availRect.width - anchorRect.right + 'px';
-
-          // not enough room on either side
-          } else {
-            style.left = '0';
-          }
-        }
-        break;
-
-      case AnchorType.AFTER:
-      case AnchorType.BEFORE:
-        // align top edges
-        if (anchorRect.top + popupRect.height <= availRect.height) {
-          style.top = anchorRect.top + 'px';
-
-        // align bottom edges
-        } else if (anchorRect.bottom - popupRect.height >= 0) {
-          style.bottom = availRect.height - anchorRect.bottom + 'px';
-
-          // not enough room on either side
-        } else {
-          style.top = '0';
-        }
-        break;
-    }
-  }
-
-  /**
-   * Positions a popup element relative to an anchor element. The popup element
-   * should have position set to absolute and it should be a child of the body
-   * element.
-   * @param {!HTMLElement} anchorElement The element that the popup is anchored
-   *     to.
-   * @param {!HTMLElement} popupElement The popup element we are positioning.
-   * @param {AnchorType} type The type of anchoring we want.
-   * @param {boolean} invertLeftRight Whether to invert the right/left
-   *     alignment.
-   */
-  function positionPopupAroundElement(anchorElement, popupElement, type,
-                                      invertLeftRight) {
-    var anchorRect = anchorElement.getBoundingClientRect();
-    positionPopupAroundRect(anchorRect, popupElement, type, invertLeftRight);
-  }
-
-  /**
-   * Positions a popup around a point.
-   * @param {number} x The client x position.
-   * @param {number} y The client y position.
-   * @param {!HTMLElement} popupElement The popup element we are positioning.
-   */
-  function positionPopupAtPoint(x, y, popupElement) {
-    var rect = {
-      left: x,
-      top: y,
-      width: 0,
-      height: 0,
-      right: x,
-      bottom: y
-    };
-    positionPopupAroundRect(rect, popupElement, AnchorType.BELOW);
-  }
-
-  // Monkey patch popup positioning methods to avoid the popup being hidden
-  // by the top overlay. This is a hacky solution, but temporarily necessary
-  // until we get rid of the overlay madness.
-  // TODO(pedrosimonetti): Remove this code when deprecating the NTP5 Apps.
-  cr.ui.positionPopupAroundElement = positionPopupAroundElement;
-  cr.ui.positionPopupAtPoint = positionPopupAtPoint;
-});

chrome/browser/resources/ntp_search/thumbnail_page.css

-/* Copyright (c) 2012 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. */
-
-/* -----------------------------------------------------------------------------
-  Thumbnail Cell and Tile
------------------------------------------------------------------------------ */
-
-.thumbnail-page .tile-cell {
-  -webkit-margin-start: 12px;
-  height: 68px;
-  margin-bottom: 12px;
-  width: 110px;
-}
-
-.thumbnail-page .tile {
-  background: #fff;
-  border: 1px solid rgb(192, 192, 192);
-  border-radius: 2px;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
-  display: block;
-  height: 66px;
-  outline: none;  /* Avoids outline glitch when blacklisting a thumbnail. */
-  position: absolute;
-  width: 108px;
-}
-
-.thumbnail-page .tile:hover,
-.thumbnail-page .tile:hover .thumbnail-card {
-  /* TODO(pedrosimonetti): Confirm value with Marcin. */
-  border-color: rgb(127, 127, 127);
-}
-
-.thumbnail-page .tile-cell.filler .tile  {
-  background: -webkit-linear-gradient(rgb(242, 242, 242), rgb(232, 232, 232));
-  border-color: rgb(224, 224, 224);
-  border-radius: 3px;
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
-}
-
-/* -----------------------------------------------------------------------------
-  Thumbnail
------------------------------------------------------------------------------ */
-
-.thumbnail .thumbnail-image {
-  /* These values are equivalent to background-size: 100%.
-     TODO(jeremycho): Resolve the discrepancy with the cell dimensions above. */
-  background-size: 110px 68px;
-}
-
-.thumbnail .title,
-.thumbnail-banner {
-  color: #777;
-  font-size: 0.9167em;
-  overflow: hidden;
-  position: absolute;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.thumbnail .title {
-  bottom: -26px;
-}
-
-.thumbnail-banner {
-  bottom: 25px;
-  display: block;
-  font-size: 1.14em;
-  margin: 0 7px;
-  width: 88%;
-}
-
-.thumbnail,
-.thumbnail-wrapper,
-.thumbnail-card {
-  -webkit-background-clip: padding-box;
-}
-
-.thumbnail-wrapper {
-  display: block;
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-}
-
-.thumbnail-favicon {
-  height: 16px;
-  margin: 0 auto;
-  position: relative;
-  top: -8px;
-  width: 16px;
-}
-
-.thumbnail-card {
-  /* This gives a 3px offset between consecutive thumbnails on the stack and
-     should be kept in sync with RecentlyClosed's STACK_OFFSET. */
-  -webkit-margin-start: -129px;
-  border: 1px solid silver;
-  border-radius: 2px;
-  display: inline-block;
-  height: 100%;
-  margin-top: -1px;
-  position: relative;
-  width: 100%;
-}
-
-.thumbnail-card:first-child {
-  -webkit-margin-start: -1px;
-}

chrome/browser/resources/ntp_search/thumbnail_page.js

-// Copyright (c) 2012 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.
-
-cr.define('ntp', function() {
-  'use strict';
-
-  var Tile = ntp.Tile;
-  var TilePage = ntp.TilePage;
-
-  /**
-   * Creates a new Thumbnail object for tiling.
-   * @param {Object=} opt_data The data representing the thumbnail.
-   * @constructor
-   * @extends {Tile}
-   * @extends {HTMLAnchorElement}
-   */
-  function Thumbnail(opt_data) {
-    var el = cr.doc.createElement('a');
-    el.__proto__ = Thumbnail.prototype;
-    el.initialize();
-
-    if (opt_data)
-      el.data = opt_data;
-
-    return el;
-  }
-
-  Thumbnail.prototype = Tile.subclass({
-    __proto__: HTMLAnchorElement.prototype,
-
-    /**
-     * Initializes a Thumbnail.
-     */
-    initialize: function() {
-      Tile.prototype.initialize.apply(this, arguments);
-      this.classList.add('thumbnail');
-      this.addEventListener('mouseover', this.handleMouseOver_);
-    },
-
-    /**
-     * Clears the DOM hierarchy for this node, setting it back to the default
-     * for a blank thumbnail.
-     */
-    reset: function() {
-      this.innerHTML =
-          '<span class="thumbnail-wrapper">' +
-            '<span class="thumbnail-image thumbnail-card"></span>' +
-          '</span>' +
-          '<span class="title"></span>';
-
-      this.tabIndex = -1;
-      this.data_ = null;
-      this.title = '';
-    },
-
-    /**
-     * Update the appearance of this tile according to |data|.
-     * @param {Object} data A dictionary of relevant data for the page.
-     */
-    set data(data) {
-      Object.getOwnPropertyDescriptor(Tile.prototype, 'data').set.apply(this,
-          arguments);
-
-      this.formatThumbnail_(data);
-    },
-
-    /**
-     * Formats this tile according to |data|.
-     * @param {Object} data A dictionary of relevant data for the page.
-     * @private
-     */
-    formatThumbnail_: function(data) {
-      var title = this.querySelector('.title');
-      title.textContent = data.title;
-      title.dir = data.direction;
-
-      // Sets the tooltip.
-      this.title = data.title;
-
-      var dataUrl = data.url;
-      // Allow an empty string href (e.g. for a multiple tab thumbnail).
-      this.href = typeof data.href != 'undefined' ? data.href : dataUrl;
-
-      var thumbnailImage = this.querySelector('.thumbnail-image');
-
-      var banner = thumbnailImage.querySelector('.thumbnail-banner');
-      if (banner)
-        thumbnailImage.removeChild(banner);
-
-      var favicon = this.querySelector('.thumbnail-favicon') ||
-                    this.ownerDocument.createElement('div');
-      favicon.className = 'thumbnail-favicon';
-      favicon.style.backgroundImage = getFaviconImageSet(dataUrl);
-      this.appendChild(favicon);
-
-      var self = this;
-      var image = new Image();
-
-      // If the thumbnail image fails to load, show an alternative presentation.
-      // TODO(jeremycho): Move to a separate function?
-      image.onerror = function() {
-        banner = thumbnailImage.querySelector('.thumbnail-banner') ||
-            self.ownerDocument.createElement('div');
-        banner.className = 'thumbnail-banner';
-
-        // For now, just strip leading http://www and trailing backslash.
-        // TODO(jeremycho): Consult with UX on URL truncation.
-        banner.textContent = dataUrl.replace(/^(http:\/\/)?(www\.)?|\/$/gi, '');
-        thumbnailImage.appendChild(banner);
-      };
-
-      var thumbnailUrl = ntp.getThumbnailUrl(dataUrl);
-      thumbnailImage.style.backgroundImage = url(thumbnailUrl);
-      image.src = thumbnailUrl;
-    },
-
-    /**
-     * Returns true if this is a thumbnail or descendant thereof.  Used to
-     * detect when the mouse has transitioned into this thumbnail from a
-     * strictly non-thumbnail element.
-     * @param {Object} element The element to test.
-     * @return {boolean} True if this is a thumbnail or a descendant thereof.
-     * @private
-     */
-    isInThumbnail_: function(element) {
-      while (element) {
-        if (element == this)
-          return true;
-        element = element.parentNode;
-      }
-      return false;
-    },
-
-    /**
-     * Increment the hover count whenever the mouse enters a thumbnail.
-     * @param {Event} e The mouse over event.
-     * @private
-     */
-    handleMouseOver_: function(e) {
-      if (this.isInThumbnail_(e.target) &&
-          !this.isInThumbnail_(e.relatedTarget)) {
-        ntp.incrementHoveredThumbnailCount();
-      }
-    },
-  });
-
-  /**
-   * Creates a new ThumbnailPage object.
-   * @constructor
-   * @extends {TilePage}
-   */
-  function ThumbnailPage() {
-    var el = new TilePage();
-    el.__proto__ = ThumbnailPage.prototype;
-
-    return el;
-  }
-
-  ThumbnailPage.prototype = {
-    __proto__: TilePage.prototype,
-
-    /**
-     * Initializes a ThumbnailPage.
-     */
-    initialize: function() {
-      TilePage.prototype.initialize.apply(this, arguments);
-
-      this.classList.add('thumbnail-page');
-    },
-
-    /** @override */
-    shouldAcceptDrag: function(e) {
-      return false;
-    },
-  };
-
-  return {
-    Thumbnail: Thumbnail,
-    ThumbnailPage: ThumbnailPage,
-  };
-});

chrome/browser/resources/ntp_search/tile_page.css

-/* Copyright (c) 2012 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. */
-
-/* -----------------------------------------------------------------------------
-  Tile Page
------------------------------------------------------------------------------ */
-
-.tile-page {
-  overflow: hidden;
-  position: relative;
-}
-
-.tile-page-frame {
-  margin: 0 auto;
-  overflow: hidden;
-  position: relative;
-  width: 748px;
-}
-
-.tile-page-content {
-  overflow: hidden;
-}
-
-.tile-grid {
-  display: block;
-  margin: 0 auto;
-  width: 732px;
-}
-
-.tile-grid-content {
-  -webkit-transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform 200ms;
-}
-
-.tile-row {
-  -webkit-transition: opacity 200ms;
-  height: 100px;
-  text-align: start;
-  white-space: nowrap;
-}
-
-/* -----------------------------------------------------------------------------
-  Tile Grid Animation
------------------------------------------------------------------------------ */
-
-.animate-grid-width {
-  -webkit-transform: translate3d(0, 0, 0);
-  -webkit-transition: width 200ms;
-}
-
-/* -----------------------------------------------------------------------------
-  Tile Cell
------------------------------------------------------------------------------ */
-
-.tile-cell {
-  -webkit-transform: translate3d(0, 0, 0);
-  display: inline-block;
-  position: relative;
-}
-
-.tile-cell:first-child {
-  -webkit-margin-start: 0;
-}
-
-/* -----------------------------------------------------------------------------
-   Tile Cell Animation
------------------------------------------------------------------------------ */
-
-.animate-grid-width .tile-cell {
-  -webkit-transition: margin 200ms;
-  -webkit-transition-property: margin, opacity, width;
-}
-
-/* Animates entire columns of Tiles at once.*/
-.hide-col-0 .tile-cell:nth-child(1),
-.hide-col-1 .tile-cell:nth-child(2),
-.hide-col-2 .tile-cell:nth-child(3),
-.hide-col-3 .tile-cell:nth-child(4),
-.hide-col-4 .tile-cell:nth-child(5),
-.hide-col-5 .tile-cell:nth-child(6),
-.hide-col-6 .tile-cell:nth-child(7),
-.hide-col-7 .tile-cell:nth-child(8),
-.hide-col-8 .tile-cell:nth-child(9),
-.hide-col-9 .tile-cell:nth-child(10) {
-  -webkit-margin-end: -10px;
-  opacity: 0;
-  width: 10px !important;
-}
-
-/* -----------------------------------------------------------------------------
-   Tile Position Animation
------------------------------------------------------------------------------ */
-
-.animate-tile-repositioning .tile {
-  -webkit-transition-duration: 200ms;
-  -webkit-transition-property: -webkit-transform, left, opacity, top;
-  position: absolute;
-}
-
-.animate-tile-repositioning .tile:not(.target-tile) {
-  -webkit-transition-duration: 400ms;
-}
-
-.animate-tile-repositioning.undo-removal .target-tile {
-  -webkit-transition-delay: 200ms;
-}
-
-.animate-tile-repositioning .animate-hide-tile {
-  opacity: 0;
-}
-
-.animate-tile-repositioning .animate-hide-tile.target-tile {
-  -webkit-transform: scale(0.5);
-}
-
-/* -----------------------------------------------------------------------------
-  Scroll Bars
------------------------------------------------------------------------------ */
-
-.scrollable {
-  overflow-y: auto;
-}
-
-.scrollable .shadow-top {
-  -webkit-margin-end: 0;
-  -webkit-mask-box-image: -webkit-linear-gradient(left,
-                                                  rgba(0, 0, 0, 0.1),
-                                                  rgba(0, 0, 0, 0.8),
-                                                  rgba(0, 0, 0, 0.1));
-  background: -webkit-linear-gradient(top,
-                                      rgba(0, 0, 0, 0.2),
-                                      transparent);
-  height: 6px;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-}
-
-.scrollable .shadow-top::after {
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  content: '';
-  display: block;
-  height: 0;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.scrollable .shadow-bottom {
-  -webkit-margin-end: 0;
-  -webkit-mask-box-image: -webkit-linear-gradient(left,
-                                                  rgba(0, 0, 0, 0.1),
-                                                  rgba(0, 0, 0, 0.8),
-                                                  rgba(0, 0, 0, 0.1));
-  background: -webkit-linear-gradient(bottom,
-                                      rgba(0, 0, 0, 0.2),
-                                      transparent);
-  bottom: 0;
-  height: 4px;
-  left: 0;
-  opacity: 1;
-  position: absolute;
-  width: 100%;
-  z-index: 1000;
-}
-
-.scrollable .shadow-bottom::after {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-  bottom: 0;
-  content: '';
-  display: block;
-  height: 0;
-  left: 0;
-  position: absolute;
-  width: 100%;
-}
-
-::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-
-::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-
-::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment {
-  display: block;
-}
-
-::-webkit-scrollbar-button:vertical:start:increment,
-::-webkit-scrollbar-button:vertical:end:decrement {
-  display: none;
-}
-
-::-webkit-scrollbar-track:vertical {
-  -webkit-border-end: none;
-  -webkit-border-start: 5px solid transparent;
-  background-clip: padding-box;
-  background-color: white;
-}
-
-::-webkit-scrollbar-track:horizontal {
-  background-clip: padding-box;
-  background-color: white;
-  border-bottom: none;
-  border-top: 5px solid transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
-                      inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-  background-clip: padding-box;
-  background-color: rgba(0, 0, 0, 0.2);
-  min-height: 28px;
-  padding-top: 100px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-::-webkit-scrollbar-thumb:active {
-  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  -webkit-border-end: none;
-  -webkit-border-start: 5px solid transparent;
-  border-bottom: none;
-  border-top: none;
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  border: none;
-  border-top: 5px solid transparent;
-}
-
-::-webkit-scrollbar-track:hover {
-  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-::-webkit-scrollbar-track:active {
-  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
-                      inset -1px -1px 0 rgba(0, 0, 0, 0.07);
-  background-color: rgba(0, 0, 0, 0.05);
-}

chrome/browser/ui/webui/ntp/ntp_resource_cache.cc

@@ -458,8 +458,7 @@ void NTPResourceCache::CreateNewTabHTML() {
 
   // Load the new tab page appropriate for this build
   base::StringPiece new_tab_html(ResourceBundle::GetSharedInstance().
-      GetRawDataResource(chrome::search::IsInstantExtendedAPIEnabled(profile_) ?
-                         IDR_NEW_TAB_SEARCH_HTML : IDR_NEW_TAB_4_HTML));
+      GetRawDataResource(IDR_NEW_TAB_4_HTML));
   webui::UseVersion2 version2;
   std::string full_html =
       webui::GetI18nTemplateHtml(new_tab_html, &load_time_data);
@@ -585,8 +584,7 @@ void NTPResourceCache::CreateNewTabCSS() {
   // Get our template.
   static const base::StringPiece new_tab_theme_css(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
-          chrome::search::IsInstantExtendedAPIEnabled(profile_) ?
-          IDR_NEW_TAB_SEARCH_THEME_CSS : IDR_NEW_TAB_4_THEME_CSS));
+          IDR_NEW_TAB_4_THEME_CSS));
 
   // Create the string from our template and the replacements.
   std::string css_string;