Update incognito and guest browsing new tab page:

chrome/browser/resources/ntp4/incognito_tab.css

 /* Copyright 2013 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 {
+  background: #fafafa !important;

[Evan Stade, 2014/04/16 22:10:57]

if you don't want to respect the theme bg color, you should just remove that
from new_incognito_tab_theme.css rather than !important-overriding it.

[edwardjung, 2014/04/17 13:07:07]

Done.

+}
+
 body {
-  margin: 10px 8px;
+  font-family: Arial, sans-serif;

[Evan Stade, 2014/04/16 22:10:57]

still need to remove this

[edwardjung, 2014/04/17 13:07:07]

Done.

+  line-height: 1.5;
+}
+
+h1 {
+  color: #000;

[Evan Stade, 2014/04/16 22:10:57]

prefer 'black'

but also, I don't think you need this at all --- black is inherited from
.content

[edwardjung, 2014/04/17 13:07:07]

Done.

+  font-size: 1.7em !important;

[Evan Stade, 2014/04/16 22:10:57]

you don't need this !important. font-size: em already changes the size relative
to what it would otherwise be.

[edwardjung, 2014/04/17 13:07:07]

Done.

+  font-weight: normal;
+  line-height: 1.2em;
+  margin: 0 0 .6em;

[Evan Stade, 2014/04/16 22:10:57]

If you made this just margin-top: 0, the only difference would be 0.07em more
margin on the bottom. Is that 0.07em important?

[edwardjung, 2014/04/17 13:07:07]

Now that we're back to the system fonts it's a tiny difference so removed.

+}
+
+a {
+  color: rgb(39, 110, 242);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+p {
+  margin: 0 0 1em;

[Evan Stade, 2014/04/16 22:10:57]

you don't need this, it doesn't do anything (default is already 1em above and
below, and stacking margins get collapsed)

[edwardjung, 2014/04/17 13:07:07]

Done.

 }
 
 .icon {
-  -webkit-margin-end: 3px;
-  -webkit-margin-start: 6px;
+  content: -webkit-image-set(
+      url('../../../browser/resources/ntp4/images/incognito_illustration_sml.png') 1x,
+      url('../../../browser/resources/ntp4/images/2x/incognito_illustration_sml.png') 2x);
+  height: 128px;
+  width: 128px;
 }
 
 html[dir='ltr'] .icon {
-  -webkit-transform: scaleX(-1);
   float: right;
+  margin: 4px 0 10px 25px;
 }
 
 html[dir='rtl'] .icon {
   float: left;
+  margin: 4px 35px 10px 0;

[Evan Stade, 2014/04/16 22:10:57]

why is this not the inverse of the ltr case?

also, you can use -webkit-margin-start: and -webkit-margin-end: so you don't
need separate rtl/ltr rules

[edwardjung, 2014/04/17 13:07:07]

My oversight. Thanks for the -webkit-margin tip. 

 }
 
 .content {
-  background-color: #eee;
-  border-radius: 5px;
+  background-color: #fff;

[Evan Stade, 2014/04/16 22:10:57]

prefer 'white'

[edwardjung, 2014/04/17 13:07:07]

Done.

+  border-radius: 2px;
+  box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
+  box-sizing: border-box;
   color: black;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 66px;
-  max-width: 600px;
-  padding: 10px;
+  line-height: 1.5;
+  margin: 5.5em auto 0;

[Evan Stade, 2014/04/16 22:10:57]

this can just be margin-top: 5.5em;

[edwardjung, 2014/04/17 13:07:07]

Without the auto left and right margins, the content container will not be
centred. I collapsed the existing margin left and right into a single
declaration. Is the general style to use individual declarations?

[Evan Stade, 2014/04/17 16:25:07]

either way is fine. I guess I prefer individual because it's easier to read (I
can never quite remember the order/rules for 3/4 margin values).

[edwardjung, 2014/04/22 14:24:35]

Good to know. Thanks

+  max-width: 640px;
+  padding: 30px 35px 30px 37px;
+  width: 100%;
 }
 
-.extensions-message {
-  -webkit-padding-start: 39px;
-  margin-top: 15px;
-  position: relative;
+.content > span {
+  display: block;
+  max-width: 416px;
 }
 
-.extension-icon {
-  content: -webkit-image-set(
-      url('../../../app/theme/default_100_percent/extensions_section.png') 1x,
-      url('../../../app/theme/default_200_percent/extensions_section.png') 2x);
-  display: inline-block;
-  left: 0;
-  margin-top: -15px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 30px;
+.content p:last-child {
+  margin-bottom: 4px;
 }
+
+@media (max-width:700px) {
+  body {
+    margin: 3em 2em 2em;
+  }
+}
+
+@media (max-width:400px) {
+  body {
+    margin: 3em 1.5em 2em;
+  }
+
+  .icon {
+    height: 96px;
+    width: 96px;
+  }
+
+  html[dir='ltr'] .icon {
+    margin: 4px 0 10px 15px;
+  }
+
+  html[dir='rtl'] .icon {
+    margin: 4px 15px 10px 0;
+  }
+}
+
+@media (max-height:480px) and (max-width:400px) {
+  .content {
+    margin: auto;
+  }
+}