GitHub mirror of MediaWiki extension Popups - our actual code is hosted with Gerrit (please see for contributing
Go to file
jenkins-bot cdfd8d2f37 Merge "Cleanup: Remove non-functional hook" 2023-12-01 17:06:11 +00:00
.phan Remove all BetaFeature code from ReferencePreviews 2023-11-24 13:07:46 +01:00
.storybook Disable animations in storybook 2023-09-15 18:15:08 +00:00
dev-scripts build: Make '' script executable and change to tabs 2021-04-30 03:37:08 -07:00
docs Rename variables in change listeners for clarity 2021-04-15 10:19:40 +02:00
i18n Localisation updates from 2023-11-27 08:33:04 +01:00
includes Cleanup: Remove non-functional hook 2023-11-29 23:40:25 +00:00
resources Documentation fixes 2023-11-30 10:38:07 +00:00
src Documentation fixes 2023-11-30 10:38:07 +00:00
tests Merge "Update tests for PHPUnit 9.6" 2023-11-30 23:08:24 +00:00
.babelrc selenium: Upgrade WebdriverIO to v7 2021-08-24 17:29:16 +00:00
.browserslistrc build: Add and use 'browserslist-config-wikimedia' 2021-05-19 11:19:34 -07:00
.eslintignore build: Fix gaps in lint coverage and update old patterns 2021-08-16 17:02:05 +00:00
.eslintrc.json Convert nycrc from JSON to JS to allow comments 2023-11-09 11:36:11 +00:00
.gitattributes .gitattributes: Don't list package-lock.json 2021-05-03 19:17:02 +00:00
.gitignore Publish coverage file 2023-06-15 08:53:39 -07:00
.gitreview Merge remote-tracking branch 'gerrit/mpga' 2017-02-14 11:20:17 -08:00
.istanbul.yml Hygiene: Tidy up QUnit references 2017-05-04 15:53:44 +01:00
.nvmrc Fix storybook integration 2023-03-30 15:36:05 -07:00
.phpcs.xml build: Updating mediawiki/mediawiki-codesniffer to 33.0.0 2020-11-17 23:23:29 +01:00
.stylelintrc.json build: Updating stylelint-config-wikimedia to 0.11.1 2021-09-12 16:11:01 +02:00
.svgo.config.js build: Update linters 2023-11-09 11:36:08 +00:00 build: Updating mediawiki/phan-taint-check-plugin to 1.3.0 2018-08-19 15:37:11 +00:00
COPYING Add COPYING file 2014-02-06 15:38:46 +05:30
Doxyfile build: Fix gaps in lint coverage and update old patterns 2021-08-16 17:02:05 +00:00 Rename many functions and files for clarity 2021-04-08 11:04:02 +02:00
composer.json build: Updating mediawiki/mediawiki-phan-config to 0.12.1 2023-04-29 09:08:54 +00:00
extension.json Cleanup: Remove non-functional hook 2023-11-29 23:40:25 +00:00
jsdoc.json Hygiene: make JSDoc configs consistent 2018-07-23 14:45:14 -05:00
nyc.config.js Convert nycrc from JSON to JS to allow comments 2023-11-09 11:36:11 +00:00
package-lock.json build: Update linters 2023-11-09 11:36:08 +00:00
package.json build: Update linters 2023-11-09 11:36:08 +00:00
popups.svg Remove BetaFeature code 2018-04-26 15:51:48 -07:00
webpack.config.js Remove all BetaFeature code from ReferencePreviews 2023-11-24 13:07:46 +01:00



See for more information about what it does.


Popups uses an asset bundler so when developing for the extension you'll need to run a script to assemble the frontend assets.

You can find the frontend source files in src/, the compiled sources in resources/dist/, and other frontend assets managed by resource loader in resources/*.

After an npm install:

  • On one terminal, kickstart the bundler process:
    • npm start Will run the bundler in watch mode, re-assembling the files on file change. Additionally, this builds debug-friendly assets and enables Redux DevTools debugging.
    • npm run build Will compile the assets just once, ready for deployment. You must run this step before sending the patch or CI will fail (so that sources and built assets are in sync).
  • On another terminal, run tests and linting tools:
    • npm test To run the linting tools and the tests.
      • You can find the QUnit tests that depend on running MediaWiki under tests/qunit/
      • You can find the isolated QUnit tests under tests/node-qunit/, which you can run with npm run test:unit
    • We recommend you install a file watcher like nodemon to watch sources and auto run linting and tests.
      • npm install -g nodemon
      • Example running linting and node unit tests:
        • nodemon -w src/ --exec "grunt lint:all && npm run test:unit"
    • Get code coverage report with npm run coverage
      • Reports printed in the coverage/ folder

Developers are likely to work with local MediaWiki instances that do not have content to test with. To reduce this pain, you can create a single page with a list of links that point to an existing and external wiki by using the following config flag:

$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = '';

Popups works with a local copy of the Mobile Content Service too:

$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'http://localhost:6927/';


  • Popups are dismissed ("abandoned") when the cursor leaves the popup container. As such, it can be difficult to debug a popup of interest without it popping in and out of the DOM. A useful workaround in DevTools is to context click a link, select inspect, move the cursor some place comfortable, and then from the console enter $($0).trigger('mouseenter').
  • As described in #Development, npm start enables Redux DevTools functionality. In production builds, this same functionality can be enabled by setting a debug=true query. E.g.,
  • When a QUnit test fails but you can't see why, open package.json and temporarily remove the snippet | tap-mocha-reporter dot.

Storybook.js Component Library

The root of the repository contains a .storybook directory. This folder contains a separate NPM project using the Storybook.js UI framework. This framework provides an environment that showcases all possible permutations of popups, without the state-management constraints of having only one popup per page.

This framework requires Node 8 (because of the spread ... operator) and is therefore separated from the main package.json until CI upgrades from Node 6. NVM can be used to manage multiple Node versions to run the Storybook app (cd .storybook && nvm use). See the .storybook/ for details.

Building the documentation

Execute npm -s run doc.


  • Footnote - What the Cite extension shows at the bottom of the page.
  • Hovercard - Deprecated term for popup.
  • Link preview - A similar user feature in the Android native app.
  • Navpop / nav pop - A popup-like UI from the NavigationPopups gadget.
  • Popup - Generic term for a dialog that appears to float above a link that is being hovered over by a cursor.
  • Page preview - A specific type of popup that shows a page summary.
  • Preview - A synonym for popup.
  • Reference - A specific type of popup that previews the Cite extension's footnotes. Since footnotes are typically used for references, and the tag's name is <ref>, the terms are used synonymously.