.
*
* @file
* @ingroup Skins
*/
use MediaWiki\MediaWikiServices;
/**
* Skin subclass for Citizen
* @ingroup Skins
*/
class SkinCitizen extends SkinMustache {
/** @var array of alternate message keys for menu labels */
private const MENU_LABEL_KEYS = [
'tb' => 'toolbox',
'personal' => 'personaltools',
'lang' => 'otherlanguages',
];
/**
* Overrides template, styles and scripts module
*
* @inheritDoc
*/
public function __construct( $options = [] ) {
$skin = $this;
$out = $skin->getOutput();
// Theme handler
$skin->setSkinTheme( $out, $options );
// Responsive layout
// Replace with core responsive option if it is implemented in 1.36+
$out->addMeta( 'viewport', 'width=device-width, initial-scale=1.0' );
// Theme color
$out->addMeta( 'theme-color', $this->getConfigValue( 'CitizenThemeColor' ) ?? '' );
// Load Citizen search suggestion styles if enabled
if ( $this->getConfigValue( 'CitizenEnableSearch' ) === true ) {
$options['styles'] = array_merge(
$options['styles'],
[
'skins.citizen.styles.search',
'skins.citizen.icons.search'
]
);
}
// Load Citizen image lazyload modules if enabled
if ( $this->getConfigValue( 'CitizenEnableLazyload' ) === true ) {
$options['scripts'] = array_merge(
$options['scripts'],
[ 'skins.citizen.scripts.lazyload' ]
);
$options['styles'] = array_merge(
$options['styles'],
[ 'skins.citizen.styles.lazyload' ]
);
}
// Load table of content script if ToC presents
if ( $out->isTOCEnabled() ) {
// Add class to body that notifies the page has TOC
$out->addBodyClasses( 'skin-citizen-has-toc' );
// Disabled style condition loading due to pop in
$options['scripts'] = array_merge(
$options['scripts'],
[ 'skins.citizen.scripts.toc' ]
);
}
// Generate webapp manifest
$skin->addManifest();
// Preconnect origin
$skin->addPreConnect();
// HTTP headers
// CSP
$skin->addCSP();
// HSTS
$skin->addHSTS();
// Deny X-Frame-Options
$skin->addXFrameOptions();
// X-XSS-Protection
$skin->addXXSSProtection();
// Referrer policy
$skin->addStrictReferrerPolicy();
// Feature policy
$skin->addFeaturePolicy();
$options['templateDirectory'] = __DIR__ . '/templates';
parent::__construct( $options );
}
/**
* @return array Returns an array of data used by Citizen skin.
*/
public function getTemplateData() : array {
$skin = $this;
$out = $skin->getOutput();
$title = $out->getTitle();
// Naming conventions for Mustache parameters.
//
// Value type (first segment):
// - Prefix "is" or "has" for boolean values.
// - Prefix "msg-" for interface message text.
// - Prefix "html-" for raw HTML.
// - Prefix "data-" for an array of template parameters that should be passed directly
// to a template partial.
// - Prefix "array-" for lists of any values.
//
// Source of value (first or second segment)
// - Segment "page-" for data relating to the current page (e.g. Title, WikiPage, or OutputPage).
// - Segment "hook-" for any thing generated from a hook.
// It should be followed by the name of the hook in hyphenated lowercase.
//
// Conditionally used values must use null to indicate absence (not false or '').
$newTalksHtml = $skin->getNewtalks() ?: null;
$skinData = parent::getTemplateData() + [
'msg-sitetitle' => $skin->msg( 'sitetitle' )->text(),
'html-mainpage-attributes' => Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
'href' => Skin::makeMainPageUrl(),
]
),
'data-logos' => $this->getLogoData(),
'data-header' => [
'data-drawer' => $this->buildDrawer(),
'data-extratools' => $this->getExtraTools(),
'data-personal-menu' => $this->buildPersonalMenu(),
'data-theme-toggle' => $this->buildThemeToggleProps(),
'data-search-box' => $this->buildSearchProps(),
],
'data-pagetools' => $this->buildPageTools(),
'html-newtalk' => $newTalksHtml ? '
' . $newTalksHtml . '
' : '',
'page-langcode' => $title->getPageViewLanguage()->getHtmlCode(),
// Remember that the string '0' is a valid title.
// From OutputPage::getPageTitle, via ::setPageTitle().
'html-title' => $out->getPageTitle(),
'msg-tagline' => $skin->msg( 'tagline' )->text(),
'data-pagelinks' => $this->buildPageLinks(),
'html-categories' => $skin->getCategories(),
'data-footer' => $this->getFooterData(),
];
return $skinData;
}
/**
* Get rows that make up the footer
* @return array for use in Mustache template describing the footer elements.
*/
private function getFooterData() : array {
$skin = $this;
$footerLinks = $this->getFooterLinks();
$lastMod = null;
$footerRows = [];
$footerIconRows = [];
// Get last modified message
if ( $footerLinks['info']['lastmod'] && isset( $footerLinks['info']['lastmod'] ) ) {
$lastMod = $footerLinks['info']['lastmod'];
}
foreach ( $footerLinks as $category => $links ) {
$items = [];
$rowId = "footer-$category";
// Unset footer-info
if ( $category !== 'info' ) {
foreach ( $links as $key => $link ) {
// Link may be null. If so don't include it.
if ( $link ) {
$items[] = [
'id' => "$rowId-$key",
'html' => $link,
];
}
}
$footerRows[] = [
'id' => $rowId,
'className' => null,
'array-items' => $items
];
}
}
// Append footer-info after links
if ( isset( $footerLinks['info'] ) ) {
$items = [];
$rowId = "footer-info";
foreach ( $footerLinks['info'] as $key => $link ) {
// Don't include lastmod and null link
if ( $key !== 'lastmod' && $link ) {
$items[] = [
'id' => "$rowId-$key",
'html' => $link,
];
}
}
$footerRows[] = [
'id' => $rowId,
'className' => null,
'array-items' => $items
];
}
// If footer icons are enabled append to the end of the rows
$footerIcons = $this->getFooterIcons();
if ( count( $footerIcons ) > 0 ) {
$items = [];
foreach ( $footerIcons as $blockName => $blockIcons ) {
$html = '';
foreach ( $blockIcons as $icon ) {
// Only output icons which have an image.
// For historic reasons this mimics the `icononly` option
// for BaseTemplate::getFooterIcons.
if ( is_string( $icon ) || isset( $icon['src'] ) ) {
$html .= $skin->makeFooterIcon( $icon );
}
}
// For historic reasons this mimics the `icononly` option
// for BaseTemplate::getFooterIcons. Empty rows should not be output.
if ( $html ) {
$items[] = [
'id' => 'footer-' . htmlspecialchars( $blockName ) . 'ico',
'html' => $html,
];
}
}
$footerIconRows[] = [
'id' => 'footer-icons',
'className' => 'noprint',
'array-items' => $items,
];
}
$data = [
'html-lastmodified' => $lastMod,
'array-footer-rows' => $footerRows,
'array-footer-icons' => $footerIconRows,
'msg-citizen-footer-desc' => $skin->msg( 'citizen-footer-desc' )->text(),
'msg-citizen-footer-tagline' => $skin->msg( 'citizen-footer-tagline' )->text(),
];
return $data;
}
/**
* Get and pick the correct logo based on types and variants
* Based on getLogoData() in MW 1.36
*
* @return array
*/
private function getLogoData() : array {
$logoData = ResourceLoaderSkinModule::getAvailableLogos( $this->getConfig() );
// check if the logo supports variants
$variantsLogos = $logoData['variants'] ?? null;
if ( $variantsLogos ) {
$preferred = $this->getOutput()->getTitle()
->getPageViewLanguage()->getCode();
$variantOverrides = $variantsLogos[$preferred] ?? null;
// Overrides the logo
if ( $variantOverrides ) {
foreach ( $variantOverrides as $key => $val ) {
$logoData[$key] = $val;
}
}
}
return $logoData;
}
/**
* Render the navigation drawer
* Based on buildSidebar()
*
* @return array
* @throws MWException
* @throws Exception
*/
public function buildDrawer() {
$skin = $this;
$portals = parent::buildSidebar();
$props = [];
$languages = null;
// Render portals
foreach ( $portals as $name => $content ) {
if ( $content === false ) {
continue;
}
// Numeric strings gets an integer when set as key, cast back - T73639
$name = (string)$name;
switch ( $name ) {
case 'SEARCH':
break;
case 'TOOLBOX':
$portal = $this->getMenuData( 'tb', $content );
$props[] = $portal;
break;
case 'LANGUAGES':
$languages = $skin->getLanguages();
$portal = $this->getMenuData( 'lang', $content );
// The language portal will be added provided either
// languages exist or there is a value in html-after-portal
// for example to show the add language wikidata link (T252800)
if ( count( $content ) || $portal['html-after-portal'] ) {
$languages = $portal;
}
break;
default:
// Historically some portals have been defined using HTML rather than arrays.
// Let's move away from that to a uniform definition.
if ( !is_array( $content ) ) {
$html = $content;
$content = [];
wfDeprecated(
"`content` field in portal $name must be array."
. "Previously it could be a string but this is no longer supported.",
'1.35.0'
);
} else {
$html = false;
}
$portal = $this->getMenuData( $name, $content );
if ( $html ) {
$portal['html-items'] .= $html;
}
$props[] = $portal;
break;
}
}
$firstPortal = $props[0] ?? null;
if ( $firstPortal ) {
$firstPortal[ 'class' ] .= ' portal-first';
// Hide label for first portal
$firstPortal[ 'label-class' ] .= 'screen-reader-text';
}
return [
'msg-citizen-drawer-toggle' => $skin->msg( 'citizen-drawer-toggle' )->text(),
'data-portals-first' => $firstPortal,
'array-portals-rest' => array_slice( $props, 1 ),
'data-portals-languages' => $languages,
];
}
/**
* Build Personal Tools menu
*
* @return array
*/
private function buildPersonalMenu(): array {
$skin = $this;
$personalTools = $this->getPersonalToolsForMakeListItem(
$this->buildPersonalUrls()
);
// Move the Echo badges and ULS out of default list
if ( isset( $personalTools['notifications-alert'] ) ) {
unset( $personalTools['notifications-alert'] );
}
if ( isset( $personalTools['notifications-notice'] ) ) {
unset( $personalTools['notifications-notice'] );
}
if ( isset( $personalTools['uls'] ) ) {
unset( $personalTools['uls'] );
}
if ( $this->getUser()->isLoggedIn() ) {
$personalTools = $this->addUserGroupsToMenu( $personalTools );
}
$personalMenu = $this->getMenuData( 'personal', $personalTools );
// Hide label for personal tools
$personalMenu[ 'label-class' ] .= 'screen-reader-text';
return [
'msg-citizen-personalmenu-toggle' => $skin->msg( 'citizen-personalmenu-toggle' )->text(),
'data-personal-menu-list' => $personalMenu,
];
}
/**
* This adds all explicit user groups as links to the personal menu
* Links are added right below the user page link
* Wrapped in an element with id 'pt-usergroups'
*
* @param array $originalUrls The original personal tools urls
*
* @return array
*/
private function addUserGroupsToMenu( $originalUrls ) {
$personalTools = [];
$userPage = array_shift( $originalUrls );
// This does not return implicit groups
$groups = MediaWikiServices::getInstance()->getUserGroupManager()->getUserGroups( $this->getUser() );
// If the user has only implicit groups return early
if ( empty( $groups ) ) {
return $originalUrls;
}
$groupLinks = [];
$msgName = 'group-%s';
foreach ( $groups as $group ) {
$groupPage = Title::newFromText(
$this->msg( sprintf( $msgName, $group ) )->text(),
NS_PROJECT
);
$groupLinks[$group] = [
'msg' => sprintf( $msgName, $group ),
'href' => $groupPage->getLinkURL(), // Nullpointer should not happen
'tooltiponly' => true,
'id' => sprintf( $msgName, $group ),
// 'exists' => $groupPage->exists() - This will add an additional DB call
];
}
$userGroups = [
'id' => 'pt-usergroups',
'links' => $groupLinks
];
// The following defines the order of links added
$personalTools['userpage'] = $userPage;
$personalTools['usergroups'] = $userGroups;
foreach ( $originalUrls as $key => $url ) {
$personalTools[$key] = $url;
}
return $personalTools;
}
/**
* Echo notification badges and ULS button
*
* @return array
*/
private function getExtratools(): array {
$personalTools = $this->getPersonalToolsForMakeListItem(
$this->buildPersonalUrls()
);
// Create the Echo badges and ULS
$extraTools = [];
if ( isset( $personalTools['notifications-alert'] ) ) {
$extraTools['notifications-alert'] = $personalTools['notifications-alert'];
}
if ( isset( $personalTools['notifications-notice'] ) ) {
$extraTools['notifications-notice'] = $personalTools['notifications-notice'];
}
if ( isset( $personalTools['uls'] ) ) {
$extraTools['uls'] = $personalTools['uls'];
}
$html = $this->getMenuData( 'personal-extra', $extraTools );
// Hide label for extra tools
$html[ 'label-class' ] .= 'screen-reader-text';
return $html;
}
/**
* Render the search box
*
* @return array
* @throws MWException
*/
private function buildSearchProps() : array {
$skin = $this->getSkin();
$toggleMsg = $skin->msg( 'citizen-search-toggle' )->text();
$accessKey = Linker::accesskey( 'search' );
return [
'msg-citizen-search-toggle' => $toggleMsg,
'msg-citizen-search-toggle-shortcut' => $toggleMsg . ' [alt-shift-' . $accessKey . ']',
'form-action' => $this->getConfigValue( 'Script' ),
'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ),
'msg-search' => $skin->msg( 'search' ),
'page-title' => SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey(),
'html-random-href' => Skin::makeSpecialUrl( 'Randompage' ),
'msg-random' => $skin->msg( 'Randompage' )->text(),
];
}
/**
* Render the theme toggle
*
* @return array
* @throws MWException
*/
private function buildThemeToggleProps() : array {
$skin = $this->getSkin();
$toggleMsg = $skin->msg( 'citizen-theme-toggle' )->text();
return [
'msg-citizen-theme-toggle-shortcut' => $toggleMsg,
];
}
/**
* Render page-related tools
* Possible visibility conditions:
* * true: always visible (bool)
* * false: never visible (bool)
* * 'login': only visible if logged in (string)
* * 'permission-*': only visible if user has permission
* e.g. permission-edit = only visible if user can edit pages
*
* @return array html
*/
protected function buildPageTools(): array {
$skin = $this;
$condition = $this->getConfigValue( 'CitizenShowPageTools' );
$contentNavigation = $this->buildContentNavigationUrls();
$props = [];
// Login-based condition, return true if condition is met
if ( $condition === 'login' ) {
$condition = $skin->getUser()->isLoggedIn();
}
// Permission-based condition, return true if condition is met
if ( is_string( $condition ) && strpos( $condition, 'permission' ) === 0 ) {
$permission = substr( $condition, 11 );
try {
$condition = MediaWikiServices::getInstance()->getPermissionManager()->userCan(
$permission, $skin->getUser(), $skin->getTitle() );
} catch ( Exception $e ) {
$condition = false;
}
}
if ( $condition === true ) {
$actionhtml = $this->getMenuData( 'views', $contentNavigation[ 'views' ] ?? [] );
$actionmorehtml = $this->getMenuData( 'actions', $contentNavigation[ 'actions' ] ?? [] );
if ( $actionhtml ) {
$actionhtml[ 'label-class' ] .= 'screen-reader-text';
}
if ( $actionmorehtml ) {
$actionmorehtml[ 'label-class' ] .= 'screen-reader-text';
}
$props = [
'data-page-actions' => $actionhtml,
'data-page-actions-more' => $actionmorehtml,
];
}
return $props;
}
/**
* Render page-related links at the bottom
*
* @return array html
*/
private function buildPageLinks() : array {
$contentNavigation = $this->buildContentNavigationUrls();
$namespaceshtml = $this->getMenuData( 'namespaces', $contentNavigation[ 'namespaces' ] ?? [] );
$variantshtml = $this->getMenuData( 'variants', $contentNavigation[ 'variants' ] ?? [] );
if ( $namespaceshtml ) {
$namespaceshtml[ 'label-class' ] .= 'screen-reader-text';
}
if ( $variantshtml ) {
$variantshtml[ 'label-class' ] .= 'screen-reader-text';
}
return [
'data-namespaces' => $namespaceshtml,
'data-variants' => $variantshtml,
];
}
/**
* @param string $label to be used to derive the id and human readable label of the menu
* If the key has an entry in the constant MENU_LABEL_KEYS then that message will be used for the
* human readable text instead.
* @param array $urls to convert to list items stored as string in html-items key
* @param array $options (optional) to be passed to makeListItem
* @return array
*/
private function getMenuData(
string $label,
array $urls = [],
array $options = []
) : array {
$skin = $this->getSkin();
// For some menu items, there is no language key corresponding with its menu key.
// These inconsitencies are captured in MENU_LABEL_KEYS
$msgObj = $skin->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label );
$props = [
'id' => "p-$label",
'label-class' => null,
'label-id' => "p-{$label}-label",
// If no message exists fallback to plain text (T252727)
'label' => $msgObj->exists() ? $msgObj->text() : $label,
'html-items' => '',
'html-tooltip' => Linker::tooltip( 'p-' . $label ),
];
foreach ( $urls as $key => $item ) {
$props['html-items'] .= $this->makeListItem( $key, $item, $options );
}
$props['html-after-portal'] = $this->getAfterPortlet( $label );
// Mark the portal as empty if it has no content
$class = ( empty( $urls ) && !$props['html-after-portal'] )
? ' mw-portal-empty' : '';
$props['class'] = $class;
return $props;
}
/**
* getConfig() wrapper to catch exceptions.
* Returns null on exception
*
* @param string $key
* @return mixed|null
* @see SkinTemplate::getConfig()
*/
private function getConfigValue( $key ) {
try {
$value = $this->getConfig()->get( $key );
} catch ( ConfigException $e ) {
$value = null;
}
return $value;
}
/**
* Adds the manifest if enabled in 'CitizenEnableManifest'.
* Manifest link will be empty if wfExpandUrl throws an exception.
*/
private function addManifest() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableManifest' ) === true ) {
try {
$href =
wfExpandUrl( wfAppendQuery( wfScript( 'api' ),
[ 'action' => 'webapp-manifest' ] ), PROTO_RELATIVE );
} catch ( Exception $e ) {
$href = '';
}
$out->addLink( [
'rel' => 'manifest',
'href' => $href,
] );
}
}
/**
* Adds a preconnect header if enabled in 'CitizenEnablePreconnect'
*/
private function addPreConnect() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnablePreconnect' ) === true ) {
$out->addLink( [
'rel' => 'preconnect',
'href' => $this->getConfigValue( 'CitizenPreconnectURL' ),
] );
}
}
/**
* Adds the csp directive if enabled in 'CitizenEnableCSP'.
* Directive holds the content of 'CitizenCSPDirective'.
*/
private function addCSP() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableCSP' ) === true ) {
$cspDirective = $this->getConfigValue( 'CitizenCSPDirective' ) ?? '';
$cspMode = 'Content-Security-Policy';
// Check if report mode is enabled
if ( $this->getConfigValue( 'CitizenEnableCSPReportMode' ) === true ) {
$cspMode = 'Content-Security-Policy-Report-Only';
}
$out->getRequest()->response()->header( sprintf( '%s: %s', $cspMode,
$cspDirective ) );
}
}
/**
* Adds the HSTS Header. If no max age or an invalid max age is set a default of 300 will be
* applied.
* Preload and Include Subdomains can be enabled by setting 'CitizenHSTSIncludeSubdomains'
* and/or 'CitizenHSTSPreload' to true.
*/
private function addHSTS() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableHSTS' ) === true ) {
$maxAge = $this->getConfigValue( 'CitizenHSTSMaxAge' );
$includeSubdomains = $this->getConfigValue( 'CitizenHSTSIncludeSubdomains' ) ?? false;
$preload = $this->getConfigValue( 'CitizenHSTSPreload' ) ?? false;
// HSTS max age
if ( is_int( $maxAge ) ) {
$maxAge = max( $maxAge, 0 );
} else {
// Default to 5 mins if input is invalid
$maxAge = 300;
}
$hstsHeader = 'Strict-Transport-Security: max-age=' . $maxAge;
if ( $includeSubdomains ) {
$hstsHeader .= '; includeSubDomains';
}
if ( $preload ) {
$hstsHeader .= '; preload';
}
$out->getRequest()->response()->header( $hstsHeader );
}
}
/**
* Adds the X-Frame-Options header if set in 'CitizenEnableDenyXFrameOptions'
*/
private function addXFrameOptions() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableDenyXFrameOptions' ) === true ) {
$out->getRequest()->response()->header( 'X-Frame-Options: deny' );
}
}
/**
* Adds the X-XSS-Protection header if set in 'CitizenEnableXXSSProtection'
*/
private function addXXSSProtection() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableXXSSProtection' ) === true ) {
$out->getRequest()->response()->header( 'X-XSS-Protection: 1; mode=block' );
}
}
/**
* Adds the referrer header if enabled in 'CitizenEnableStrictReferrerPolicy'
*/
private function addStrictReferrerPolicy() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableStrictReferrerPolicy' ) === true ) {
// iOS Safari, IE, Edge compatiblity
$out->getRequest()->response()->header( 'Referrer-Policy: strict-origin' );
$out->getRequest()->response()->header( 'Referrer-Policy: strict-origin-when-cross-origin' );
}
}
/**
* Adds the Feature policy header to the response if enabled in 'CitizenFeaturePolicyDirective'
*/
private function addFeaturePolicy() {
$out = $this->getOutput();
if ( $this->getConfigValue( 'CitizenEnableFeaturePolicy' ) === true ) {
$featurePolicy = $this->getConfigValue( 'CitizenFeaturePolicyDirective' ) ?? '';
$out->getRequest()->response()->header( sprintf( 'Feature-Policy: %s',
$featurePolicy ) );
}
}
/**
* Sets the corresponding theme class on the element
* If the theme is set to auto, the theme switcher script will be added
*
* @param OutputPage $out
* @param array &$options
*/
private function setSkinTheme( OutputPage $out, array &$options ) {
// Set theme to site theme
$theme = $this->getConfigValue( 'CitizenThemeDefault' ) ?? 'auto';
// Set theme to user theme if registered
if ( $this->getUser()->isRegistered() ) {
$theme = MediaWikiServices::getInstance()->getUserOptionsLookup()->getOption(
$this->getUser(),
'CitizenThemeUser',
'auto'
);
}
$cookieTheme = $this->getRequest()->getCookie( 'skin-citizen-theme', null, 'auto' );
if ( $cookieTheme !== 'auto' ) {
$theme = $cookieTheme;
}
// Add HTML class based on theme set
$out->addHtmlClasses( 'skin-citizen-' . $theme );
if ( $this->getRequest()->getCookie( 'skin-citizen-theme-override' ) === null ) {
// Only set the theme cookie if the theme wasn't overridden by the user through the button
$this->getRequest()->response()->setCookie( 'skin-citizen-theme', $theme, 0, [
'httpOnly' => false,
] );
}
// Script content at 'skins.citizen.scripts.theme/inline.js
$this->getOutput()->addHeadItem( 'theme-switcher', '' );
// Add styles and scripts module
if ( $theme === 'auto' ) {
$options['scripts'] = array_merge(
$options['scripts'],
[ 'skins.citizen.scripts.theme' ]
);
}
$options['styles'] = array_merge(
$options['styles'],
[ 'skins.citizen.styles.theme' ]
);
}
}