Browse Source

Merge a few criterium into the DOM Manipulations note

Gaël Métais 10 years ago
parent
commit
06ea90f073
2 changed files with 11 additions and 82 deletions
  1. 2 30
      app/node_views/results.html
  2. 9 52
      app/public/scripts/resultsCtrl.js

+ 2 - 30
app/node_views/results.html

@@ -97,8 +97,8 @@
                     </div>
                     </div>
                 </div>
                 </div>
                 <div>
                 <div>
-                    <div ng-class="notations.domManipulations">{{notations.domManipulations}}</div>
-                    <div class="notation">DOM read and write</div>
+                    <div ng-class="notations.jsDomManipulations">{{notations.jsDomManipulations}}</div>
+                    <div class="notation">DOM manipulations</div>
                     <div class="criteria">
                     <div class="criteria">
                         <div class="table">
                         <div class="table">
                             <div ng-if="phantomasResults.metrics.DOMinserts">
                             <div ng-if="phantomasResults.metrics.DOMinserts">
@@ -127,26 +127,6 @@
                                     </modal-dialog>
                                     </modal-dialog>
                                 </div>
                                 </div>
                             </div>
                             </div>
-                            <div ng-if="totalJSTime">
-                                <div class="label">JS interactions time</div>
-                                <div class="result">{{totalJSTime}} ms</div>
-                                <div class="info">
-                                    <div class="icon-question" ng-click="totalJSTimeTooltip = true"></div>
-                                    <modal-dialog show="totalJSTimeTooltip" dialog-title="DOM manipulations can be very slow">
-                                        <p><b>Please note that the tool is not accurate. The time indicated here is generally 3 or 4 times slower than on modern browsers.</b></p>
-                                        <p>Some DOM manipulations can be very slow. For example, searching with a complex selector, making big changes to the DOM, animating an element, inserting an iframe, ...</p>
-                                        <p>Have a look at the <b>JS Timeline</b> to find out why it is so slow.</p>
-                                    </modal-dialog>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div ng-class="notations.duplicatedDomQueries">{{notations.duplicatedDomQueries}}</div>
-                    <div class="notation">Duplicated DOM queries</div>
-                    <div class="criteria">
-                        <div class="table">
                             <div ng-if="duplicatedQueriesCountAll">
                             <div ng-if="duplicatedQueriesCountAll">
                                 <div class="label">Avoidable queries</div>
                                 <div class="label">Avoidable queries</div>
                                 <div class="result">
                                 <div class="result">
@@ -161,14 +141,6 @@
                                     </modal-dialog>
                                     </modal-dialog>
                                 </div>
                                 </div>
                             </div>
                             </div>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
-                    <div class="notation">Events bound</div>
-                    <div class="criteria">
-                        <div class="table">
                             <div ng-if="phantomasResults.metrics.eventsBound">
                             <div ng-if="phantomasResults.metrics.eventsBound">
                                 <div class="label">Events bound</div>
                                 <div class="label">Events bound</div>
                                 <div class="result">
                                 <div class="result">

+ 9 - 52
app/public/scripts/resultsCtrl.js

@@ -76,9 +76,7 @@ app.controller('ResultsCtrl', function ($scope) {
         // Grab the notes
         // Grab the notes
         $scope.notations = {
         $scope.notations = {
             domComplexity: getDomComplexityScore(),
             domComplexity: getDomComplexityScore(),
-            domManipulations: getDomManipulationsScore(),
-            duplicatedDomQueries: getDuplicatedDomQueriesScore(),
-            eventsBound: getEventsBoundScore(),
+            jsDomManipulations: getJsDomManipulationsScore(),
             jsBadPractices: getJSBadPracticesScore(),
             jsBadPractices: getJSBadPracticesScore(),
             jQueryLoading: getJQueryLoadingScore(),
             jQueryLoading: getJQueryLoadingScore(),
             cssComplexity: getCSSComplexityScore(),
             cssComplexity: getCSSComplexityScore(),
@@ -184,66 +182,25 @@ app.controller('ResultsCtrl', function ($scope) {
         return note;
         return note;
     }
     }
 
 
-    function getDomManipulationsScore() {
+    function getJsDomManipulationsScore() {
         var note = 'A';
         var note = 'A';
-        var score = $scope.phantomasResults.metrics.DOMinserts +
-                    $scope.phantomasResults.metrics.DOMqueries * 0.5 +
-                    $scope.totalJSTime;
-        if (score > 100) {
-            note = 'B';
-        }
-        if (score > 200) {
-            note = 'C';
-        }
+        var score = $scope.phantomasResults.metrics.DOMinserts * 2 +
+                    $scope.phantomasResults.metrics.DOMqueries +
+                    $scope.duplicatedQueriesCountAll * 2 +
+                    $scope.phantomasResults.metrics.eventsBound;
         if (score > 300) {
         if (score > 300) {
-            note = 'D';
-        }
-        if (score > 500) {
-            note = 'E';
-        }
-        if (score > 800) {
-            note = 'F';
-        }
-        return note;
-    }
-
-    function getDuplicatedDomQueriesScore() {
-        var note = 'A';
-        var score = $scope.duplicatedQueriesCountAll;
-        if (score > 10) {
             note = 'B';
             note = 'B';
         }
         }
-        if (score > 50) {
-            note = 'C';
-        }
-        if (score > 100) {
-            note = 'D';
-        }
-        if (score > 200) {
-            note = 'E';
-        }
         if (score > 500) {
         if (score > 500) {
-            note = 'F';
-        }
-        return note;
-    }
-
-    function getEventsBoundScore() {
-        var note = 'A';
-        var score = $scope.phantomasResults.metrics.eventsBound;
-        if (score > 50) {
-            note = 'B';
-        }
-        if (score > 100) {
             note = 'C';
             note = 'C';
         }
         }
-        if (score > 200) {
+        if (score > 700) {
             note = 'D';
             note = 'D';
         }
         }
-        if (score > 500) {
+        if (score > 1000) {
             note = 'E';
             note = 'E';
         }
         }
-        if (score > 1000) {
+        if (score > 1400) {
             note = 'F';
             note = 'F';
         }
         }
         return note;
         return note;