moved perf-x left nav to partial

GoogleChrome · Jan 27, 2017 · 54c5e2e · 54c5e2e
1 parent f59ec50
commit 54c5e2e
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 65 deletions.
diff --git a/lighthouse-cli/performance-experiment/experiment-database/database.js b/lighthouse-cli/performance-experiment/experiment-database/database.js
@@ -72,16 +72,17 @@ class ExperimentDatabase {
    */
   getHTML(id) {
     id = id || this._defaultId;
+    const perfXReportGenerator = new PerfXReportGenerator();
 
     const results = JSON.parse(fs.readFileSync(path.join(this._root, id, 'results.json'), 'utf8'));
-    results.relatedReports = Object.keys(this._timeStamps)
+    const relatedReports = Object.keys(this._timeStamps)
       .filter(key => key !== id)
       .map(key => {
         const generatedTime = this._timeStamps[key];
         return {reportUrl: `/?id=${key}`, url: this._url, generatedTime};
       });
+    perfXReportGenerator.setRelatedReports(relatedReports);
 
-    const perfXReportGenerator = new PerfXReportGenerator();
     return perfXReportGenerator.generateHTML(results, 'perf-x');
   }
 

diff --git a/lighthouse-cli/performance-experiment/report/partials/left-nav.html b/lighthouse-cli/performance-experiment/report/partials/left-nav.html
@@ -0,0 +1,70 @@
+<style>
+:root[data-report-context="perf-x"] .menu__link {
+  padding: 0 35px;
+}
+
+.menu__report-tab {
+  padding: 3px 13px;
+  color: #777;
+  border-top: 1px solid #EBEBEB;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  text-decoration: none;
+  height: 55px;
+}
+
+.menu__report-tab:hover {
+  background-color: #448aff;
+  color: #FFF;
+}
+
+.menu__report-tab__url {
+  font-size: 15px;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  line-height: 30px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.menu__report-tab__time {
+  font-size: 11px;
+  line-height: 11px;
+  padding-left: 2px;
+}
+</style>
+
+{{#createRelatedReportsContext}}
+  {{#each this}}
+    {{#if_less_than generatedTime ../../generatedTime }}
+    <a class="menu__report-tab" href="{{ reportUrl }}">
+      <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
+      <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
+    </a>
+    {{/if_less_than}}
+  {{/each}}
+{{/createRelatedReportsContext}}
+<a class="menu__report-tab" href="#">
+ <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
+ <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
+</a>
+<ul class="menu__nav">
+  {{#each aggregations}}
+  <li class="menu__nav-item">
+   <a class="menu__link" href="#{{nameToLink this.name}}">
+     {{ this.name }}
+   </a>
+  </li>
+  {{/each}}
+</ul>
+{{#createRelatedReportsContext}}
+  {{#each this}}
+    {{#if_less_than ../../generatedTime generatedTime }}
+    <a class="menu__report-tab" href="{{ reportUrl }}">
+      <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
+      <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
+    </a>
+    {{/if_less_than}}
+  {{/each}}
+{{/createRelatedReportsContext}}
diff --git a/lighthouse-cli/performance-experiment/report/perf-x-report-generator.js b/lighthouse-cli/performance-experiment/report/perf-x-report-generator.js
@@ -24,19 +24,34 @@ const Handlebars = require('handlebars');
 const ReportGenerator = require('../../../lighthouse-core/report/report-generator');
 const configPanelPartial = fs.readFileSync(path.join(__dirname, 'partials/config-panel.html'),
     'utf8');
+const perfXLeftNavPartial = fs.readFileSync(path.join(__dirname, 'partials/left-nav.html'),
+    'utf8');
 
 class PerfXReportGenerator extends ReportGenerator {
+  constructor() {
+    super();
+    this._relatedReports = [];
+  }
+
   getReportJS(reportContext) {
     const scriptArr = super.getReportJS(reportContext);
     scriptArr.push(fs.readFileSync(path.join(__dirname, 'scripts/perf-x.js'), 'utf8'));
     return scriptArr;
   }
 
+  setRelatedReports(relatedReports) {
+    this._relatedReports = relatedReports;
+  }
+
   _registerFormatters(audits) {
     super._registerFormatters(audits);
+
     const configPanelTemplate = Handlebars.compile(configPanelPartial);
     const criticalRequestChains = audits['critical-request-chains'].extendedInfo.value;
     Handlebars.registerPartial('config-panel', configPanelTemplate(criticalRequestChains));
+
+    Handlebars.registerHelper('createRelatedReportsContext', opts => opts.fn(this._relatedReports));
+    Handlebars.registerPartial('perf-x-left-nav', perfXLeftNavPartial);
   }
 }
 

diff --git a/lighthouse-core/report/report-generator.js b/lighthouse-core/report/report-generator.js
@@ -336,8 +336,7 @@ class ReportGenerator {
       reportContext: reportContext,
       scripts: this.getReportJS(reportContext),
       aggregations: results.aggregations,
-      auditsByCategory: this._createPWAAuditsByCategory(results.aggregations),
-      relatedReports: results.relatedReports || []
+      auditsByCategory: this._createPWAAuditsByCategory(results.aggregations)
     });
   }
 }

diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -300,7 +300,7 @@ body {
 }
 
 .menu__link {
-  padding: 0 35px;
+  padding: 0 20px;
   text-decoration: none;
   color: #777;
   display: flex;
@@ -329,37 +329,6 @@ body {
   white-space: nowrap;
 }
 
-.menu__report-tab {
-  padding: 3px 13px;
-  color: #777;
-  border-top: 1px solid #EBEBEB;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  text-decoration: none;
-  height: 55px;
-}
-
-.menu__report-tab:hover {
-  background-color: #448aff;
-  color: #FFF;
-}
-
-.menu__report-tab__url {
-  font-size: 15px;
-  font-weight: bold;
-  text-overflow: ellipsis;
-  line-height: 30px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.menu__report-tab__time {
-  font-size: 11px;
-  line-height: 11px;
-  padding-left: 2px;
-}
-
 .report-body__buttons {
   display: flex;
   align-items: center;

diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html
@@ -61,35 +61,19 @@
             <h1 class="menu__header-title">Lighthouse</h1>
             <div class="menu__header-version">Version: {{lighthouseVersion}}</div>
           </div>
-          {{#each relatedReports}}
-            {{#if_less_than generatedTime ../generatedTime }}
-              <a class="menu__report-tab" href="{{ reportUrl }}">
-                <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
-                <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
-              </a>
-            {{/if_less_than}}
-          {{/each}}
-          <a class="menu__report-tab" href="#">
-            <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
-            <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
-          </a>  
-          <ul class="menu__nav">
-            {{#each aggregations}}
-            <li class="menu__nav-item">
-              <a class="menu__link" href="#{{nameToLink this.name}}">
-                {{ this.name }}
-              </a>
-            </li>
-            {{/each}}
-          </ul>
-          {{#each relatedReports}}
-            {{#if_less_than ../generatedTime generatedTime }}
-              <a class="menu__report-tab" href="{{ reportUrl }}">
-                <p class="menu__report-tab__url" title="{{ url }}">Report for: {{ url }}</p>
-                <p class="menu__report-tab__time">Generated on: {{ format_time generatedTime }}</p>
-              </a>
-            {{/if_less_than}}
-          {{/each}}
+          {{#if_eq reportContext "perf-x" }}
+            {{> perf-x-left-nav}}
+          {{else}}
+            <ul class="menu__nav">
+              {{#each aggregations}}
+              <li class="menu__nav-item">
+                <a class="menu__link" href="#{{nameToLink this.name}}">
+                  {{ this.name }}
+                </a>
+              </li>
+              {{/each}}
+            </ul>
+          {{/if_eq}}
         </div>
       </div>