Merge 3bd226d into 3c44137

lighthouse-cli/test/cli/__snapshots__/index-test.js.snap

@@ -399,6 +399,9 @@ Object {
     Object {
       "path": "dobetterweb/geolocation-on-start",
     },
+    Object {
+      "path": "dobetterweb/has-inspector-issues",
+    },
     Object {
       "path": "dobetterweb/no-document-write",
     },
@@ -797,6 +800,11 @@ Object {
           "id": "valid-source-maps",
           "weight": 0,
         },
+        Object {
+          "group": "best-practices-general",
+          "id": "has-inspector-issues",
+          "weight": 1,
+        },
       ],
       "title": "Best Practices",
     },

lighthouse-core/audits/dobetterweb/has-inspector-issues.js

@@ -0,0 +1,192 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Audits a page to determine whether it generates issues in the Issues panel of Chrome Devtools.
+ * The audit is meant to maintain parity with the Chrome Devtools Issues panel front end.
+ * https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/sdk/
+ */
+
+'use strict';
+
+/** @typedef {{url: string}} IssueSubItem */
+/** @typedef {{issueType: string|LH.IcuMessage, subItems: Array<IssueSubItem>}} IssueItem */
+
+const Audit = require('../audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on various types of problems with a website, like security or network errors. This descriptive title is shown to users when no issues were logged into the Chrome DevTools Issues panel. */
+  title: 'No issues in the `Issues` panel in Chrome Devtools',
+  /** Title of a Lighthouse audit that provides detail on various types of problems with a website, like security or network errors. This descriptive title is shown to users when issues are detected and logged into the Chrome DevTools Issues panel. */
+  failureTitle: 'Issues were logged in the `Issues` panel in Chrome Devtools',
+  /* eslint-disable max-len */
+  /** Description of a Lighthouse audit that tells the user why issues being logged to the Chrome DevTools Issues panel are a cause for concern and so should be fixed. This is displayed after a user expands the section to see more. No character length limits. */
+  description: 'Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.',
+  /* eslint-enable max-len */
+  /** Table column header for the types of problems observed in a website, like security or network errors. */
+  columnIssueType: 'Issue type',
+  /** The type of an Issue in Chrome DevTools when a resource is blocked due to the website's cross-origin policy. */
+  issueTypeBlockedByResponse: 'Blocked by cross-origin policy',
+  /** The type of an Issue in Chrome DevTools when a site has large ads that use up a lot of the browser's resources. */
+  issueTypeHeavyAds: 'Heavy resource usage by ads',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class IssuesPanelEntries extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'has-inspector-issues',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['InspectorIssues'],
+    };
+  }
+
+  /**
+   * @param {Array<LH.Crdp.Audits.MixedContentIssueDetails>} mixedContentIssues
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static getMixedContentRow(mixedContentIssues) {
+    const requestUrls = new Set();
+    for (const issue of mixedContentIssues) {
+      const requestUrl = (issue.request && issue.request.url) || issue.mainResourceURL;
+      requestUrls.add(requestUrl);
+    }
+    return {
+      issueType: 'Mixed content',
+      subItems: {
+        type: 'subitems',
+        items: Array.from(requestUrls).map(url => ({url})),
+      },
+    };
+  }
+
+  /**
+   * @param {Array<LH.Crdp.Audits.SameSiteCookieIssueDetails>} sameSiteCookieIssues
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static getSameSiteCookieRow(sameSiteCookieIssues) {
+    const requestUrls = new Set();
+    for (const issue of sameSiteCookieIssues) {
+      const requestUrl = (issue.request && issue.request.url) || issue.cookieUrl;
+      if (requestUrl) {
+        requestUrls.add(requestUrl);
+      }
+    }
+    return {
+      issueType: 'SameSite cookie',
+      subItems: {
+        type: 'subitems',
+        items: Array.from(requestUrls).map(url => {
+          return {
+            url,
+          };
+        }),
+      },
+    };
+  }
+
+  /**
+   * @param {Array<LH.Crdp.Audits.BlockedByResponseIssueDetails>} blockedByResponseIssues
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static getBlockedByResponseRow(blockedByResponseIssues) {
+    const requestUrls = new Set();
+    for (const issue of blockedByResponseIssues) {
+      const requestUrl = issue.request && issue.request.url;
+      if (requestUrl) {
+        requestUrls.add(requestUrl);
+      }
+    }
+    return {
+      issueType: str_(UIStrings.issueTypeBlockedByResponse),
+      subItems: {
+        type: 'subitems',
+        items: Array.from(requestUrls).map(url => {
+          return {
+            url,
+          };
+        }),
+      },
+    };
+  }
+
+  /**
+   * @param {Array<LH.Crdp.Audits.ContentSecurityPolicyIssueDetails>} cspIssues
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static getContentSecurityPolicyRow(cspIssues) {
+    const requestUrls = new Set();
+    for (const issue of cspIssues) {
+      const requestUrl = issue.blockedURL;
+      if (requestUrl) {
+        requestUrls.add(requestUrl);
+      }
+    }
+    return {
+      issueType: 'Content security policy',
+      subItems: {
+        type: 'subitems',
+        items: Array.from(requestUrls).map(url => {
+          return {
+            url,
+          };
+        }),
+      },
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'issueType', itemType: 'text', subItemsHeading: {key: 'url', itemType: 'url'}, text: str_(UIStrings.columnIssueType)},
+      /* eslint-enable max-len */
+    ];
+
+    const issues = artifacts.InspectorIssues;
+    /** @type LH.Audit.Details.TableItem[] */
+    const items = [];
+
+    if (issues.mixedContent.length) {
+      items.push(this.getMixedContentRow(issues.mixedContent));
+    }
+    if (issues.sameSiteCookies.length) {
+      items.push(this.getSameSiteCookieRow(issues.sameSiteCookies));
+    }
+    if (issues.blockedByResponse.length) {
+      items.push(this.getBlockedByResponseRow(issues.blockedByResponse));
+    }
+    if (issues.heavyAds.length) {
+      items.push({issueType: str_(UIStrings.issueTypeHeavyAds)});
+    }
+    const cspIssues = issues.contentSecurityPolicy.filter(issue => {
+      // kTrustedTypesSinkViolation and kTrustedTypesPolicyViolation aren't currently supported by the Issues panel
+      return issue.contentSecurityPolicyViolationType !== 'kTrustedTypesSinkViolation' &&
+        issue.contentSecurityPolicyViolationType !== 'kTrustedTypesPolicyViolation';
+    });
+    if (cspIssues.length) {
+      items.push(this.getContentSecurityPolicyRow(cspIssues));
+    }
+    return {
+      score: items.length > 0 ? 0 : 1,
+      details: Audit.makeTableDetails(headings, items),
+    };
+  }
+}
+
+module.exports = IssuesPanelEntries;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/errors-in-console.js

