diff --git a/i18n/en.json b/i18n/en.json
index b19b35103..75c27eed0 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -11,8 +11,10 @@
"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
"vector-action-toggle-sidebar": "Toggle sidebar",
+ "vector-languages": "Languages",
"vector-language-button-aria-label": "Go to an article in another language. Available in {{PLURAL:$1|$1 language|$1 languages}}",
"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
+ "vector-language-redirect-to-top": "On this Wikipedia the language links are at the top of the page across from the article title. [[#p-lang-btn|Go to top]].",
"vector-language-variant-switcher-label": "Change language variant",
"vector-action-addsection": "Add topic",
"vector-action-delete": "Delete",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 788841faf..c0523f68e 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -23,8 +23,10 @@
"vector.css": "{{optional}}",
"vector.js": "{{optional}}",
"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
+ "vector-languages": "Label for language alert in sidebar when language switching is in header",
"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
+ "vector-language-redirect-to-top": "Explains language links location at top of page and provides link to top",
"vector-language-variant-switcher-label": "Label for the language variant switcher.",
"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
diff --git a/includes/Constants.php b/includes/Constants.php
index 4f33181ba..bae1c6315 100644
--- a/includes/Constants.php
+++ b/includes/Constants.php
@@ -276,6 +276,26 @@ final class Constants {
*/
public const FEATURE_LANGUAGE_IN_MAIN_PAGE_HEADER = 'LanguageInMainPageHeader';
+ /**
+ * @var string
+ */
+ public const REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
+
+ /**
+ * @var string
+ */
+ public const CONFIG_LANGUAGE_ALERT_IN_SIDEBAR = 'VectorLanguageAlertInSidebar';
+
+ /**
+ * @var string
+ */
+ public const QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR = 'languagealertinsidebar';
+
+ /**
+ * @var string
+ */
+ public const FEATURE_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
+
/**
* This class is for namespacing constants only. Forbid construction.
* @throws FatalError
diff --git a/includes/ServiceWiring.php b/includes/ServiceWiring.php
index f17ba5bcd..ab9e243ce 100644
--- a/includes/ServiceWiring.php
+++ b/includes/ServiceWiring.php
@@ -166,6 +166,31 @@ return [
]
);
+ // Feature: T295555: Language switch alert in sidebar
+ // ================================
+ $featureManager->registerRequirement(
+ new OverridableConfigRequirement(
+ $services->getMainConfig(),
+ $context->getUser(),
+ $context->getRequest(),
+ null,
+ Constants::CONFIG_LANGUAGE_ALERT_IN_SIDEBAR,
+ Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR,
+ Constants::QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR,
+ null
+ )
+ );
+
+ $featureManager->registerFeature(
+ Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR,
+ [
+ Constants::REQUIREMENT_FULLY_INITIALISED,
+ Constants::REQUIREMENT_LATEST_SKIN_VERSION,
+ Constants::REQUIREMENT_LANGUAGE_IN_HEADER,
+ Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR
+ ]
+ );
+
// Feature: Use Wvui Search
// ================================
$featureManager->registerRequirement(
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 2194346b1..865e95571 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -430,6 +430,40 @@ class SkinVector extends SkinMustache {
];
}
+ /**
+ * Generate data needed to create SidebarAction item.
+ * @param array $htmlData data to make a link or raw html
+ * @param array $headingOptions optional heading for the html
+ * @return array keyed data for the SidebarAction template
+ */
+ private function makeSidebarActionData( array $htmlData = [], array $headingOptions = [] ): array {
+ $htmlContent = '';
+ // Populates the sidebar as a standalone link or custom html.
+ if ( array_key_exists( 'link', $htmlData ) ) {
+ $htmlContent = $this->makeLink( 'link', $htmlData['link'] );
+ } elseif ( array_key_exists( 'html-content', $htmlData ) ) {
+ $htmlContent = $htmlData['html-content'];
+ }
+
+ $htmlClasses = array_key_exists( 'html-class', $htmlData )
+ ? [ 'html-class' => $htmlData['html-class'] ]
+ : [];
+
+ return $headingOptions + $htmlClasses + [
+ 'html-content' => $htmlContent,
+ ];
+ }
+
+ /**
+ * Determines if the language switching alert box should be in the sidebar.
+ *
+ * @return bool
+ */
+ private function shouldLanguageAlertBeInSidebar(): bool {
+ $featureManager = VectorServices::getFeatureManager();
+ return $featureManager->isFeatureEnabled( Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR );
+ }
+
/**
* @inheritDoc
*/
@@ -492,13 +526,24 @@ class SkinVector extends SkinMustache {
if ( $skin->getUser()->isRegistered() ) {
// Note: This data is also passed to legacy template where it is unused.
- $commonSkinData['data-emphasized-sidebar-action'] = [
+ $optOutUrl = [
+ 'text' => $this->msg( 'vector-opt-out' )->text(),
'href' => SpecialPage::getTitleFor(
'Preferences',
false,
'mw-prefsection-rendering-skin-skin-prefs'
)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
+ 'title' => $this->msg( 'vector-opt-out-tooltip' )->text(),
+ 'active' => false,
];
+ $htmlData = [
+ 'link' => $optOutUrl,
+ 'html-class' => [ 'link-only' ],
+ ];
+ $commonSkinData['data-emphasized-sidebar-action'][] = $this->makeSidebarActionData(
+ $htmlData,
+ []
+ );
}
if ( !$this->isLegacy() ) {
@@ -507,6 +552,21 @@ class SkinVector extends SkinMustache {
$commonSkinData['is-anon'],
$commonSkinData['data-search-box']
);
+
+ // T295555 Add language switch alert message temporarily (to be removed).
+ if ( $this->shouldLanguageAlertBeInSidebar() && !$parentData['is-mainpage'] ) {
+ $languageSwitchAlert = [
+ 'html-content' => $this->msg( 'vector-language-redirect-to-top' )->parse(),
+ 'html-class' => [ 'messagebox' ],
+ ];
+ $headingOptions = [
+ 'heading' => $this->msg( 'vector-languages' )->plain(),
+ ];
+ $commonSkinData['data-vector-language-switch-alert'][] = $this->makeSidebarActionData(
+ $languageSwitchAlert,
+ $headingOptions
+ );
+ }
}
return $commonSkinData;
diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache
index 635872be2..d3394af12 100644
--- a/includes/templates/Sidebar.mustache
+++ b/includes/templates/Sidebar.mustache
@@ -11,14 +11,11 @@
diff --git a/includes/templates/SidebarAction.mustache b/includes/templates/SidebarAction.mustache
new file mode 100644
index 000000000..e45b8e091
--- /dev/null
+++ b/includes/templates/SidebarAction.mustache
@@ -0,0 +1,9 @@
+{{! `heading` is optional. }}
+
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index cde6c9634..630449ed1 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -8,11 +8,36 @@
// Align with the portal heading/links
// `.portal` + `.portal .body`
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
-}
-.mw-sidebar-action-link {
- font-size: @font-size-portal-list-item;
- font-weight: bold;
+ // Styles for SidebarAction template.
+ .mw-sidebar-action-item {
+ h3.mw-sidebar-action-heading {
+ display: block;
+ background-image: url( ../common/images/portal-separator.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
+ background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
+ background-position: center bottom;
+ background-repeat: no-repeat;
+ background-size: 100% @border-width-base;
+ color: @color-base--subtle;
+ margin: 0.75em 0;
+ border: 0;
+ padding: 0.3em 0;
+ font-size: @font-size-nav-main-heading;
+ font-weight: normal;
+ cursor: default;
+ }
+
+ .link-only a {
+ font-size: @font-size-portal-list-item;
+ font-weight: bold;
+ }
+
+ // T295555 style overrides for temporary language switch alert (can be removed later ).
+ .messagebox {
+ padding: 0.75em;
+ font-size: @font-size-portal-list-item;
+ }
+ }
}
#mw-sidebar-button {
diff --git a/skin.json b/skin.json
index 8de49d132..6f6510f09 100644
--- a/skin.json
+++ b/skin.json
@@ -365,6 +365,13 @@
},
"description": "@var When `VectorLanguageInHeader` is enabled, determines whether the Main Page's language button should be at the top or bottom of the content. The default position on the main page is at the bottom."
},
+ "VectorLanguageAlertInSidebar": {
+ "value": {
+ "logged_in": false,
+ "logged_out": false
+ },
+ "description": "@var When `VectorLanguageAlertInSidebar` is enabled, the language switch alert box is shown in the sidebar."
+ },
"VectorLanguageInHeaderTreatmentABTest": {
"value": false,
"description": "@var boolean Enables or disables the language in header treatment A/B test. See https://phabricator.wikimedia.org/T280825 and associated tasks for additional detail."