Improved Summary page

app/node_views/results.html

@@ -39,49 +39,78 @@
             <div class="notations">
                 <div>
                     <div ng-class="notations.domComplexity">{{notations.domComplexity}}</div>
-                    <div>DOM complexity</div>
+                    <div class="notation">DOM complexity</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.DOMelementsCount">DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}</li>
+                            <li ng-if="phantomasResults.metrics.DOMelementMaxDepth">DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}</li>
+                            <li ng-if="phantomasResults.metrics.iframesCount">Number of iframes: {{phantomasResults.metrics.iframesCount}}</li>
+                        </ul>
+                    </div>
                 </div>
                 <div>
                     <div ng-class="notations.domManipulations">{{notations.domManipulations}}</div>
-                    <div>DOM read and write Requests</div>
+                    <div class="notation">DOM read and write</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.DOMinserts">DOM inserts: {{phantomasResults.metrics.DOMinserts}}</li>
+                            <li ng-if="phantomasResults.metrics.DOMqueries">DOM queries: {{phantomasResults.metrics.DOMqueries}}</li>
+                            <li ng-if="totalJSTime">Time it took: {{totalJSTime}} ms</li>
+                        </ul>
+                    </div>
                 </div>
                 <div>
-                    <div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
-                    <div>Events bound</div>
+                    <div ng-class="notations.duplicatedDomQueries">{{notations.duplicatedDomQueries}}</div>
+                    <div class="notation">Duplicated DOM queries</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="duplicatedQueriesCountAll">Avoidable queries: {{duplicatedQueriesCountAll}}</li>
+                        </ul>
+                    </div>
                 </div>
                 <div>
-                    <div ng-class="notations.duplicatedDomQueries">{{notations.duplicatedDomQueries}}</div>
-                    <div>Duplicated DOM queries</div>
+                    <div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
+                    <div class="notation">Events bound</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.eventsBound">Events bound: {{phantomasResults.metrics.eventsBound}}</li>
+                        </ul>
+                    </div>
                 </div>
                 <div>
                     <div ng-class="notations.badPractices">{{notations.badPractices}}</div>
-                    <div>Evil Javascript</div>
+                    <div class="notation">Evil Javascript</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.jsErrors">Javascript errors: {{phantomasResults.metrics.jsErrors}}</li>
+                            <li ng-if="phantomasResults.metrics.evalCalls">eval calls: {{phantomasResults.metrics.evalCalls}}</li>
+                            <li ng-if="phantomasResults.metrics.documentWriteCalls">document.write calls: {{phantomasResults.metrics.documentWriteCalls}}</li>
+                            <li ng-if="phantomasResults.metrics.consoleMessages">Console messages: {{phantomasResults.metrics.consoleMessages}}</li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <div ng-class="notations.scripts">{{notations.scripts}}</div>
+                    <div class="notation">Scripts loaded</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.jsCount">Scripts count: {{phantomasResults.metrics.jsCount}}</li>
+                        </ul>
+                    </div>
                 </div>
                 <div>
                     <div ng-class="notations.jQueryLoading">{{notations.jQueryLoading}}</div>
-                    <div>jQuery version</div>
+                    <div class="notation">jQuery version</div>
+                    <div class="criteria">
+                        <ul>
+                            <li ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">jQuery version: {{phantomasResults.metrics.jQueryVersion}}</li>
+                            <li ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded: 
+                                <span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
-
-
-
-            <div>Javascript manipulation time: {{totalJSTime}} ms</div>
-            <div>Javascript onDOMReady time: {{phantomasResults.metrics.domContentLoadedEnd - phantomasResults.metrics.domContentLoaded}} ms</div>
-            <div>Scripts count: {{phantomasResults.metrics.jsCount}}</div>
-            <div>DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}</div>
-            <div>DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}</div>
-            <div>DOM queries: {{phantomasResults.metrics.DOMqueries}}</div>
-            <div>DOM inserts: {{phantomasResults.metrics.DOMinserts}}</div>
-            <div>Duplicated DOM queries: {{phantomasResults.metrics.DOMqueriesDuplicated}}</div>
-            <div>Events bound: {{phantomasResults.metrics.eventsBound}}</div>
-            <div>document.write() calls: {{phantomasResults.metrics.documentWriteCalls}}</div>
-            <div>eval calls: {{phantomasResults.metrics.evalCalls}}</div>
-            <div>Javascript errors: {{phantomasResults.metrics.jsErrors}}</div>
-            <div ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">jQuery version: {{phantomasResults.metrics.jQueryVersion}}</div>
-            <div ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">
-                Number of jQuery versions loaded: {{phantomasResults.metrics.jQueryDifferentVersions}}
-                (<span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>)
-            </div>
         </div>
 
         <div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
