From f49411b3a98181a62a7fe9e59daae5500cde00af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Mon, 10 Aug 2020 01:03:42 +0200 Subject: [PATCH] Various adaptations for Phantomas v2 --- front/src/js/controllers/ruleCtrl.js | 62 ------------- .../src/js/directives/offendersDirectives.js | 6 ++ front/src/views/rule.html | 26 ++++-- lib/metadata/policies.js | 86 ++----------------- lib/server/controllers/apiController.js | 3 +- lib/tools/colorDiff.js | 2 +- lib/tools/phantomas/phantomasWrapper.js | 4 + lib/tools/redownload/redownload.js | 2 +- 8 files changed, 40 insertions(+), 151 deletions(-) diff --git a/front/src/js/controllers/ruleCtrl.js b/front/src/js/controllers/ruleCtrl.js index 16c5c55..b2502c2 100644 --- a/front/src/js/controllers/ruleCtrl.js +++ b/front/src/js/controllers/ruleCtrl.js @@ -64,68 +64,6 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat } }; } - - // Init "Breakpoints" chart - if ($scope.policyName === 'cssBreakpoints' && $scope.rule.value > 0) { - - // Seek for the biggest breakpoint - var max = 0; - $scope.rule.offendersObj.forEach(function(offender) { - if (offender.pixels > max) { - max = offender.pixels; - } - }); - max = Math.max(max + 100, 1400); - - // We group offenders 10px by 10px - var GROUP_SIZE = 20; - - // Generate an empty array of values - $scope.breakpointsLabels = []; - $scope.breakpointsData = [[]]; - for (var i = 0; i <= max / GROUP_SIZE; i++) { - $scope.breakpointsLabels[i] = ''; - $scope.breakpointsData[0][i] = 0; - } - - // Fill it with results - $scope.rule.offendersObj.forEach(function(offender) { - var group = Math.floor((offender.pixels + 1) / GROUP_SIZE); - - if ($scope.breakpointsLabels[group] !== '') { - $scope.breakpointsLabels[group] += '/'; - } - $scope.breakpointsLabels[group] += offender.breakpoint; - - $scope.breakpointsData[0][group] += offender.count; - }); - - $scope.breakpointsSeries = ['Number of CSS rules per breakpoint']; - $scope.breakpointsColours = ['#9c4274']; - $scope.breakpointsOptions = { - scales: { - xAxes: [{ - gridLines: { - display:false - } - }], - yAxes: [{ - gridLines: { - display:false - } - }] - }, - tooltips: { - enabled: false - }, - - elements: { - point: { - radius: 0 - } - } - }; - } } $scope.backToDashboard = function() { diff --git a/front/src/js/directives/offendersDirectives.js b/front/src/js/directives/offendersDirectives.js index 9375973..c2663bc 100644 --- a/front/src/js/directives/offendersDirectives.js +++ b/front/src/js/directives/offendersDirectives.js @@ -291,4 +291,10 @@ }; }); + offendersDirectives.filter('roundNbr', function() { + return function(nbr) { + return Math.round(nbr); + }; + }); + })(); diff --git a/front/src/views/rule.html b/front/src/views/rule.html index 105da75..2577dbe 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -39,6 +39,11 @@
+
+ {{offender.url}} + an iframe without URL +
+
{{offender.id}}: {{offender.occurrences}} occurrences
@@ -97,9 +102,9 @@
- inline CSS - - : + inline CSS + + :
@@ -132,7 +137,12 @@
-
+
+ + (offset: {{offender.offset | roundNbr}}px) +
+ +
@@ -148,7 +158,7 @@
- + cached for {{offender.ttlWithUnit}} {{offender.unit}}
@@ -345,7 +355,7 @@
-
+

Try to inline these styles in the head of the HTML or to merge them with other files.

Try to inline these scripts in the HTML or merge them with other files.

@@ -366,9 +376,7 @@
-
-

Breakpoints distribution graph

- +

Breakpoints list

diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 17ca8ac..aca3af8 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -35,7 +35,7 @@ var policies = { "isOkThreshold": 3, "isBadThreshold": 15, "isAbnormalThreshold": 30, - "hasOffenders": false + "hasOffenders": true }, "DOMidDuplicated": { "tool": "phantomas", @@ -378,45 +378,12 @@ var policies = { "isOkThreshold": 1000, "isBadThreshold": 3000, "isAbnormalThreshold": 4500, - "hasOffenders": true, - "offendersTransformFn": function(offenders) { - var hasInline = false; - var inlineCount = 0; - var files = []; - - offenders.forEach(function(line) { - if (line.indexOf('[inline CSS]: ') === 0) { - hasInline = true; - inlineCount += parseInt(line.substr(14)); - } else { - var parts = /^<(.*)>: (\d+)$/.exec(line); - - if (parts) { - files.push({ - file: parts[1], - rules: parseInt(parts[2], 10) - }); - } - } - }); - - if (hasInline) { - files.push({ - file: 'inline CSS', - rules: inlineCount - }); - } - - return { - count: files.length, - list: files - }; - } + "hasOffenders": true }, "cssComplexSelectors": { "tool": "phantomas", "label": "Complex selectors", - "message": "

Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".

They are adding more work for the browser, and this could be avoided by simplifying selectors. The B.E.M. methodology is an useful way to simplify your CSS.

", + "message": "

Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".

They are adding more work for the browser, and this could be avoided by simplifying selectors. The B.E.M. methodology is a useful way to simplify your CSS.

", "isOkThreshold": 0, "isBadThreshold": 800, "isAbnormalThreshold": 2000, @@ -442,10 +409,10 @@ var policies = { var deduplicatedObj = {}; offenders.map(function(offender) { - var parts = /^([^ ]*) \((\d+) times\)$/.exec(offender); + var parts = /^([^ ]*) \((\d+) times\)$/.exec(offender.value.message); if (!parts) { - debug('cssColors offenders transform function error with "%s"', offender); + debug('cssColors offenders transform function error with "%s"', offender.value.message); return; } @@ -553,7 +520,7 @@ var policies = { "hasOffenders": true, "offendersTransformFn": function(offenders) { var parsedOffenders = offenders.map(function(offender) { - var parts = /^(.*) \((\d+) times\) ?<(.*)>$/.exec(offender); + var parts = /^(.*) \((\d+) times\)$/.exec(offender.value.message); if (!parts) { debug('cssDuplicatedSelectors offenders transform function error with "%s"', offender); @@ -565,7 +532,7 @@ var policies = { return { rule: parts[1], occurrences: parseInt(parts[2], 10), - file: parts[3] + file: offender.value.url }; }); @@ -911,27 +878,7 @@ var policies = { "isOkThreshold": 10, "isBadThreshold": 25, "isAbnormalThreshold": 50, - "hasOffenders": true, - "offendersTransformFn": function(offenders) { - return { - count: offenders.length, - list: offenders.map(function(offender) { - var parts = /^([^ ]*): (\d+) request\(s\)$/.exec(offender); - - if (!parts) { - debug('domains offenders transform function error with "%s"', offender); - return { - file: offender - }; - } - - return { - domain: parts[1], - requests: parseInt(parts[2]) - }; - }) - }; - } + "hasOffenders": true }, "notFound": { "tool": "phantomas", @@ -1095,22 +1042,7 @@ var policies = { return { count: offenders.length, list: offenders - .map(function(offender) { - var parts = /^([^ ]*) cached for (-?\d+(\.\d+)?) s$/.exec(offender); - - if (!parts) { - debug('cachingTooShort offenders transform function error with "%s"', offender); - return { - file: offender - }; - } - - return { - file: parts[1], - ttl: Math.round(parseFloat(parts[2])) - }; - - }).sort(function(a, b) { + .sort(function(a, b) { return a.ttl - b.ttl; diff --git a/lib/server/controllers/apiController.js b/lib/server/controllers/apiController.js index fab7781..4c7c245 100644 --- a/lib/server/controllers/apiController.js +++ b/lib/server/controllers/apiController.js @@ -142,7 +142,8 @@ var ApiController = function(app) { delete data.params.options.screenshot; // Here we can remove tools results if not needed - + delete data.toolsResults.phantomas.offenders.requests; + return resultsDatastore.saveResult(data); }) diff --git a/lib/tools/colorDiff.js b/lib/tools/colorDiff.js index d7217d6..e1a436e 100644 --- a/lib/tools/colorDiff.js +++ b/lib/tools/colorDiff.js @@ -55,7 +55,7 @@ var colorDiff = function() { }; this.parseOffender = function(offender) { - var regexResult = /^(.*) \(\d+ times\)$/.exec(offender); + var regexResult = /^(.*) \(\d+ times\)$/.exec(offender.value.message); return regexResult ? regexResult[1] : null; }; diff --git a/lib/tools/phantomas/phantomasWrapper.js b/lib/tools/phantomas/phantomasWrapper.js index 8bd934f..ab1b36c 100644 --- a/lib/tools/phantomas/phantomasWrapper.js +++ b/lib/tools/phantomas/phantomasWrapper.js @@ -103,6 +103,10 @@ var PhantomasWrapper = function() { offenders: results.getAllOffenders() }; + // For debugging purpose only + var fs = require('fs'); + fs.writeFile('phantomas-response.json', JSON.stringify(json, null, 2), 'utf8', function(){}); + deferred.resolve(json); }). catch(res => { diff --git a/lib/tools/redownload/redownload.js b/lib/tools/redownload/redownload.js index 72b3957..a32837d 100644 --- a/lib/tools/redownload/redownload.js +++ b/lib/tools/redownload/redownload.js @@ -707,7 +707,7 @@ var Redownload = function() { // Always add gzip and webp headers before sending, in case the server listens to them var reqHeaders = []; reqHeaders['Accept'] = '*/*,image/webp'; - reqHeaders['Accept-Encoding'] = 'gzip, deflate, br'; + reqHeaders['Accept-Encoding'] = 'gzip, deflate'; reqHeaders['Connection'] = 'keep-alive'; var requestOptions = {