Add the possibility to change offenders' layout

lib/metadata/policies.js

@@ -1,4 +1,5 @@
 var debug = require('debug')('ylt:policies');
+var offendersHelpers = require('../offendersHelpers');
 
 var policies = {
     "DOMelementsCount": {
@@ -15,7 +16,10 @@ var policies = {
         "message": "<p>A deep DOM makes the CSS matching with DOM elements difficult.</p><p>It also slows down JavaScript modifications to the DOM because changing the dimensions of an element makes the browser re-calculate the dimensions of it's parents. Same thing for JavaScript events, that bubble up to the document root.</p>",
         "isOkThreshold": 10,
         "isBadThreshold": 20,
-        "isAbnormalThreshold": 28
+        "isAbnormalThreshold": 28,
+        "offendersTransformFn": function(offenders) {
+            return offendersHelpers.listOfDomPathsToHTML(offenders);
+        }
     },
     "iframesCount": {
         "tool": "phantomas",
@@ -31,7 +35,13 @@ var policies = {
         "message": "<p>IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 5,
-        "isAbnormalThreshold": 10
+        "isAbnormalThreshold": 10,
+        "offendersTransformFn": function(offenders) {
+            return offenders.map(function(offender) {
+                var results = /^(.*): (\d) occurrences$/.exec(offender);
+                return '<b>#' + results[1] + '</b>: ' + results[2] + ' occurrences';
+            });
+        }
     },
     "DOMinserts": {
         "tool": "phantomas",

lib/offendersHelpers.js

@@ -0,0 +1,65 @@
+
+
+var OffendersHelpers = function() {
+
+    
+    this.domPathToArray = function(str) {
+        return str.split(/\s?>\s?/);
+    };
+
+    this.listOfDomArraysToTree = function(listOfDomArrays) {
+        var result = {};
+
+        function recursiveTreeBuilder(tree, domArray) {
+            if (domArray.length > 0) {
+                var currentDomElement = domArray.shift(domArray);
+                if (tree === null) {
+                    tree = {};
+                }
+                tree[currentDomElement] = recursiveTreeBuilder(tree[currentDomElement] || null, domArray);
+                return tree;
+            } else if (tree === null) {
+                return 1;
+            } else {
+                return tree + 1;
+            }
+        }
+
+        listOfDomArrays.forEach(function(domArray) {
+            result = recursiveTreeBuilder(result, domArray);
+        });
+
+        return result;
+    };
+
+    this.domTreeToHTML = function(domTree) {
+
+        function recursiveHtmlBuilder(tree) {
+            var html = '';
+            var keys = Object.keys(tree);
+            
+            keys.forEach(function(key) {
+                if (isNaN(tree[key])) {
+                    html += '<div><span>' + key + '</span>' + recursiveHtmlBuilder(tree[key]) + '</div>';
+                } else if (tree[key] > 1) {
+                    html += '<div><span>' + key + ' <span>(x' + tree[key] + ')</span></span></div>';
+                } else {
+                    html += '<div><span>' + key + '</span></div>';
+                }
+            });
+
+            return html;
+        }
+
+        return '<div class="domTree">' + recursiveHtmlBuilder(domTree) + '</div>';
+    };
+
+    this.listOfDomPathsToHTML = function(domPaths) {
+        var domArrays = domPaths.map(this.domPathToArray);
+        var domTree = this.listOfDomArraysToTree(domArrays);
+        return this.domTreeToHTML(domTree);
+    };
+
+};
+
+module.exports = new OffendersHelpers();

lib/rulesChecker.js

@@ -24,10 +24,12 @@ var RulesChecker = function() {
                         policy: policy
                     };
 
+                    var offenders = [];
+
                     // Take DOMqueriesAvoidable's offenders from DOMqueriesDuplicated, for example.
                     if (policy.takeOffendersFrom) {
+                        
                         var fromList = policy.takeOffendersFrom;
-                        var offenders = [];
                         
                         // takeOffendersFrom option can be a string or an array of strings.
                         if (typeof fromList === 'string') {
@@ -35,16 +37,31 @@ var RulesChecker = function() {
                         }
                         
                         fromList.forEach(function(from) {
-                            offenders = offenders.concat(data.toolsResults[policy.tool].offenders[from]);
+                            if (data.toolsResults[policy.tool] &&
+                                    data.toolsResults[policy.tool].offenders &&
+                                    data.toolsResults[policy.tool].offenders[from]) {
+                                offenders = offenders.concat(data.toolsResults[policy.tool].offenders[from]);
+                            }
                         });
 
                         data.toolsResults[policy.tool].offenders[metricName] = offenders;
+
+                    } else if (data.toolsResults[policy.tool] &&
+                            data.toolsResults[policy.tool].offenders &&
+                            data.toolsResults[policy.tool].offenders[metricName]) {
+                        offenders = data.toolsResults[policy.tool].offenders[metricName];
+                    }
+                    
+                    // It is possible to declare a transformation function for the offenders.
+                    // The function should take an array of strings as single parameter and return a string.
+                    if (policy.offendersTransformFn) {
+                        rule.offendersCount = offenders.length;
+                        offenders = policy.offendersTransformFn(offenders);
+                        delete policy.offendersTransformFn;
                     }
 
-                    if (data.toolsResults[policy.tool].offenders &&
-                        data.toolsResults[policy.tool].offenders[metricName] &&
-                        data.toolsResults[policy.tool].offenders[metricName].length > 0) {
-                            rule.offenders = data.toolsResults[policy.tool].offenders[metricName];
+                    if (offenders && offenders.length > 0) {
+                        rule.offenders = offenders;
                     }
 
                     rule.bad = rule.value > policy.isOkThreshold;