Go to file
Volker E f47e333ff1 build: Bring SVGO optimization to build step
Enabling SVGO automation with 'grunt-svgmin' and conservative
plugin settings to build step, among those:
- enable removeRasterImages and sortAttrs,
- disable cleanupIDs, removeDesc, removeTitle, & removeViewBox as
  described in
  https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
- disable removeXMLProcInst; if the SVG doesn't start with an XML
  declaration, then it's MIME type will be detected as "text/plain"
  rather than "image/svg+xml" by libmagic and, consequently, MediaWiki's
  CSSMin CSS minifier. libmagic's default database currently requires
  that SVGs contain an XML declaration:
  <https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5>.
- make use of pretty and multipass options.

Settings are stored in a JSON file to be independent of the Grunt build
process. Also updating SVG accordingly.

Bug: T185596
Change-Id: I715ad4cf2e900665e4c32c78b4c2d9d9cebf0222
2018-08-01 10:51:43 -05:00
docs Hygiene: make JSDoc configs consistent 2018-07-23 14:45:14 -05:00
i18n Localisation updates from https://translatewiki.net. 2018-07-21 22:12:00 +02:00
includes Always set the PagePreviews visibility state 2018-06-11 21:46:03 +02:00
resources build: Bring SVGO optimization to build step 2018-08-01 10:51:43 -05:00
src Hygiene: make JSDoc configs consistent 2018-07-23 14:45:14 -05:00
tests QA: Selenium no more needs wgUsejQueryThree 2018-07-19 15:57:47 +02:00
.babelrc Hygiene: enable Babel transpilation 2018-03-20 07:59:14 -05:00
.eslintrc.es5.json Upgrade eslint-config-wikimedia 2018-07-13 07:42:12 -05:00
.eslintrc.json Enforce eslinting for jsdoc 2018-07-17 08:21:01 -05:00
.gitattributes Hide package lock file from git diff 2018-03-14 19:06:51 +00:00
.gitignore Hygiene: make JSDoc configs consistent 2018-07-23 14:45:14 -05: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
.nycrc.json Fix: code coverage 2018-06-19 18:10:02 -05:00
.phpcs.xml Add missing "public" visibility in PopupsHooks.php 2018-05-20 21:13:36 +02:00
.stylelintrc.json build: Update linters 2018-02-04 22:09:45 +00:00
.svgo.json build: Bring SVGO optimization to build step 2018-08-01 10:51:43 -05:00
CODE_OF_CONDUCT.md Add CODE_OF_CONDUCT.md 2017-06-07 15:30:07 +04:30
composer.json build: Updating mediawiki/mediawiki-codesniffer to 21.0.0 2018-07-27 13:42:06 +00:00
COPYING Add COPYING file 2014-02-06 15:38:46 +05:30
extension.json Change the PopupsVisibility state to visible to match anon experience 2018-05-10 00:57:44 +02:00
Gruntfile.js build: Bring SVGO optimization to build step 2018-08-01 10:51:43 -05:00
jsdoc.json Hygiene: make JSDoc configs consistent 2018-07-23 14:45:14 -05:00
package-lock.json build: Bring SVGO optimization to build step 2018-08-01 10:51:43 -05:00
package.json build: Bring SVGO optimization to build step 2018-08-01 10:51:43 -05:00
Popups.php Remove remaining references to beta 2018-05-02 13:31:43 -07:00
popups.svg Remove BetaFeature code 2018-04-26 15:51:48 -07:00
README.md Hygiene: enable Redux DevTools for debug builds 2018-07-02 14:54:36 -05:00
webpack.config.js Hygiene: replace call to rm with clean-webpack-plugin 2018-06-18 09:09:28 -05:00

Popups

mediawiki/extensions/Popups

See https://www.mediawiki.org/wiki/Extension:Popups 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:node
    • 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:node"
    • 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).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., https://en.wikipedia.org/wiki/Popup?debug=true.

Terminology

  • 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.