WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various adaptations for Phantomas v2

Browse Source
This commit is contained in:
Gaël Métais
2020-08-10 01:03:42 +02:00
parent 1d3dee1950
commit f49411b3a9
8 changed files with 40 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/js/controllers/ruleCtrl.js
-62
View File
@@ -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() {
front/src/js/directives/offendersDirectives.js
+6
View File
@@ -291,4 +291,10 @@
};
});
offendersDirectives.filter('roundNbr', function() {
return function(nbr) {
return Math.round(nbr);
};
});
})();
front/src/views/rule.html
+17 -9
View File
@@ -39,6 +39,11 @@
</div>
<div ng-if="!offender.parseError">
<div ng-if="policyName === 'iframesCount'">
<span ng-if="offender.url">{{offender.url}}</span>
<span ng-if="!offender.url">an iframe without URL</span>
</div>
<div ng-if="policyName === 'DOMidDuplicated'">
<b>{{offender.id}}</b>: {{offender.occurrences}} occurrences
</div>
@@ -97,9 +102,9 @@
</div>
<div ng-if="policyName === 'cssRules'">
<span ng-if="offender.file === 'inline CSS'">inline CSS</span>
<span ng-if="offender.file !== 'inline CSS'"><url-link url="offender.file" max-length="80"></url-link></span>
: <ng-pluralize count="offender.rules" when="{'0': '0 rule', 'one':'1 rule','other':'{} rules'}"></ng-pluralize>
<span ng-if="offender.url === '[inline CSS]'">inline CSS</span>
<span ng-if="offender.url !== '[inline CSS]'"><url-link url="offender.url" max-length="80"></url-link></span>
: <ng-pluralize count="offender.value" when="{'0': '0 rule', 'one':'1 rule','other':'{} rules'}"></ng-pluralize>
</div>
<div ng-if="policyName === 'similarColors'">
@@ -132,7 +137,12 @@
</div>
</div>
<div ng-if="policyName === 'lazyLoadableImagesBelowTheFold' || policyName === 'hiddenImages'">
<div ng-if="policyName === 'lazyLoadableImagesBelowTheFold'">
<img ng-src="{{offender.url | https}}" class="smallPreview checker"></img>
<url-link url="offender.url" max-length="70"></url-link> (offset: {{offender.offset | roundNbr}}px)
</div>
<div ng-if="policyName === 'hiddenImages'">
<img ng-src="{{offender | https}}" class="smallPreview checker"></img>
<url-link url="offender" max-length="100"></url-link>
</div>
@@ -148,7 +158,7 @@
</div>
<div ng-if="policyName === 'cachingTooShort'">
<url-link url="offender.file" max-length="100"></url-link>
<url-link url="offender.url" max-length="100"></url-link>
cached for <b>{{offender.ttlWithUnit}} {{offender.unit}}</b>
</div>
@@ -345,7 +355,7 @@
</div>
<div ng-if="policyName === 'smallRequests'">
<div ng-repeat="(type, requests) in rule.offendersObj.list.byType">
<div ng-repeat="(type, requests) in rule.offendersObj.list.byType" ng-if="requests.length > 0">
<h3><ng-pluralize count="requests.length" when="{'0': 'small ' + type + ' file', 'one': '1 small ' + type + ' file', 'other': '{} small ' + type + ' files'}"></ng-pluralize></h3>
<p ng-if="type == 'css' && requests.length > 0">Try to inline these styles in the head of the HTML or to merge them with other files.</p>
<p ng-if="type == 'js' && requests.length > 0">Try to inline these scripts in the HTML or merge them with other files.</p>
@@ -366,9 +376,7 @@
</div>
<div ng-if="policyName === 'cssBreakpoints'">
<div ng-if="rule.value > 0" class="cssBreakpointsGraph">
<h3>Breakpoints distribution graph</h3>
<canvas class="chart chart-line" chart-data="breakpointsData" chart-labels="breakpointsLabels" chart-options="breakpointsOptions" chart-colors="breakpointsColours" chart-series="breakpointsSeries" width="600" height="250"></canvas>
<div ng-if="rule.value > 0">
<h3>Breakpoints list</h3>
<div class="offendersTable">
<div ng-repeat="offender in rule.offendersObj | orderBy:'pixels'">
lib/metadata/policies.js
+9 -77
View File
@@ -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": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors. The <a href=\"http://getbem.com\" target=\"_blank\">B.E.M. methodology</a> is an useful way to simplify your CSS.</p>",
"message": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors. The <a href=\"http://getbem.com\" target=\"_blank\">B.E.M. methodology</a> is a useful way to simplify your CSS.</p>",
"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;
lib/server/controllers/apiController.js
+2 -1
View File
@@ -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);
})
lib/tools/colorDiff.js
+1 -1
View File
@@ -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;
};
lib/tools/phantomas/phantomasWrapper.js
+4
View File
@@ -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 => {
lib/tools/redownload/redownload.js
+1 -1
View File
@@ -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 = {