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

[Dan Beam, 2013/03/21 02:45:08]

fixed !important

[jeremycho, 2013/03/21 05:28:42]

Done.

+}
+
+#most-visited {
+  -webkit-user-select: none;
+  margin-top: 60px;
+  text-align: -webkit-center;

[Dan Beam, 2013/03/21 02:45:08]

what's different about -webkit-center than center?

[jeremycho, 2013/03/21 05:28:42]

Not sure if there is a difference, though I noticed <center> elements apply
this.

+}
+
+.custom-theme .mv-title,
+.custom-theme #mv-msg {
+  color: #fff;
+  text-shadow: black 0 1px 3px;
+}
+
+.custom-theme #mv-noti-lks span {

[Dan Beam, 2013/03/21 02:45:08]

uh, what is #mv-noti-lks supposed to mean?

[jeremycho, 2013/03/21 05:28:42]

Most visited notification links.  I'd prefer to keep these names to be
consistent with the GWS code.  Left clarifications throughout.

[Dan Beam, 2013/03/22 05:37:02]

I'd rather you changed the GWS code.

[jeremycho, 2013/03/22 17:50:55]

Done.  Kept mv-x, since it really is an X button used in more than one context.

+  color: #fff;
+  text-shadow: rgb(17, 85, 204) 0 1px 3px;
+}
+
+#mv-tiles {
+  -webkit-transform: translate3d(0, 0, 0);

[Dan Beam, 2013/03/21 02:45:08]

^ what's the point of this? hacking GPU acceleration? this isn't advised, if so

[jeremycho, 2013/03/21 05:28:42]

The animation to show/hide tiles looks janky without this.

+  -webkit-transition: width 200ms;
+  height: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 304px;
+}
+
+@media only screen and (min-width:666px) {

[Dan Beam, 2013/03/21 02:45:08]

what is the significance of this number?

[jeremycho, 2013/03/21 05:28:42]

We only want to show 4 tiles if there's 100px of padding to the left and right.

+  #mv-tiles {
+    width: 466px;
+  }
+}
+
+@media only screen and (min-width:829px) {

[Dan Beam, 2013/03/21 02:45:08]

and this?

[jeremycho, 2013/03/21 05:28:42]

See above.

+  #mv-tiles {
+    width: 629px;
+  }
+}

[Dan Beam, 2013/03/21 02:45:08]

where'd all my \n's go?

[jeremycho, 2013/03/21 05:28:42]

Back!

+.mv-tile:first-child {
+  -webkit-margin-start: 0;
+}
+.mv-tile {
+  -webkit-margin-start: 20px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transition: margin 200ms;

[Dan Beam, 2013/03/21 02:45:08]

-webkit-transition-duration: 200ms; ?

[jeremycho, 2013/03/21 05:28:42]

Done.

+  -webkit-transition-property: margin, opacity, width, -webkit-transform;

[Dan Beam, 2013/03/21 02:45:08]

nit: keep these in order of declarations (i.e. -webkit-transform, margin,
opacity, width)

[jeremycho, 2013/03/21 05:28:42]

Done.

+  display: inline-block;
+  height: 85px;
+  width: 140px;
+}
+.mv-tile.mv-tile-hide {
+  -webkit-margin-end: -10px;
+  opacity: 0;
+  width: 10px;
+}
+.mv-tile.mv-bl {

[Dan Beam, 2013/03/21 02:45:08]

mv-bl is cryptic

[jeremycho, 2013/03/21 05:28:42]

Added comment.

+  -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;

[Dan Beam, 2013/03/21 02:45:08]

why does this need a pointer? generally things that should be emulating links
should actually be links so magic stuff like ctrl+click Just Works™.

[jeremycho, 2013/03/21 05:28:42]

We don't want these to have link functionality/styling, except the 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 {

[Dan Beam, 2013/03/21 02:45:08]

what does mv-x mean? close button?

[jeremycho, 2013/03/21 05:28:42]

Added comment.

+  display: none;
+}
+.mv-x {
+  background-color: transparent;
+  background-image: url('images/close_bar.png');

[Dan Beam, 2013/03/21 02:45:08]

background: transparent url(images/close_bar.png);

[jeremycho, 2013/03/21 05:28:42]

Done.

+  border: none;
+  cursor: default;

[Dan Beam, 2013/03/21 02:45:08]

^ why do you need to do this?

[jeremycho, 2013/03/21 05:28:42]

This element is nested inside .mv-page, which has cursor:pointer.

+  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');

[Dan Beam, 2013/03/21 02:45:08]

nit: same `background` shorthand nits unless there's some reason you can't...

[jeremycho, 2013/03/21 05:28:42]

Done.

+}
+.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%;

[Dan Beam, 2013/03/21 02:45:08]

^ what's the significance of this %?

[jeremycho, 2013/03/21 05:28:42]

Ah not needed anymore, now that its child element has a width.

+}
+.mv-fav {
+  bottom: -8px;
+  height: 16px;
+  left: 61px;
+  position: absolute;
+  width: 16px;
+}
+#mv-noti {
+  font: bold 12px Arial;

[Dan Beam, 2013/03/21 02:45:08]

I don't particularly like this short hand -- if the font ever changes you need
to update this (and it's semi-likely people wont notice right away)

[jeremycho, 2013/03/21 05:28:42]

Expanded.

+  padding: 10px 0;
+}
+#mv-noti span {
+  cursor: default;

[Dan Beam, 2013/03/21 02:45:08]

^ why?

[jeremycho, 2013/03/21 05:28:42]

This is text, but we don't want the text cursor.

+}
+#mv-noti-lks span {
+  -webkit-margin-start: 6px;
+  color: rgb(17, 85, 204);
+  cursor: pointer;

[Dan Beam, 2013/03/21 02:45:08]

^ why?

[jeremycho, 2013/03/21 05:28:42]

These should look like links (not using <a> to avoid having to specify href).

+  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;
+}