Add a "Simplify Page" option to the print preview dialog

components/dom_distiller/core/css/distilledpageprintpreview.css

Index: components/dom_distiller/core/css/distilledpageprintpreview.css
diff --git a/components/dom_distiller/core/css/distilledpageprintpreview.css b/components/dom_distiller/core/css/distilledpageprintpreview.css
new file mode 100644
index 0000000000000000000000000000000000000000..8df30ce076c4c9bb29d3439bb150be3d6169e0de
--- /dev/null
+++ b/components/dom_distiller/core/css/distilledpageprintpreview.css
@@ -0,0 +1,315 @@
+/* Copyright 2014 The Chromium Authors. All rights reserved.

[nyquist, 2015/05/13 07:56:38]

Nit: 2015

[arjunpatel, 2015/05/27 00:16:45]

Done.

+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* Set the global 'box-sizing' state to 'border-box'.
+ * *::after and *::before used to select pseudo-elements not selectable by *. */
+
+*,

[nyquist, 2015/05/13 07:56:38]

Could we re-use the original CSS file, and instead use CSS Media Types to
separate the unwanted parts using |@media print| and |@media screen|?

[arjunpatel, 2015/05/27 00:16:45]

After recent changes, this no longer seems to be necessary, so we have removed
the custom CSS.

+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+/* Remove all margins and padding from certain element and add word wrap. */
+
+blockquote,
+body,
+caption,
+dd,
+dl,
+fieldset,
+figure,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+legend,
+ol,
+p,
+pre,
+ul,
+table,
+td,
+th {
+  margin: 0;
+  padding: 0;
+  word-wrap: break-word;
+}
+
+/* Prevent 'sub' and 'sup' affecting 'line-height'. */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Remove most spacing between table cells. */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+/* Base typography. */
+
+body,
+html {
+  font-size: 14px;
+  line-height: 1.4;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Classes for light, dark and sepia themes.
+ * Must agree with classes returned by useTheme() in dom_distiller_viewer.js
+ * and with CSS class constants in viewer.cc */
+
+.light {
+  color: #333;
+  background-color: #FFF;
+}
+
+.dark {
+  color: #FFF;
+  background-color: #000;
+}
+
+.sepia {
+  color: #000;
+  background-color: rgb(203, 173, 141);
+}
+
+.serif {
+  font-family: serif;
+}
+
+.sans-serif {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.monospace {
+  font-family: monospace;
+}
+
+/* Define vertical rhythm (baseline grid of 4px). */
+
+blockquote,
+caption,
+code,
+dd,
+dl,
+fieldset,
+figure,
+form,
+hr,
+legend,
+ol,
+p,
+pre,
+q,
+table,
+td,
+th,
+ul {
+  margin-bottom: 1rem;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.296;
+  margin-bottom: 0.444rem;
+}
+
+/* Content. */
+
+#content {
+  margin: 0.2rem;
+}
+
+/* Main margins. */
+
+body {
+  max-width: 800px;
+  margin: 0px;
+}
+
+#mainContent {
+  margin: auto 0px;
+}
+
+#articleHeader {
+  background-color: rgb(73, 73, 73);
+  color: white;
+  min-height: 90px;
+  width: 100%;
+}
+
+#titleCollapse  {
+  display: block;
+  overflow: hidden;
+}
+
+#titleCollapse .verticalCenterOuter {
+  min-height: 90px;
+}
+
+#titleHolder {
+  padding: 10px 30px;
+}
+
+.verticalCenterOuter {
+  display: table;
+  height: 100%;
+}
+
+.verticalCenterInner {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+/* Link colors for light, dark and sepia themes */
+
+a:link {
+  color: #55F;
+}
+
+a:visited {
+  color: #902290;
+}
+
+blockquote {
+  border-left: 4px solid #eee;
+  padding-left: 1em;
+}
+
+cite {
+  color: rgba(0, 0, 0, .54);
+  font-style: italic;
+}
+
+hr {
+  background-color: #e4dfdf;
+  border: none;
+  height: 1px;
+  margin: inherit auto;
+  width: 75%;
+}
+
+h1 {
+  font-size: 1.7rem;
+  line-height: 1.296;
+  margin-bottom: 0.444rem;
+}
+
+q {
+  color: #222;
+  display:block;
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 600;
+  line-height: 1.444;
+}
+
+embed,
+img,
+object,
+video {
+  max-width: 100%;
+}
+
+img {
+  display: block;
+  height: auto;
+  margin: 0 auto 0.6rem auto;
+}
+
+/* TODO(nyquist): set these classes directly in the dom distiller. */
+
+embed+[class*='caption'],
+figcaption,
+img+[class*='caption'],
+object+[class*='caption'],
+video+[class*='caption'] {
+  color: rgba(0,0,0,.54);
+  display: table;
+  font-style: italic;
+  margin: 0 auto;
+}
+
+ol,
+ul {
+  margin-left: 1.296rem;
+}
+
+.light code,
+.light pre,
+.sepia code,
+.sepia pre {
+  background-color: #f8f8f8;
+  border: 1px solid #eee;
+  border-radius: 2px;
+}
+
+.dark code,
+.dark pre {
+  background-color: #333;
+  border: 1px solid #555;
+  border-radius: 2px;
+}
+
+pre code {
+  border: none;
+  padding: 0;
+}
+
+pre {
+  line-height: 1.296;
+  overflow-x: scroll;
+  padding: .5em;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Iframe sizing. */
+.youtubeContainer {
+  height: 0px;
+  /* This is the perecnt height of a standard HD video. */
+  padding-bottom: 56.25%;
+  position: relative;
+  width: 100%;
+}
+
+.youtubeIframe {
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+}