mediawiki/extensions/Popups - Gitiles
gerrit.wikimedia.org
mediawiki
extensions
Popups
Clone this repo:
Branches
master
REL1_39
REL1_40
REL1_41
REL1_42
REL1_43
REL1_44
REL1_45
aria-testing
wmf/1.46.0-wmf.23
More...
Tags
REL1_38
REL1_37
REL1_36
REL1_35
REL1_34
REL1_33
REL1_32
REL1_31
REL1_30
REL1_29
More...
7f6fcea
Localisation updates from https://translatewiki.net.
by Translation updater bot
· 8 days ago
master
wmf/branch_cut_pretest
wmf/next
1170061
build: Updating composer dependencies
by Umherirrender
· 9 days ago
8c20b75
nvmrc: Update required Node version from 20.19.5 to 24.14.1 now that CI uses it
by James D. Forrester
· 14 days ago
wmf/1.46.0-wmf.24
e6427c4
Localisation updates from https://translatewiki.net.
by Translation updater bot
· 2 weeks ago
cb86b3b
Localisation updates from https://translatewiki.net.
by Translation updater bot
· 3 weeks ago
wmf/1.46.0-wmf.23
mediawiki/extensions/Popups
See
for more information about what it does.
Development
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 = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
Popups works with a local copy of the
Mobile Content Service
too:
$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'http://localhost:6927/en.wikipedia.org/v1/page/summary/';
Debugging
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.dispatchEvent(new MouseEvent("mouseover", {
view: window,
bubbles: true,
cancelable: true,
}));
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/README.md for details.
Building the documentation
Execute
npm -s run doc
Terminology
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.