Add table renderer to deprecations audit (GoogleChrome#2145)

lighthouse-core/audits/deprecations.js

@@ -24,6 +24,7 @@
 
 const Audit = require('./audit');
 const Formatter = require('../report/formatter');
+const URL = require('../lib/url-shim');
 
 class Deprecations extends Audit {
   /**
@@ -59,6 +60,25 @@ class Deprecations extends Audit {
           }, log.entry);
         });
 
+    const deprecationsV2 = entries.filter(log => log.entry.source === 'deprecation').map(log => {
+      // CSS deprecations can have missing URLs and lineNumbers. See https://crbug.com/680832.
+      const url = URL.isValid(log.entry.url) ? URL.getDisplayName(log.entry.url) : '';
+      return {
+        type: 'code',
+        text: log.entry.text,
+        url,
+        source: log.entry.source,
+        lineNumber: log.entry.lineNumber
+      };
+    });
+
+    const headings = [
+      {key: 'text', itemType: 'code', text: 'Deprecation / Warning'},
+      {key: 'url', itemType: 'url', text: 'URL'},
+      {key: 'lineNumber', itemType: 'text', text: 'Line'},
+    ];
+    const details = Audit.makeV2TableDetails(headings, deprecationsV2);
+
     let displayValue = '';
     if (deprecations.length > 1) {
       displayValue = `${deprecations.length} warnings found`;
@@ -72,7 +92,8 @@ class Deprecations extends Audit {
       extendedInfo: {
         formatter: Formatter.SUPPORTED_FORMATS.URL_LIST,
         value: deprecations
-      }
+      },
+      details
     };
   }
 }

lighthouse-core/report/v2/renderer/details-renderer.js

@@ -42,6 +42,8 @@ class DetailsRenderer {
         return this._renderCards(/** @type {!DetailsRenderer.CardsDetailsJSON} */ (details));
       case 'table':
         return this._renderTable(/** @type {!DetailsRenderer.TableDetailsJSON} */ (details));
+      case 'code':
+        return this._renderCode(details);
       case 'list':
         return this._renderList(/** @type {!DetailsRenderer.ListDetailsJSON} */ (details));
       default:
@@ -53,19 +55,19 @@ class DetailsRenderer {
    * @param {!DetailsRenderer.DetailsJSON} text
    * @return {!Element}
    */
-  _renderText(text) {
-    const element = this._dom.createElement('div', 'lh-text');
-    element.textContent = text.text;
+  _renderURL(text) {
+    const element = this._renderText(text);
+    element.classList.add('lh-text__url');
     return element;
   }
 
   /**
    * @param {!DetailsRenderer.DetailsJSON} text
    * @return {!Element}
    */
-  _renderURL(text) {
-    const element = this._renderText(text);
-    element.classList.add('lh-text__url');
+  _renderText(text) {
+    const element = this._dom.createElement('div', 'lh-text');
+    element.textContent = text.text;
     return element;
   }
 
@@ -167,6 +169,16 @@ class DetailsRenderer {
     element.appendChild(cardsParent);
     return element;
   }
+
+  /**
+   * @param {!DetailsRenderer.DetailsJSON} details
+   * @return {!Element}
+   */
+  _renderCode(details) {
+    const pre = this._dom.createElement('pre', 'lh-code');
+    pre.textContent = details.text;
+    return pre;
+  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {

lighthouse-core/test/report/v2/renderer/details-renderer-test.js

@@ -108,5 +108,19 @@ describe('DetailsRenderer', () => {
       assert.equal(cards[1].getAttribute('title'), 'snippet', 'adds title attribute for snippet');
       assert.ok(!cards[1].querySelector('.lh-scorecard__target'), 'handles missing target');
     });
+
+    it('renders code', () => {
+      const el = renderer.render({
+        type: 'code',
+        text: 'code snippet',
+        lineNumber: 123,
+        source: 'deprecation',
+        url: 'https://example.com/feature'
+      });
+
+      assert.ok(el.localName === 'pre');
+      assert.ok(el.classList.contains('lh-code'));
+      assert.equal(el.textContent, 'code snippet');
+    });
   });
 });