Remove old limited width toggle

* Removes js
* Updates bottomDock style rules
* skin mustache updated
* Remove appearance feature flag - show appearance menu
to all users.

Bug: T367591
Change-Id: Ie2617e2fa83b6a888a7a2799cc39f048731dc60d

doc/configuration/configuration.md

@@ -80,12 +80,6 @@ Do not rely on any of the feature flags documented here. They should not be cons
 
   - Removal ticket: [https://phabricator.wikimedia.org/T332728](https://phabricator.wikimedia.org/T332728)
 
-- wgVectorAppearance
-
-  - Display the appearance menu inside the Vector skin.
-
-  - Removal ticket:  [https://phabricator.wikimedia.org/T345359](https://phabricator.wikimedia.org/T345359)
-
 - wgVectorLanguageInMainPageHeader
 
   - Shows language selector beside the main page title.

includes/Constants.php

@@ -253,11 +253,6 @@ final class Constants {
 	 */
 	public const PREF_KEY_APPEARANCE_PINNED = 'vector-appearance-pinned';
 
-	/**
-	 * @var string
-	 */
-	public const CONFIG_KEY_APPEARANCE = 'VectorAppearance';
-
 	/**
 	 * @var string
 	 */
@@ -307,7 +302,6 @@ final class Constants {
 	 * @var array
 	 */
 	public const VECTOR_BETA_FEATURES = [
-		self::CONFIG_KEY_APPEARANCE,
 		self::CONFIG_KEY_NIGHT_MODE,
 	];
 

includes/FeatureManagement/FeatureManagerFactory.php

@@ -265,26 +265,6 @@ class FeatureManagerFactory {
 			]
 		);
 
-		// Feature: T345363: Appearance menu
-		// ============================================
-		$featureManager->registerRequirement(
-			new OverridableConfigRequirement(
-				$config,
-				$user,
-				$request,
-				Constants::CONFIG_KEY_APPEARANCE,
-				Constants::REQUIREMENT_APPEARANCE
-			)
-		);
-
-		$featureManager->registerFeature(
-			Constants::FEATURE_APPEARANCE,
-			[
-				Constants::REQUIREMENT_FULLY_INITIALISED,
-				Constants::REQUIREMENT_APPEARANCE
-			]
-		);
-
 		// Feature: Appearance menu pinned
 		// ================================
 		$featureManager->registerRequirement(
@@ -302,7 +282,6 @@ class FeatureManagerFactory {
 			Constants::FEATURE_APPEARANCE_PINNED,
 			[
 				Constants::REQUIREMENT_FULLY_INITIALISED,
-				Constants::REQUIREMENT_APPEARANCE,
 				Constants::REQUIREMENT_APPEARANCE_PINNED
 			]
 		);

includes/Hooks.php

@@ -523,7 +523,6 @@ class Hooks implements
 		$services = MediaWikiServices::getInstance();
 		$featureManagerFactory = $services->getService( 'Vector.FeatureManagerFactory' );
 		$featureManager = $featureManagerFactory->createFeatureManager( RequestContext::getMain() );
-		$isVectorAppearanceEnabled = $featureManager->isFeatureEnabled( Constants::FEATURE_APPEARANCE );
 		$isNightModeEnabled = $featureManager->isFeatureEnabled( Constants::FEATURE_NIGHT_MODE );
 
 		$vectorPrefs = [
@@ -535,7 +534,7 @@ class Hooks implements
 				'hide-if' => [ '!==', 'skin', Constants::SKIN_NAME_MODERN ],
 			],
 			Constants::PREF_KEY_FONT_SIZE => [
-				'type' => $isVectorAppearanceEnabled ? 'select' : 'api',
+				'type' => 'select',
 				'label-message' => 'vector-feature-custom-font-size-name',
 				'section' => 'rendering/skin/skin-prefs',
 				'options-messages' => [

includes/SkinVector22.php

@@ -400,9 +400,6 @@ class SkinVector22 extends SkinMustache {
 
 		$isRegistered = $user->isRegistered();
 		$userPage = $isRegistered ? $this->buildPersonalPageItem() : [];
-		$isAppearanceEnabled = $featureManager->isFeatureEnabled(
-			Constants::FEATURE_APPEARANCE,
-		);
 
 		$components = $tocComponents + [
 			'data-add-topic-button' => $hasAddTopicButton ? new VectorComponentButton(
@@ -474,9 +471,8 @@ class SkinVector22 extends SkinMustache {
 				$this->msg( 'toolbox' )->text(),
 				VectorComponentPageTools::ID . '-dropdown',
 			),
-			'data-appearance' => $isAppearanceEnabled ?
-				new VectorComponentAppearance( $localizer, $featureManager ) : null,
-			'data-appearance-dropdown' => $isAppearanceEnabled ? new VectorComponentDropdown(
+			'data-appearance' => new VectorComponentAppearance( $localizer, $featureManager ),
+			'data-appearance-dropdown' => new VectorComponentDropdown(
 				'vector-appearance-dropdown',
 				$this->msg( 'vector-appearance-label' )->text(),
 				'',
@@ -484,7 +480,7 @@ class SkinVector22 extends SkinMustache {
 				Html::expandAttributes( [
 					'title' => $this->msg( 'vector-appearance-tooltip' ),
 				] )
-			) : null,
+			),
 			'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
 				Constants::FEATURE_STICKY_HEADER
 			) ? new VectorComponentStickyHeader(
@@ -515,20 +511,6 @@ class SkinVector22 extends SkinMustache {
 					) : null,
 				$this->isVisualEditorTabPositionFirst( $portlets[ 'data-views' ] )
 			) : null,
-			'data-vector-settings-button' => $featureManager->isFeatureEnabled(
-				Constants::FEATURE_APPEARANCE,
-			) ? null : new VectorComponentButton(
-				$this->msg( 'vector-limited-width-toggle' ),
-				$featureManager->isFeatureEnabled(
-					Constants::FEATURE_LIMITED_WIDTH
-				) ? 'fullScreen' : 'exitFullscreen',
-				null,
-				'vector-limited-width-toggle',
-				[],
-				'normal',
-				'default',
-				true
-			)
 		];
 
 		foreach ( $components as $key => $component ) {

includes/templates/skin.mustache

@@ -71,8 +71,5 @@
 </div>
 {{/data-vector-sticky-header}}
 <div class="vector-settings" id="p-dock-bottom">
-	<ul>
-		<li>
-		{{#data-vector-settings-button}}{{>Button}}{{/data-vector-settings-button}}</li>
-	</ul>
-</div>
+	<ul></ul>
+</div>

resources/skins.vector.js/bottomDock.less

@@ -14,32 +14,3 @@
 		gap: 8px 8px;
 	}
 }
-
-/**
- * Limited width toggle - a button which lets users change the layout from
- * a fixed-width content column to a layout where the content takes up the
- * full window width.
- *  FIXME: Can be removed when wgVectorAppearance has been removed.
- */
-
-// By default, toggle should be hidden unless the breakpoint below is reached.
-.vector-limited-width-toggle.cdx-button,
-.vector-limited-width-popup {
-	display: none;
-}
-
-// On pages that have $wgVectorMaxWidthOptions['exclude'] true,
-// the toggle should be hidden. This rule overrides the media query below.
-html.vector-feature-limited-width-clientpref--excluded .vector-limited-width-toggle.cdx-button {
-	display: none;
-}
-
-// Note on certain pages the control will have no effect e.g. Special:RecentChanges
-// Defining this at 1400px is a product decision so do not change it
-// (more context at https://phabricator.wikimedia.org/T326887#8540889)
-@media ( min-width: 1400px ) {
-	.vector-limited-width-toggle.cdx-button,
-	.vector-limited-width-popup {
-		display: block;
-	}
-}

resources/skins.vector.js/limitedWidthToggle.js

@@ -1,75 +0,0 @@
-const features = require( './features.js' );
-const popupNotification = require( './popupNotification.js' );
-const LIMITED_WIDTH_FEATURE_NAME = 'limited-width';
-const TOGGLE_ID = 'toggleWidth';
-
-/**
- * Sets data attribute for click tracking purposes.
- *
- * @param {HTMLElement} toggleBtn
- */
-function setDataAttribute( toggleBtn ) {
-	toggleBtn.dataset.eventName = features.isEnabled( LIMITED_WIDTH_FEATURE_NAME ) ?
-		'limited-width-toggle-off' : 'limited-width-toggle-on';
-}
-
-/**
- * Gets appropriate popup text based off the limited width feature flag
- *
- * @return {string}
- */
-function getPopupText() {
-	const label = features.isEnabled( LIMITED_WIDTH_FEATURE_NAME ) ?
-		'vector-limited-width-toggle-off-popup' : 'vector-limited-width-toggle-on-popup';
-	// possible messages:
-	// * vector-limited-width-toggle-off-popup
-	// * vector-limited-width-toggle-on-popup
-	return mw.msg( label );
-}
-
-/**
- * adds a toggle button
- */
-function init() {
-	const settings = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-settings' ) );
-	const toggle = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle' ) );
-	const toggleIcon = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle .vector-icon' ) );
-
-	if ( !settings || !toggle || !toggleIcon ) {
-		return;
-	}
-
-	setDataAttribute( toggle );
-
-	/**
-	 * @param {string} id this allows us to group notifications making sure only one is visible
-	 *  at any given time. All existing popups associated with ID will be removed.
-	 * @param {number|false} timeout
-	 */
-	const showPopup = ( id, timeout = 4000 ) => {
-		popupNotification.add( settings, getPopupText(), id, [], timeout )
-			.then( ( popupWidget ) => {
-				if ( popupWidget ) {
-					popupNotification.show( popupWidget, timeout );
-				}
-			} );
-	};
-
-	toggle.addEventListener( 'click', () => {
-		const isLimitedWidth = features.isEnabled( LIMITED_WIDTH_FEATURE_NAME );
-		const oldIcon = isLimitedWidth ? 'fullScreen' : 'exitFullscreen';
-		const newIcon = isLimitedWidth ? 'exitFullscreen' : 'fullScreen';
-
-		features.toggle( LIMITED_WIDTH_FEATURE_NAME );
-		setDataAttribute( toggle );
-		toggleIcon.classList.remove( `mw-ui-icon-wikimedia-${ oldIcon }` );
-		toggleIcon.classList.add( `mw-ui-icon-wikimedia-${ newIcon }` );
-		window.dispatchEvent( new Event( 'resize' ) );
-		if ( isLimitedWidth ) {
-			// Now is full width, show notification
-			showPopup( TOGGLE_ID );
-		}
-	} );
-}
-
-module.exports = init;

resources/skins.vector.js/skin.js

@@ -1,5 +1,4 @@
 const languageButton = require( './languageButton.js' ),
-	limitedWidthToggle = require( './limitedWidthToggle.js' ),
 	pinnableElement = require( './pinnableElement.js' ),
 	searchToggle = require( './searchToggle.js' ),
 	echo = require( './echo.js' ),
@@ -60,7 +59,6 @@ function main( window ) {
 	echo();
 	portletsManager.main();
 	watchstar();
-	limitedWidthToggle();
 	// Initialize the search toggle for the main header only. The sticky header
 	// toggle is initialized after Codex search loads.
 	const searchToggleElement = document.querySelector( '.mw-header .search-toggle' );

skin.json

@@ -416,7 +416,6 @@
 				"resources/skins.vector.js/pinnableElement.js",
 				"resources/skins.vector.js/userPreferences.js",
 				"resources/skins.vector.js/features.js",
-				"resources/skins.vector.js/limitedWidthToggle.js",
 				"resources/skins.vector.js/popupNotification.js",
 				"resources/skins.vector.js/clientPreferences.json",
 				{
@@ -629,14 +628,6 @@
 			},
 			"description": "@var array determines which pages are compatible with night mode"
 		},
-		"VectorAppearance": {
-			"value": {
-				"logged_in": false,
-				"logged_out": false,
-				"beta": true
-			},
-			"description": "@var array enables a client preferences interface."
-		},
 		"VectorSearchApiUrl": {
 			"value": "",
 			"description": "To override the default search API, set this to the URL to rest.php on another wiki. Can be used with $wgDisableTextSearch and $wgSearchForwardUrl to mimic user experience on production."