Viewer: move share button to core report (#1117)

* Move share button to core report

* add test

* Remove extra check

lighthouse-core/report/styles/report.css

@@ -113,15 +113,24 @@ body {
   box-shadow: 0 0 6px 0 rgba(0,0,0,0.26);
 }
 
-.print {
+.report-body__icon {
   width: 24px;
   height: 24px;
-  background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDQ0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA4SDVjLTEuNjYgMC0zIDEuMzQtMyAzdjZoNHY0aDEydi00aDR2LTZjMC0xLjY2LTEuMzQtMy0zLTN6bS0zIDExSDh2LTVoOHY1em0zLTdjLS41NSAwLTEtLjQ1LTEtMXMuNDUtMSAxLTEgMSAuNDUgMSAxLS40NSAxLTEgMXptLTEtOUg2djRoMTJWM3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==');
   border: none;
   cursor: pointer;
   flex: 0 0 auto;
 }
 
+.report-body__icon.print {
+  background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDQ0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA4SDVjLTEuNjYgMC0zIDEuMzQtMyAzdjZoNHY0aDEydi00aDR2LTZjMC0xLjY2LTEuMzQtMy0zLTN6bS0zIDExSDh2LTVoOHY1em0zLTdjLS41NSAwLTEtLjQ1LTEtMXMuNDUtMSAxLTEgMSAuNDUgMSAxLS40NSAxLTEgMXptLTEtOUg2djRoMTJWM3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==');
+}
+
+.report-body__icon.share {
+  background: url('data:image/svg+xml;utf8,<svg fill="#000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
+  margin-right: 8px;
+  display: none;
+}
+
 .score-container__overall-score {
   color: #FFF;
   font-size: 92px;
@@ -465,9 +474,6 @@ body {
   height: 27px;
 }
 
-.aggregations__header {
-}
-
 .aggregations__header > h1 {
   font-size: var(--heading-font-size);
   font-weight: normal;
@@ -741,3 +747,7 @@ body {
 :root[data-report-context="devtools"] .footer {
   display: none;
 }
+
+:root[data-report-context="viewer"] .share {
+  display: initial;
+}

lighthouse-core/report/templates/report-template.html

@@ -39,7 +39,8 @@
         <div class="report-body__url">Results for: <a href="{{ url }}" target="_blank">{{ url }}</a></div>
         <div class="report-body__url">Generated on: {{generatedTime}}</div>
       </div>
-      <button class="print js-print"></button>
+      <button class="report-body__icon share js-share"></button>
+      <button class="report-body__icon print js-print"></button>
     </div>
     <div class="report-body__content">
       <div class="report-body__menu-container">

lighthouse-core/test/report/report-test.js

@@ -27,25 +27,34 @@ const assert = require('assert');
 describe('Report', () => {
   it('generates CLI HTML', () => {
     const reportGenerator = new ReportGenerator();
-    const html = reportGenerator.generateHTML(sampleResults, {inline: true});
+    const html = reportGenerator.generateHTML(sampleResults);
     assert.ok(/<script>/gim.test(html));
   });
 
   it('should format generated Time', () => {
     const reportGenerator = new ReportGenerator();
-    const html = reportGenerator.generateHTML(sampleResults, {inline: true});
+    const html = reportGenerator.generateHTML(sampleResults);
     assert.ok(/on 11\/\d{1,2}\/2016\, /gim.test(html));
   });
 
   it('should escape closing </script> tags', () => {
     const reportGenerator = new ReportGenerator();
-    const html = reportGenerator.generateHTML(sampleResults, {inline: true});
+    const html = reportGenerator.generateHTML(sampleResults);
     assert.ok(/<\/script>/gim.test(html));
   });
 
-  it('generates extension HTML', () => {
+  it('sets report context in HTML', () => {
     const reportGenerator = new ReportGenerator();
-    const html = reportGenerator.generateHTML(sampleResults, {inline: false});
+    let html = reportGenerator.generateHTML(sampleResults);
+    assert.ok(html.includes('data-report-context="extension"'),
+              'default report context is "extension"');
+    html = reportGenerator.generateHTML(sampleResults, 'viewer');
+    assert.ok(html.includes('<html data-report-context="viewer"'), 'viewer report context');
+  });
+
+  it('generates HTML', () => {
+    const reportGenerator = new ReportGenerator();
+    const html = reportGenerator.generateHTML(sampleResults);
 
     assert.ok(html.includes('self.lhresults = {'), 'results object was not added');
     assert.ok(html.includes('<footer'), 'no footer tag found');

lighthouse-viewer/app/index.html

@@ -15,7 +15,7 @@
 -->
 
 <!doctype html>
-<html>
+<html data-report-context="viewer">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">

lighthouse-viewer/app/src/lighthouse-report-viewer.js

@@ -46,18 +46,16 @@ class LighthouseViewerReport {
 
   addListeners() {
     const printButton = document.querySelector('.js-print');
-    if (!printButton) {
-      return;
+    if (printButton) {
+      printButton.addEventListener('click', _ => {
+        window.print();
+      });
     }
 
-    printButton.addEventListener('click', _ => {
-      window.print();
-    });
-
-    const button = document.createElement('button');
-    button.classList.add('share');
-    button.addEventListener('click', this.onShare);
-    printButton.parentElement.insertBefore(button, printButton);
+    const shareButton = document.querySelector('.js-share');
+    if (shareButton) {
+      shareButton.addEventListener('click', this.onShare);
+    }
   }
 
   loadFromURL() {
@@ -118,6 +116,9 @@ class LighthouseViewerReport {
     // Use only the results section of the full HTML page.
     const div = document.createElement('div');
     div.innerHTML = html;
+
+    document.title = div.querySelector('title').textContent;
+
     html = div.querySelector('.js-report').outerHTML;
 
     this.json = json;

lighthouse-viewer/app/styles/viewer.css

@@ -101,12 +101,3 @@
 #log.show {
   transform: translateY(0);
 }
-.share {
-  width: 24px;
-  height: 24px;
-  background: url('data:image/svg+xml;utf8,<svg fill="#000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
-  border: none;
-  cursor: pointer;
-  flex: 0 0 auto;
-  margin-right: 8px;
-}