Instant Diffs

Instant Diffs (ID) is a free open-source JavaScript tool that enhances MediaWiki diff and revision links with interactive previews. Instead of navigating to a separate page, users can view, compare, and interact with diffs directly in context, loaded on demand in the overlay dialog via AJAX.

The gadget works across all standard MediaWiki interface pages where diffs and revision links appear, including local and global watchlists, local and global user contributions, recent changes, logs, new pages and page history, as well as in user-generated content such as talk pages and project pages.

Features

Displays an action button (❖ for diffs or ✪ for revisions) after the link to open the Instant Diffs dialog. By default, the click action is added directly to the link, but you can still open the link in the current tab using Alt+Click.
Displays an action button (➔) after the link to navigate to the page and section where the edit was made. If the Convenient Discussions gadget is installed, the button will also try to navigate to the corresponding comment.
Allows quick switching between revision view and its diff with another revision.
Provides an Actions menu in the dialog, allowing you to copy links (including internal wiki links ), navigate to the page, its history, or discussion, and add or remove the page from the watchlist.
Allows adding custom actions to the Actions menu through a flexible API. See the Developer guide .
Enables viewing diffs and revisions from foreign interwikis in the GlobalContributions , GlobalWatchlist and in edits from Wikidata.
Supports keyboard shortcuts for navigation between diffs and between links on the page in the Instant Diffs dialog window:
- Arrow Left - previous diff or revision in the history;
- Arrow Right - next diff or revision in the history;
- Ctrl+Arrow Left - previous link on the page;
- Ctrl+Arrow Right - next link on the page;
- Ctrl+Arrow Up - switch between revision view and its comparison;
- Ctrl+Arrow Down - toggle visibility of the actions menu.
Allows sending thanks, patrolling, and rolling back directly from the dialog, with confirmation prompts.
Enables administrators to view hidden revisions directly in the dialog without any additional steps. The suppressrevision user right is required to access hidden revision content.
Fully adapts to mobile devices, with special optimization for the Minerva Neue skin.
Offers a wide range of customization settings, saved either per local wiki or globally across a wiki farm. For example, settings changed in one Wikimedia project automatically sync across all others.
Provides flexible configuration for deploying the gadget locally. See available options on GitHub.

Installation

The minimal required version of MediaWiki is 1.35 , but it is strongly recommended to upgrade to 1.43 LTS.

As a user script

To install the script for all Wikimedia wikis, add this to your global.js on Meta:

mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Serhio_Magpie/instantDiffs.js&action=raw&ctype=text/javascript' ); // [[mw:Instant Diffs]]

As a gadget

To install the script as a gadget, create the page MediaWiki:Gadget-instantDiffs.js and add the code provided above. Then, define the gadget in your wiki's MediaWiki:Gadgets-definition page with a configuration like this:

* instantDiffs [ResourceLoader | dependencies=site, mediawiki.api, mediawiki.util, mediawiki.storage, mediawiki.notification, mediawiki.Title, oojs] | instantDiffs.js

As a Greasemonkey / Tampermonkey userscript

Install this script using a userscript manager browser extension.

Sandbox

You're welcome to help test new unstable versions of the script:

mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Serhio_Magpie/instantDiffs.test.js&action=raw&ctype=text/javascript' ); // [[mw:Instant Diffs]]

Local deployment

This gadget is published under user namespace, which may pose a security concern. However, as the sole author, I take all necessary security precautions and have enabled Two-factor authentication. If security concerns remain, or if your security policy/web server rules prohibit external scripts, you can deploy this gadget locally following the instructions on GitHub.

Configuration

For the Users

Instant Diffs offers a wide range of customization options through its user interface. The script first saves user settings in the local storage of the user's browser. If the user is logged in, the script checks whether the GlobalPreferences extension is installed. If it is, the settings are saved globally across all linked projects. Otherwise, the settings are saved locally on the current project.

For the Site Owners and Administrators

If you are considering installing Instant Diffs site-wide for all your users and want to hide some unrelated options from the settings — such as "Enable on the mobile skin" — add the following code before loading the script:

// [[mw:Instant Diffs]]
window.instantDiffs = window.instantDiffs || {};
instantDiffs.settings = instantDiffs.settings || {};
instantDiffs.settings.enableMobile = false;

mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Serhio_Magpie/instantDiffs.js&action=raw&ctype=text/javascript' );

In the example above, setting enableMobile = false will hide the corresponding option in the settings dialog for your users.

Settings options

{
	enableMobile: true,        // If Minerva Neue skin is installed, otherwise false
	notifyErrors: true,
	showLink: true,
	showPageLink: true,
	markWatchedLink: true,
	highlightLine: true,
	markWatchedLine: true,
	viewWidth: true,
	closeOutside: true,
	enableHotkeys: true,
	showDiffTools: true,
	showRevisionInfo: true,
	unHideDiffs: true,
	openInNewTab: true,
	showMenuIcons: true,
	showWatchlistPopup: true,
	linksRevisionHash: true,
	linksFormat: true,
	wikilinksFormat: true,
	pinnedActions: true,
}

If you want to alter the script’s default settings, similar to the example above, add the following code before loading the script:

// [[mw:Instant Diffs]]
window.instantDiffs = window.instantDiffs || {};
instantDiffs.defaults = instantDiffs.defaults || {};
instantDiffs.defaults.enableMobile = false;

mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Serhio_Magpie/instantDiffs.js&action=raw&ctype=text/javascript' );

In the example above, setting enableMobile = false disables Instant Diffs on the mobile skin (Minerva) for your users.

Defaults options

{
	enableMobile: true,
	notifyErrors: true,
	showLink: false,
	showPageLink: true,
	markWatchedLink: true,
	highlightLine: true,
	markWatchedLine: true,
	viewWidth: 'standard',
	closeOutside: true,
	enableHotkeys: true,
	showDiffTools: true,
	showRevisionInfo: true,
	unHideDiffs: true,
	openInNewTab: true,
	showMenuIcons: true,
	showWatchlistPopup: true,
	linksRevisionHash: false,
	linksFormat: 'full',
	wikilinksFormat: 'special',
	pinnedActions: [ "copyLink" ],
}

For the Developers

If you want to use Instant Diffs as part of your user script or gadget, consider loading it with an instantdiffs[standalone]=true query parameter, so the main processes of Instant Diffs don't affect users who have not installed it:

mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Serhio_Magpie/instantDiffs.js&instantdiffs[standalone]=true&action=raw&ctype=text/javascript' );

If you want to add custom actions to the Instant Diffs Actions menu, or mark custom links to be processed by the script, see the Developer guide .

Localization

Instant Diffs by default bundles with English language strings to improve loading time for the majority of users and to provide a fallback for non-existent translations. You can help with translating project on the Translatewiki. On a wiki page where Instant Diffs is running, you can see the message names instead of the messages themselves if you add the uselang=qqx parameter to the end of the URL (just like with MediaWiki).

Available Languages

Integrations

GlobalPreferences extension. Note: Implemented saving user settings globally via API if the extension is installed.
Flagged Revisions extension. Note: Partially implemented. Displays the "View all pending changes" button in the Diff Dialog. Adds link actions on the Special:PendingChanges page.
GlobalContributions extension. Note: Implements viewing foreign diffs and revisions.
GlobalWatchlist extension. Note: Implements viewing foreign diffs.
IPInfo extension. Note: Implements viewing user IP info inside the Instant Diffs dialog.
Translate extension. Note: Partially implemented. Adds actions to the summary links in the editor sidebar.
Convenient Discussions by Jack who built the house. Note: Implemented links that navigate directly to the corresponding comment, replacing links that previously led to the page.
CompareRevisions by BrandonXLF. Note: Tested and fully functional, but currently has conflicts on diff pages. For a smoother experience, consider using a fork.
diffedit by Jon Harald Søby. Note: Tested and fully functional, but currently has a breaking change. Made a PR to the source code to implement content hooks. For a smoother experience, consider using a fork.
fancy-diffs by Enterprisey. Note: Tested and fully functional. No additional implementation required.
SmartDiff by Nardog. Note: Tested and fully functional. No additional implementation required.
Twinkle by AzaToth. Note: Tested and fully functional. Made a PR to the source code. Implemented Instant Diffs dialog closing when clicking on Twinkle links in it.
TwinkleGlobal by Xiplus. Note: Tested and fully functional. Made a PR to the source code. Implemented Instant Diffs dialog closing when clicking on Twinkle links in it.
wikEdDiff by Cacycle. Note: Tested and fully functional. Implemented using a workaround by resetting the state of the diff table.

