Viewer: Tweaks for mobile UI. Fixes #1283

GoogleChrome · Jan 7, 2017 · 5dd52f9 · 5dd52f9
1 parent f4af708
commit 5dd52f9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -77,7 +77,6 @@ html {
   line-height: 1;
   margin: 0;
   padding: 0;
-  min-width: 455px;
 }
 
 html, body {
@@ -146,11 +145,6 @@ body {
   display: none;
 }
 
-.report-body__icon.copy {
-  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
-  display: none;
-}
-
 .score-container__overall-score {
   color: #FFF;
   font-size: 92px;
@@ -800,7 +794,7 @@ body {
 .export-button.active + .export-dropdown {
   visibility: visible;
   opacity: 1;
-  clip: rect(0, 140px, 100px, 0);
+  clip: rect(0, 140px, 200px, 0);
 }
 
 .export-dropdown a {
@@ -863,6 +857,10 @@ body {
     width: 100%;
     padding: 8px;
   }
+  .export-dropdown {
+    right: 0;
+    left: initial;
+  }
   .footer {
     margin-top: 0;
     margin-left: 0;
@@ -898,7 +896,6 @@ body {
 }
 
 :root[data-report-context="viewer"] .share,
-:root[data-report-context="viewer"] .copy,
 :root[data-report-context="viewer"] .export-button {
   display: initial;
 }
diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html
@@ -42,12 +42,12 @@
           <button class="export-button js-export" title="Export report in different formats">Export...</button>
           <ul class="export-dropdown">
             <a href="#" data-action="print">Print...</a>
+            <a href="#" data-action="copy">Copy JSON...</a>
             <a href="#" data-action="save-html">Save as HTML...</a>
             <a href="#" data-action="save-json">Save as JSON...</a>
           </ul>
         </span>
         <button class="report-body__icon share js-share"></button>
-        <button class="report-body__icon copy js-copy"></button>
         {{#if_not_eq reportContext "viewer"}}
           <button class="report-body__icon print js-print"></button>
         {{/if_not_eq}}

diff --git a/lighthouse-viewer/app/src/lighthouse-report-viewer.js b/lighthouse-viewer/app/src/lighthouse-report-viewer.js
@@ -40,7 +40,6 @@ class LighthouseViewerReport {
   constructor() {
     this.onShare = this.onShare.bind(this);
     this.onCopy = this.onCopy.bind(this);
-    this.onCopyButtonClick = this.onCopyButtonClick.bind(this);
     this.onFileUpload = this.onFileUpload.bind(this);
     this.onPaste = this.onPaste.bind(this);
     this.onExportButtonClick = this.onExportButtonClick.bind(this);
@@ -74,19 +73,15 @@ class LighthouseViewerReport {
       }
     }
 
-    const copyButton = document.querySelector('.js-copy');
-    if (copyButton) {
-      copyButton.addEventListener('click', this.onCopyButtonClick);
-      document.addEventListener('copy', this.onCopy);
-    }
-
     document.addEventListener('paste', this.onPaste);
 
     this.exportButton = document.querySelector('.js-export');
     if (this.exportButton) {
       this.exportButton.addEventListener('click', this.onExportButtonClick);
       const dropdown = document.querySelector('.export-dropdown');
       dropdown.addEventListener('click', this.onExport);
+
+      document.addEventListener('copy', this.onCopy);
     }
 
     const gistURLInput = document.querySelector('.js-gist-url');
@@ -369,6 +364,9 @@ class LighthouseViewerReport {
     }
 
     switch (e.target.dataset.action) {
+      case 'copy':
+        this.onCopyButtonClick();
+        break;
       case 'print':
         window.print();
         break;