Merge pull request #62 from gmetais/develop

v1.3.2

front/src/css/timeline.css

@@ -224,7 +224,7 @@
   background: #EBD8E2;
   line-height: 1.3em;
   height: 1.3em;
-  z-index: 1;
+  z-index: 2;
 }
 .table .showingDetails .child span:hover {
   background: inherit;
@@ -306,3 +306,9 @@
   color: #e74c3c;
   cursor: pointer;
 }
+.warningsFilterOn > div {
+  display: none;
+}
+.warningsFilterOn > div.warning {
+  display: table-row;
+}

front/src/js/controllers/timelineCtrl.js

@@ -166,7 +166,6 @@ timelineCtrl.directive('scrollOnClick', ['$animate', '$timeout', function($anima
 
 
                 window.scrollTo(0, lineElement[0].offsetTop);
-                console.log(lineElement[0]);
             });
         }
     };

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];
 
@@ -157,13 +160,14 @@
 
     function getJQueryHTML(node, onASingleLine) {
         var type = node.data.type;
-        var args = node.data.callDetails.arguments;
+        var unescapedArgs = node.data.callDetails.arguments;
+        var args = [];
         var ctxt = node.data.callDetails.context;
         
         // escape HTML in args
         for (var i = 0 ; i < 4 ; i ++) {
-            if (args[i]) {
-                args[i] = escapeHTML(args[i]);
+            if (unescapedArgs[i]) {
+                args[i] = escapeHTML(unescapedArgs[i]);
             }
         }
 
@@ -199,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);
@@ -279,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':
@@ -293,6 +295,17 @@
                 }
                 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);
+                }
+                break;
+
             case 'jQuery - toggle':
                 if (args[0] === 'true') {
                     return getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to visible';
@@ -356,15 +369,10 @@
             case 'jQuery - change':
             case 'jQuery - click':
             case 'jQuery - dblclick':
-            case 'jQuery - error':
             case 'jQuery - focus':
-            case 'jQuery - focusin':
-            case 'jQuery - focusout':
-            case 'jQuery - hover':
             case 'jQuery - keydown':
             case 'jQuery - keypress':
             case 'jQuery - keyup':
-            case 'jQuery - load':
             case 'jQuery - mousedown':
             case 'jQuery - mouseenter':
             case 'jQuery - mouseleave':
@@ -376,6 +384,18 @@
             case 'jQuery - scroll':
             case 'jQuery - select':
             case 'jQuery - submit':
+                if (args[0]) {
+                    return 'bind on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'triggered on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - error':
+            case 'jQuery - focusin':
+            case 'jQuery - focusout':
+            case 'jQuery - hover':
+            case 'jQuery - load':
             case 'jQuery - unload':
                 return 'bind on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
 
@@ -706,7 +726,7 @@
                 index: '=',
                 node: '='
             },
-            template: '<div id="line_{{index}}"></div>',
+            template: '<div></div>',
             replace: true,
             link: function(scope, element) {
                 
@@ -717,6 +737,11 @@
                 }
 
                 element.append(getProfilerLineHTML(scope.index, scope.node));
+                element[0].id = 'line_' + scope.index;
+
+                if (scope.node.warning || scope.node.error) {
+                    element[0].classList.add('warning');
+                }
 
                 // Bind click on the details icon
                 var detailsIcon = element[0].querySelector('.details div');

front/src/less/timeline.less

@@ -257,7 +257,7 @@
             background: #EBD8E2;
             line-height: 1.3em;
             height: 1.3em;
-            z-index: 1;
+            z-index: 2;
         }
     }
 }
@@ -345,4 +345,12 @@
 .execution .icon-warning {
     color: #e74c3c;
     cursor: pointer;
+}
+.warningsFilterOn {
+    > div {
+        display: none;
+        &.warning {
+            display: table-row;
+        }
+    }
 }

front/src/views/timeline.html

@@ -64,7 +64,7 @@
             <label for="warningsFilterOn">Show warnings only</label>
         </div>
     </div>
-    <div class="table">
+    <div class="table" ng-class="{warningsFilterOn: warningsFilterOn}">
         <div class="headers">
             <div><!-- index --></div>
             <div>Type</div>

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);
         });
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yellowlabtools",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Online tool to audit a webpage for performance and front-end quality issues",
   "repository": {
     "type": "git",

server_config/server_install.sh

@@ -30,4 +30,4 @@ grunt build
 # Start the server
 rm server_config/settings.json
 cp server_config/settings-prod.json server_config/settings.json
-NODE_ENV=production forever start -c "node --stack-size=65500" bin/server.js
+NODE_ENV=production forever start -c "node --stack-size=262000" bin/server.js

server_config/server_update.sh

@@ -23,4 +23,4 @@ npm install phantomjs -g
 grunt build
 
 # Restart the server
-NODE_ENV=production forever start -c "node --stack-size=65500" bin/server.js
+NODE_ENV=production forever start -c "node --stack-size=262000" bin/server.js