Use pre instead of inline code for listener snippets. Fixes #1781

lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js

@@ -82,7 +82,7 @@ class PassiveEventsAudit extends Audit {
         formatter: Formatter.SUPPORTED_FORMATS.TABLE,
         value: {
           results: groupedResults,
-          tableHeadings: {url: 'URL', lineCol: 'Line/Col', type: 'Type', code: 'Snippet'}
+          tableHeadings: {url: 'URL', lineCol: 'Line/Col', type: 'Type', pre: 'Snippet'}
         }
       },
       debugString

lighthouse-core/formatters/partials/table.css

@@ -44,6 +44,9 @@
 .table_list .table-column.table-column-pre, .table_list .table-column.table-column-code {
   text-align: left;
 }
+.table_list .table-column.table-column-pre pre {
+  max-height: 150px;
+}
 .table_list .table-column.table-column-url {
   text-align: left;
   width: 250px;

lighthouse-core/lib/event-helpers.js

@@ -30,7 +30,7 @@ function addFormattedCodeSnippet(listener) {
   const objectName = listener.objectName.toLowerCase().replace('#document', 'document');
   return Object.assign({
     label: `line: ${listener.line}, col: ${listener.col}`,
-    code: `${objectName}.addEventListener('${listener.type}', ${handler})`
+    pre: `${objectName}.addEventListener('${listener.type}', ${handler})`
   }, listener);
 }
 
@@ -47,7 +47,7 @@ function addFormattedCodeSnippet(listener) {
  * same location.
  *
  * @param {!Array<!Object>} listeners Results from the event listener gatherer.
- * @return {!Array<{line: number, col: number, url: string, type: string, code: string, label: string}>}
+ * @return {!Array<{line: number, col: number, url: string, type: string, pre: string, label: string}>}
  *     A list of slimmed down listener objects.
  */
 function groupCodeSnippetsByLocation(listeners) {
@@ -66,9 +66,9 @@ function groupCodeSnippetsByLocation(listeners) {
     const lineColUrlObj = JSON.parse(key);
     // Aggregate the code snippets.
     const codeSnippets = listenersForLocation.reduce((prev, loc) => {
-      return prev + loc.code.trim() + '\n\n';
+      return prev + loc.pre.trim() + '\n\n';
     }, '');
-    lineColUrlObj.code = codeSnippets;
+    lineColUrlObj.pre = codeSnippets;
     // All listeners under this bucket have the same line/col. We use the first's
     // label as the label for all of them.
     lineColUrlObj.label = listenersForLocation[0].label;

lighthouse-core/report/handlebar-helpers.js

@@ -144,20 +144,20 @@ const handlebarHelpers = {
 
     // Allow the report to inject HTML, but sanitize it first.
     // Viewer in particular, allows user's to upload JSON. To mitigate against
-    // XSS, define a renderer that only transforms links and code snippets.
-    // All other markdown ad HTML is ignored.
+    // XSS, define a renderer that only transforms a few types of markdown blocks.
+    // All other markdown and HTML is ignored.
     const renderer = new marked.Renderer();
     renderer.em = str => `<em>${str}</em>`;
     renderer.link = (href, title, text) => {
       const titleAttr = title ? `title="${title}"` : '';
       return `<a href="${href}" target="_blank" rel="noopener" ${titleAttr}>${text}</a>`;
     };
     renderer.codespan = function(str) {
-      return `<code>${str}</code>`;
+      return `<code>${Handlebars.Utils.escapeExpression(str)}</code>`;
     };
     // eslint-disable-next-line no-unused-vars
     renderer.code = function(code, language) {
-      return `<pre>${code}</pre>`;
+      return `<pre>${Handlebars.Utils.escapeExpression(code)}</pre>`;
     };
     renderer.image = function(src, title, text) {
       return `<img src="${src}" alt="${text}" title="${title}">`;

lighthouse-core/test/audits/dobetterweb/uses-passive-event-listeners-test.js

@@ -39,7 +39,7 @@ describe('Page uses passive events listeners where applicable', () => {
     }
     assert.equal(auditResult.extendedInfo.value.results.length, 6);
     assert.equal(auditResult.extendedInfo.value.results[0].url, fixtureData[0].url);
-    assert.ok(auditResult.extendedInfo.value.results[0].code.match(/addEventListener/));
+    assert.ok(auditResult.extendedInfo.value.results[0].pre.match(/addEventListener/));
 
     const headings = auditResult.extendedInfo.value.tableHeadings;
     assert.deepEqual(Object.keys(headings).map(key => headings[key]),

lighthouse-core/test/lib/event-helpers-test.js

@@ -30,19 +30,19 @@ describe('event helpers', () => {
       eventListeners.forEach(listener => {
         const obj = EventHelpers.addFormattedCodeSnippet(listener);
         assert.ok('label' in obj, 'helper adds a label property');
-        assert.ok('code' in obj, 'helper adds a code property');
+        assert.ok('pre' in obj, 'helper adds a pre property');
         assert.ok(obj.label.match(/line: (?:\d+), col: (?:\d+)/),
                   'label is not formatted correctly');
         const regEx = new RegExp(`.addEventListener\\('${listener.type}', `);
-        assert.ok(obj.code.match(regEx), 'code snippet is not formatted correctly');
+        assert.ok(obj.pre.match(regEx), 'code snippet is not formatted correctly');
       });
     });
 
     it('normalizes document and window objects', () => {
       eventListeners.forEach(listener => {
         const obj = EventHelpers.addFormattedCodeSnippet(listener);
-        assert.ok(obj.code.indexOf('Window') !== 0, 'Window was not lowercase');
-        assert.ok(obj.code.indexOf('#document') !== 0,
+        assert.ok(obj.pre.indexOf('Window') !== 0, 'Window was not lowercase');
+        assert.ok(obj.pre.indexOf('#document') !== 0,
                   '#document was not replaced with document');
       });
     });