Introduce the vector-body class

This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.

We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83

Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.

Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f

includes/templates/skin-legacy.mustache

@@ -32,7 +32,7 @@
 	<div id="siteNotice">{{{html-site-notice}}}</div>
 	{{>Indicators}}
 	<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
-	<div id="bodyContent">
+	<div id="bodyContent" class="vector-body">
 		{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
 		<div id="contentSub2">{{{html-undelete-link}}}</div>

includes/templates/skin.mustache

@@ -70,7 +70,7 @@
 	</header>
 	{{/is-language-in-header}}
 
-	<div id="bodyContent">
+	<div id="bodyContent" class="vector-body">
 		{{^is-language-in-header}}
 			{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
 		{{/is-language-in-header}}

resources/common/typography.less

@@ -31,13 +31,13 @@ pre,
 	.mixin-screen-reader-text;
 }
 
-/* Allow edit sections outside of mw-body-content (T160269) */
+/* Use unscoped selector to allow edit sections outside of .mw-body-content and .vector-body (T160269) */
 .mw-editsection,
 .mw-editsection-like {
 	font-family: @font-family-sans;
 }
 
-/* Main content area, including siteNotice, indicators, firstHeading and `.mw-body-content`. */
+/* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */
 .mw-body {
 	// h1's can exist outside of `.mw-body-content` so some heading styles
 	// therefore need to be defined in `.mw-body` as well.
@@ -70,7 +70,9 @@ pre,
 	}
 }
 
-.mw-body-content {
+// FIXME: [ id='bodyContent' ] selector needed for cached HTML.
+[ id='bodyContent' ],
+.vector-body {
 	font-size: @font-size-base;
 	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
 	// `calc` enables to set correct calculation in place again. See T102364.

resources/common/variables.less

@@ -132,7 +132,7 @@
 @z-index-menu-checkbox: 1;
 @z-index-search-button: 1;
 @z-index-search-loader: 1;
-// Ensure that this is displayed on top of .mw-body-content and clickable.
+// Ensure that this is displayed on top of .vector-body and clickable.
 @z-index-indicators: 1;
 // See skinStyles/jquery.ui/jquery.ui.slider.css.
 // @z-index-ui-slider-range: 1;

resources/skins.vector.styles.legacy/layouts/screen.less

@@ -58,17 +58,13 @@ body {
 	z-index: @z-index-indicators;
 }
 
-.mw-body-content {
+// FIXME: [ id='bodyContent' ] selector needed for cached HTML.
+[ id='bodyContent' ],
+.vector-body {
 	position: relative;
 	z-index: @z-index-base;
 }
 
-// FIXME: Can be removed when the `content-parser-output` feature in `skins.vector.styles.legacy`
-// is enabled. The definition in core still needs work (see T279008).
-#bodyContent {
-	.mixin-clearfix();
-}
-
 // FIXME: Temporarily disable the core rule which applies to the wrong element.
 // The definition in core still needs work (see T279008).
 .mw-parser-output:after {

resources/skins.vector.styles/components/VueEnhancedSearchBox.less

@@ -17,7 +17,7 @@
 // We have to put those styles outside `.skin-vector-search-vue`,
 // as we can't address no-JS modern and Vue enhanced otherwise.
 #p-search {
-	// Use Vector's base font-size, as this is a component outside of `.mw-body-content`.
+	// Use Vector's base font-size, as this is a component outside of `.vector-body`.
 	font-size: @font-size-base;
 	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
 	// `calc` enables to set correct calculation in place again. See T102364.

resources/skins.vector.styles/layouts/screen.less

@@ -210,8 +210,9 @@ body {
 .mw-body #p-lang-btn {
 	float: right;
 }
-
-.mw-body-content {
+// FIXME: [ id='bodyContent' ] selector needed for cached HTML.
+[ id='bodyContent' ],
+.vector-body {
 	position: relative;
 	z-index: @z-index-base;
 }