Upstream Android NTP resources.

This upstreams the Android new tab page html/js/css resources
wholesale.  The NTP will be rewritten using Android UI elements in the
near future, so we'd like to upstream this with minimal changes.

BUG=136951


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

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

chrome/browser/browser_resources.grd

@@ -36,10 +36,15 @@
         <structure name="IDR_LOGIN_HTML" file="resources\chromeos\login\login.html" flattenhtml="true" type="chrome_html" />
       </if>
       <structure name="IDR_NEW_INCOGNITO_TAB_THEME_CSS" file="resources\new_incognito_tab_theme.css" flattenhtml="true" type="chrome_html" />
-      <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 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" />
+      </if>
       <if expr="pp_ifdef('chromeos')">
         <structure name="IDR_OOBE_HTML" file="resources\chromeos\login\oobe.html" flattenhtml="true" type="chrome_html" />
       </if>

chrome/browser/resources/ntp_android/bookmarks.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. */
+
+/* Begin top bar */
+
+#bookmarks_title_wrapper {
+  border-bottom: 1px solid #d0d0d0;
+  display: -webkit-box;
+  font-size: 17px;
+  height: 44px;
+  line-height: 44px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.section-title {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+  overflow: hidden;
+  position: absolute;
+}
+
+.section-title-mask {
+  -webkit-box-flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.overflow-left-mask {
+  background: -webkit-gradient(
+    linear,
+    left center,
+    right center,
+    from(rgba(50,50,50,0.3)),
+    to(rgba(0,0,0,0))
+  );
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 10px;
+}
+
+.overflow-right-mask {
+  background: -webkit-gradient(
+    linear,
+    left center,
+    right center,
+    from(rgba(0,0,0,0)),
+    to(rgba(50,50,50,0.2))
+  );
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 10px;
+}
+
+.bookmark-separator {
+  background-image: url(images/breadcrumb_mdpi.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 8px 20px; /* this matches the background image size */
+  height: 44px;
+  width: 10px;
+}
+
+#bookmarks_title_wrapper .title-crumb {
+  color: #555;
+  margin: 0 10px;
+}
+
+#bookmarks_title_wrapper .title-crumb-active {
+  font-weight: bold;
+  margin-right: 0;
+  padding-right: 10px;
+}
+
+/* Begin Bookmark Cell Items */
+
+.favicon-cell {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: background 300ms linear;
+  display: inline-block;
+  height: 105px;
+  padding: 11px;
+  text-align: center;
+  vertical-align: top;
+  width: 80px;
+}
+
+.favicon-cell-active {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(51, 181, 229, .4);
+}
+
+.favicon-box {
+  -webkit-border-radius: 10px;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: -webkit-box;
+  height: 64px; /* icon container size */
+  margin: auto; /* horizontally center */
+  position: relative;
+  text-align: center;
+  width: 64px; /* icon container size */
+}
+
+.favicon-box.folder {
+  background-image: url(images/bookmark_folder_mdpi.png);
+}
+
+.favicon-cell .title {
+  height: 30px;
+  line-height: 18px;
+  overflow: hidden;
+  padding-bottom: 8px;
+  padding-top: 10px;
+}
+
+.favicon-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+  width: 100%;
+}
+
+.favicon-icon.document {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.bookmark-border {
+  background-image: url(images/bookmark_border_mdpi.png);
+  background-size: 100%;
+  height: 64px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 64px;
+}
+
+.favicon-box.document {
+  /* a 'document' favicon looks like a little web page with the favicon
+     in top left corner */
+  background-image: url(images/bookmark_bg_mdpi.png);
+  margin: auto; /* horizontally center */
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.favicon-box.document .fold-container {
+  position: absolute;
+  right: 7px;
+  top: 3px;
+}
+
+.favicon-box.document .fold {
+  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
+  height: 12px;
+  width: 12px;
+}
+
+.favicon-box.document .active-shade {
+  /* Shade overlay for favicon's when pressed */
+  background-color: #000;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.favicon-box.document .active-shade:active {
+  opacity: 0.15;
+}
+
+.favicon-box.document .color-strip {
+  /* the color strip is an overlay across the bottom of the icon */
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  bottom: 3px;
+  height: 4px;
+  left: 7px;
+  position: absolute;
+  width: 50px;
+}
+
+.favicon-box.document .favicon-icon {
+  background-size: 16px 16px;
+}
+
+.favicon-icon.touch-icon {
+  background-size: 100%;
+  border-radius: 16px; /* remove any junk in the corners of the favicon */
+  height: 57px; /* touch-icon size */
+  margin: auto; /* horizontally center */
+  margin-bottom: 4px;
+  margin-top: 3px; /* (64 - 57) / 2 = 3.5 */
+  width: 57px; /* touch-icon size */
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.32) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 16px;
+    width: 16px;
+    zoom: 0.75;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_tvdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_tvdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_tvdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_tvdpi.png);
+  }
+
+  /* tweaked spacing, presumably because of rounding error */
+  .favicon-box.document .fold-container {
+    right: 8px;
+  }
+  .favicon-box.document .color-strip {
+    left: 8px;
+    width: 48px;
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 18px;
+    width: 18px;
+    zoom: 0.66;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_hdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_hdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_hdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_hdpi.png);
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 24px;
+    width: 24px;
+    zoom: 0.5;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_xhdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_xhdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_xhdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_xhdpi.png);
+  }
+}

