From 2abc66f64e056bbdcccaee7e2f172035fd4a335b Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Wed, 28 Jun 2017 12:28:38 -0700
Subject: [PATCH] CRC audit: child chain renders using its own transfersize.
 Fixes #2597

---
 .../v2/renderer/crc-details-renderer.js       |  8 ++-
 .../v2/renderer/crc-details-renderer-test.js  | 49 ++++++-------------
 2 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/lighthouse-core/report/v2/renderer/crc-details-renderer.js b/lighthouse-core/report/v2/renderer/crc-details-renderer.js
index 0586d0c8abfb..c943f7d74789 100644
--- a/lighthouse-core/report/v2/renderer/crc-details-renderer.js
+++ b/lighthouse-core/report/v2/renderer/crc-details-renderer.js
@@ -71,10 +71,9 @@ class CriticalRequestChainRenderer {
    * @param {!DOM} dom
    * @param {!DocumentFragment} tmpl
    * @param {!CriticalRequestChainRenderer.CRCSegment} segment
-   * @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
    * @return {!Node}
    */
-  static createChainNode(dom, tmpl, segment, details) {
+  static createChainNode(dom, tmpl, segment) {
     const chainsEl = dom.cloneTemplate('#tmpl-lh-crc__chains', tmpl);
 
     // Hovering over request shows full URL.
@@ -118,7 +117,7 @@ class CriticalRequestChainRenderer {
       span.textContent = ' - ' + Util.chainDuration(
           segment.node.request.startTime, segment.node.request.endTime) + 'ms, ';
       const span2 = dom.createElement('span', 'crc-node__chain-duration');
-      span2.textContent = Util.formatBytesToKB(details.longestChain.transferSize);
+      span2.textContent = Util.formatBytesToKB(segment.node.request.transferSize) + 'KB';
 
       treevalEl.appendChild(span);
       treevalEl.appendChild(span2);
@@ -136,8 +135,7 @@ class CriticalRequestChainRenderer {
    * @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
    */
   static buildTree(dom, tmpl, segment, detailsEl, details) {
-    detailsEl.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment,
-        details));
+    detailsEl.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment));
 
     for (const key of Object.keys(segment.node.children)) {
       const childSegment = CriticalRequestChainRenderer.createSegment(segment.node.children, key,
diff --git a/lighthouse-core/test/report/v2/renderer/crc-details-renderer-test.js b/lighthouse-core/test/report/v2/renderer/crc-details-renderer-test.js
index fa53dc291089..d24f0a48b701 100644
--- a/lighthouse-core/test/report/v2/renderer/crc-details-renderer-test.js
+++ b/lighthouse-core/test/report/v2/renderer/crc-details-renderer-test.js
@@ -30,7 +30,7 @@ const DETAILS = {
         responseReceivedTime: 5,
         startTime: 0,
         url: 'https://example.com/',
-        transferSize: 1
+        transferSize: 1000
       },
       children: {
         1: {
@@ -39,7 +39,7 @@ const DETAILS = {
             responseReceivedTime: 14,
             startTime: 11,
             url: 'https://example.com/b.js',
-            transferSize: 1
+            transferSize: 2000
           },
           children: {}
         },
@@ -49,7 +49,7 @@ const DETAILS = {
             responseReceivedTime: 15,
             startTime: 12,
             url: superLongURL,
-            transferSize: 1
+            transferSize: 3000
           },
           children: {}
         },
@@ -59,7 +59,7 @@ const DETAILS = {
             responseReceivedTime: 16,
             startTime: 13,
             url: 'about:blank',
-            transferSize: 1
+            transferSize: 4000
           },
           children: {}
         }
@@ -92,37 +92,18 @@ describe('DetailsRenderer', () => {
     const el = CriticalRequestChainRenderer.render(dom, dom.document(), DETAILS);
     const details = el.querySelector('.lh-details');
     const chains = details.querySelectorAll('.crc-node');
-    assert.equal(chains.length, 4, 'generates correct number of chain nodes');
 
-    const div = dom.createElement('div');
-    div.innerHTML = `<span class="crc-node__tree-marker">
-        <!-- fill me -->
-        <span class="tree-marker up-right"></span>
-        <span class="tree-marker right"></span>
-        <span class="tree-marker horiz-down"></span>
-      </span>
-      <span class="crc-node__tree-value">
-        <span class="crc-node__tree-file">/</span>
-        <span class="crc-node__tree-hostname">(example.com)</span>
-        <!-- fill me -->
-      </span>`;
-    assert.ok(chains[0].innerHTML, div.innerHTML);
+    // Main request
+    assert.equal(chains.length, 4, 'generates correct number of chain nodes');
+    assert.equal(chains[0].querySelector('.crc-node__tree-hostname').textContent, '(example.com)');
 
-    div.innerHTML = `<span class="crc-node__tree-marker">
-        <!-- fill me -->
-        <span class="tree-marker"></span>
-        <span class="tree-marker"></span>
-        <span class="tree-marker vert-right"></span>
-        <span class="tree-marker right"></span>
-        <span class="tree-marker right"></span>
-      </span>
-      <span class="crc-node__tree-value">
-        <span class="crc-node__tree-file">/b.js</span>
-        <span class="crc-node__tree-hostname">(example.com)</span>
-        <!-- fill me -->
-        <span class="crc-node__chain-duration"> - 5,000ms, </span>
-        <span class="crc-node__chain-duration">0KB</span>
-      </span>`;
-    assert.ok(chains[1].innerHTML, div.innerHTML);
+    // Children
+    assert.ok(chains[1].querySelector('.crc-node__tree-marker .vert-right'));
+    assert.equal(chains[1].querySelectorAll('.crc-node__tree-marker .right').length, 2);
+    assert.equal(chains[1].querySelector('.crc-node__tree-file').textContent, '/b.js');
+    assert.equal(chains[1].querySelector('.crc-node__tree-hostname').textContent, '(example.com)');
+    const durationNodes = chains[1].querySelectorAll('.crc-node__chain-duration');
+    assert.equal(durationNodes[0].textContent, ' - 5,000ms, ');
+    assert.equal(durationNodes[1].textContent, '1.95KB');
   });
 });