Adjust report-renderer init for devtools

GoogleChrome · Apr 13, 2017 · 409331a · 409331a
1 parent 605a457
commit 409331a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>