chrome/browser/resources/ntp_android/bookmarks_tablet.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. */
+
+/* Don't apply tablet styles to TVDPI devices */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.35),
+       only screen and (-webkit-max-device-pixel-ratio: 1.30) {
+  body[device='tablet'] .favicon-cell {
+    height: 120px;
+    padding-left: 36px;
+    padding-right: 36px;
+    width: 98px;
+  }
+  body[device='tablet'] #bookmarks_title_wrapper .title-crumb {
+    margin: 0 25px;
+  }
+}
+

chrome/browser/resources/ntp_android/incognito_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. */
+
+html[dir='ltr'] #incognito_container .icon {
+  -webkit-transform: scale(-1, 1);
+  float: right;
+  margin: 0 6px 0 3px;
+}
+
+html[dir='rtl'] #incognito_container .icon {
+  float: left;
+  margin: 0 3px 0 6px;
+}
+
+#incognito_container .content {
+  background-color: #eee;
+  border-radius: 5px 5px;
+  color: black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 66px;
+  max-width: 600px;
+  padding: 10px;
+}
+
+body[device='phone'] #incognito_container .content {
+  margin: 10px;
+}

chrome/browser/resources/ntp_android/mostvisited.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. */
+
+/* begin: show/hide selected ntp section */
+body[device='phone'] .main-section {
+  display: none;
+}
+
+body[device='phone'] .main-section.selected {
+  display: block;
+}
+/* end: show/hide selected ntp section */
+
+.thumbnail-cell {
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+
+.thumbnail-cell-shade {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.thumbnail-cell-shade-active {
+  background: rgba(51, 181, 229, 0.4);
+}
+
+body[device='phone'] .thumbnail-cell {
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  vertical-align: top;
+}
+
+body[device='phone'] #most_visited_list .thumbnail-container {
+  border: 1px solid #999;
+}
+
+body[device='phone'] #most_visited_list:active .thumbnail-container {
+  -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2);
+  background:
+    -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      from(rgba(0, 0, 0, 0.05)),
+      to(rgba(0, 0, 0, 0.05))),
+    -webkit-gradient(
+      linear,
+      32 top,
+      left bottom,
+      from(rgba(255, 255, 255, 0)),
+      to(rgba(255, 255, 255, 1.0))),
+    -webkit-gradient(
+      linear,
+      left 150,
+      left 155,
+      from(rgba(255, 255, 255, 0)),
+      to(rgba(255, 255, 255, 1.0)));
+}
+
+/* This is the div that gets the background set as a thumbnail */
+body[device='phone'] #most_visited_list .thumbnail {
+  background-image: url(images/default_thumbnail.png);
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+}
+
+body[device='phone'] #most_visited_list .inner-border {
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(rgba(0, 0, 0, 0)),
+    to(rgba(0, 0, 0, 0.05)));
+  border: 1px solid rgba(255, 255, 255, .8);
+  left: 1px;
+  position: absolute;
+  top: 1px;
+}
+
+body[device='phone'] #most_visited_list .title-spacer {
+  height: 20px;
+  width: 0;
+}
+
+body[device='phone'] #most_visited_list .title {
+  overflow-x: hidden;
+  overflow-y: visible;
+  position: absolute;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[device='phone'] .recently-closed-title-container {
+  border-bottom: 1px solid #c1c1c1;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 16px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+}

chrome/browser/resources/ntp_android/mostvisited_tablet.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. */
+
+/* begin: show/hide selected ntp section */
+body[device='tablet'] .main-section {
+  display: none;
+}
+
+body[device='tablet'] .main-section.selected {
+  display: block;
+}
+/* end: show/hide selected ntp section */
+
+/* begin: rules to make most visited container stay at bottom */
+body[device='tablet'] .main-section.selected#most_visited_container {
+  display: -webkit-box;
+}
+
+body[device='tablet'] #most_visited_container {
+  -webkit-box-orient: vertical;
+}
+
+body[device='tablet'] #recently_closed_container {
+  -webkit-box-flex: 0;
+  margin-bottom: 10px;
+}
+
+body[device='tablet'] .box-spacer {
+  -webkit-box-flex: 1.0;
+}
+
+body[device='tablet'] #most_visited_list {
+  -webkit-box-flex: 0;
+}
+/* end: rules to make most visited container stay at bottom */
+
+body[device='tablet'] #most_visited_container {
+  overflow: hidden;
+}
+
+body[device='tablet'] #most_visited_list {
+  margin-top: 15px;
+}
+
+body[device='tablet'] .thumbnail-cell {
+  float: left;
+  height: 210px;
+  padding: 20px;
+  text-align: center;
+  width: 230px;
+}
+
+body[device='tablet'] #most_visited_list .thumbnail-container {
+  border: 1px solid #999;
+  height: 160px;
+  position: relative;
+  width: 100%;
+}
+
+body[device='tablet'] #most_visited_list .thumbnail {
+  background-image: url(images/default_thumbnail.png);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+}
+
+body[device='tablet'] #most_visited_list .inner-border {
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(rgba(0, 0, 0, 0)),
+    to(rgba(0, 0, 0, 0.05)));
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  height: 158px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 228px;
+}
+
+body[device='tablet'] #most_visited_list .title-spacer {
+  height: 35px;
+  width: 0;
+}
+
+body[device='tablet'] #most_visited_list .title {
+  left: -10px;
+  overflow-x: hidden;
+  overflow-y: visible;
+  position: relative;
+  text-overflow: ellipsis;
+  top: -2px;
+  white-space: nowrap;
+  width: 250px;
+}
+
+body[device='tablet'] .recently-closed-title-container {
+  color: rgba(0, 0, 0, 0.5);
+  display: inline-block;
+  margin-top: 25px;
+  padding-bottom: 10px;
+  padding-left: 6px; /* match recently closed border & margin */
+  position: relative;
+  width: 100%;
+}
+
+body[device='tablet'] .recently-closed-title-container .title {
+  display: block;
+  font-size: 16px;
+}
+
+body[device='tablet'] #recently_closed_list .cell {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-width: 1px;
+  float: left;
+  height: 16px;
+  margin: 5px;
+  overflow: hidden;
+  padding: 5px;
+  width: 188px;
+}
+
+body[device='tablet'] #recently_closed_list .title {
+  color: blue;
+  font-size: 12pt;
+  overflow: hidden;
+  padding-left: 2px;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+
+body[device='tablet'] #recently_closed_list .icon {
+  background-position: bottom left;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  position: relative;
+  top: -1px;
+  width: 16px;
+}

