Use a specialized new tab page in TOUCH_UI builds

chrome/browser/resources/touch_ntp/newtab.css

+/** Copyright (c) 2011 The Chromium Authors. All rights reserved.

[arv (Not doing code reviews), 2011/03/10 19:25:59]

Not JSDoc/JavaDoc

[Rick Byers, 2011/03/11 02:44:33]

Done.

+ *  Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ *
+ * This is the stylesheet used by the touch-enabled new tab page
+ */
+
+html {
+  /* It's necessary to put this here instead of in body in order to get the
+     backgrounds-size of 100% to work properly */
+  height: 100%;
+}
+
+body {
+  /* This newer linear-gradient form works on Chrome but not Safari */
+  /*background: -webkit-linear-gradient(top,#252c39,#3e485b,#252c39); */
+  background: -webkit-gradient(linear, left top, left bottom, from(#252c39),

[arv (Not doing code reviews), 2011/03/10 19:25:59]

-webkit-linear-gradient FTW

[Rick Byers, 2011/03/11 02:44:33]

I was happy for a second thinking that the just-released iOS 4.3 probably fixed
this, but I just tested and can you believe they didn't update the WebKit build
in mobile safari?  They dropped a new JS engine in, but no new webkit?  Sheesh. 
I guess I need to leave this for now to enable me to keep testing on iPad.  

Or, if you think it's worth it, I could put some code in standalone_hack.js that
overrides the style when running on Safari.  It would be a shame to have the
background definition essentially duplicated though.

[arv (Not doing code reviews), 2011/03/11 20:08:46]

I'm fine leaving the more verbose syntax in here.

How important is it to be able to test this on non Chrome browsers?

[Rick Byers, 2011/03/15 21:47:54]

Thanks.
 
It's definitely essential until we have a touch-based platform reliably running
Chrome.  Ideally I'd also like to keep it working until we have GPU acceleration
on such a device (since I can't reliably demonstrate the 'feel' of the NTP when
dragging/slidding is really janky).  We can talk off-line about what the time
frame for that might be if you like.

+              color-stop(0.5,#3e485b), to(#252c39));
+  background-size: auto 100%;
+  font-family: segoe ui, arial, helvetica, sans-serif;
+  font-size: 14px;
+  color: white;
+  margin: 0px;

[arv (Not doing code reviews), 2011/03/10 19:25:59]

s/0px/0/

[Rick Byers, 2011/03/11 02:44:33]

Done.

+  /* Don't highlight links when they're tapped.  Safari has bugs here that
+     show up as flicker when dragging in some situations */
+  -webkit-tap-highlight-color: transparent;
+  /* Don't allow selecting text - can occur when dragging */
+  -webkit-user-select: none;
+}
+
+/* The frame is what the slider fits into
+ */
+#apps-frame {
+  /* We want this to fill the window except for the region used
+     by footer
+  */
+  position: fixed;
+  width: 100%;
+  top: 0;
+  bottom: 60px;     /* must match #footer height */
+  overflow: hidden;
+}
+
+/* The list holds all the pages and is what the touch events are attached to
+*/
+#apps-page-list {
+  /* fill the apps-frame */
+  height: 100%;
+  display: -webkit-box;
+}
+
+/* The apps-page is the slider card that is moved.
+ */
+.apps-page {
+  -webkit-box-sizing: border-box;
+  padding: 29px;
+  /* TODO(rbyers): Don't want the final row centered, but would like all rows
+   * centered.  Really I want the page-content width determined by the boxes
+   * inside of it, but perhaps webkit-box doesn't support that.
+   * Note that instead of display:inline-block for the apps, I could use
+   * float:left and have a .app-container:first-child { clear:both; } rule,
+   * but I'd have to figure out some way to get the vertical position reset.
+  text-align:center; */
+}
+
+.app-container {
+  width: 128px;
+  height: 128px;
+  padding: 16px;
+  display: inline-block;
+  vertical-align: top;
+}

[arv (Not doing code reviews), 2011/03/10 19:25:59]

empty line between each rule

[Rick Byers, 2011/03/11 02:44:33]

Done.

+.app {
+  text-align: center;
+  width: 128px;
+  height: 128px;
+  /* Animate effects to/from the grabbed state, and the position when drop
+     is cancelled.  I'd like to also animate movement when an app is
+     re-positioned, but since chrome is doing the layout there is no property
+     to animate.
+     TODO(rbyers): Should we take over responsibility for app layout ourself
+     like the classic NTP's most-visited icons?  Or should we extend webkit
+     somehow to support animation of the position of browser laid-out
+     elements. */
+  -webkit-transition-property: -webkit-transform, opacity, zIndex;
+  -webkit-transition-duration: 200ms;
+  /* Don't offer the context menu on long-press. */
+  -webkit-touch-callout: none;
+  /* Work-around regression bug 74802 */
+  -webkit-transform: scale3d(1, 1, 1);
+}
+.app span {
+  text-decoration: none;
+  /* TODO(rbyers): why isn't ellipsis working? */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: white;
+}
+.app img {
+  display: block;
+  width: 96px;
+  height: 96px;
+  margin-left: auto;
+  margin-right: auto;
+  /* -webkit-mask-image set by JavaScript to the image source */
+  -webkit-mask-size: 100% 100%;
+}
+/* Pressed is set when an app is first touched.
+   By using the mask, pressing causes a darkening effect of just the image */
+.app.grabber-pressed img {
+  opacity: 0.8;
+}
+/* Grabbed is set (and pressed is cleared) when the app has been held. */
+.grabber-grabbed {
+  opacity: 0.8;
+  -webkit-transform: scale3d(1.4, 1.4, 1);
+}
+/* Dragging is set (without grabbed being cleared) when a grabbed app is
+   moved */
+.grabber-dragging {
+  /* We need to ensure there is no animation applied to its position
+    (or the drag touch may stop being over top of it */
+  -webkit-transition: none !important;
+
+  /* Ensure the element has a large z-index so that we can get events
+     for it as it moves over other elements.  This is animated as the
+     element flys back, so we want a large value that will stay large until
+     its almost home.  */
+  z-index: 100;
+}
+
+#footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  height: 60px;    /* must match #apps-frame bottom */
+  overflow: hidden;
+}
+#dot-list
+{

[arv (Not doing code reviews), 2011/03/10 19:25:59]

{ before newline

[Rick Byers, 2011/03/11 02:44:33]

Done.

+  text-align: center;
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+  list-style-type: none;
+  margin-top: 20px;
+}
+.dot {
+  display: inline-block;
+  margin: 10px;
+  width: 10px;
+  height: 10px;
+  background-color: #3d465f;
+  -webkit-box-sizing: border-box;
+  border: 1px solid black;
+  -webkit-border-radius: 2px;
+  -webkit-transition-property: width, height, margin, -webkit-transform;
+  -webkit-transition-duration: 500ms;
+  /* Work-around regression bug 74802 */
+  -webkit-transform: translate3d(0, 0, 0);
+}
+#footer.rearrange-mode .dot {
+  margin: 0px 20px;
+  width: 30px;
+  height: 30px;
+}
+.dot.selected {
+  background-color: #b3bbd3;
+}
+.dot.new {
+  -webkit-transform: translate3d(0, 40px, 0);
+}
+
+#trash {
+  position: absolute;
+  width: 110px;
+  height: 100%;
+  right: 0px;
+  bottom: 0px;
+  background-image: url('trash.png');
+  background-size: 40px 40px;
+  background-repeat: no-repeat;
+  background-position: 40px 12px;
+  /* Work-around chromium bug 74730 by using translate instead of the
+     GPU-accelerated translate3d */
+  -webkit-transform: translate(80px, 0);
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 500ms;
+}
+#trash.hover {
+  background-image: url('trash-open.png');
+}
+
+.app.trashing img {
+  opacity: 0.3;
+}
+
+#footer.rearrange-mode #trash {
+  -webkit-transform: translate(0, 0);
+}
+
+/* Ensure template items are never drawn when the page initially loads */
+#app-template {
+  display: none;
+}