MobileFrontend Extension

The MobileFrontend extension adds a mobile view to your mediawiki instance.

Installation

See https://www.mediawiki.org/wiki/Extension:MobileFrontend#Installation

Development

Directory structure

• resources/: Files for PHP consumption.
• src/: Files to be processed by Webpack.

Coding conventions

Please follow the coding conventions of MobileFrontend: https://www.mediawiki.org/wiki/MobileFrontend/Coding_conventions

Git hooks

Git hooks are provided by default to assist with adhering to JavaScript code standards, optimizing PNG files, etc. Running these hooks requires node.js, NPM, and grunt.

Install like so:

npm install

If you are not running Vagrant, be sure to set your MEDIAWIKI_URL env variable to your local index path, e.g. MEDIAWIKI_URL=http://localhost/index.php/

Development Server (JS/CSS Changes)

1. Install Dependencies:

      npm install
   2. **Start the Dev Server**:

   bash npm run start This watches and auto-reloads changes.

Committing

Commit messages are important as they give the reviewer more information to successfully review your code and find errors or potential problems you might not have thought of.

Commits are also useful when troubleshooting issues and refactoring. If it's not clear why a line of code is in the repository, important bug fixes could be lost.

Commits should be as minor as possible. Please avoid removing unrelated console.log statements, fixing unrelated whitespace, etc. Do that in a separate commit which mentions the word "cleanup".

The first line of the commit message should summarise the commit with the bug it fixes if applicable. E.g.: Fix problem with toggling.

The second line should be blank.

The third line should go into detail where necessary providing links to blog posts or other bugs to provide more background. Mention the platforms/browsers the change is for where necessary, e.g.:

• This is a problem on Android but not OSX, see http://<url></url> which explains problem in detail
• This is a workaround for a known bug in opera mobile see http://<url></url>

Testing

Unit tests

To run the full test suite run:

npm run precommit

To run only PHP tests, from your MediaWiki installation path:

composer phpunit:entrypoint -- extensions/MobileFrontend/tests/phpunit/

To run only MobileFrontend JS tests:

npm run test:unit

Releasing

A new version of MobileFrontend is released every two weeks following the Wikimedia release train if there are new changes.

MobileFrontend follows the version naming from MediaWiki.

Configuration options

MobileFrontend

The following configuration options will apply to all skins operating in useformat=mobile mode.

$wgMFEnableXAnalyticsLogging

Whether or not to enable the use of the X-Analytics HTTP response header. This header is used for analytics purposes.

See: https://www.mediawiki.org/wiki/Analytics/Kraken/Data_Formats/X-Analytics

• Type: Boolean
• Default: false

$wgMFDefaultEditor

Default editor when there is no user preference set (mobile-editor). One of source, visual, or preference (inherit desktop editor preference).

• Type: string
• Default: preference

$wgMFFallbackEditor

When MFDefaultEditor is set to preference and no desktop preference is set, use this editor. Set to source or visual.

• Type: string
• Default: visual

$wgMFEnableJSConsoleRecruitment

Controls whether a message should be logged to the console to attempt to recruit volunteers.

• Type: Boolean
• Default: false

$wgMFMobileFormatterOptions

This provides options for the MobileFormatter.

• headings: is a list of html tags, that could be recognized as the first heading of a page. This is an interim solution to fix Bug T110436 and shouldn't be used, if you don't know, what you do. Moreover, this configuration variable will be removed in the near future (hopefully).
• excludeNamespaces - disable the MobileFormatter for these namespaces. Article HTML for mobile will be the same as desktop.
• Type: Object
• Default:

  [
      "excludeNamespaces": [
          10,
          -1
      ],
      "headings": [
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
          "h6"
      ]
  ]

$wgMFSiteStylesRenderBlocking

If set to true, styles inside MediaWiki:Mobile.css will become render blocking.

This is intended for situations where the TemplateStyles extension cannot be used. When enabled, this may increase the time it takes for the mobile site to render, depending on how large MediaWiki:Mobile.css is for your wiki.