chrome/browser/resources/ntp_android/new_tab.html

+<!DOCTYPE html>
+<html i18n-values="dir:textdirection;">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <title i18n-content="title"></title>
+    <link rel="stylesheet" href="ntp_android.css">
+    <link rel="stylesheet" href="bookmarks.css">
+    <link rel="stylesheet" href="bookmarks_tablet.css">
+    <link rel="stylesheet" href="mostvisited.css">
+    <link rel="stylesheet" href="mostvisited_tablet.css">
+    <link rel="stylesheet" href="opentabs.css">
+    <link rel="stylesheet" href="opentabs_tablet.css">
+    <link rel="stylesheet" href="incognito_tab.css">
+    <!-- template data placeholder -->
+    <script src="../shared/js/cr.js"></script>
+    <script src="ntp_android.js"></script>
+    <script>
+      var MOCK = document.location.host != "newtab";
+      if (MOCK) {
+        document.write('<script src="mockdata.js"><\/script>');
+        var templateData = {
+            "title":"New Tab",
+            "mostvisited":"Most Visited",
+            "remotetabs":"Open Tabs"
+        };
+      }
+    </script>
+  </head>
+  <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize;device:device">
+    <div id="content-area" style="display:none">
+      <div class="main-section" id="open_tabs_container">
+        <div class="center-empty-container" id="sync_enable_sync" style="display: none;">
+          <div class="center-empty-content" i18n-values=".innerHTML:syncEnableSync"></div>
+        </div>
+        <div class="center-empty-container" id="sync_promo" style="display: none;">
+          <div id="promo_message_on_sync_promo_legacy" class="center-empty-content" i18n-values=".innerHTML:syncPromo"></div>
+        </div>
+        <div class="center-empty-container" id="sync_loading" style="display: none;">
+          <div class="center-empty-content" i18n-values=".innerHTML:syncLoading"></div>
+        </div>
+        <div class="page-list" id="open_tabs_list" style="display: none;"></div>
+        <div class="page-list" id="snapshots_list" style="display: none;"></div>
+        <div id="promo_message_on_open_tabs" class="promo-message" style="display: none;"></div>
+      </div>
+      <div class="main-section" id="bookmarks_container">
+        <div id="bookmarks_contents">
+          <div class="section-title-wrapper" id="bookmarks_title_wrapper">
+            <div class="section-title-mask">
+              <div class="section-title"></div>
+              <div class="overflow-left-mask"></div>
+              <div class="overflow-right-mask"></div>
+            </div>
+          </div>
+          <div class="icon-grid grid-set-top-margin grid-set-item-margins" id="bookmarks_list"></div>
+        </div>
+      </div>
+      <div class="main-section" id="most_visited_container">
+        <div class="icon-grid" id="most_visited_list"></div>
+        <div class="box-spacer"></div>
+        <div id="recently_closed_container" style="display:none;">
+          <div class="recently-closed-title-container">
+            <span class="title" i18n-content="recentlyclosed"></span>
+          </div>
+          <div class="page-list" id="recently_closed_list"></div>
+        </div>
+        <div id="promo_message_on_most_visited" class="promo-message" style="display: none;"></div>
+      </div>
+      <div class="main-section" id="incognito_container">
+        <div class="content">
+          <img src="../shared/images/otr_icon_standalone.png" class="icon"/>
+          <span i18n-values=".innerHTML:content"></span>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script src="../shared/js/i18n_template.js"></script>
+  <script>
+    i18nTemplate.process(document, templateData);
+  </script>
+</html>

