jonny/Vector-Local
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge "Add client-side performance metrics for searchLoader"

Browse source
This commit is contained in:
jenkins-bot 2020-10-15 08:47:18 +00:00 committed by Gerrit Code Review
parent 4c1d528471 8cf278d305
commit 99f9597109
2 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/mediawiki.d.ts vendored
View file

@ -43,8 +43,12 @@ interface MediaWiki {
* Execute a function after one or more modules are ready. * Execute a function after one or more modules are ready.
* *
* @param moduleName * @param moduleName
* @param {Function} ready Callback to execute when all dependencies are
* ready.
* @param {Function} after Callback to execute if one or more dependencies
* failed.
*/ */
using( moduleName: string|null ): JQuery.Promise<any>; using( moduleName: string|null, ready?: Function, error?: Function ): JQuery.Promise<any>;
/** /**
* Load a given resourceLoader module. * Load a given resourceLoader module.

38
resources/skins.vector.js/searchLoader.js
View file

@ -11,6 +11,17 @@
var /** @type {VectorResourceLoaderVirtualConfig} */ var /** @type {VectorResourceLoaderVirtualConfig} */
config = require( /** @type {string} */ ( './config.json' ) ), config = require( /** @type {string} */ ( './config.json' ) ),
// T251544: Collect search performance metrics to compare Vue search with
// mediawiki.searchSuggest performance.
SHOULD_TEST_SEARCH = !!(
!config.wgVectorUseCoreSearch &&
window.performance &&
performance.mark &&
performance.measure &&
performance.getEntriesByName ),
LOAD_START_MARK = 'mwVectorVueSearchLoadStart',
LOAD_END_MARK = 'mwVectorVueSearchLoadEnd',
LOAD_MEASURE = 'mwVectorVueSearchLoadStartToLoadEnd',
SEARCH_FORM_ID = 'simpleSearch', SEARCH_FORM_ID = 'simpleSearch',
SEARCH_INPUT_ID = 'searchInput', SEARCH_INPUT_ID = 'searchInput',
SEARCH_LOADING_CLASS = 'search-form__loader', SEARCH_LOADING_CLASS = 'search-form__loader',
@ -32,7 +43,10 @@ var /** @type {VectorResourceLoaderVirtualConfig} */
function loadSearchModule( element, moduleName, afterLoadFn ) { function loadSearchModule( element, moduleName, afterLoadFn ) {
function requestSearchModule() { function requestSearchModule() {
mw.loader.using( moduleName ).then( afterLoadFn ); if ( SHOULD_TEST_SEARCH ) {
performance.mark( LOAD_START_MARK );
}
mw.loader.using( moduleName, afterLoadFn );
element.removeEventListener( 'focus', requestSearchModule ); element.removeEventListener( 'focus', requestSearchModule );
} }
@ -101,6 +115,16 @@ function setLoadingIndicatorListeners( element, attach, eventCallback ) {
} }
} }
/**
* Marks when the lazy load has completed.
*/
function markLoadEnd() {
if ( SHOULD_TEST_SEARCH && performance.getEntriesByName( LOAD_START_MARK ).length ) {
performance.mark( LOAD_END_MARK );
performance.measure( LOAD_MEASURE, LOAD_START_MARK, LOAD_END_MARK );
}
}
/** /**
* Initialize the loading of the search module as well as the loading indicator. * Initialize the loading of the search module as well as the loading indicator.
* Only initialize the loading indicator when not using the core search module. * Only initialize the loading indicator when not using the core search module.
@ -128,9 +152,17 @@ function initSearchLoader( document ) {
loadSearchModule( loadSearchModule(
searchInput, searchInput,
SEARCH_MODULE_NAME, SEARCH_MODULE_NAME,
setLoadingIndicatorListeners.bind( null, function () {
searchForm, false, renderSearchLoadingIndicator ) markLoadEnd();
setLoadingIndicatorListeners(
/** @type {HTMLElement} */ ( searchForm ),
false,
renderSearchLoadingIndicator
);
}
); );
} }
} }