• Type: Boolean
• Default: false

$wgMFCustomSiteModules

If set to true, MediaWiki:Mobile.css will be used instead of MediaWiki:Common.css and MediaWiki:<skinname>.css for mobile views.

This is intended for situations where the mobile site is on a different domain.

• Type: Boolean
• Default: false

$wgMFTrackBlockNotices

If set to true, block notices will be tracked on display, along with some limited user interactions. Counts will be stored for later analysis. No personal data will be collected.

• Type: Boolean
• Default: false

$wgMFMobileHeader

Requests containing header with this name will be considered as coming from mobile devices.

• Type: String|null
• Default: null

$wgMFRemovableClasses

Make the classes, tags and ids stripped from page content configurable. Each item will be stripped from the page.

• Type: Array
• Default:

  [
    // These rules will be used for all transformations
      "base": [
          ".navbox",
          ".vertical-navbox",
          ".nomobile"
      ]
  ]
   
  #### $wgMFAutodetectMobileView
   
  Set this to true to automatically show mobile view depending on people's
  user-agent.
   
  *WARNING: Make sure that your caching infrastructure is configured
  appropriately, to avoid people receiving cached versions of pages intended for
  someone else's devices.*
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgMFVaryOnUA
   
  Set this to `true`, if you want to send `User-Agent` in the `Vary` header. This
  could improve your SEO ranking.
   
  *WARNING: You should set this to true only, if you know what you're doing!*
   
  *CAUTION: Setting this to true in combination with a (frontend)caching layer
  (such as Varnish) can have a huge impact on how your caching works, as it now
  caches every single page multiple times for any possible/different User Agent
  string!*
   
  * Type: `Boolean`
  * Default: `false`
   
  #### $wgMFShowMobileViewToTablets
   
  Controls whether tablets should be shown the mobile site. Works only if
  `$wgMFAutodetectMobileView` is `true`.
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgMobileUrlCallback
   
  A callback that takes a domain name, and changes it into a mobile domain name.
  When that is not possible, it should return its input unchanged. On wikifarms,
  the domain name might belong to another wiki.
   
  For mobile domains to work, some infrastructure outside MediaWiki needs to tag
  requests sent to the mobile domain with the header specified by $wgMFMobileHeader.
   
  * Type: `callable` (`string -> string`)
  * Default: `null`
   
  #### $wgMobileFrontendFormatCookieExpiry
   
  The number of seconds the `useformat` cookie should be valid.
   
  The useformat cookie gets set when a user manually elects to view either the
  mobile or desktop view of the site.
   
  If this value is not set, it will default to `$wgCookieExpiration`
   
  * Type: `Integer|null`
  * Default: `null`
   
  #### $wgMFNoindexPages
   
  Set to false to allow search engines to index your mobile pages. So far, Google
  seems to mix mobile and non-mobile pages in its search results, creating
  confusion.
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgMFStopRedirectCookieHost
   
  Set the domain of the `stopMobileRedirect` cookie.
   
  If this value is not set, it will default to the top domain of the host name
  (e.g. `en.wikipedia.org = .wikipedia.org`)
   
  If you want to set this to a top domain (to cover all subdomains), be sure to
  include the preceding `.` (e.g. yes: `.wikipedia.org`, **no**: `wikipedia.org`)
   
  * Type: `String|null`
  * Default: `null`
   
  #### $wgMFAdvancedMobileContributions
   
  Whether Advanced mode is available for users.
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgDefaultMobileSkin
   
  The default skin for MobileFrontend.
   
  * Type: `String`
  * Default: `'minerva'`
   
  #### $wgMFNamespacesWithoutCollapsibleSections
   
  In which namespaces sections shouldn't be collapsed.
   
  * Type: `Array`
  * Default:

  php [ // Authorship and licensing information should be visible initially NS_FILE, // Otherwise category contents will be hidden NS_CATEGORY, // Don't collapse various forms NS_SPECIAL, // Just don't NS_MEDIA, ]

  #### $wgMFUseWikibase
   
  If set to true, the use Wikibase is enabled and associated features is enabled.
  See `$wgMFDisplayWikibaseDescriptions`
   
  * Type: `Boolean`
  * Default: `false`
   
  #### $wgMFEnableWikidataDescriptions
   
  If set to true, wikidata descriptions as defined in $wgMFDisplayWikibaseDescriptions will show up
  in the UI in the environment they have been told to target.
   
  * Type: `Array`
  * Default:

  php [ 'base' => false, ]

  #### $wgMFDisplayWikibaseDescriptions
   
  Set which features will use Wikibase descriptions.
   
  * Type: `Array`
  * Default:

  php [ 'tagline' => false, ]

  #### $wgMFNamespacesWithLeadParagraphs
   
  A list of namespace codes that have lead paragraphs. Lead paragraphs will be
  shown before infoboxes if `$wgMFShowFirstParagraphBeforeInfobox` is enabled.
   
  * Type: `Array`
  * Default:

  php [ 0 ]

  #### $wgMFStopMobileRedirectCookieSecureValue
   
  The default value of the 'secure' cookie parameter that controls
  MobileFrontend's mobile redirect behavior.  This variable defaults to true to
  encourage the use of TLS on any servers hosting MediaWiki and to avoid the
  disclosure of minor user privacy issues regarding a user's mobile browsing
  preferences.
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgMFEditNoticesConflictingGadgetName
   
  Internal name of the 'edit notices on mobile' gadget,
  which conflicts with showEditNotices in EditorOverlay.
  showEditNotices will not run when the user has this gadget enabled.
   
  * Type: `string`
  * Default: `"EditNoticesOnMobile"`
   
  #### $wgMFEnableFontChanger
   
  Enable the font-size options for users.
   
  * Type: `Array`
  * Default:

  php [ "base" => true ]

  #### $wgMFEnableVEWikitextEditor
   
  Enable VisualEditor's wikitext editor as a replacement for MobileFrontend's source editor.
   
  * Type: `Boolean`
  * Default: `false`
   
  #### $wgMFLogWrappedInfoboxes
   
  Log when finding infoboxes wrapped with container.
   
  * Type: `Boolean`
  * Default: `true`
   
  #### $wgMFManifestBackgroundColor
   
  Background color to use in webapp-manifest.
   
  * Type: `string`
  * Default: `"#fff"`
   
  #### $wgMFManifestThemeColor
   
  Theme color to use in webapp-manifest.
   
  * Type: `string`
  * Default: `"#eaecf0"`
   
  #### $wgMFShowFirstParagraphBeforeInfobox
   
  Move first paragraph in articles to before infobox.
   
  * Type: `Array`
  * Default:

  php [ "base" => true ]

  #### $wgMFQuickFacts
   
  Whether to collapse the lead infobox of an article page into a "Quick facts" section.
   
  * Type: `Array`
  * Default:

  php [ "base" => false ]

  #### $wgMFReturnToAppScheme
   
  If set, exiting the visual editor will send the user to a URL with this URL
  scheme, indicating to an external application that the edit is complete. This
  value should have no colons or slashes at the end. See `src/mobile.returnToApp/`
  for how URLs are constructed.
   
  * Type: `string`
  * Default: unset
   
  #### $wgMFReturnToAppBannerIcons
   
  This sets the icon shown to the user in the banner beside the link to return to
  the app. The value for each platform should be an absolute URL. Setting a value
  to `false` causes the icon to be hidden entirely. Icons will be displayed at
  24x24 pixel dimensions in the banner and must have a square aspect ratio.
   
  * Type: `Array`
  * Default:

  php [ 'android' => false, 'ios' => false ] ```

$wgMFReturnToAppBehavior

When $wgMFReturnToAppScheme is set, this controls how the return-to-app connection is presented to the user. Possible values:

• "banner": show a banner at the top of the page
• "immediate": redirect the browser immediately, with no user interaction

If unset, immediate is used.

• Type: string
• Default: "immediate"