chrome/browser/resources/ntp_android/ntp_android.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 {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  background: #fff;
+  font-family: Droid Sans;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 44px;
+  width: 100%;
+}
+
+.welcome-to-chrome {
+  background: url(images/welcome_thumb.png);
+}
+
+.center-empty-container {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.center-empty-content {
+  font-size: 14pt;
+  width: 275px;
+}
+
+.promo-message {
+  font-family: Arial, sans-serif;
+  font-size: 14pt;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  text-align: center;
+}
+
+.promo-sync-graphic {
+  background-image: url(images/syncfographic_mdpi.png);
+  background-repeat: no-repeat;
+  height: 130px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .promo-sync-graphic {
+    background-image: url(images/syncfographic_hdpi.png);
+    height: 195px;
+    zoom: 0.66;
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
+  .promo-sync-graphic {
+    background-image: url(images/syncfographic_xhdpi.png);
+    height: 260px;
+    zoom: 0.5;
+  }
+}

chrome/browser/resources/ntp_android/opentabs.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. */
+
+.list-item {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: 300ms linear;
+  -webkit-transition-property: background;
+  background: transparent;
+  height: 50px;
+  padding-bottom: auto;
+  padding-top: auto;
+  position: relative; /* So the fader can be positioned at the end */
+}
+
+.list-item-active,
+.session-header .list-item.list-item-active {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(51, 181, 229, 0.4);
+}
+
+.list-item-active.no-active-delay {
+  -webkit-transition: none;
+}
+
+.list-item.standard-divider {
+  border-bottom: 1px solid #c1c1c1;
+}
+
+.list-item .section-divider {
+  background-color: #777;
+  bottom: 0;
+  height: 2px;
+  position: absolute;
+  width: 100%;
+}
+
+.list-item .icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  height: 48px;
+  left: 0;
+  position: absolute;
+  width: 48px;
+}
+
+.list-item .title {
+  -webkit-box-align: center;
+  -webkit-mask-image: -webkit-gradient(
+    linear,
+    left center,
+    right center,
+    from(rgba(0,0,0,1)),
+    color-stop(0.85, rgba(0,0,0,1)),
+    color-stop(0.95, rgba(0,0,0,0)),
+    to(rgba(0,0,0,0))
+  );
+  color: #4c4c4c;
+  display: -webkit-box;
+  font-size: 16px;
+  height: 100%;
+  left: 50px;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  white-space: nowrap;
+}
+
+.session-header .list-item {
+  background: #ebebeb;
+}
+
+.title .session-name {
+  color: #4c4c4c;
+  font-weight: bold;
+}
+
+.title .session-last-synced {
+  color: #8f8f8f;
+  font-weight: bold;
+}
+
+.session-children-container {
+  -webkit-transition: height 200ms ease-in-out;
+  height: 100%; /* needed for collapse animation */
+  overflow: hidden;
+}
+
+.session-header {
+  position: relative;
+}
+
+.expando {
+  background-size: 100%;
+  height: 13px;
+  margin-top: -6.5px;
+  position: absolute;
+  right: 18.5px;
+  top: 50%;
+  width: 14px;
+}
+
+.expando.open {
+  background-image: url(images/disclosure_open_mdpi.png);
+}
+
+.expando.closed {
+  background-image: url(images/disclosure_closed_mdpi.png);
+}
+
+.session-icon.laptop {
+  background-image: url(images/laptop_mdpi.png);
+}
+
+.session-icon.tablet {
+  background-image: url(images/tablet_mdpi.png);
+}
+
+.session-icon.phone {
+  background-image: url(images/phone_mdpi.png);
+}
+
+.session-icon.documents {
+  background-image: url(images/sent_mdpi.png);
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .expando.open {
+    background-image: url(images/disclosure_open_hdpi.png);
+  }
+  .expando.closed {
+    background-image: url(images/disclosure_closed_hdpi.png);
+  }
+  .session-icon.laptop {
+    background-image: url(images/laptop_hdpi.png);
+  }
+  .session-icon.tablet {
+    background-image: url(images/tablet_hdpi.png);
+  }
+  .session-icon.phone {
+    background-image: url(images/phone_hdpi.png);
+  }
+  .session-icon.documents {
+    background-image: url(images/sent_hdpi.png);
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
+  .expando.open {
+    background-image: url(images/disclosure_open_xhdpi.png);
+  }
+  .expando.closed {
+    background-image: url(images/disclosure_closed_xhdpi.png);
+  }
+  .session-icon.laptop {
+    background-image: url(images/laptop_xhdpi.png);
+  }
+  .session-icon.tablet {
+    background-image: url(images/tablet_xhdpi.png);
+  }
+  .session-icon.phone {
+    background-image: url(images/phone_xhdpi.png);
+  }
+  .session-icon.documents {
+    background-image: url(images/sent_xhdpi.png);
+  }
+}
+
+.session-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 32px 32px;
+  height: 48px;
+  width: 48px;
+}

chrome/browser/resources/ntp_android/opentabs_tablet.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. */
+
+body[device='tablet'] #open_tabs_container {
+  padding-bottom: 40px;
+}
+
+body[device='tablet'] #open_tabs_container .page-list>div {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
+  margin: 40px auto 0 auto;
+  max-width: 550px;
+  min-width: 500px;
+}
+
+@media only screen and (min-device-width: 700px) {
+  body[device='tablet'] #open_tabs_container .page-list>div {
+    max-width: 650px;
+  }
+}
+
+body[device='tablet'] .session-children-container>div:last-child {
+  border-bottom: none;
+}
+
+body[device='tablet'] #open_tabs_container .session-header .list-item {
+  background: #F2F2F2;
+  border-bottom: 1px solid #E7E7E7;
+  color: #777;
+  font-size: 0.8em;
+  padding: 20px 0 20px 0;
+}
+
+body[device='tablet'] #open_tabs_container .list-item {
+  background: #FAFAFA;
+  border: 1px solid #E0E0E0;
+  border-bottom: none;
+}
+
+body[device='tablet'] #open_tabs_container .list-item-active,
+body[device='tablet'] #open_tabs_container .session-header
+    .list-item.list-item-active {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(51, 181, 229, 0.4);
+}
+
+body[device='tablet'] .session-name {
+  color: #333;
+  font-size: 1.1em;
+  font-weight: bold;
+  line-height: 1.8em;
+}
+
+body[device='tablet'] .session-last-synced {
+  font-weight: normal;
+}
+
+body[device='tablet'] #open_tabs_container .session-children-container
+    .list-item:first-child {
+  border-top: none;
+}

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

