Offenders layout for DOM inserts

lib/metadata/policies.js

@@ -38,8 +38,8 @@ var policies = {
         "isAbnormalThreshold": 10,
         "offendersTransformFn": function(offenders) {
             return offenders.map(function(offender) {
-                var results = /^(.*): (\d) occurrences$/.exec(offender);
-                return '<b>#' + results[1] + '</b>: ' + results[2] + ' occurrences';
+                var parts = /^(.*): (\d) occurrences$/.exec(offender);
+                return '<b>#' + parts[1] + '</b>: ' + parts[2] + ' occurrences';
             });
         }
     },
@@ -49,7 +49,14 @@ var policies = {
         "message": "<p>Working with the DOM in JavaScript triggers layout calculations and slows down the page.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p>",
         "isOkThreshold": 10,
         "isBadThreshold": 400,
-        "isAbnormalThreshold": 1000
+        "isAbnormalThreshold": 1000,
+        "offendersTransformFn": function(offenders) {
+            return offenders.map(function(offender) {
+                var parts = /^"(.*)" appended to "(.*)"$/.exec(offender);
+
+                return offendersHelpers.domPathToButton(parts[1]) + ' appended to ' + offendersHelpers.domPathToButton(parts[2]);
+            });
+        }
     },
     "DOMqueries": {
         "tool": "phantomas",

lib/offendersHelpers.js

@@ -1,7 +1,6 @@
 
 
 var OffendersHelpers = function() {
-
     
     this.domPathToArray = function(str) {
         return str.split(/\s?>\s?/);
@@ -60,6 +59,39 @@ var OffendersHelpers = function() {
         return this.domTreeToHTML(domTree);
     };
 
+    this.domPathToButton = function(domPath) {
+        var domArray = this.domPathToArray(domPath);
+        var domTree = this.listOfDomPathsToHTML([domPath]);
+
+        if (domArray[0] === 'html') {
+            return '<div class="eltButton htmlButton"><b>html</b></div>';
+        }
+        if (domArray[0] === 'body') {
+            if (domArray.length === 1) {
+                return '<div class="eltButton bodyButton"><b>body</b></div>';
+            } else {
+                return '<div class="eltButton domButton opens">DOM element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
+            }
+        }
+        if (domArray[0] === 'head') {
+            return '<div class="eltButton headButton"><b>head</b></div>';
+        }
+        if (domArray[0] === 'DocumentFragment') {
+            if (domArray.length === 1) {
+                return '<div class="eltButton fragButton">Fragment</div>';
+            } else {
+                return '<div class="eltButton fragEltButton opens">Fragment element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
+            }
+        }
+        
+        // Not attached element, such as just created with document.createElement()
+        if (domArray.length === 1) {
+            return '<div class="eltButton aloneButton">Created element <b>' + domPath + '</b></div>';
+        } else {
+            return '<div class="eltButton aloneEltButton opens">Created element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
+        }
+    };
+
 };
 
 module.exports = new OffendersHelpers();