From 409331a1c153d9da5a0e3907157919397cabc764 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Wed, 12 Apr 2017 18:26:18 -0700
Subject: [PATCH] Adjust report-renderer init for devtools

---
 .../report/v2/renderer/details-renderer.js         |  4 ++++
 lighthouse-core/report/v2/renderer/dom.js          | 14 ++++++++++++--
 .../report/v2/renderer/report-renderer.js          |  9 ++++++---
 lighthouse-core/report/v2/report-template.html     |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/lighthouse-core/report/v2/renderer/details-renderer.js b/lighthouse-core/report/v2/renderer/details-renderer.js
index 582db9556324..f82ae094dedd 100644
--- a/lighthouse-core/report/v2/renderer/details-renderer.js
+++ b/lighthouse-core/report/v2/renderer/details-renderer.js
@@ -15,6 +15,8 @@
  */
 'use strict';
 
+/* globals self */
+
 class DetailsRenderer {
   /**
    * @param {!DOM} dom
@@ -85,6 +87,8 @@ class DetailsRenderer {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = DetailsRenderer;
+} else if (self) {
+  self.DetailsRenderer = DetailsRenderer;
 }
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */
diff --git a/lighthouse-core/report/v2/renderer/dom.js b/lighthouse-core/report/v2/renderer/dom.js
index 5eaed54b92e1..ff7fa310ffb8 100644
--- a/lighthouse-core/report/v2/renderer/dom.js
+++ b/lighthouse-core/report/v2/renderer/dom.js
@@ -15,7 +15,7 @@
  */
 'use strict';
 
-/* globals URL */
+/* globals URL self */
 
 class DOM {
   /**
@@ -48,13 +48,21 @@ class DOM {
    * @throws {Error}
    */
   cloneTemplate(selector) {
-    const template = this._document.querySelector(selector);
+    const template = this._retrieveTemplate(selector);
     if (!template) {
       throw new Error(`Template not found: template${selector}`);
     }
     return this._document.importNode(template.content, true);
   }
 
+  /**
+   * @param {string} selector
+   * @return {!DocumentFragment} The original template content
+   */
+  _retrieveTemplate(selector) {
+    return this._document.querySelector(selector);
+  }
+
   /**
    * @param {string} text
    * @return {!HTMLSpanElement}
@@ -87,4 +95,6 @@ class DOM {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = DOM;
+} else if (self) {
+  self.DOM = DOM;
 }
diff --git a/lighthouse-core/report/v2/renderer/report-renderer.js b/lighthouse-core/report/v2/renderer/report-renderer.js
index 8ca875422bfc..5c6852b63e3f 100644
--- a/lighthouse-core/report/v2/renderer/report-renderer.js
+++ b/lighthouse-core/report/v2/renderer/report-renderer.js
@@ -22,7 +22,7 @@
  * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
  */
 
-/* globals DOM, DetailsRenderer */
+/* globals self */
 
 const RATINGS = {
   PASS: {label: 'pass', minScore: 75},
@@ -57,9 +57,10 @@ function formatNumber(number) {
 class ReportRenderer {
   /**
    * @param {!Document} document
+   * @param {!DOM} DOM
+   * @param {!DetailsRenderer} DetailsRenderer
    */
-  constructor(document) {
-    this._dom = new DOM(document);
+  constructor(document, DOM, DetailsRenderer) {
     this._detailsRenderer = new DetailsRenderer(this._dom);
   }
 
@@ -183,6 +184,8 @@ class ReportRenderer {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = ReportRenderer;
+} else if (self) {
+  self.ReportRenderer = ReportRenderer;
 }
 
 /** @typedef {{id: string, weight: number, score: number, result: {description: string, displayValue: string, helpText: string, score: number|boolean, details: DetailsRenderer.DetailsJSON|undefined}}} */
diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html
index 019c68ff6090..e06c03e08d5e 100644
--- a/lighthouse-core/report/v2/report-template.html
+++ b/lighthouse-core/report/v2/report-template.html
@@ -30,7 +30,7 @@
   <script>%%LIGHTHOUSE_JAVASCRIPT%%</script>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>
-    const renderer = new ReportRenderer(document);
+    const renderer = new ReportRenderer(document, DOM, DetailsRenderer);
     document.body.appendChild(renderer.renderReport(window.__LIGHTHOUSE_JSON__));
   </script>
 </body>