Merge "Remove vector-layout-legacy styles and grid feature flag"

includes/Constants.php

@@ -211,21 +211,6 @@ final class Constants {
 	 */
 	public const WEB_AB_TEST_ARTICLE_ID_FACTORY_SERVICE = 'WikimediaEvents.WebABTestArticleIdFactory';
 
-	/**
-	 * @var string
-	 */
-	public const CONFIG_GRID = 'VectorGrid';
-
-	/**
-	 * @var string
-	 */
-	public const REQUIREMENT_GRID = 'Grid';
-
-	/**
-	 * @var string
-	 */
-	public const FEATURE_GRID = 'Grid';
-
 	/**
 	 * This class is for namespacing constants only. Forbid construction.
 	 * @throws FatalError

includes/ServiceWiring.php

@@ -186,29 +186,6 @@ return [
 			]
 		);
 
-		// Feature: Grid
-		// ================================
-		$featureManager->registerRequirement(
-			new OverridableConfigRequirement(
-				$services->getMainConfig(),
-				$context->getUser(),
-				$context->getRequest(),
-				null,
-				Constants::CONFIG_GRID,
-				Constants::REQUIREMENT_GRID
-			)
-		);
-
-		// Requires title above tabs to be enabled to simplify the
-		// number of variants it needs to consider.
-		$featureManager->registerFeature(
-			Constants::FEATURE_GRID,
-			[
-				Constants::REQUIREMENT_FULLY_INITIALISED,
-				Constants::REQUIREMENT_GRID,
-			]
-		);
-
 		return $featureManager;
 	}
 ];

includes/SkinVector22.php

@@ -164,14 +164,9 @@ class SkinVector22 extends SkinVector {
 		}
 		$parentData = $this->mergeViewOverflowIntoActions( $parentData );
 
-		$isGrid = $featureManager->isFeatureEnabled(
-			Constants::FEATURE_GRID
-		);
 		return array_merge( $parentData, [
 			// Cast empty string to null
 			'html-subtitle' => $parentData['html-subtitle'] === '' ? null : $parentData['html-subtitle'],
-			'is-vector-grid' => $isGrid,
-			'vector-layout-class' => $isGrid ? 'vector-layout-grid vector-toc-visible' : 'vector-layout-legacy',
 			'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
 				Constants::FEATURE_STICKY_HEADER
 			) ? $this->getStickyHeaderData(

includes/templates/skin.mustache

@@ -30,42 +30,30 @@
 	object data-portlets-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
 }}
-<div class="mw-page-container {{vector-layout-class}}">
+<div class="mw-page-container vector-layout-grid">
 	<span id="top-page"></span>
 	<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
-	<div class="mw-page-container-inner {{#data-toc}} vector-toc-visible{{/data-toc}}">
+	<div class="mw-page-container-inner">
-
+		<input
-<input
 			type="checkbox"
 			id="mw-sidebar-checkbox"
 			class="mw-checkbox-hack-checkbox"
 			{{#sidebar-visible}}checked{{/sidebar-visible}}>
-
+		{{>Header}}
-{{>Header}}
+		<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
-
-<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
-	{{#data-toc}}{{^is-vector-grid}}
-	<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
-	{{/is-vector-grid}}{{/data-toc}}
 			<div id="mw-navigation">
 				{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
 			</div>
-	{{^is-vector-grid}}
+		</div>
+		<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
 		{{>TableOfContentsContainer}}
-	{{/is-vector-grid}}
+		<div id="siteNotice">{{{html-site-notice}}}</div>
-{{#is-vector-grid}}</div>
+		<div class="mw-content-container">
-<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
+			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
-{{>TableOfContentsContainer}}
+			<main id="content" class="mw-body" role="main">
-{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
-<div id="siteNotice">{{{html-site-notice}}}</div>
-<div class="mw-content-container">
-{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
-<main id="content" class="mw-body" role="main">
 				<a id="top"></a>
-
 				{{>ContentHeader}}
 				{{>ArticleToolbar}}
-
 				<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
 					{{>ContentSubheader}}
 					{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
@@ -74,21 +62,15 @@
 					{{{html-body-content}}}
 					{{{html-categories}}}
 				</div>
-
 				{{#is-language-in-content-bottom}}
 				{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
 				{{/is-language-in-content-bottom}}
-
+			</main>
-</main>
+			{{{html-after-content}}}
-{{{html-after-content}}}
+		</div>
-	</div> {{! END mw-content-container }}
+		<div class="mw-workspace-container mw-footer-container">
-{{^is-vector-grid}}</div>{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
-
-<div class="mw-workspace-container mw-footer-container">
-	{{^is-vector-grid}}<div class="mw-content-container">{{/is-vector-grid}}
 			{{#data-footer}}{{>Footer}}{{/data-footer}}
-	{{^is-vector-grid}}</div>{{/is-vector-grid}}
+		</div>
-</div>
 	</div> {{! END mw-page-container-inner }}
 </div> {{! END mw-page-container }}
 {{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}

resources/common/variables.less

@@ -84,6 +84,9 @@
 @padding-blockquote: 8px 32px;
 @border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
 
+@background-color-secondary--modern: #f8f9fa;
+@background-color-page-container: @background-color-base;
+
 // Navigation
 @background-color-secondary: #f6f6f6;
 @color-nav-subtle: #444;

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

@@ -6,8 +6,6 @@
 // T305069 Layout adjustments of sidebar elements:
 // Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
 @margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
-// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
-@margin-top-sidebar-toc_title_inline: 3.5em;
 // Default spacing separating the sidebar TOC from the main menu or viewport.
 @margin-top-sidebar-toc: 1.5em;
 
@@ -65,23 +63,6 @@
 	}
 }
 
-.vector-layout-legacy {
-	.sidebar-toc {
-		// Main menu is closed
-		margin-top: @margin-top-sidebar-toc_title_inline;
-	}
-
-	@{selector-workspace-container-sidebar-open} .sidebar-toc {
-		// Main menu is open
-		margin-top: @margin-top-sidebar-toc;
-	}
-
-	.vector-sticky-header-visible & .sidebar-toc {
-		// Sticky header is visible
-		margin-top: @margin-top-sidebar-toc;
-	}
-}
-
 .mw-sidebar-action {
 	// Align with the portal heading/links
 	// `.portal` + `.portal .body`
@@ -141,12 +122,16 @@
 	}
 }
 
-// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
+// Hide sidebar entirely when the checkbox is disabled
-// checkbox input for the menu panel.
 @{selector-workspace-container-sidebar-closed} .mw-sidebar {
-	// Turn off presentation so that screen readers get the same effect as visually hiding.
+	display: none;
-	// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
+}
-	// instead to avoid hidden rendering.
+
-	visibility: hidden;
+/**
-	opacity: 0;
+ * Makes the sidebar full screen at lower resolutions.
+ */
+@media ( max-width: @max-width-tablet ) {
+	.mw-sidebar {
+		width: 100%;
+	}
 }

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

@@ -10,62 +10,22 @@
 
 @selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
 @selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
-@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container';
 @selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
 
-// Sidebar
-@width-grid-column-one: 11em;
-
-// Adjust the left position of the sidebar to align it with the sidebar menu button,
-// in the header, while ensuring the background gradient still extends to the edge of the screen.
-// note: the 1px comes from the transparent border of the sidebar button.
-@padding-left-sidebar:
-	@margin-horizontal-sidebar-button-icon +
-	unit( @border-width-base / @font-size-browser, em );
-
-// Layout containers
-
-// Page container
-
-@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
-
 // Content container
 
-@max-width-workspace-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
-
 // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
 // see T259331.
 @padding-content: @padding-top-content @padding-horizontal-content 1.5em;
-// We want ~60px of space between the end of the sidebar and the start of the
-// content container for aesthetic reasons. The sidebar is already displaced
-// -30px so we simply add 30px of space to the width of the sidebar.
-@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
-
-// Tabs
-
-@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
 
 // Breakpoints
 
-// This determines the maximum width breakpoint at which
-// the content will have a fixed start margin applied to it when the sidebar
-// is open. The content can shift its position when the sidebar is open/closed
-// at or below this breakpoint and will maintain its position above this breakpoint.
-@max-width-margin-start-content:
-	(2 * @margin-start-content ) +
-	( 2 * @padding-horizontal-page-container ) +
-	@max-width-content-container;
-// 23em + 3.75em + 60em = 86.75em @ 16
-
 // Defines the minimum viewport width, at which point the layout will not get any
 // smaller and will start horizontal scrolling instead.
 @min-width-supported:
 	unit( 500px / @font-size-browser, em ) -
 	( 2 * @padding-horizontal-page-container-wide );
 // 31.25em - 3.75em = 27.5em @ 16
-@background-color-secondary--modern: #f8f9fa;
-@border-color-sidebar: #f8f9fa;
-@background-color-page-container: @background-color-base;
 
 body {
 	background-color: @background-color-secondary--modern;
@@ -77,10 +37,6 @@ body {
 .mw-body,
 .parsoid-body {
 	direction: ltr;
-
-	.vector-layout-legacy & {
-		padding: @padding-content;
-	}
 }
 
 .mw-body {
@@ -142,23 +98,6 @@ body {
 	}
 }
 
-/* Navigation Containers */
-.vector-layout-legacy .mw-article-toolbar-container {
-	// Clear the floats on #left-navigation and #right-navigation.
-	.mixin-clearfix();
-	// We want to keep the max-width of the article-toolbar-container the
-	// same max-width as the article page's content container in order to
-	// prevent it from moving when going from an article page to a
-	// history/special page.
-	max-width: @max-width-content-container;
-	margin-left: auto;
-	margin-right: auto;
-
-	.skin-vector-disable-max-width & {
-		max-width: none;
-	}
-}
-
 #left-navigation {
 	float: left;
 	margin-left: -@padding-horizontal-tabs;
@@ -175,45 +114,12 @@ body {
 	}
 }
 
-.vector-layout-legacy #mw-panel {
-	position: static;
-	top: 0;
-	float: none;
-	// Sidebar is displaced from the workspace container so that the
-	// sidebar is flush with the edge of the screen at small widths.
-	left: -@padding-horizontal-page-container;
-	z-index: @z-index-sidebar;
-
-	@media ( min-width: @min-width-desktop-wide ) {
-		left: -@padding-horizontal-page-container-wide;
-	}
-}
-
-// Add float at higher resolutions
-@media ( min-width: @min-width-desktop ) {
-	.vector-layout-legacy #mw-panel {
-		float: left;
-	}
-}
-
 .mw-table-of-contents-container {
 	// stylelint-disable-next-line plugin/no-unsupported-browser-features
 	position: sticky;
 	top: 0;
 	// Needed for Grid-based layout
 	align-self: start;
-
-	.vector-layout-legacy & {
-		float: left;
-		clear: both;
-		// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
-		// we account for the TOC's top margin
-		top: ~'calc( 1.5em - @{margin-top-sidebar-toc_title_inline} )'; // top: -2em
-	}
-	.vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
-		// When main menu is open the TOC's top margin is reduced
-		top: ~'calc( 1.5em - @{margin-top-sidebar-toc} )'; // top: 0
-	}
 }
 
 .parsoid-body {
@@ -262,137 +168,4 @@ body {
 	min-width: auto;
 }
 
-// Used as a container for absolutely positioned elements.
-.mw-page-container-inner {
-	position: relative;
-}
-
-.mw-workspace-container {
-	// The sidebar is absolutely positioned relative to the
-	// mw-workspace-container.
-	position: relative;
-
-	.vector-layout-legacy & {
-		max-width: @max-width-workspace-container;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	&.mw-footer-container {
-		// T264679: There are elements (e.g. discussion tool popovers) in the main
-		// content container that we want to appear on top of the footer. We set the
-		// footer container to have static positioning instead of relative
-		// positioning (applied by .mw-workspace-container) to enable this.
-		position: static;
-	}
-}
-
-.mw-content-container {
-	.vector-layout-legacy & {
-		max-width: @max-width-content-container;
-		display: flow-root;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	// For container logic specific to special pages and history pages.
-	.skin-vector-disable-max-width & {
-		// Allow the max-width of content on history/special pages to be wider than
-		// the max-width of content on article pages.
-		// Note, we don't disable the max-width on .mw-article-toolbar-container intentionally
-		// to support easier navigation between tabs.
-		// See T293441 for further information on that.
-		max-width: none;
-	}
-}
-
-.vector-layout-legacy .mw-footer-container {
-	padding-top: 50px;
-	padding-bottom: 82px;
-}
-
-// Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
-@{selector-workspace-container-sidebar-closed} .mw-sidebar {
-	display: none;
-}
-
-// Responsive overrides.
-@media ( min-width: @min-width-page-container--padded ) {
-	.mw-page-container {
-		border-left: @border-width-base @border-style-base @border-color-sidebar;
-		border-right: @border-width-base @border-style-base @border-color-sidebar;
-	}
-}
-
-// Adjusts the content when sidebar is open regardless of the viewport width.
-.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
-	// For container logic specific to special pages and history pages.
-	.skin-vector-disable-max-width & {
-		margin-left: @margin-start-content;
-	}
-}
-
-@media ( max-width: @max-width-margin-start-content ) {
-	// Increase margin to account for TOC
-	.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
-		margin-left: @margin-toc-start-content;
-	}
-
-	// Specificity needed to disable the default animations at lower resolutions.
-	.vector-animations-ready .mw-sidebar {
-		// Remove sidebar transition at smaller widths.
-		transition: none;
-	}
-}
-
-// Cannot use display: none on legacy TOC because it needs to be accessible
-// to scrollObserver for the TOC A/B test (T303297)
-// Instead we hide the contents of the legacy TOC and reset it's styles
-// See I3f247730fa1c399e6d2e4d866677703fc24e8c58
-.skin-vector-toc-experiment-treatment #toc {
-	padding: 0;
-	border: 0;
-}
-
-.skin-vector-toc-experiment-treatment #toc > * {
-	display: none;
-}
-
-// Update article page's content container when
-// TOC is visible and when TOC is enabled and the sidebar is open.
-//
-// T306366: When the TOC AB test is enabled, both the old and new TOC are in the
-// HTML but only one is actually visible. Prevent the left margin from undesirably
-// applying if bucketed into the control or unsampled groups which won't show
-// the new TOC.
-.skin-vector-disable-max-width .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
-body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled )  .vector-layout-legacy .vector-toc-visible .mw-workspace-container .mw-content-container,
-.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
-	@media ( min-width: @min-width-desktop ) {
-		margin-left: @margin-toc-start-content;
-	}
-
-	@media ( min-width: @min-width-desktop-wide ) {
-		margin-left: @margin-toc-start-content-wide;
-	}
-}
-
-/**
- * Makes the sidebar full screen at lower resolutions.
- */
-@media ( max-width: @max-width-tablet ) {
-	@{selector-workspace-container-sidebar-open} {
-		#mw-panel {
-			width: 100%;
-		}
-
-		// !important as we always want to disable the margin-left on these elements
-		// Using !important is cleaner than having to rely on specificity involved :checked elements
-		.mw-content-container {
-			// stylelint-disable-next-line declaration-no-important
-			margin-left: 0 !important;
-		}
-	}
-}
-
 @import 'grid.less';

skin.json

@@ -537,10 +537,6 @@
 		"VectorTableOfContentsCollapseAtCount": {
 			"value": 20,
 			"description": "@var The minimum number of headings required to collapse all headings in the sticky table of contents by default."
-		},
-		"VectorGrid": {
-			"value": true,
-			"description": "@var boolean `VectorGrid` enforces a grid system"
 		}
 	},
 	"ServiceWiringFiles": [