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

chrome/browser/resources/ntp_search/new_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. */
+
+/* =========================================================================
+   TODO(pedrosimonetti): Work around
+   ========================================================================= */
+
+body > center {
+  height: 100%;
+  min-height: 540px;
+  position: relative;
+}
+
+#card-slider-frame {
+  bottom: 0 !important;
+  position: absolute;
+  top: inherit !important;
+}
+
+#page-switcher-start,
+#page-switcher-end {
+  display: none;
+}
+
+#footer,
+#footer-border,
+#footer-content {
+  display: none;
+}
+
+.tile-page {
+  display: block;
+}
+
+.tile-page-content {
+  padding: 57px 13% 0 13% !important;
+}
+
+#logo-img {
+  display: none;
+}
+
+#dot-list {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.dot {
+  display: inline-block;
+  max-width: 119px !important;
+}
+
+/* TODO(pedrosimonetti): Hack to make the alignment of the bottom section
+ tab titles less ugly. The problem is that the items have a fixed position
+ so "Apps" will have lots of padding compared to "Recently visited". Need
+ to find a better way to solve this problem. */
+.dot[title=Apps] input {
+  text-align: left;
+}
+
+.dot .selection-bar {
+  border: none !important;
+}
+
+.dot input {
+  color: #666 !important;
+  font-family: Arial;
+  font-size: 14px;
+  font-weight: normal;
+  text-align: center;
+}
+
+.dot.selected input {
+  color: rgb(221, 75, 57) !important;
+}
+
+.tile-page-scrollbar {
+  display: none;
+}
+
+#footer .menu-container,
+#footer #chrome-web-store-link,
+#trash {
+  display: none;
+}
+
+#page-list {
+  margin-top: 0;
+}
+
+.most-visited .color-stripe {
+  display: none;
+}
+
+.thumbnail,
+.thumbnail-shield,
+.thumbnail-wrapper {
+  border-radius: 2px !important;
+  opacity: 1 !important;
+}
+
+.thumbnail-shield {
+  display: none !important;
+}
+
+.most-visited .favicon {
+  display: none !important;
+}
+
+.tile-page-content {
+  padding: 0 !important;
+}
+
+.top-margin {
+  display: none;
+}
+
+/* =========================================================================
+   END OF Work around
+   ========================================================================= */
+
+
+
+
+
+
+
+/* -----------------------------------------------------------------------------
+   General Styles
+----------------------------------------------------------------------------- */
+
+body {
+  background: whiteSmoke;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+
+
+/* -----------------------------------------------------------------------------
+   TODO(pedrosimonetti): refactor
+----------------------------------------------------------------------------- */
+
+#page-list {
+  display: -webkit-box;
+  position: static;
+}
+
+#card-slider-frame {
+  overflow: hidden;
+}
+
+#page-list-menu {
+  margin: 8px auto 30px;
+  text-align: center;
+}
+
+#dot-list {
+  color: #666;
+  font-family: Arial;
+  font-size: 13px;
+  height: 35px;
+  list-style: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
+}
+
+/* TODO: selected class */
+#dot-list li:first-child {
+  color: rgb(221, 75, 57);
+}
+
+#dot-list li {
+  display: inline-block;
+  margin-left: 13px;
+  margin-right: 13px;
+  min-width: 55px; /* TODO: Confirm value with Marcin */
+  white-space: nowrap;
+}
+
+
+
+/* -----------------------------------------------------------------------------
+   TODO(pedrosimonetti): refactor
+----------------------------------------------------------------------------- */
+
+#card-slider-frame {
+  bottom: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.tile-page {
+  overflow: hidden;
+  position: relative;
+}
+
+.tile-page-content {
+  margin: 0 auto;
+  width: 748px; /* TODO move */
+}
+
+.tile-grid {
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+/* -----------------------------------------------------------------------------
+   New tile grid
+----------------------------------------------------------------------------- */
+
+.tile-row {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tile-cell {
+  display: inline-block;
+  position: relative;
+}
+
+.tile-cell:first-child {
+  margin-left: 0 !important;
+}
+
+
+/* -----------------------------------------------------------------------------
+   Size / Animation
+----------------------------------------------------------------------------- */
+
+#page-list {
+  -webkit-transition: all 201ms ease-in-out !important;
+  padding-bottom: 10px;
+}
+
+#card-slider-frame .tile-page-content {
+  width: 748px; /* TODO move */
+}
+
+#card-slider-frame .tile-grid {
+  -webkit-transform: translate3d(0,0,0);
+  -webkit-transition: all 201ms ease-in-out;
+  width: 732px;  /* TODO move */
+}
+
+#card-slider-frame .tile-grid-content {
+  -webkit-transform: translate3d(0,0,0);
+  -webkit-transition: all 201ms ease-in-out;
+}
+
+#card-slider-frame .tile-row {
+  -webkit-transform: translate3d(0,0,0);
+  -webkit-transition: all 201ms ease-in-out; /* change to opacity only? */
+}
+
+/* -----------------------------------------------------------------------------
+   Size / Animation
+----------------------------------------------------------------------------- */
+
+.tile-cell {
+  -webkit-transform: translate3d(0,0,0);
+  height: 80px;
+  margin-bottom: 22px;
+  margin-left: 18px;
+  width: 132px;
+}
+
+/* TODO(pedrosimonetti): we need to resize the filler child too if we want
+   its animation to be the same as a normal tile */
+.tile-cell.filler  {
+  background: -webkit-linear-gradient(rgb(242, 242, 242), rgb(232, 232, 232));
+  border-color: rgb(224, 224, 224);
+  border-radius: 3px;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
+  display: inline-block;
+  position: relative;
+  width: 132px;
+}
+
+.tile-cell .tile-content {
+  background: #fff;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
+  font: 16px Arial;
+  height: 78px;
+  text-align: center;
+  width: 130px;
+}
+
+.tile-content:hover {
+  border-color: rgb(127, 127, 127); /* TODO: confirm value with Marcin */
+}
+
+.tile-cell > div > span {
+  display: inline-block;
+  position: absolute;
+  top: 27px;
+}
+
+/* -----------------------------------------------------------------------------
+   Tile Animation
+----------------------------------------------------------------------------- */
+
+.animate-tile .tile-cell {
+  -webkit-transition: all 201ms ease-in-out, opacity 101ms ease-out;
+}
+
+.hide-col-0 .tile-col-0,

