make preview less magical

GoogleChrome · Feb 7, 2017 · 4f0bc67 · 4f0bc67
1 parent dbe8562
commit 4f0bc67
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/lighthouse-core/audits/dobetterweb/uses-optimized-images.js b/lighthouse-core/audits/dobetterweb/uses-optimized-images.js
@@ -112,8 +112,7 @@ class UsesOptimizedImages extends Audit {
       totalWastedBytes += webpSavings.bytes;
       results.push({
         url: URL.getDisplayName(image.url),
-        previewUrl: image.url,
-        mimeType: image.mimeType,
+        preview: {url: image.url, mimeType: image.mimeType},
         total: `${originalKb} KB`,
         webpSavings: `${webpSavings.percent}%`,
         jpegSavings: jpegSavingsLabel
@@ -144,7 +143,7 @@ class UsesOptimizedImages extends Audit {
         value: {
           results,
           tableHeadings: {
-            previewUrl: '',
+            preview: '',
             url: 'URL',
             total: 'Original (KB)',
             webpSavings: 'WebP Savings (%)',

diff --git a/lighthouse-core/audits/dobetterweb/uses-responsive-images.js b/lighthouse-core/audits/dobetterweb/uses-responsive-images.js
@@ -123,8 +123,10 @@ class UsesResponsiveImages extends Audit {
       totalWastedBytes += processed.wastedBytes;
 
       results.push(Object.assign({
-        previewUrl: image.networkRecord.url,
-        mimeType: image.networkRecord.mimeType
+        preview: {
+          url: image.networkRecord.url,
+          mimeType: image.networkRecord.mimeType
+        }
       }, processed.result));
 
       return results;
@@ -147,7 +149,7 @@ class UsesResponsiveImages extends Audit {
         value: {
           results,
           tableHeadings: {
-            previewUrl: '',
+            preview: '',
             url: 'URL',
             totalKb: 'Original (KB)',
             potentialSavings: 'Potential Savings (%)'

diff --git a/lighthouse-core/formatters/partials/table.html b/lighthouse-core/formatters/partials/table.html
@@ -57,7 +57,7 @@
     <thead>
       <tr>
         {{#each ../tableHeadings}}
-          <th {{#if_eq @key "previewUrl"}}class="preview-image"{{/if_eq}}>{{this}}</th>
+          <th {{#if_eq @key "preview"}}class="preview-image"{{/if_eq}}>{{this}}</th>
         {{/each}}
       </tr>
     </thead>

diff --git a/lighthouse-core/formatters/table.js b/lighthouse-core/formatters/table.js
@@ -70,7 +70,8 @@ class Table extends Formatter {
    * @param {!Object<string>} headings for the table. The order of this
    *     object's key/value pairs determines the order of the HTML table headings.
    *     There is special handling for certain keys:
-   *       previewUrl: returns a markdown image wrapped in an anchor.
+   *       preview {url: string, mimeType: string}: For image mimetypes, wraps
+   *           the value in a markdown image.
    *       code: wraps the value in single ` for a markdown code snippet.
    *       pre: wraps the value in triple ``` for a markdown code block.
    *       lineCol: combines the values for the line and col keys into a single
@@ -94,9 +95,9 @@ class Table extends Formatter {
         }
 
         switch (key) {
-          case 'previewUrl':
-            if (/^image/.test(result.mimeType)) {
-              return `[![Image preview](${value} "Image preview")](${value})`;
+          case 'preview':
+            if (/^image/.test(value.mimeType)) {
+              return `[![Image preview](${value.url} "Image preview")](${value.url})`;
             }
             return '';
           case 'code':

diff --git a/lighthouse-core/test/formatter/table-formatter-test.js b/lighthouse-core/test/formatter/table-formatter-test.js
@@ -26,16 +26,15 @@ describe('TableFormatter', () => {
   const extendedInfo = {
     tableHeadings: {
       url: 'URL', lineCol: 'Line/col', code: 'Snippet', isEval: 'Eval\'d?',
-      pre: 'Code', previewUrl: 'Preview'},
+      pre: 'Code', preview: 'Preview'},
     results: [{
       url: 'http://example.com',
       line: 123,
       col: 456,
       code: 'code snippet',
       isEval: true,
       pre: 'pre snippet',
-      previewUrl: 'http://example.com/i.jpg',
-      mimeType: 'image/jpeg',
+      preview: {url: 'http://example.com/i.jpg', mimeType: 'image/jpeg'}
     }]
   };