[NTP4] Experiment for adding Chrome Web Store link to footer.

chrome/browser/resources/ntp4/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.
  */
 
 html {
   font-family: segoe ui, arial, helvetica, sans-serif;
   font-size: 14px;
   /* It's necessary to put this here instead of in body in order to get the
      background-size of 100% to work properly */
   height: 100%;
   overflow: hidden;
 }
 
 body {
-  background-size: auto 100%;
-  margin: 0;
   /* 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;
+  background-size: auto 100%;
+  margin: 0;
 }
 
 /* [hidden] does display:none, but its priority is too low in some cases. */
 [hidden] {
   display: none !important;
 }
 
 #notification-container {
+  -webkit-transition-duration: 100ms;
+  -webkit-transition-property: opacity;
   display: block;
   margin-top: 2px;
   position: relative;
   text-align: center;
   z-index: 100;
-  -webkit-transition-duration: 100ms;
-  -webkit-transition-property: opacity;
 }
 
 #notification-container.inactive {
+  -webkit-transition-duration: 200ms;
   opacity: 0;
-  -webkit-transition-duration: 200ms;
 }
 
 #notification {
   background-color: #FFF199;
   border: 1px solid lightGrey;
   border-radius: 6px;
   color: black;
   display: inline-block;
   font-weight: bold;
   padding: 7px 15px;
 }
 
 #notification > div > div,
 #notification > div {
   display: inline-block;
 }
 
 #notification .close-button {
+  -webkit-margin-start: 0.5em;
   vertical-align: middle;
-  -webkit-margin-start: 0.5em;
 }
 
 .close-button {
   background: no-repeat;
   background-color: transparent;
   /* TODO(estade): this should animate between states. */
   background-image: url('../../../../ui/resources/close_bar.png');
   border: 0;
   cursor: default;
   display: inline-block;
   height: 16px;
   padding: 0;
   width: 16px;
 }
 
 .close-button:hover,
 .close-button:focus {
   background-image: url('../../../../ui/resources/close_bar_h.png');
 }
 
 .close-button:active {
   background-image: url('../../../../ui/resources/close_bar_p.png');
 }
 
 .linkButton {
+  -webkit-margin-start: 0.5em;
   color: #06C;
   cursor: pointer;
   display: inline-block;
   text-decoration: underline;
-  -webkit-margin-start: 0.5em;
 }
 
 #card-slider-frame {
   /* Must match #footer height. */
   bottom: 50px;
   overflow: hidden;
   /* We want this to fill the window except for the region used
      by footer */
   position: fixed;
   top: 0;
@@ skipping 42 matching lines @@
 }
 
 /* TODO(estade): remove this border hack and replace with a webkit-gradient
  * border-image on #footer once WebKit supports border-image-slice.
  * See https://bugs.webkit.org/show_bug.cgi?id=20127 */
 #footer-border {
   height: 1px;
 }
 
 #footer-content {
+  -webkit-box-align: center;
   display: -webkit-box;
   height: 49px;
-  -webkit-box-align: center;
 }
 
 #footer-content > * {
   margin: 0 9px;
 }
 
 #logo-img {
   margin-top: 4px;
 }
 
 .starting-up * {
   -webkit-transition: none !important;
 }
 
 /* Login Status. **************************************************************/
 
 #login-container {
+  -webkit-box-shadow: none;
   background: transparent none;
   border: none;
   cursor: pointer;
   font-size: 13px;
   /* Leave room for the scrollbar. */
   margin-left: 13px;
   margin-right: 13px;
   margin-top: 5px;
   padding: 0;
   position: fixed;
   right: 0;
   text-align: right;
   top: 0;
   z-index: 100;
-  -webkit-box-shadow: none;
 }
 
 html[dir='rtl'] #login-container {
   left: 0;
   right: auto;
 }
 
 .login-status-icon {
+  -webkit-padding-end: 37px;
   background-position: right center;
   background-repeat: no-repeat;
   min-height: 27px;
-  -webkit-padding-end: 37px;
 }
 
 html[dir='rtl'] .login-status-icon {
   background-position-x: left;
 }
 
 .profile-name:hover {
   text-decoration: underline;
 }
 
 .link-span {
   text-decoration: underline;
 }
 
 #login-status-bubble-contents {
   font-size: 13px;
 }
 
 #login-status-message-container {
   margin-bottom: 13px;
 }
 
 #login-status-learn-more {
   display: inline-block;
 }
 
 .login-status-row {
-  display: -webkit-box;
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
+  display: -webkit-box;
 }
 
 #login-status-advanced-container {
   -webkit-box-flex: 1;
 }
 
 #login-status-dismiss {
   min-width: 6em;
 }
 
@@ skipping 58 matching lines @@
   font-size: 8pt;
   font-weight: bold;
   pointer-events: none;
   position: absolute;
   visibility: hidden;
 }
 
 /* Page switcher buttons. *****************************************************/
 
 .page-switcher {
+  -webkit-transition: width 150ms, right 150ms, background-color 150ms;
   background-color: transparent;
   border: none;
   bottom: 0;
   font-size: 40px;
   padding: 0;
   position: absolute;
   margin: 0;
   max-width: 150px;
   min-width: 90px;
   outline: none;
   top: 0;
   z-index: 5;
-  -webkit-transition: width 150ms, right 150ms, background-color 150ms;
 }
+
+#chrome-web-store-href {
+  /* Match transition delay of recently closed button. */
+  -webkit-transition-delay: 100ms;
+  cursor: pointer;
+  display: none;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+#chrome-web-store-title {
+  -webkit-padding-start: 16px;
+  color: #7F7F7F;
+  font-weight: bold;
+  font-size: 9pt;
+  padding-bottom: 17px;
+  padding-top: 17px;
+}
+
+#chrome-web-store-title:hover {
+  color: #666;
+}
+
+#chrome-web-store-icon {
+  -webkit-padding-end: 19px;
+  -webkit-padding-start: 2px;
+  height: 24px;
+  padding-bottom: 13px;
+  padding-top: 12px;
+  width: 24px;
+}
+
+/* Show the chrome-web-store button when the experiment is turned on. */
+.enable-cws-experiment #chrome-web-store-href {
+  display: inline;
+}
+
+/* Reserve space for the menu button even when it's hidden. */
+#footer.showing-trash-mode #chrome-web-store-href {
+  visibility: hidden;
+}
+
+#footer.showing-trash-mode #chrome-web-store-href {
+  -webkit-transition-delay: 0;
+  opacity: 0;
+}