Refactoring NTP5: new implementation of TilePage and MostVisitedPage (which now inherits from Thumb…

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 #card-slider-frame {
+  bottom: 0;
+  position: absolute;
+  top: inherit;
+}
+
+#ntp5 .dot .selection-bar,
+#ntp5 .tile-page-scrollbar,
+#ntp5 .top-margin,
+#ntp5 #footer,
+#ntp5 #page-switcher-start,
+#ntp5 #page-switcher-end {
+  display: none;
+}
+
+#ntp5 .tile-page {
+  display: block;
+}
+
+#ntp5 #dot-list {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+#ntp5 .dot {
+  display: inline-block;
+  max-width: 119px;
+}
+
+#ntp5 .dot input {
+  color: #666;
+  font-size: 1.1667em;
+  font-weight: normal;
+  text-align: center;
+}
+
+#ntp5 #dot-list .dot.selected input {
+  color: rgb(221, 75, 57);
+}
+
+#ntp5 #page-list {
+  margin-top: 0;
+  padding-bottom: 0;
+}
+
+#ntp5 .thumbnail-image {
+  border-radius: 2px;
+  opacity: 1;
+}
+
+#ntp5 .tile-page-content {
+  padding: 0;
+}
+
+#ntp5 #notification-container {
+  bottom: inherit;
+}
+
+body.bare-minimum#ntp5 #dot-list {
+  visibility: visible;
+}
+
+/* =========================================================================
+   End of work around
+   ========================================================================= */
+
+/* -----------------------------------------------------------------------------
+   Debug
+----------------------------------------------------------------------------- */
+
+.debug #card-slider-frame {
+  bottom: 0;
+  height: 95%;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.debug #page-list {
+  height: 100% !important;
+}
+
+.debug .animate-tile .tile-cell {
+  -webkit-transition: all 201ms ease-in-out;
+}
+
+.debug #page-list-menu {
+  background: rgb(255, 170, 255);
+}
+
+.debug .tile-page-content {
+  background: rgb(119, 255, 255);
+}
+
+.debug .tile-row {
+  background: rgb(255, 255, 119);
+}
+
+.debug .hide-row {
+  opacity: 0.35;
+}
+
+.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;
+}