Merge "Feature flagged print styles"

SkinVector.php

@@ -40,6 +40,15 @@ class SkinVector extends SkinTemplate {
 		$this->vectorConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
 	}
 
+	/** @inheritdoc */
+	public function getPageClasses( $title ) {
+		$className = parent::getPageClasses( $title );
+		if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
+			$className .= ' vector-experimental-print-styles';
+		}
+		return $className;
+	}
+
 	/**
 	 * Enables the responsive mode
 	 */
@@ -63,6 +72,14 @@ class SkinVector extends SkinTemplate {
 			$this->enableResponsiveMode();
 		}
 
+		// Print styles are feature flagged.
+		// This flag can be removed when T169732 is resolved.
+		if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
+			// Note, when deploying (T169732) we'll want to fold the stylesheet into
+			// skins.vector.styles and remove this module altogether.
+			$out->addModuleStyles( 'skins.vector.styles.experimental.print' );
+		}
+
 		$out->addModules( 'skins.vector.js' );
 	}
 

print.less

@@ -0,0 +1,86 @@
+@pureBlack: #000;
+
+@media print {
+
+	.vector-experimental-print-styles {
+		&body {
+			padding: 10px;
+			font-family: serif;
+		}
+
+		// Normalize Blue links in the article
+		a {
+			border-bottom: 1px solid #aaa;
+		}
+
+		.firstHeading {
+			font-size: 25pt;
+			line-height: 28pt;
+			margin-bottom: 20px;
+			padding-bottom: 5px;
+		}
+
+		// Headings
+		.firstHeading,
+		h2 {
+			border-bottom: 2px solid @pureBlack;
+		}
+
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 30px 0 0;
+			font-family: sans-serif;
+		}
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			padding: 0;
+			position: relative;
+		}
+
+		h2 {
+			font-size: 18pt;
+			line-height: 24pt;
+			margin-bottom: 0.25em;
+		}
+
+		h3 {
+			font-size: 13pt;
+			line-height: 20pt;
+		}
+
+		h4,
+		h5,
+		h6 {
+			font-size: 10pt;
+			line-height: 15pt;
+		}
+
+		p {
+			font-size: 10pt;
+			line-height: 16pt;
+			margin-top: 5px;
+			text-align: justify;
+		}
+
+		blockquote {
+			border-left: 2px solid @pureBlack;
+			padding-left: 20px;
+		}
+
+		ul {
+			margin: 10px 0 0 1.6em;
+			padding: 0;
+
+			li {
+				padding: 5px 0;
+				font-size: 10pt;
+			}
+		}
+	}
+}

skin.json

@@ -48,6 +48,13 @@
 				}
 			}
 		},
+		"skins.vector.styles.experimental.print": {
+			"targets": [ "desktop", "mobile" ],
+			"position": "top",
+			"styles": [
+				"print.less"
+			]
+		},
 		"skins.vector.styles.responsive": {
 			"targets": [ "desktop", "mobile" ],
 			"position": "top",
@@ -101,6 +108,8 @@
 	"config": {
 		"VectorUseSimpleSearch": true,
 		"VectorUseIconWatch": true,
+		"@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)",
+		"VectorExperimentalPrintStyles": false,
 		"VectorResponsive": false
 	},
 	"manifest_version": 1