Changelog

V5.22 (current)

Updates

Added additional CSS variables for customizing Instant Diffs link colors and backgrounds.
Added rateLimit and retries configuration parameters for deployment.
Added support for MediaWiki watchlist labels feature.
Added support for links on the Logs special page.
~~Integrated the new watchlist popup for MediaWiki 1.47.~~
Improved appending section name (hash) to link URLs.
Added processing of the page redirect links.
Refactored extension integrations into modular structure.
Optimized link processing by replacing .filter().map() chain with single-pass for-of loop to reduce iterations.
Added user info card button for the foreign diffs.
Added diff edit links in the foreign diff view.
Marked all revision links in the header on PermanentLink / Revision pages.
Added data-instantdiffs-line selector for manually marked lines.
Improved edge cases with detecting links with special pages.
Added a GitHub Actions workflow that builds and deploys the gadget automatically.
Added support for TimedText, Campaign, and Data namespace resource dependencies to the config.
The hash provided in the initial link is now persistent through switches between diff and revision views and the back link.
Removed notice about limitations in the WikiLambda app as it now shows the actual requested revision (phab:T397902).
Added label for the AbstractWiki content model to the View dialog title.
Made diff links for the first page edit if possible, otherwise, wrap empty diff links with placeholders.
Added navigation to the first diff in the View dialog.
Added processing of external links with class extiw that lead to interwiki pages.
Added selector-based article dependencies.

Settings

Added a new preference setting to enable or disable the watchlist popup.
Added visibility conditions for settings fields: the enableMobile option is not shown on wikis where the Minerva Neue skin is not registered.
Added a new preference setting to mark links as visited.
Added new link format "special" for the copy link action.

Projects

Added support for the dark-grey theme in the Vector legacy skin.
Fixed the border-radius styling of the action button in the Citizen skin.
Minor cleanup of styles for the MonoBook skin.
Fixed diff footer in the Minerva Neue skin.
Added glass effect to the diff mobile footer block in the Minerva skin.
Fixed user tool links placement in the Watchlist in the Minerva skin.
Fixed styles in the revision view in Fandom skins.

Integrations

Fixed links to the Convenient Discussions comments.
Added extension for Extension:IPInfo that attaches its popups into the View dialog overlay.
Added beta integration with the Special:PersonalDashboard pages.
Added integration with SmartDiff gadget.
Visual Feedback: Links are now visually marked as seen in GlobalWatchlist .
Updated integration with GlobalWatchlist : migrated from the mutation observer to the hook.
Added dependencies for Extension:UserProfileV2.

Fixes

Changed the icon of the Pending Changes navigation action to "eyeClosed" to match default appearance.
Fixed styles edge case where Instant Diffs links render over Codex buttons.
Fixed rollback link confirmation by adding support for the new "data-mw-interface" attribute (phab:T409187).
Fixed rollback link empty title error for short wgArticlePath configurations like in Miraheze.
Fixed watchlist popup not updating on subsequent watch/unwatch actions.
Fixed text selection occurring during alt+click interactions.
Fixed blocks shrink when viewing revisions on Wikidata .
Fixed a malformed URI error when parsing hashes in the Article class.
Fixed CSRF token handling in the Api class.
Fixed CSRF token issues when viewing diffs from the GlobalWatchlist .
Fixed Instant Diffs icons in empty links in new Parsoid.
Fixed diff mobile footer placement in the revision view.
Guard the empty-message warning when viewing revisions to prevent some edge-cases.
Fixed label for the Lexeme content model in the View dialog title.
Fixed navigation between foreign link and back link to the local link.
Fixed error notification when request was aborted in the foreign revision view.

Features

Installation

As a user script

As a gadget

As a Greasemonkey / Tampermonkey userscript

Sandbox

Local deployment

Configuration

For the Users

For the Site Owners and Administrators

For the Developers

Localization

Available Languages

Integrations

Changelog

V5.22 (current)

Updates

Settings

Projects

Integrations

Fixes

See also