Various adaptations for Phantomas v2

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() {

front/src/js/directives/offendersDirectives.js

@@ -291,4 +291,10 @@
         };
     });
 
+    offendersDirectives.filter('roundNbr', function() {
+        return function(nbr) {
+            return Math.round(nbr);
+        };
+    });
+
 })();

front/src/views/rule.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 = {