Add spy on getComputedStyle()

front/src/js/directives/offendersDirectives.js

@@ -147,6 +147,9 @@
             case 'addEventListener':
                 return 'bind <b>' + args[0] + '</b> to ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine);
 
+            case 'getComputedStyle':
+                return getDomElementButtonHTML(args[0], onASingleLine) + (args[1] || '');
+
             case 'error':
                 return args[0];
 
@@ -200,7 +203,7 @@
                 return 'append ' + joinArgs(args) + ' to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
 
             case 'jQuery - appendTo':
-                return 'append' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to <b>' + args[0] + '</b>';
+                return 'append ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to <b>' + args[0] + '</b>';
 
             case 'jQuery - prepend':
                 return 'prepend ' + joinArgs(args) + ' to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
@@ -280,10 +283,8 @@
             case 'jQuery - offset':
             case 'jQuery - height':
             case 'jQuery - innerHeight':
-            case 'jQuery - outerHeight':
             case 'jQuery - width':
             case 'jQuery - innerWidth':
-            case 'jQuery - outerWidth':
             case 'jQuery - scrollLeft':
             case 'jQuery - scrollTop':
             case 'jQuery - position':
@@ -294,6 +295,16 @@
                 }
                 break;
 
+            case 'jQuery - outerHeight':
+            case 'jQuery - outerWidth':
+                if (args[0] && args[0] !== 'true') {
+                    return 'set <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else if (args[0] === 'true') {
+                    return 'get from ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' (with include margins option)';
+                } else {
+                    return 'get from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+
             case 'jQuery - toggle':
                 if (args[0] === 'true') {
                     return getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to visible';

lib/runner.js

@@ -23,7 +23,7 @@ var Runner = function(params) {
         data.toolsResults.phantomas = phantomasResults;
 
         // Treat the JS Execution Tree from offenders
-        data.javascriptExecutionTree = jsExecutionTransformer.transform(data);
+        data = jsExecutionTransformer.transform(data);
 
         // Other tools go here
 

lib/tools/jsExecutionTransformer.js

@@ -6,6 +6,14 @@ var jsExecutionTransformer = function() {
 
     this.transform = function(data) {
         var javascriptExecutionTree = {};
+        
+        var metrics = {
+            domManipulations: 0,
+            queriesWithoutResults: 0,
+            jQueryCalls: 0,
+            jQueryCallsOnEmptyObject: 0
+            
+        };
 
         debug('Starting JS execution transformation');
 
@@ -56,7 +64,7 @@ var jsExecutionTransformer = function() {
                             node.data.callDetails.context.elements = node.data.callDetails.context.elements.map(offendersHelpers.domPathToDomElementObj, offendersHelpers);
                         }
 
-                        if (node.data.type === 'appendChild' || node.data.type === 'insertBefore') {
+                        if (node.data.type === 'appendChild' || node.data.type === 'insertBefore' || node.data.type === 'getComputedStyle') {
                             node.data.callDetails.arguments[0] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[0]);
                         }
 
@@ -73,7 +81,12 @@ var jsExecutionTransformer = function() {
             throw err;
         }
 
-        return javascriptExecutionTree;
+        data.javascriptExecutionTree = javascriptExecutionTree;
+        data.toolsResults.jsExecutionTransformer = {
+            metrics: metrics
+        };
+
+        return data;
     };
 
     function treeRecursiveParser(node, fn) {

lib/tools/phantomas/custom_modules/modules/domQYLT/domQYLT.js

@@ -323,6 +323,22 @@ exports.module = function(phantomas) {
                     phantomas.leaveContext();
                 });
 
+
+                phantomas.spy(window, 'getComputedStyle', function(element, pseudoElement) {
+                    var target = phantomas.getDOMPath(element);
+                    
+                    phantomas.enterContext({
+                        type: 'getComputedStyle',
+                        callDetails: {
+                            arguments: [target, pseudoElement]
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                }, function(result, args) {
+                    phantomas.leaveContext();
+                });
+
             })(window.__phantomas);
         });
     });