NTP5: Improving the Tile Page resize logic

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. */
 
 /* -----------------------------------------------------------------------------
    General Styles
 ----------------------------------------------------------------------------- */
 
 body {
   background: whiteSmoke;
-  /* TODO(pedrosimonetti): Confirm with designers/engineers what do we want
-   * to do regarding font family, once AFAIK we want to use Arial always. */
-  font-family: Arial;
   margin: 0;
   overflow: hidden;
   padding: 0;
 }
 
 #card-slider-frame {
+  -webkit-transition: opacity 250ms, -webkit-transform 250ms;
   bottom: 0;
+  /* TODO(pedrosimonetti): Confirm with designers/engineers what do we want

[Dan Beam, 2012/08/28 22:55:34]

nit: missing an asterisk here

  /* Blah blah blah, look how cool this message is.
   * Man I love writing stuff in CSS. */
   ^

[pedrosimonetti2, 2012/08/28 23:04:44]

Done. I was unsure whether or not the asterisk should be used for
non-JsDoc-style comments.

+     to do regarding font family, once AFAIK we want to use Arial always. */
+  font-family: Arial;

[Dan Beam, 2012/08/28 22:55:34]

so this will not apply to NTP4, correct?

[pedrosimonetti2, 2012/08/28 23:04:44]

Correct. This stylesheet lives on the ntp_search directory and is only loaded in
the NTP5, so it does not interfere in the NTP4 behavior.

[Evan Stade, 2012/08/28 23:08:24]

I don't think that you want Arial here. We had a long design discussion in the
past to conclude that platform-specific fonts should be used. What has changed?

That said, if you do insist on arial, then you should put it on body and just
remove .style.fontFamily:fontfamily from the body tag in new_tab.html.

[pedrosimonetti2, 2012/08/28 23:47:28]

I thought we had a different conclusion. I thought the problem was using
!important, not using Arial per se.

I just confirmed with Marcin (mwichary@), one the designers leading our UX
effort, and he said that we do want to use Arial for all platforms, and of
course, the UI Leads are aware of this change. We're trying to provide a
unifying experience so we're going to use the same font on all platforms, and on
all (or at least the most important) UI elements such the Omnibox and
Suggestions.
Okay, that seems reasonable. I just did that.

[Evan Stade, 2012/08/29 21:53:01]

was there any discussion of what makes ntp5 different in this regard from ntp4,
and every other webui page in existence?

[Evan Stade, 2012/08/29 21:54:05]

note that the native omnibox and suggestions also use platform-specific fonts
and do not hardcode arial.

   overflow: hidden;
   position: absolute;
   text-align: center;
   width: 100%;
 }
 
+.hide-card-slider {
+  -webkit-transform: translate3d(0, 170px, 0);
+  opacity: 0;
+}
+
 #page-list {
   display: -webkit-box;
   position: static;
 }
 
 #page-list-menu {
   height: 14px;
   margin: 8px auto 30px;
   text-align: center;
-}
+}