Add user timings for WebPageTest

Use the browser's `performance.mark` API.

Add two timings:

- `react-server.wake`
    - When the ClientController is instantiated.
- `react-server.renderAboveTheFold`
    - When the content above the fold has been re-rendered (visible page is interactive)
- `react-server.renderComplete`
    - When the whole page has been re-rendered (fully interactive)

packages/react-server/core/ClientController.js

@@ -83,6 +83,9 @@ class ClientController extends EventEmitter {
 
 		// Log this after loglevel is set.
 		logTimingData('wakeFromStart', window._reactServerTimingStart);
+
+		performanceMark('wake');
+
 		// this is a proxy for when above the fold content gets painted (displayed) on the browser
 		logTimingData('displayAboveTheFold.fromStart', window._reactServerTimingStart, window.__displayAboveTheFold);
 	}
@@ -653,6 +656,8 @@ class ClientController extends EventEmitter {
 					logTimingData(`renderAboveTheFold.fromStart`, tStart);
 					logTimingData(`renderAboveTheFold.individual`, 0, totalRenderTime);
 					logTimingData(`renderAboveTheFold.elementCount`, 0, index + 1);
+
+					performanceMark('renderAboveTheFold');
 				}
 				return; // Again, this isn't a real root element.
 			}
@@ -730,6 +735,8 @@ class ClientController extends EventEmitter {
 			// Don't track this on client transitions.
 			if (!this._previouslyRendered){
 				logTimingData('renderFromStart', tStart);
+
+				performanceMark('renderComplete');
 			}
 
 			// Some things are just different on our first pass.
@@ -930,6 +937,13 @@ function buildContext(routes) {
 	return context;
 }
 
+// Create a "user timing" in WebPageTest.
+function performanceMark(name) {
+	if (window.performance && performance.mark) {
+		performance.mark(`react-server.${name}`);
+	}
+}
+
 function logTimingData(bucket, start, end = new Date) {
 	if (start === undefined) {
 		//don't send timing data if start timing is undefined