From f400fc57c3afc15aa11057eb7d8b1b0228c5a754 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Wed, 1 Apr 2020 21:02:17 -0700
Subject: [PATCH] Move indicators underneath `#firstHeading` in DOM

Adding `margin-top` property only with sibling selector for now
until cache is cleared.
Also removing already inherited from
`.mw-body-content` properties `position`,
`font-size` and `line-height` of same value.

Bug: T248761
Change-Id: I1ea5e08927a96ac69c1b65f248ae0420968b4d00
---
 includes/VectorTemplate.php               |  2 +-
 includes/templates/index.mustache         |  2 +-
 includes/templates/legacy.mustache        |  2 +-
 resources/skins.vector.styles/common.less | 27 +++++++++++++----------
 variables.less                            |  2 ++
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php
index 75eeabc..5a95614 100644
--- a/includes/VectorTemplate.php
+++ b/includes/VectorTemplate.php
@@ -138,7 +138,6 @@ class VectorTemplate extends BaseTemplate {
 		$commonSkinData = [
 			'html-headelement' => $this->get( 'headelement', '' ),
 			'html-sitenotice' => $this->get( 'sitenotice', null ),
-			'html-indicators' => $this->getIndicators(),
 			'page-langcode' => $this->getSkin()->getTitle()->getPageViewLanguage()->getHtmlCode(),
 			'page-isarticle' => (bool)$this->get( 'isarticle' ),
 
@@ -152,6 +151,7 @@ class VectorTemplate extends BaseTemplate {
 			'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
 			// From OutputPage::getSubtitle()
 			'html-subtitle' => $this->get( 'subtitle', '' ),
+			'html-indicators' => $this->getIndicators(),
 
 			// TODO: Use directly Skin::getUndeleteLink() directly.
 			// Always returns string, cast to null if empty.
diff --git a/includes/templates/index.mustache b/includes/templates/index.mustache
index ac3d218..53c361d 100644
--- a/includes/templates/index.mustache
+++ b/includes/templates/index.mustache
@@ -40,8 +40,8 @@
 <div id="content" class="mw-body" role="main">
 	<a id="top"></a>
 	{{#html-sitenotice}}<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>{{/html-sitenotice}}
-	{{{html-indicators}}}
 	<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
+	{{{html-indicators}}}
 	{{{html-prebodyhtml}}}
 	<div id="bodyContent" class="mw-body-content">
 		{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
diff --git a/includes/templates/legacy.mustache b/includes/templates/legacy.mustache
index ac3d218..53c361d 100644
--- a/includes/templates/legacy.mustache
+++ b/includes/templates/legacy.mustache
@@ -40,8 +40,8 @@
 <div id="content" class="mw-body" role="main">
 	<a id="top"></a>
 	{{#html-sitenotice}}<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>{{/html-sitenotice}}
-	{{{html-indicators}}}
 	<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
+	{{{html-indicators}}}
 	{{{html-prebodyhtml}}}
 	<div id="bodyContent" class="mw-body-content">
 		{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less
index fddb9b9..979a73b 100644
--- a/resources/skins.vector.styles/common.less
+++ b/resources/skins.vector.styles/common.less
@@ -79,18 +79,6 @@ body {
 		/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
 		overflow: visible;
 	}
-
-	.mw-indicators {
-		float: right;
-		font-size: @font-size-base;
-		line-height: @line-height-base;
-		position: relative;
-		z-index: @z-index-indicators;
-	}
-
-	.mw-indicator {
-		display: inline-block;
-	}
 }
 
 .mw-body-content {
@@ -172,6 +160,21 @@ pre,
 	font-size: @font-size-site-notice;
 }
 
+.mw-indicators {
+	float: right;
+	z-index: @z-index-indicators;
+
+	// FIXME: Delete in 2 weeks time from when this comment was added
+	// and merge #firstHeading .mw-indicator rule into above, see T248761
+	#firstHeading + & {
+		margin-top: @margin-top-indicators;
+	}
+}
+
+.mw-indicator {
+	display: inline-block;
+}
+
 .mw-jump-link:not( :focus ) {
 	.mixin-screen-reader-text;
 }
diff --git a/variables.less b/variables.less
index c44c3f7..05aa508 100644
--- a/variables.less
+++ b/variables.less
@@ -98,6 +98,8 @@
 // Using `unit()` without second parameter to achieve a unitless output for `line-height`.
 @line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
 
+@margin-top-indicators: -( 38 / @font-size-browser / @font-size-base );
+
 // Tabs
 @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.