lighthouse 9.5.0-dev.20220613 → 9.5.0-dev.20220616

package/lighthouse-core/fraggle-rock/user-flow.js

@@ -108,13 +108,64 @@ class UserFlow {
    */
   async navigate(requestor, stepOptions) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
+    if (this.currentNavigation) throw new Error('Navigation already in progress');
 
     const options = this._getNextNavigationOptions(stepOptions);
     const gatherResult = await navigationGather(requestor, options);
 
     this._addGatherStep(gatherResult, options);
+  }
+
+  /**
+   * This is an alternative to `navigate()` that can be used to analyze a navigation triggered by user interaction.
+   * For more on user triggered navigations, see https://github.com/GoogleChrome/lighthouse/blob/master/docs/user-flows.md#triggering-a-navigation-via-user-interactions.
+   *
+   * @param {StepOptions=} stepOptions
+   */
+  async startNavigation(stepOptions) {
+    /** @type {(value: () => void) => void} */
+    let completeSetup;
+    /** @type {(value: any) => void} */
+    let rejectDuringSetup;
+
+    // This promise will resolve once the setup is done
+    // and Lighthouse is waiting for a page navigation to be triggered.
+    const navigationSetupPromise = new Promise((resolve, reject) => {
+      completeSetup = resolve;
+      rejectDuringSetup = reject;
+    });
+
+    // The promise in this callback will not resolve until `continueNavigation` is invoked,
+    // because `continueNavigation` is passed along to `navigateSetupPromise`
+    // and extracted into `continueAndAwaitResult` below.
+    const navigationResultPromise = this.navigate(
+      () => new Promise(continueNavigation => completeSetup(continueNavigation)),
+      stepOptions
+    ).catch(err => {
+      if (this.currentNavigation) {
+        // If the navigation already started, re-throw the error so it is emitted when `navigationResultPromise` is awaited.
+        throw err;
+      } else {
+        // If the navigation has not started, reject the `navigationSetupPromise` so the error throws when it is awaited in `startNavigation`.
+        rejectDuringSetup(err);
+      }
+    });
+
+    const continueNavigation = await navigationSetupPromise;
 
-    return gatherResult;
+    async function continueAndAwaitResult() {
+      continueNavigation();
+      await navigationResultPromise;
+    }
+
+    this.currentNavigation = {continueAndAwaitResult};
+  }
+
+  async endNavigation() {
+    if (this.currentTimespan) throw new Error('Timespan already in progress');
+    if (!this.currentNavigation) throw new Error('No navigation in progress');
+    await this.currentNavigation.continueAndAwaitResult();
+    this.currentNavigation = undefined;
   }
 
   /**
@@ -122,6 +173,7 @@ class UserFlow {
    */
   async startTimespan(stepOptions) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
+    if (this.currentNavigation) throw new Error('Navigation already in progress');
 
     const options = {...this.options, ...stepOptions};
     const timespan = await startTimespanGather(options);
@@ -130,14 +182,13 @@ class UserFlow {
 
   async endTimespan() {
     if (!this.currentTimespan) throw new Error('No timespan in progress');
+    if (this.currentNavigation) throw new Error('Navigation already in progress');
 
     const {timespan, options} = this.currentTimespan;
     const gatherResult = await timespan.endTimespanGather();
     this.currentTimespan = undefined;
 
     this._addGatherStep(gatherResult, options);
-
-    return gatherResult;
   }
 
   /**
@@ -145,13 +196,12 @@ class UserFlow {
    */
   async snapshot(stepOptions) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
+    if (this.currentNavigation) throw new Error('Navigation already in progress');
 
     const options = {...this.options, ...stepOptions};
     const gatherResult = await snapshotGather(options);
 
     this._addGatherStep(gatherResult, options);
-
-    return gatherResult;
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220613",
+  "version": "9.5.0-dev.20220616",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/report/renderer/dom.js

@@ -133,9 +133,13 @@ export class DOM {
     const element = this.createElement('span');
 
     for (const segment of Util.splitMarkdownLink(text)) {
+      const processedSegment = segment.text.includes('`') ?
+        this.convertMarkdownCodeSnippets(segment.text) :
+        segment.text;
+
       if (!segment.isLink) {
         // Plain text segment.
-        element.append(this._document.createTextNode(segment.text));
+        element.append(processedSegment);
         continue;
       }
 
@@ -151,7 +155,7 @@ export class DOM {
       const a = this.createElement('a');
       a.rel = 'noopener';
       a.target = '_blank';
-      a.textContent = segment.text;
+      a.append(processedSegment);
       this.safelySetHref(a, url.href);
       element.append(a);
     }

package/report/test/renderer/dom-test.js

@@ -96,6 +96,21 @@ describe('DOM', () => {
           'and some text afterwards.', 'link with spaces in brackets');
     });
 
+    it('correctly converts code snippets', () => {
+      let result = dom.convertMarkdownLinkSnippets(
+        'Some `code`. [Learn more](http://example.com).');
+      assert.equal(result.innerHTML,
+        '<span>Some <code>code</code>. </span>' +
+        '<a rel="noopener" target="_blank" href="http://example.com/">Learn more</a>.');
+
+      result = dom.convertMarkdownLinkSnippets(
+        '[link with `code`](https://example.com/foo) and some text afterwards.');
+      assert.equal(result.innerHTML,
+        '<a rel="noopener" target="_blank" href="https://example.com/foo">' +
+        '<span>link with <code>code</code></span>' +
+        '</a> and some text afterwards.', 'link with code snippet inside');
+    });
+
     it('handles invalid urls', () => {
       const text = 'Text has [bad](https:///) link.';
       assert.throws(() => {
@@ -120,8 +135,9 @@ describe('DOM', () => {
       const text = 'Ensuring `<td>` cells using the `[headers]` are good. ' +
           '[Learn more](https://dequeuniversity.com/rules/axe/3.1/td-headers-attr).';
       const result = dom.convertMarkdownLinkSnippets(text);
-      assert.equal(result.innerHTML, 'Ensuring `&lt;td&gt;` cells using the `[headers]` are ' +
-          'good. <a rel="noopener" target="_blank" href="https://dequeuniversity.com/rules/axe/3.1/td-headers-attr">Learn more</a>.');
+      assert.equal(result.innerHTML,
+          '<span>Ensuring <code>&lt;td&gt;</code> cells using the <code>[headers]</code> are ' +
+          'good. </span><a rel="noopener" target="_blank" href="https://dequeuniversity.com/rules/axe/3.1/td-headers-attr">Learn more</a>.');
     });
 
     it('appends utm params to the URLs with https://developers.google.com origin', () => {