From b11fc4308ae5f5646bf31491150f0c5a5fbe1cd5 Mon Sep 17 00:00:00 2001 From: Jon Burger Date: Wed, 15 May 2019 16:57:05 -0400 Subject: [PATCH 1/4] Hide 3rd party filter checkbox if all rows are 3rd party. --- .../report/html/renderer/report-ui-features.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 2458fa5e6fb6..f89f247e213e 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -173,9 +173,10 @@ class ReportUIFeatures { }); tablesWithUrls.forEach((tableEl, index) => { + const numRows = this._getUrlItems(tableEl).length; const thirdPartyRows = this._getThirdPartyRows(tableEl, this.json.finalUrl); - // No 3rd parties, no checkbox! - if (!thirdPartyRows.size) return; + // If all or none of the rows are 3rd party, no checkbox! + if (thirdPartyRows.size === numRows || !thirdPartyRows.size) return; // create input box const filterTemplate = this._dom.cloneTemplate('#tmpl-lh-3p-filter', this._document); @@ -219,7 +220,7 @@ class ReportUIFeatures { * @return {Map} */ _getThirdPartyRows(el, finalUrl) { - const urlItems = this._dom.findAll('.lh-text__url', el); + const urlItems = this._getUrlItems(el); const finalUrlRootDomain = Util.getRootDomain(finalUrl); /** @type {Map} */ @@ -240,6 +241,15 @@ class ReportUIFeatures { return thirdPartyRows; } + /** + * From a table, finds and returns URL items. + * @param {HTMLTableElement} tableEl + * @return {Array} + */ + _getUrlItems(tableEl) { + return this._dom.findAll('.lh-text__url', tableEl); + } + _setupStickyHeaderElements() { this.topbarEl = this._dom.find('.lh-topbar', this._document); this.scoreScaleEl = this._dom.find('.lh-scorescale', this._document); From 9d002ba5c93885ca318f1652da8dc17f09e9924c Mon Sep 17 00:00:00 2001 From: Jon Burger Date: Thu, 16 May 2019 10:09:17 -0400 Subject: [PATCH 2/4] Pass computed urlItems in to _getThirdPartyRows(). --- .../report/html/renderer/report-ui-features.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index f89f247e213e..bfbdc7e06fb5 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -173,10 +173,10 @@ class ReportUIFeatures { }); tablesWithUrls.forEach((tableEl, index) => { - const numRows = this._getUrlItems(tableEl).length; - const thirdPartyRows = this._getThirdPartyRows(tableEl, this.json.finalUrl); + const urlItems = this._getUrlItems(tableEl); + const thirdPartyRows = this._getThirdPartyRows(tableEl, urlItems, this.json.finalUrl); // If all or none of the rows are 3rd party, no checkbox! - if (thirdPartyRows.size === numRows || !thirdPartyRows.size) return; + if (thirdPartyRows.size === urlItems.length || !thirdPartyRows.size) return; // create input box const filterTemplate = this._dom.cloneTemplate('#tmpl-lh-3p-filter', this._document); @@ -217,10 +217,10 @@ class ReportUIFeatures { * and returns a Map of those rows, mapping from row index to row Element. * @param {HTMLTableElement} el * @param {string} finalUrl + * @param {Array} urlItems * @return {Map} */ - _getThirdPartyRows(el, finalUrl) { - const urlItems = this._getUrlItems(el); + _getThirdPartyRows(el, urlItems, finalUrl) { const finalUrlRootDomain = Util.getRootDomain(finalUrl); /** @type {Map} */ From 82e00567f6c2957af05219d2a37815499911091b Mon Sep 17 00:00:00 2001 From: Jon Burger Date: Thu, 16 May 2019 18:58:35 -0400 Subject: [PATCH 3/4] Add unit tests for cases where there should be no checkbox. --- .../html/renderer/report-ui-features-test.js | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js index 54a3d7852ddc..e23652ba6c02 100644 --- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js +++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js @@ -124,6 +124,8 @@ describe('ReportUIFeatures', () => { const lhr = JSON.parse(JSON.stringify(sampleResults)); lhr.requestedUrl = lhr.finalUrl = 'http://www.example.com'; const webpAuditItemTemplate = sampleResults.audits['uses-webp-images'].details.items[0]; + const renderBlockingAuditItemTemplate = sampleResults.audits['render-blocking-resources'].details.items[0]; + const textCompressionAuditItemTemplate = sampleResults.audits['uses-text-compression'].details.items[0]; // Interleave first/third party URLs to test restoring order. lhr.audits['uses-webp-images'].details.items = [ { @@ -140,6 +142,38 @@ describe('ReportUIFeatures', () => { }, ]; + // Only third party URLs to test that checkbox is hidden + lhr.audits['render-blocking-resources'].details.items = [ + { + ...renderBlockingAuditItemTemplate, + url: 'http://www.cdn.com/script1.js', // Third party. + }, + { + ...renderBlockingAuditItemTemplate, + url: 'http://www.google.com/script2.js', // Third party. + }, + { + ...renderBlockingAuditItemTemplate, + url: 'http://www.notexample.com/script3.js', // Third party. + }, + ]; + + // Only first party URLs to test that checkbox is hidden + lhr.audits['uses-text-compression'].details.items = [ + { + ...textCompressionAuditItemTemplate, + url: 'http://www.example.com/font1.ttf', // First party. + }, + { + ...textCompressionAuditItemTemplate, + url: 'http://www.example.com/font2.ttf', // First party. + }, + { + ...textCompressionAuditItemTemplate, + url: 'http://www.example.com/font3.ttf', // First party. + }, + ]; + // render a report onto the UIFeature dom container = render(lhr); }); @@ -160,7 +194,7 @@ describe('ReportUIFeatures', () => { expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']); }); - it('adds no filter for audits that do not need them', () => { + it('adds no filter for audits in thirdPartyFilterAuditExclusions', () => { const checkboxClassName = 'lh-3p-filter-input'; const yesCheckbox = dom.find(`#uses-webp-images .${checkboxClassName}`, container); @@ -169,6 +203,20 @@ describe('ReportUIFeatures', () => { expect(() => dom.find(`#uses-rel-preconnect .${checkboxClassName}`, container)) .toThrowError('query #uses-rel-preconnect .lh-3p-filter-input not found'); }); + + it('adds no filter for audits with tables containing only third party resources', () => { + const checkboxClassName = 'lh-3p-filter-input'; + + expect(() => dom.find(`#render-blocking-resources .${checkboxClassName}`, container)) + .toThrowError('query #render-blocking-resources .lh-3p-filter-input not found'); + }); + + it('adds no filter for audits with tables containing only first party resources', () => { + const checkboxClassName = 'lh-3p-filter-input'; + + expect(() => dom.find(`#uses-text-compression .${checkboxClassName}`, container)) + .toThrowError('query #uses-text-compression .lh-3p-filter-input not found'); + }); }); }); From 8c4ce3dc44232b9053f133139af7386b6f31cf77 Mon Sep 17 00:00:00 2001 From: Jon Burger Date: Thu, 16 May 2019 19:04:08 -0400 Subject: [PATCH 4/4] Fix lint errors. --- .../test/report/html/renderer/report-ui-features-test.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js index e23652ba6c02..ca825732d110 100644 --- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js +++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js @@ -124,8 +124,10 @@ describe('ReportUIFeatures', () => { const lhr = JSON.parse(JSON.stringify(sampleResults)); lhr.requestedUrl = lhr.finalUrl = 'http://www.example.com'; const webpAuditItemTemplate = sampleResults.audits['uses-webp-images'].details.items[0]; - const renderBlockingAuditItemTemplate = sampleResults.audits['render-blocking-resources'].details.items[0]; - const textCompressionAuditItemTemplate = sampleResults.audits['uses-text-compression'].details.items[0]; + const renderBlockingAuditItemTemplate = + sampleResults.audits['render-blocking-resources'].details.items[0]; + const textCompressionAuditItemTemplate = + sampleResults.audits['uses-text-compression'].details.items[0]; // Interleave first/third party URLs to test restoring order. lhr.audits['uses-webp-images'].details.items = [ { @@ -213,7 +215,7 @@ describe('ReportUIFeatures', () => { it('adds no filter for audits with tables containing only first party resources', () => { const checkboxClassName = 'lh-3p-filter-input'; - + expect(() => dom.find(`#uses-text-compression .${checkboxClassName}`, container)) .toThrowError('query #uses-text-compression .lh-3p-filter-input not found'); });