[jeremycho_google, 2012/08/02 03:00:49]

Are these column indices necessary?

[pedrosimonetti2, 2012/08/03 18:14:12]

Yes, they animate entire columns of Tiles at once. I included a comment
clarifying the purpose of this rule.

On 2012/08/02 03:00:49, jeremycho wrote:

+.hide-col-1 .tile-col-1,
+.hide-col-2 .tile-col-2,
+.hide-col-3 .tile-col-3,
+.hide-col-4 .tile-col-4,
+.hide-col-5 .tile-col-5,
+.hide-col-6 .tile-col-6,
+.hide-col-7 .tile-col-7,
+.hide-col-8 .tile-col-8,
+.hide-col-9 .tile-col-9 {
+  margin-right: -10px;
+  opacity: 0 !important;
+  width: 10px !important;
+}
+
+.hide-row {
+  opacity: 0 !important;
+}
+.hide-row .tile-cell {
+  opacity: 1 !important;
+}
+
+
+/* -----------------------------------------------------------------------------
+   Debug
+----------------------------------------------------------------------------- */
+
+.debug #card-slider-frame {
+  bottom: 0;
+  height: 95%;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+
+.debug .tile-grid {
+  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 !important;
+}
+
+.debug .hide-row .tile-cell > div {
+  background-color: lightgray !important;
+  border: 1px solid gray;
+  color: gray;
+}
+
+.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 {
+  background-color: lightgray;
+}