Repository: GoogleChrome/lighthouse
Pull request #8709 (2019-04-29 12:50:15)

lightwallet: add 'computed/resource-summary'
<!-- Thank you for submitting a pull request! -->

**Summary**
<!-- What kind of change does this PR introduce? -->
<!-- Is this a bugfix, feature, refactoring, build related change, etc? -->

<!-- Describe the need for this change -->

<!-- Link any documentation or information that would help understand this change -->

**Related Issues/PRs**
#8675, #8427, #8709, #8708,#8522, #8539
<!-- Provide any additional information we might need to understand the pull request -->
<img width="878" alt="Screen Shot 2019-04-29 at 8 55 04 AM" src="https://user-images.githubusercontent.com/6076184/56897430-8e648a80-6a5c-11e9-8fd4-2831cdafa0e3.png">


patrickhulce: Also those dependency diagrams 🙏 ❤️ 
brendankenny: also the LR dependency graph is amazing
khempenius: Ready for review.
khempenius: Updated.

Patch:
diff --git a/lighthouse-core/computed/resource-summary.js b/lighthouse-core/computed/resource-summary.js
new file mode 100644
index 000000000..a2c9b6b59
--- /dev/null
+++ b/lighthouse-core/computed/resource-summary.js
@@ -0,0 +1,84 @@
+/**
+ * @license Copyright 2019 Google Inc. 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.
+ */
+'use strict';
+
+const makeComputedArtifact = require('./computed-artifact.js');
+const NetworkRecords = require('./network-records.js');
+const MainResource = require('./main-resource.js');
+const URL = require('../lib/url-shim.js');
+
+/** @typedef {{count: number, size: number}} ResourceEntry */
+class ResourceSummary {
+  /**
+   * @param {LH.Artifacts.NetworkRequest} record
+   * @return {LH.Budget.ResourceType}
+   */
+  static determineResourceType(record) {
+    if (!record.resourceType) return 'other';
+    /** @type {Partial<Record<LH.Crdp.Page.ResourceType, LH.Budget.ResourceType>>} */
+    const requestToResourceType = {
+      'Stylesheet': 'stylesheet',
+      'Image': 'image',
+      'Media': 'media',
+      'Font': 'font',
+      'Script': 'script',
+      'Document': 'document',
+    };
+    return requestToResourceType[record.resourceType] || 'other';
+  }
+
+  /**
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @param {string} mainResourceURL
+   * @return {Record<LH.Budget.ResourceType,ResourceEntry>}
+   */
+  static summarize(networkRecords, mainResourceURL) {
+    /** @type {Record<LH.Budget.ResourceType,ResourceEntry>} */
+    const resourceSummary = {
+      'stylesheet': {count: 0, size: 0},
+      'image': {count: 0, size: 0},
+      'media': {count: 0, size: 0},
+      'font': {count: 0, size: 0},
+      'script': {count: 0, size: 0},
+      'document': {count: 0, size: 0},
+      'other': {count: 0, size: 0},
+      'total': {count: 0, size: 0},
+      'third-party': {count: 0, size: 0},
+    };
+
+    for (const record of networkRecords) {
+      const type = this.determineResourceType(record);
+      resourceSummary[type].count++;
+      resourceSummary[type].size += record.transferSize;
+
+      resourceSummary.total.count++;
+      resourceSummary.total.size += record.transferSize;
+
+      // Ignores subdomains: i.e. blog.example.com & example.com would match
+      if (!URL.rootDomainsMatch(record.url, mainResourceURL)) {
+        resourceSummary['third-party'].count++;
+        resourceSummary['third-party'].size += record.transferSize;
+      }
+    }
+    return resourceSummary;
+  }
+
+  /**
+   * @param {{URL: LH.Artifacts['URL'], devtoolsLog: LH.DevtoolsLog}} data
+   * @param {LH.Audit.Context} context
+   * @return {Promise<Record<LH.Budget.ResourceType,ResourceEntry>>}
+   */
+  static async compute_(data, context) {
+    const [networkRecords, mainResource] = await Promise.all([
+      NetworkRecords.request(data.devtoolsLog, context),
+      MainResource.request(data, context),
+    ]);
+
+    return ResourceSummary.summarize(networkRecords, mainResource.url);
+  }
+}
+
+module.exports = makeComputedArtifact(ResourceSummary);
diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js
index 184250ca5..a77e1d545 100644
--- a/lighthouse-core/report/html/renderer/details-renderer.js
+++ b/lighthouse-core/report/html/renderer/details-renderer.js
@@ -335,7 +335,7 @@ class DetailsRenderer {
 
   /**
    * @param {LH.Audit.Details.List} details
-   * @returns {Element}
+   * @return {Element}
    */
   _renderList(details) {
     const listContainer = this._dom.createElement('div', 'lh-list');
diff --git a/lighthouse-core/report/html/renderer/snippet-renderer.js b/lighthouse-core/report/html/renderer/snippet-renderer.js
index 1a627b5a0..66fd015f4 100644
--- a/lighthouse-core/report/html/renderer/snippet-renderer.js
+++ b/lighthouse-core/report/html/renderer/snippet-renderer.js
@@ -69,7 +69,7 @@ function getMessagesForLineNumber(messages, lineNumber) {
 
 /**
  * @param {LH.Audit.Details.SnippetValue} details
- * @returns {LH.Audit.Details.SnippetValue['lines']}
+ * @return {LH.Audit.Details.SnippetValue['lines']}
  */
 function getLinesWhenCollapsed(details) {
   const SURROUNDING_LINES_TO_SHOW_WHEN_COLLAPSED = 2;
@@ -230,7 +230,7 @@ class SnippetRenderer {
    * @param {DOM} dom
    * @param {DocumentFragment} tmpl
    * @param {LH.Audit.Details.SnippetValue} details
-   * @returns {DocumentFragment}
+   * @return {DocumentFragment}
    */
   static renderSnippetLines(dom, tmpl, details) {
     const {lineMessages, generalMessages, lineCount, lines} = details;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 1a34d7a06..7306d0621 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -617,7 +617,7 @@ limitations under the License.
       color: var(--body-text-color);
     }
 
-    /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendent selector */
+    /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
     .lh-category .lh-gauge__label {
       --score-title-font-size: var(--score-title-font-size-big);
       --score-title-line-height: var(--score-title-line-height-big);
diff --git a/types/budget.d.ts b/types/budget.d.ts
index b1da9e8de..fa8632f1b 100644
--- a/types/budget.d.ts
+++ b/types/budget.d.ts
@@ -39,8 +39,8 @@ declare global {
       /** Supported timing metrics. */
       export type TimingMetric = 'first-contentful-paint' | 'first-cpu-idle' | 'interactive' | 'first-meaningful-paint' | 'estimated-input-latency';
 
-      /** Supported resource types. */
-      export type ResourceType = 'stylesheet' | 'image' | 'media' | 'font' | 'script' | 'document' | 'other';
+      /** Supported values for the resourceType property of a ResourceBudget. */
+      export type ResourceType = 'stylesheet' | 'image' | 'media' | 'font' | 'script' | 'document' | 'other' | 'total' | 'third-party';
     }
   }
 }


Test patch:
diff --git a/lighthouse-core/test/computed/resource-summary-test.js b/lighthouse-core/test/computed/resource-summary-test.js
new file mode 100644
index 000000000..87e2b98c7
--- /dev/null
+++ b/lighthouse-core/test/computed/resource-summary-test.js
@@ -0,0 +1,97 @@
+/**
+ * @license Copyright 2019 Google Inc. 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.
+ */
+'use strict';
+
+const ComputedResourceSummary = require('../../computed/resource-summary.js');
+const assert = require('assert');
+const networkRecordsToDevtoolsLog = require('../network-records-to-devtools-log.js');
+
+/* eslint-env jest */
+
+function mockArtifacts(networkRecords) {
+  return {
+    devtoolsLog: networkRecordsToDevtoolsLog(networkRecords),
+    URL: {requestedUrl: networkRecords[0].url, finalUrl: networkRecords[0].url},
+  };
+}
+
+describe('Resource summary computed', () => {
+  let artifacts;
+  let context;
+  beforeEach(() => {
+    artifacts = mockArtifacts([
+      {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+      {url: 'http://example.com/app.js', resourceType: 'Script', transferSize: 10},
+      {url: 'http://cdn.example.com/script.js', resourceType: 'Script', transferSize: 50},
+      {url: 'http://third-party.com/file.jpg', resourceType: 'Image', transferSize: 70},
+    ]);
+    context = {computedCache: new Map()};
+  });
+
+  it('includes all resource types, regardless of whether page contains them', async () => {
+    const result = await ComputedResourceSummary.request(artifacts, context);
+    assert.equal(Object.keys(result).length, 9);
+  });
+
+  it('sets size and count correctly', async () => {
+    const result = await ComputedResourceSummary.request(artifacts, context);
+    assert.equal(result.script.count, 2);
+    assert.equal(result.script.size, 10 + 50);
+  });
+
+  it('sets "total" resource metrics correctly', async () => {
+    const result = await ComputedResourceSummary.request(artifacts, context);
+    assert.equal(result.total.count, 4);
+    assert.equal(result.total.size, 30 + 10 + 50 + 70);
+  });
+
+  it('sets "other" resource metrics correctly', async () => {
+    // networkRecordsToDevToolsLog errors with an 'other' resource type, so this test does not use it
+    const networkRecords = [
+      {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+      {url: 'http://third-party.com/another-file.html', resourceType: 'manifest', transferSize: 50},
+    ];
+
+    const result = ComputedResourceSummary.summarize(networkRecords, networkRecords[0].url);
+    assert.equal(result.other.count, 1);
+    assert.equal(result.other.size, 50);
+  });
+
+  describe('determining third-party resources', () => {
+    it('with a third-party resource', async () => {
+      artifacts = mockArtifacts([
+        {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+        {url: 'http://third-party.com/another-file.html', resourceType: 'Document', transferSize: 50},
+      ]);
+
+      const result = await ComputedResourceSummary.request(artifacts, context);
+      assert.equal(result['third-party'].count, 1);
+      assert.equal(result['third-party'].size, 50);
+    });
+
+    it('with a first-party resource', async () => {
+      artifacts = mockArtifacts([
+        {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+        {url: 'http://example.com/another-file.html', resourceType: 'Document', transferSize: 50},
+      ]);
+
+      const result = await ComputedResourceSummary.request(artifacts, context);
+      assert.equal(result['third-party'].count, 0);
+      assert.equal(result['third-party'].size, 0);
+    });
+
+    it('with a first-party resource loaded from a subdomain', async () => {
+      artifacts = mockArtifacts([
+        {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+        {url: 'http://blog.example.com/file.html', resourceType: 'Document', transferSize: 50},
+      ]);
+
+      const result = await ComputedResourceSummary.request(artifacts, context);
+      assert.equal(result['third-party'].count, 0);
+      assert.equal(result['third-party'].size, 0);
+    });
+  });
+});