Adds a new NTP endpoint for the single frame of the fast NTP

chrome/browser/resources/local_ntp/most_visited_single.css

+/* Copyright 2015 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 {
+  -webkit-user-select: none;
+  background: none transparent;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+a {
+  display: block;
+}
+
+a,
+a:active,
+a:hover,
+a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+#most-visited {
+  -webkit-user-select: none;
+  margin: 0;
+  text-align: -webkit-center;
+}
+
+#mv-tiles,
+#mv-tiles-old {
+  -webkit-user-select: none;
+  font-size: 0;
+  height: calc(2 * 146px);
+  line-height: 146px;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  /* This align correctly for both LTR and RTL */
+  text-align: -webkit-auto;
+  transition: opacity 1s;
+}
+
+.mv-tile,
+.mv-empty-tile {
+  background: rgb(242,242,242);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  color: #323232;
+  display: inline-block;
+  font-family: arial, sans-serif;
+  font-size: 12px;
+  height: calc(130px - 2px);
+  line-height: 100%;
+  margin: 0 8px;
+  opacity: 1;
+  outline: 0;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+  white-space: nowrap;
+  width: calc(156px - 2px);
+}
+
+.mv-tile {
+  -webkit-transition-duration: 200ms;
+  -webkit-transition-property: -webkit-transform, border,
+    box-shadow, margin, opacity, width;
+  cursor: pointer;
+}
+
+.mv-tile:focus:not(:hover) {
+  -webkit-filter: brightness(75%);
+}
+
+.mv-tile.blacklisted {
+  -webkit-transform: scale(0, 0);
+  border: none;
+  margin: 0;
+  width: 0;
+}
+
+.mv-tile:hover {
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
+}
+
+.mv-tile.mv-blacklist {
+  opacity: 0;
+}
+
+.mv-tile.mv-blacklist {
+  -webkit-transform: scale(0, 0);
+  -webkit-transform-origin: 0 41px;
+  margin-left: 0;
+  margin-right: 0;
+  width: 0;
+}
+
+.mv-title {
+  -webkit-mask-image:
+    linear-gradient(to right, #000, #000, 100px, transparent);
+  border: none;
+  bottom: auto;
+  height: 15px;
+  left: 31px;
+  line-height: 14px;
+  padding: 0;
+  position: absolute;
+  text-overflow: clip;
+  top: 8px;
+  width: calc(156px - 32px - 4px);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+  .mv-title {
+    top: 8px;
+  }
+}
+
+html[dir!=rtl] .mv-title[style*='direction: rtl'] {
+  -webkit-mask-image:
+    linear-gradient(to left, black, black, 100px, transparent);
+  left: auto;
+  right: 8px;
+  text-align: right;
+}
+
+html[dir=rtl] .mv-title {
+  left: 8px;
+  text-align: left;
+}
+
+html[dir=rtl] .mv-title[style*='direction: rtl'] {
+  -webkit-mask-image:
+    linear-gradient(to left, black, black, 100px, transparent);
+  right: 31px;
+  text-align: right;
+}
+
+.mv-thumb {
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+  display: block;
+  height: 90px;
+  left: 3px;
+  position: absolute;
+  top: 31px;
+  width: 148px;
+}
+
+.mv-thumb img {
+  height: 94px;
+  width: 148px;
+}
+
+.mv-thumb.failed-img {
+  background-color: #fff;
+  height: 94px;
+  width: 148px;
+}
+
+/*
+  We use ::after without content to provide an aditional element on top of
+  the thumbnail.
+*/
+.mv-thumb.failed-img::after {
+  border: 8px solid #f2f2f2;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 0;
+  margin: 39px 66px;
+  width: 0;
+}
+
+.mv-x {
+  -webkit-transition: opacity 150ms;
+  background: linear-gradient(to left, rgb(242,242,242) 60%, transparent);
+  border: none;
+  cursor: pointer;
+  height: 30px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  width: 40px;
+}
+
+/*
+  We use ::after without content to provide the masked X element.
+  The "bottom" div is actually just the gradient.
+*/
+.mv-x::after {
+  -webkit-mask-image: -webkit-image-set(
+      url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
+      url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
+  -webkit-mask-position: 12px 10px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 10px 10px;
+  background-color: rgba(90,90,90,0.7);
+  content: '';
+  display: block;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  width: 32px;
+}
+
+html[dir=rtl] .mv-x {
+  background: linear-gradient(to right, rgb(242,242,242) 60%, transparent);
+  left: -1px;
+  right: auto;
+}
+
+html[dir=rtl] .mv-x::after {
+  left: -1px;
+  right: auto;
+}
+
+.mv-x:hover::after {
+  background-color: rgb(90,90,90);
+}
+
+.mv-x:active::after {
+  background-color: rgb(66,133,244);
+}
+
+.mv-tile:hover .mv-x {
+  -webkit-transition-delay: 500ms;
+  opacity: 1;
+}
+
+.mv-favicon {
+  background-size: 16px;
+  height: 16px;
+  left: 7px;
+  margin: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 7px;
+  width: 16px;
+}
+
+html[dir=rtl] .mv-favicon {
+  left: auto;
+  right: 7px;
+}
+
+.mv-favicon.failed-favicon {
+  background-image: -webkit-image-set(
+      url(chrome-search://local-ntp/images/ntp_default_favicon.png) 1x,
+      url(chrome-search://local-ntp/images/ntp_default_favicon.png@2x) 2x);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.mv-favicon.failed-favicon img {
+  display: none;
+}