From e951a09913c718ba894c581a4598b6976a92c3b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Thu, 28 Sep 2017 04:23:01 +0200
Subject: [PATCH] Fix reversed nav elements when viewing cached HTML

Follow-up to 5d0a07bf9dac66a9b705865b5c675f2be960e4e6.
See T48947#3641618 for a detailed explanation of the
problem this is fixing. Essentially, our CSS has to be
compatible with both new and old HTML to avoid problems
with cached pages on Wikimedia wikis. To do this, we
add a CSS class to the body and make the new CSS only
apply on pages that have this class. This patch should
be reverted when the caches expire.

Bug: T48947
Change-Id: Icf26e6690b59f470765b2634534d18d2df25ee2a
---
 SkinVector.php               |  1 +
 components/personalMenu.less |  5 +++++
 components/tabs.less         | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/SkinVector.php b/SkinVector.php
index f684891..23dd944 100644
--- a/SkinVector.php
+++ b/SkinVector.php
@@ -47,6 +47,7 @@ class SkinVector extends SkinTemplate {
 		if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
 			$className .= ' vector-experimental-print-styles';
 		}
+		$className .= ' vector-nav-directionality';
 		return $className;
 	}
 
diff --git a/components/personalMenu.less b/components/personalMenu.less
index 979831f..a91b7b3 100644
--- a/components/personalMenu.less
+++ b/components/personalMenu.less
@@ -19,11 +19,16 @@
 
 	li {
 		line-height: 1.125em;
+		/* @noflip */
 		float: left;
 		margin-left: 0.75em;
 		margin-top: 0.5em;
 		font-size: @menu-personal-font-size;
 		white-space: nowrap;
+
+		.vector-nav-directionality & {
+			float: left;
+		}
 	}
 }
 
diff --git a/components/tabs.less b/components/tabs.less
index 211d1fd..1b78203 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -9,6 +9,7 @@ div.vectorTabs h3 {
 
 /* Namespaces and Views */
 div.vectorTabs {
+	/* @noflip */
 	float: left;
 	height: 2.5em;
 	.background-image('images/tab-break.png');
@@ -16,7 +17,12 @@ div.vectorTabs {
 	background-repeat: no-repeat;
 	padding-left: 1px;
 
+	.vector-nav-directionality & {
+		float: left;
+	}
+
 	ul {
+		/* @noflip */
 		float: left;
 		height: 100%;
 		list-style-type: none;
@@ -27,7 +33,12 @@ div.vectorTabs {
 		background-position: right bottom;
 		background-repeat: no-repeat;
 
+		.vector-nav-directionality & {
+			float: left;
+		}
+
 		li {
+			/* @noflip */
 			float: left;
 			line-height: 1.125em;
 			/* For IE6, overridden later to display:block by modern browsers */
@@ -40,6 +51,10 @@ div.vectorTabs {
 			background-position: bottom left;
 			background-repeat: repeat-x;
 			white-space: nowrap;
+
+			.vector-nav-directionality & {
+				float: left;
+			}
 		}
 
 		/* IGNORED BY IE6 which doesn't support child selector */
@@ -104,19 +119,31 @@ div.vectorTabs {
 
 		/* Ignored by IE6 which doesn't support child selector */
 		> a {
+			/* @noflip */
 			float: left;
 			display: block;
+
+			.vector-nav-directionality & {
+				float: left;
+			}
 		}
 	}
 }
 
 /* Variants and Actions */
 div.vectorMenu {
+	/* @noflip */
 	direction: ltr;
+	/* @noflip */
 	float: left;
 	cursor: pointer;
 	position: relative;
 	line-height: 1.125em;
+
+	.vector-nav-directionality & {
+		direction: ltr;
+		float: left;
+	}
 }
 
 body.rtl div.vectorMenu {
@@ -125,6 +152,7 @@ body.rtl div.vectorMenu {
 }
 
 div#mw-head div.vectorMenu h3 {
+	/* @noflip */
 	float: left;
 	.background-image('images/tab-break.png');
 	background-repeat: no-repeat;
@@ -135,6 +163,10 @@ div#mw-head div.vectorMenu h3 {
 	// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
 	padding-right: 1px;
 	margin-right: -1px;
+
+	.vector-nav-directionality & {
+		float: left;
+	}
 }
 
 div.vectorMenu h3 span {