Implement local NTP for fallback.

chrome/browser/resources/local_ntp/local_ntp.css

Index: chrome/browser/resources/local_ntp/local_ntp.css
diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
new file mode 100644
index 0000000000000000000000000000000000000000..0ad7850904af5dae53318d8848ea64606594f0f1
--- /dev/null
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -0,0 +1,161 @@
+/* Copyright 2013 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 {
+  background-attachment: fixed!important
+}
+
+#most-visited {
+  -webkit-user-select: none;
+  margin-top: 60px;
+  text-align: -webkit-center;
+}
+
+.custom-theme .mv-title,
+.custom-theme #mv-msg {
+  color: #fff;
+  text-shadow: black 0 1px 3px;
+}
+
+.custom-theme #mv-noti-lks span {
+  color: #fff;
+  text-shadow: rgb(17, 85, 204) 0 1px 3px;
+}
+
+#mv-tiles {
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transition: width 200ms;
+  height: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 304px;
+}
+
+@media only screen and (min-width:666px) {
+  #mv-tiles {
+    width: 466px;
+  }
+}
+
+@media only screen and (min-width:829px) {
+  #mv-tiles {
+    width: 629px;
+  }
+}
+.mv-tile:first-child {
+  -webkit-margin-start: 0;
+}
+.mv-tile {
+  -webkit-margin-start: 20px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transition: margin 200ms;
+  -webkit-transition-property: margin, opacity, width, -webkit-transform;
+  display: inline-block;
+  height: 85px;
+  width: 140px;
+}
+.mv-tile.mv-tile-hide {
+  -webkit-margin-end: -10px;
+  opacity: 0;
+  width: 10px;
+}
+.mv-tile.mv-bl {
+  -webkit-margin-start: 0;
+  -webkit-transform: scale(0.5);
+  opacity: 0;
+  width: 0;
+}
+.mv-filler {
+   background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
+   border: 1px solid #e0e0e0;
+   border-radius: 3px;
+   box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
+}
+.mv-page {
+  background: #fff;
+  border: 1px solid #c0c0c0;
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
+  cursor: pointer;
+}
+.mv-page:hover {
+  border-color: #7f7f7f
+}
+.mv-thumb {
+  background-size: 140px 85px;
+  height: 100%;
+  width: 100%;
+}
+.mv-title {
+  bottom: -28px;
+  color: #777;
+  position: absolute;
+  width: 100%;
+}
+.mv-x-hide .mv-x {
+  display: none;
+}
+.mv-x {
+  background-color: transparent;
+  background-image: url('images/close_bar.png');

[samarth, 2013/03/18 22:09:19]

Do these images not have a 2x version for high-DPI displays?

[jeremycho, 2013/03/18 23:18:52]

They do, but the close bar IDs select the 1px version.  I'll look into this some
more, but it seems we'd have to make local copies (like in local-omnibox-popup)
if we want 2x.

+  border: none;
+  cursor: default;
+  height: 16px;
+  width: 16px;
+}
+.mv-x:hover {
+  background-color: transparent;
+  background-image: url('images/close_bar_hover.png');
+}
+.mv-x:active {
+  background-color: transparent;
+  background-image: url('images/close_bar_active.png');
+}
+.mv-page .mv-x {
+  -webkit-transition: opacity 500ms ease-in-out;
+  opacity: 0;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+}
+.mv-page:hover .mv-x {
+  -webkit-transition-delay: 500ms;
+  opacity: 1;
+}
+.mv-domain {
+  bottom: 24px;
+  color: #777;
+  margin: 0 7px;
+  position: absolute;
+  width: 88%;
+}
+.mv-fav {
+  bottom: -8px;
+  height: 16px;
+  left: 61px;
+  position: absolute;
+  width: 16px;
+}
+#mv-noti {
+  font: bold 12px Arial;
+  padding: 10px 0;
+}
+#mv-noti span {
+  cursor: default;
+}
+#mv-noti-lks span {
+  -webkit-margin-start: 6px;
+  color: rgb(17, 85, 204);
+  cursor: pointer;
+  padding: 0 4px;
+}
+#mv-noti-lks span:hover {
+  text-decoration: underline;
+}
+#mv-noti-lks .mv-x {
+  -webkit-margin-start: 8px;
+  vertical-align: top;
+}
+#mv-noti.mv-noti-hide {
+  visibility: hidden;
+}