Change delay for ReferencePreviews to 150ms

Bug: T215420
Change-Id: Id1fa7dad59d8fe80bc60c1e2d7c3fb4087e52d1f

src/actions.js

@@ -28,6 +28,8 @@ const $ = jQuery,
 	// delay from start to finish is 500 ms.
 	FETCH_COMPLETE_TARGET_DELAY = 350 + FETCH_START_DELAY, // ms.
 
+	FETCH_DELAY_REFERENCE_TYPE = 150, // ms.
+
 	ABANDON_END_DELAY = 300; // ms.
 
 /**
@@ -95,6 +97,23 @@ export function boot(
 	};
 }
 
+/**
+ * Determines the delay before showing the preview when dwelling a link.
+ *
+ * @param {string} type
+ * @return {number}
+ */
+function getDwellDelay( type ) {
+	switch ( type ) {
+		case previewTypes.TYPE_PAGE:
+			return FETCH_COMPLETE_TARGET_DELAY - FETCH_START_DELAY;
+		case previewTypes.TYPE_REFERENCE:
+			return FETCH_DELAY_REFERENCE_TYPE;
+		default:
+			return 0;
+	}
+}
+
 /**
  * Represents Page Previews fetching data via the gateway.
  *
@@ -103,9 +122,10 @@ export function boot(
  * @param {Element} el
  * @param {string} token The unique token representing the link interaction that
  *  triggered the fetch
+ * @param {string} type
  * @return {Redux.Thunk}
  */
-export function fetch( gateway, title, el, token ) {
+export function fetch( gateway, title, el, token, type ) {
 	const titleText = title.getPrefixedDb(),
 		namespaceId = title.namespace;
 
@@ -145,7 +165,7 @@ export function fetch( gateway, title, el, token ) {
 
 		return $.when(
 			chain,
-			wait( FETCH_COMPLETE_TARGET_DELAY - FETCH_START_DELAY )
+			wait( getDwellDelay( type ) )
 		)
 			.then( ( result ) => {
 				dispatch( {
@@ -199,9 +219,10 @@ export function fetch( gateway, title, el, token ) {
  * @param {Event} event
  * @param {Gateway} gateway
  * @param {Function} generateToken
+ * @param {string} type
  * @return {Redux.Thunk}
  */
-export function linkDwell( title, el, event, gateway, generateToken ) {
+export function linkDwell( title, el, event, gateway, generateToken, type ) {
 	const token = generateToken(),
 		titleText = title.getPrefixedDb(),
 		namespaceId = title.namespace;
@@ -233,7 +254,7 @@ export function linkDwell( title, el, event, gateway, generateToken ) {
 			const previewState = getState().preview;
 
 			if ( previewState.enabled && isNewInteraction() ) {
-				return dispatch( fetch( gateway, title, el, token ) );
+				return dispatch( fetch( gateway, title, el, token, type ) );
 			}
 		} );
 	};

src/index.js

@@ -240,9 +240,10 @@ function registerChangeListeners(
 			if ( !mwTitle ) {
 				return;
 			}
+			const type = selectGatewayType( this, mw.config, mwTitle );
 			let gateway;
 
-			switch ( selectGatewayType( this, mw.config, mwTitle ) ) {
+			switch ( type ) {
 				case previewTypes.TYPE_PAGE:
 					gateway = pagePreviewGateway;
 					break;
@@ -253,7 +254,7 @@ function registerChangeListeners(
 					return;
 			}
 
-			boundActions.linkDwell( mwTitle, this, event, gateway, generateToken );
+			boundActions.linkDwell( mwTitle, this, event, gateway, generateToken, type );
 		} )
 		.on( 'mouseout blur', validLinkSelector, function () {
 			const mwTitle = titleFromElement( this, mw.config );

tests/node-qunit/actions.test.js

@@ -2,6 +2,7 @@ import { createStubUser, createStubTitle } from './stubs';
 import * as actions from '../../src/actions';
 import * as WaitModule from '../../src/wait';
 import actionTypes from '../../src/actionTypes';
+import { previewTypes } from '../../src/preview/model';
 
 const mw = mediaWiki,
 	REFERRER = 'https://en.wikipedia.org/wiki/Kitten',
@@ -114,7 +115,7 @@ QUnit.test( '#linkDwell', function ( assert ) {
 	};
 
 	const linkDwelled = actions.linkDwell(
-		this.title, this.el, event, /* gateway = */ null, generateToken
+		this.title, this.el, event, /* gateway = */ null, generateToken, previewTypes.TYPE_PAGE
 	)(
 		dispatch,
 		this.getState
@@ -164,7 +165,7 @@ QUnit.test( '#linkDwell doesn\'t continue when previews are disabled', function
 	};
 
 	const linkDwelled = actions.linkDwell(
-		this.title, this.el, event, /* gateway = */ null, generateToken
+		this.title, this.el, event, /* gateway = */ null, generateToken, previewTypes.TYPE_PAGE
 	)(
 		dispatch,
 		this.getState
@@ -197,7 +198,7 @@ QUnit.test( '#linkDwell doesn\'t continue if the token has changed', function (
 	};
 
 	const linkDwelled = actions.linkDwell(
-		this.title, this.el, event, /* gateway = */ null, generateToken
+		this.title, this.el, event, /* gateway = */ null, generateToken, previewTypes.TYPE_PAGE
 	)(
 		dispatch,
 		this.getState
@@ -234,7 +235,7 @@ QUnit.test( '#linkDwell dispatches the fetch action', function ( assert ) {
 	};
 
 	return actions.linkDwell(
-		this.title, this.el, event, /* gateway = */ null, generateToken
+		this.title, this.el, event, /* gateway = */ null, generateToken, previewTypes.TYPE_PAGE
 	)(
 		dispatch,
 		this.getState
@@ -270,7 +271,7 @@ QUnit.module( 'ext.popups/actions#fetch', {
 		// Sugar.
 		this.fetch = () => {
 			return actions.fetch(
-				this.gateway, this.title, this.el, this.token
+				this.gateway, this.title, this.el, this.token, previewTypes.TYPE_PAGE
 			)( this.dispatch );
 		};
 	}

tests/node-qunit/integration.test.js

@@ -5,6 +5,7 @@ import * as stubs from './stubs';
 import * as actions from '../../src/actions';
 import reducers from '../../src/reducers';
 import registerChangeListener from '../../src/changeListener';
+import { previewTypes } from '../../src/preview/model';
 
 const mw = mediaWiki,
 	$ = jQuery,
@@ -111,7 +112,7 @@ QUnit.module( 'ext.popups preview @integration', {
 					};
 					return $.Deferred()[ method ]( fetchResponse ).promise( abort );
 				}
-			}, () => 'pagetoken' );
+			}, () => 'pagetoken', previewTypes.TYPE_PAGE );
 		};
 
 		this.dwellAndShowPreview = (

webpack.config.js

@@ -110,8 +110,8 @@ module.exports = ( env, argv ) => ( {
 		// Minified uncompressed size limits for chunks / assets and entrypoints. Keep these numbers
 		// up-to-date and rounded to the nearest 10th of a kibibyte so that code sizing costs are
 		// well understood. Related to bundlesize minified, gzipped compressed file size tests.
-		maxAssetSize: 40.0 * 1024,
+		maxAssetSize: 40.2 * 1024,
-		maxEntrypointSize: 40.0 * 1024,
+		maxEntrypointSize: 40.2 * 1024,
 
 		// The default filter excludes map files but we rename ours.
 		assetFilter: ( filename ) => !filename.endsWith( srcMapExt )