From c1992dc34026fcca6de9a715196e8b04e3080c36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Sat, 27 Sep 2014 00:48:18 +0200
Subject: [PATCH] Add JS execution in before DOM Ready to the bad practices

---
 app/node_views/results.html       | 16 +++++++++++++++-
 app/public/scripts/resultsCtrl.js | 19 +++++++++++++------
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index ee8abff..ed0455f 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -38,7 +38,7 @@
 
         <div ng-show="view == 'summary' && !phantomasResults.error" class="summary">
             <h2>Summary</h2>
-            
+
             <div class="notations">
                 <div>
                     <div ng-class="notations.domComplexity">{{notations.domComplexity}}</div>
@@ -230,6 +230,20 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="inBodyDomManipulations > 10">
+                                <div class="label">Execution in body</div>
+                                <div class="result">
+                                    {{inBodyDomManipulations}}
+                                </div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="inBodyDomManipulationsTooltip = true"></div>
+                                    <modal-dialog show="inBodyDomManipulationsTooltip" dialog-title="Javascript executed inside the body">
+                                        <p>Wait the DOMContentLoaded event before executing Javascript.</p>
+                                        <p>Choose between the HEAD and the end of the BODY for scripts. Do not execute Javascript in the middle of the BODY as it slows down the construction of the DOM and makes a poor maintainability. This is what i call spaghetti code.</p>
+                                        <p>The JS Timeline tab can help you.</p>
+                                    </modal-dialog>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js
index 636ca7e..0fd6649 100644
--- a/app/public/scripts/resultsCtrl.js
+++ b/app/public/scripts/resultsCtrl.js
@@ -47,10 +47,16 @@ app.controller('ResultsCtrl', function ($scope) {
 
         // Read the main elements of the tree and sum the total time
         $scope.totalJSTime = 0;
+        $scope.inBodyDomManipulations = 0;
         treeRunner($scope.javascript, function(node) {
             if (node.data.time) {
                 $scope.totalJSTime += node.data.time;
             }
+
+            if (node.data.timestamp < $scope.phantomasResults.metrics.domInteractive
+                && node.data.type !== 'jQuery - onDOMReady') {
+                $scope.inBodyDomManipulations ++;
+            }
             
             if (node.data.type !== 'main') {
                 // Don't check the children
@@ -209,20 +215,21 @@ app.controller('ResultsCtrl', function ($scope) {
                     $scope.phantomasResults.metrics.evalCalls * 2 +
                     $scope.phantomasResults.metrics.jsErrors * 10 +
                     $scope.phantomasResults.metrics.consoleMessages / 2 +
-                    $scope.phantomasResults.metrics.globalVariables / 20;
-        if (score > 5) {
+                    $scope.phantomasResults.metrics.globalVariables / 20 +
+                    Math.sqrt($scope.inBodyDomManipulations);
+        if (score > 10) {
             note = 'B';
         }
-        if (score > 10) {
+        if (score > 15) {
             note = 'C';
         }
-        if (score > 15) {
+        if (score > 20) {
             note = 'D';
         }
-        if (score > 25) {
+        if (score > 30) {
             note = 'E';
         }
-        if (score > 40) {
+        if (score > 45) {
             note = 'F';
         }
         return note;