Track how long it takes to open a preview

The search platform is working on creating SLI's around various search
use cases, including search previews. Add a metric that times how long
it takes between initiating and finishing a preview load.

Bug: T335499
Change-Id: I79ffae7155ab99180c8cd2d4d7503a1593a5daca

extension.json

@@ -73,6 +73,7 @@
 				"resources/stores/Query.js",
 				"resources/stores/Root.js",
 				"resources/stores/Dom.js",
+				"resources/stores/Timing.js",
 				{
 					"name": "codex-icons.json",
 					"callback": "MediaWiki\\ResourceLoader\\CodexModule::getIcons",

resources/components/App.vue

@@ -27,7 +27,8 @@ const AppViewMobile = require( './AppViewMobile.vue' ),
 	useEventStore = require( '../stores/Event.js' ),
 	useRootStore = require( '../stores/Root.js' ),
 	useDomStore = require( '../stores/Dom.js' ),
-	useRequestStatusStore = require( '../stores/RequestStatus.js' );
+	useRequestStatusStore = require( '../stores/RequestStatus.js' ),
+	useTimingStore = require( '../stores/Timing.js' );
 
 // @vue/component
 module.exports = exports = {
@@ -54,7 +55,8 @@ module.exports = exports = {
 		mapState( useRootStore, [
 			'isMobile',
 			'title',
-			'results'
+			'results',
+			'visible'
 		] ),
 		mapState( useRequestStatusStore, [
 			'loading'
@@ -130,6 +132,8 @@ module.exports = exports = {
 	watch: {
 		title: {
 			handler( title ) {
+				const timingStore = useTimingStore();
+				timingStore.reset();
 				if ( title ) {
 					this.setQueryQuickViewTitle();
 				}
@@ -138,12 +142,22 @@ module.exports = exports = {
 		},
 		loading: {
 			handler( loading ) {
-				// We re-calculate the tabbable element everytime the loading is complete.
-				if ( !loading ) {
+				if ( loading ) {
+					useTimingStore().start();
+				} else {
+					// We re-calculate the tabbable element everytime the loading is complete.
 					this.updateTabbableElements();
+					useTimingStore().complete();
 				}
 			},
 			flush: 'post'
+		},
+		visible: {
+			handler( visible ) {
+				if ( !visible ) {
+					useTimingStore().reset();
+				}
+			}
 		}
 	},
 	created() {

resources/stores/Timing.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const Pinia = require( 'pinia' );
+
+const useTimingStore = Pinia.defineStore( 'timing', {
+	state: () => ( {
+		startTime: 0
+	} ),
+	getters: {
+	},
+	actions: {
+		/**
+		 * Marks when loading started
+		 */
+		start() {
+			this.startTime = performance.now();
+		},
+		/**
+		 * Reports load timing, if available
+		 */
+		complete() {
+			if ( !this.startTime ) {
+				return;
+			}
+			const took = performance.now() - this.startTime;
+			mw.track( 'timing.SearchVue.LoadPreview', took );
+			this.reset();
+		},
+		/**
+		 * Reset the current timing
+		 */
+		reset() {
+			this.startTime = 0;
+		}
+	}
+} );
+
+module.exports = useTimingStore;