@@ -70,13 +70,40 @@ void NTPResourceCache::CreateNewTabHTML() {
       l10n_util::GetStringUTF16(IDS_NEW_TAB_MOST_VISITED));
   localized_strings.SetString("recentlyclosed",
       l10n_util::GetStringUTF16(IDS_NEW_TAB_RECENTLY_CLOSED));
+  localized_strings.SetString("opentabslastsynced",
+      l10n_util::GetStringUTF16(IDS_SYNC_NTP_OPEN_TABS_LAST_SYNCED));
+  localized_strings.SetString("elementopeninnewtab",
+      l10n_util::GetStringUTF16(IDS_NEW_TAB_CONTEXT_MENU_OPEN_IN_NEW_TAB));
+  localized_strings.SetString("elementopeninincognitotab",
+      l10n_util::GetStringUTF16(
+          IDS_NEW_TAB_CONTEXT_MENU_OPEN_IN_INCOGNITO_TAB));
+  localized_strings.SetString("elementremove",
+      l10n_util::GetStringUTF16(IDS_NEW_TAB_CONTEXT_MENU_REMOVE));
+  localized_strings.SetString("bookmarkedit",
+      l10n_util::GetStringUTF16(IDS_NEW_TAB_CONTEXT_MENU_EDIT_BOOKMARK));
+  localized_strings.SetString("bookmarkdelete",
+      l10n_util::GetStringUTF16(IDS_NEW_TAB_CONTEXT_MENU_DELETE_BOOKMARK));
+  localized_strings.SetString("bookmarkshortcut",
+        l10n_util::GetStringUTF16(IDS_NEW_TAB_CONTEXT_MENU_BOOKMARK_SHORTCUT));
+  localized_strings.SetString("editfolder",
+      l10n_util::GetStringUTF16(IDS_BOOKMARK_EDIT_FOLDER));
+  localized_strings.SetString("deletefolder",
+        l10n_util::GetStringUTF16(IDS_BOOKMARK_REMOVE_FOLDER));
+  localized_strings.SetString("receivedDocuments",
+      l10n_util::GetStringUTF16(IDS_RECEIVED_DOCUMENTS));
+  localized_strings.SetString("syncPromo",
+      l10n_util::GetStringUTF16(IDS_SYNC_PROMO_DESKTOP_INSTRUCTIONS));
+  localized_strings.SetString("syncEnableSync",
+      l10n_util::GetStringUTF16(IDS_SYNC_ENABLE_SYNC));
+  localized_strings.SetString("bookmarkstitle",
+      l10n_util::GetStringUTF16(IDS_ACCNAME_BOOKMARKS));
 
   NewTabPageHandler::GetLocalizedValues(profile_, &localized_strings);
 
   ChromeURLDataManager::DataSource::SetFontAndTextDirection(&localized_strings);
 
   base::StringPiece new_tab_html(ResourceBundle::GetSharedInstance().
-      GetRawDataResource(IDR_NEW_TAB_4_HTML,
+      GetRawDataResource(IDR_NEW_TAB_ANDROID_HTML,
                          ui::SCALE_FACTOR_NONE));
   localized_strings.SetString(
       "device",