@@ -105,7 +134,7 @@
                     <div>Params</div>
                     <div><!-- details --></div>
                     <div>Duration</div>
-                    <div>Start time</div>
+                    <div>Timestamp</div>
                 </div>
                 <div ng-repeat="node in javascript.children"
                      ng-if="(!slowRequestsOn || node.data.time > slowRequestsLimit)

app/public/scripts/resultsCtrl.js

@@ -69,6 +69,7 @@ app.controller('ResultsCtrl', function ($scope) {
             duplicatedDomQueries: 'A',
             eventsBound: 'A',
             badPractices: 'A',
+            scripts: 'A',
             jQueryLoading: 'A'
         };
 
@@ -110,6 +111,23 @@ app.controller('ResultsCtrl', function ($scope) {
             $scope.notations.domManipulations = 'F';
         }
 
+        var duplicatedDomQueries = $scope.duplicatedQueriesCountAll;
+        if (duplicatedDomQueries > 10) {
+            $scope.notations.duplicatedDomQueries = 'B';
+        }
+        if (duplicatedDomQueries > 50) {
+            $scope.notations.duplicatedDomQueries = 'C';
+        }
+        if (duplicatedDomQueries > 100) {
+            $scope.notations.duplicatedDomQueries = 'D';
+        }
+        if (duplicatedDomQueries > 200) {
+            $scope.notations.duplicatedDomQueries = 'E';
+        }
+        if (duplicatedDomQueries > 500) {
+            $scope.notations.duplicatedDomQueries = 'F';
+        }
+
         var eventsBoundScore = $scope.phantomasResults.metrics.eventsBound;
         if (eventsBoundScore > 50) {
             $scope.notations.eventsBound = 'B';
@@ -127,23 +145,6 @@ app.controller('ResultsCtrl', function ($scope) {
             $scope.notations.eventsBound = 'F';
         }
 
-        var duplicatedDomQueries = $scope.duplicatedQueriesCountAll;
-        if (duplicatedDomQueries > 20) {
-            $scope.notations.duplicatedDomQueries = 'B';
-        }
-        if (duplicatedDomQueries > 50) {
-            $scope.notations.duplicatedDomQueries = 'C';
-        }
-        if (duplicatedDomQueries > 100) {
-            $scope.notations.duplicatedDomQueries = 'D';
-        }
-        if (duplicatedDomQueries > 200) {
-            $scope.notations.duplicatedDomQueries = 'E';
-        }
-        if (duplicatedDomQueries > 500) {
-            $scope.notations.duplicatedDomQueries = 'F';
-        }
-
         var badPracticesScore = $scope.phantomasResults.metrics.documentWriteCalls * 3
                               + $scope.phantomasResults.metrics.evalCalls * 3
                               + $scope.phantomasResults.metrics.jsErrors * 10
@@ -164,6 +165,23 @@ app.controller('ResultsCtrl', function ($scope) {
             $scope.notations.badPractices = 'F';
         }
 
+        var scriptsScore = $scope.phantomasResults.metrics.jsCount;
+        if (scriptsScore > 4) {
+            $scope.notations.scripts = 'B';
+        }
+        if (scriptsScore > 8) {
+            $scope.notations.scripts = 'C';
+        }
+        if (scriptsScore > 12) {
+            $scope.notations.scripts = 'D';
+        }
+        if (scriptsScore > 16) {
+            $scope.notations.scripts = 'E';
+        }
+        if (scriptsScore > 20) {
+            $scope.notations.scripts = 'F';
+        }
+
         $scope.notations.jQueryLoading = 'NA';
         if ($scope.phantomasResults.metrics.jQueryDifferentVersions > 1) {
             $scope.notations.jQueryLoading = 'F';

app/public/styles/results.css

@@ -42,10 +42,16 @@ h4 {
 
 .notations {
     display: table;
-    width: 25em;
-    margin: 0 auto;
+    width: 40em;
+    margin-left: 6em;
     border-spacing: 0.5em;
 }
+@media screen and (max-width: 800px) {
+    .notations {
+        width: 30em;
+        margin-left: 0;
+    }
+}
 .notations > div {
     display: table-row;
 }
@@ -53,13 +59,21 @@ h4 {
     display: table-cell;
     height: 2.5em;
     vertical-align: middle;
+}
+.notations .notation {
     font-weight: bold;
+    text-align: center;
+}
+.notations .criteria {
+    padding-top: 0.9em;
+    font-weight: normal;
 }
 .notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA {
     width: 2.5em;
     font-size: 2em;
     text-align: center;
     border-radius: 0.5em;
+    font-weight: bold;
 }
 .notations .A {
     /* green */