Update user-flow.md to reflect current release

- Change flow import path from `import lighthouse from 'lighthouse/core/api.js';` to `import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';`

- remove `startNavigation`/`endNavigation`

- change interactive navigation with `startNavigation`/`endNavigation` to a callback navigation

- change `beginTimepsan` to `startTimespan`

docs/user-flows.md

@@ -40,12 +40,12 @@ In DevTools, navigation is easy: ensure it's the selected mode and then click _A
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse/core/api.js';
+import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 (async function() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  const flow = await lighthouse.startFlow(page);
+  const flow = await startFlow(page);
 
   // Navigate with a URL
   await flow.navigate('https://example.com');
@@ -55,11 +55,6 @@ import lighthouse from 'lighthouse/core/api.js';
     await page.click('a.link');
   });
 
-  // Navigate with startNavigation/endNavigation
-  await flow.startNavigation();
-  await page.click('a.link');
-  await flow.endNavigation();
-
   await browser.close();
   writeFileSync('report.html', await flow.generateReport());
 })();
@@ -75,8 +70,6 @@ Instead of providing a URL to navigate to, you can provide a callback function o
 
 This callback function _must_ perform an action that will trigger a navigation. Any interactions completed before the callback promise resolves will be captured by the navigation.
 
-The `startNavigation`/`endNavigation` functions _must_ surround an action that triggers a navigation. Any interactions completed after `startNavigation` is invoked and before `endNavigation` is invoked will be captured by the navigation.
-
 ### Timespan
 
 <img src="https://user-images.githubusercontent.com/39191/170560055-fb599418-c94d-44bf-9921-be4dce6abccf.png">
@@ -90,15 +83,15 @@ In DevTools, select "Timespan" as the mode and click _Start timespan_. Record wh
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse/core/api.js';
+import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 (async function() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://secret.login');
-  const flow = await lighthouse.startFlow(page);
+  const flow = await startFlow(page);
 
-  await flow.beginTimespan();
+  await flow.startTimespan();
   await page.type('#password', 'L1ghth0useR0cks!');
   await page.click('#login');
   await page.waitForSelector('#dashboard');
@@ -125,13 +118,13 @@ In DevTools, select "Snapshot" as the mode. Set up the page in the state you wan
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse/core/api.js';
+import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 (async function() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://example.com');
-  const flow = await lighthouse.startFlow(page);
+  const flow = await startFlow(page);
 
   await page.click('#expand-sidebar');
   await flow.snapshot();
@@ -164,7 +157,7 @@ The below example codifies a user flow for an ecommerce site where the user navi
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
 import * as pptrTestingLibrary from 'pptr-testing-library';
-import lighthouse from 'lighthouse/core/api.js';
+import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 const {getDocument, queries} = pptrTestingLibrary;
 
@@ -182,15 +175,13 @@ async function search(page) {
   // Setup the browser and Lighthouse.
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  const flow = await lighthouse.startFlow(page);
+  const flow = await startFlow(page);
 
   // Phase 1 - Navigate to the landing page.
   await flow.navigate('https://www.bestbuy.com');
 
   // Phase 2 - Interact with the page and submit the search form.
-  await flow.startTimespan();
-  await search(page);
-  await flow.endTimespan();
+  await flow.navigate(async () => await search(page));
 
   // Phase 3 - Analyze the new state.
   await flow.snapshot();