@@ -23,8 +23,6 @@ const UIStrings = {
   description: 'Errors logged to the console indicate unresolved problems. ' +
     'They can come from network request failures and other browser concerns. ' +
     '[Learn more](https://web.dev/errors-in-console/)',
-  /**  Label for a column in a data table; entries in the column will be the descriptions of logged browser errors. */
-  columnDesc: 'Description',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -116,7 +114,7 @@ class ErrorLogs extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'description', itemType: 'code', text: str_(UIStrings.columnDesc)},
+      {key: 'description', itemType: 'code', text: str_(i18n.UIStrings.columnDescription)},
     ];
 
     const details = Audit.makeTableDetails(headings, tableRows);

lighthouse-core/config/default-config.js

@@ -318,6 +318,7 @@ const defaultConfig = {
     'dobetterweb/dom-size',
     'dobetterweb/external-anchors-use-rel-noopener',
     'dobetterweb/geolocation-on-start',
+    'dobetterweb/has-inspector-issues',
     'dobetterweb/no-document-write',
     'dobetterweb/no-vulnerable-libraries',
     'dobetterweb/js-libraries',
@@ -572,6 +573,7 @@ const defaultConfig = {
         {id: 'deprecations', weight: 1, group: 'best-practices-general'},
         {id: 'errors-in-console', weight: 1, group: 'best-practices-general'},
         {id: 'valid-source-maps', weight: 0, group: 'best-practices-general'},
+        {id: 'has-inspector-issues', weight: 1, group: 'best-practices-general'},
       ],
     },
     'seo': {

lighthouse-core/gather/gatherers/inspector-issues.js

@@ -50,17 +50,51 @@ class InspectorIssues extends Gatherer {
     const artifact = {
       /** @type {Array<LH.Crdp.Audits.MixedContentIssueDetails>} */
       mixedContent: [],
+      /** @type {Array<LH.Crdp.Audits.SameSiteCookieIssueDetails>} */
+      sameSiteCookies: [],
+      /** @type {Array<LH.Crdp.Audits.BlockedByResponseIssueDetails>} */
+      blockedByResponse: [],
+      /** @type {Array<LH.Crdp.Audits.HeavyAdIssueDetails>} */
+      heavyAds: [],
+      /** @type {Array<LH.Crdp.Audits.ContentSecurityPolicyIssueDetails>} */
+      contentSecurityPolicy: [],
     };
 
     for (const issue of this._issues) {
       if (issue.details.mixedContentIssueDetails) {
         const issueDetails = issue.details.mixedContentIssueDetails;
         const issueReqId = issueDetails.request && issueDetails.request.requestId;
+        // Duplicate issues can occur for the same request; only use the one with a matching networkRequest.
         if (issueReqId &&
           networkRecords.find(req => req.requestId === issueReqId)) {
-          artifact.mixedContent.push(issue.details.mixedContentIssueDetails);
+          artifact.mixedContent.push(issueDetails);
         }
       }
+      if (issue.details.sameSiteCookieIssueDetails) {
+        const issueDetails = issue.details.sameSiteCookieIssueDetails;
+        const issueReqId = issueDetails.request && issueDetails.request.requestId;
+        // Duplicate issues can occur for the same request; only use the one with a matching networkRequest.
+        if (issueReqId &&
+          networkRecords.find(req => req.requestId === issueReqId)) {
+          artifact.sameSiteCookies.push(issueDetails);
+        }
+      }
+      if (issue.details.blockedByResponseIssueDetails) {
+        const issueDetails = issue.details.blockedByResponseIssueDetails;
+        const issueReqId = issueDetails.request && issueDetails.request.requestId;
+        // Duplicate issues can occur for the same request; only use the one with a matching networkRequest.
+        if (issueReqId &&
+          networkRecords.find(req => req.requestId === issueReqId)) {
+          artifact.blockedByResponse.push(issueDetails);
+        }
+      }
+      if (issue.details.heavyAdIssueDetails) {
+        artifact.heavyAds.push(issue.details.heavyAdIssueDetails);
+      }
+      // Duplicate issues can occur for the same request; only use the one with a matching networkRequest.
+      if (issue.details.contentSecurityPolicyIssueDetails) {
+        artifact.contentSecurityPolicy.push(issue.details.contentSecurityPolicyIssueDetails);
+      }
     }
 
     return artifact;

lighthouse-core/lib/i18n/i18n.js

@@ -90,6 +90,8 @@ const UIStrings = {
   columnDuration: 'Duration',
   /** Label for a column in a data table; entries will be a representation of a DOM element that did not meet certain suggestions. */
   columnFailingElem: 'Failing Elements',
+  /** Label for a column in a data table; entries will be a description of the table item. */
+  columnDescription: 'Description',
   /** Label for a row in a data table; entries will be the total number and byte size of all resources loaded by a web page. */
   totalResourceType: 'Total',
   /** Label for a row in a data table; entries will be the total number and byte size of all 'Document' resources loaded by a web page. */