From c3b4b306039436892a644edc932e7499bf0f9503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Mon, 3 Nov 2014 16:45:10 +0100
Subject: [PATCH] Warn when a jQuery function is called on an empty object

---
 app/node_views/results.html | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index 8d81a00..d8a0b57 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -726,6 +726,10 @@
                 The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
             </p>
             <div class="filters">
+                <div>
+                    <input type="checkbox" ng-model="warningsFilterOn" />
+                    Show warnings only
+                </div>
                 <div>
                     <input type="checkbox" ng-model="textFilterOn" />
                     Filter by
@@ -743,13 +747,19 @@
                     <div>Timestamp</div>
                 </div>
                 <div ng-repeat="node in javascript.children"
-                     ng-if="!textFilterOn 
+                     ng-if="(!warningsFilterOn 
+                                || (node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5)
+                                || node.data.resultsNumber === 0
+                                || node.data.callDetails.context.length === 0
+                                || node.data.type == 'error'
+                                || node.data.type == 'jQuery version change')
+                             && (!textFilterOn 
                                 || !textFilter.length 
                                 || node.data.type.indexOf(textFilter) >= 0 
                                 || node.data.callDetails.arguments[0].indexOf(textFilter) >= 0
                                 || node.data.callDetails.arguments[1].indexOf(textFilter) >= 0
                                 || node.data.callDetails.arguments[2].indexOf(textFilter) >= 0
-                                || node.data.callDetails.arguments[3].indexOf(textFilter) >= 0"
+                                || node.data.callDetails.arguments[3].indexOf(textFilter) >= 0)"
                      ng-class="{
                                     showingDetails: node.data.showDetails,
                                     jsError: node.data.type == 'error' || node.data.type == 'jQuery version change',
@@ -767,8 +777,8 @@
                     
                     <div class="details">
                         <div ng-class="{
-                                    'icon-question': !(node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5) && node.data.resultsNumber !== 0,
-                                    'icon-warning': node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5 || node.data.resultsNumber === 0
+                                    'icon-question': !(node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5) && node.data.resultsNumber !== 0 && node.data.callDetails.context.length !== 0,
+                                    'icon-warning': node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5 || node.data.resultsNumber === 0 || node.data.callDetails.context.length === 0
                                 }"
                              ng-click="onNodeDetailsClick(node)"
                              ng-if="node.data.type != 'jQuery loaded'
@@ -785,6 +795,11 @@
                                 <div>{{node.data.callDetails.context.domElement}}</div>
                             </div>
 
+                            <div ng-if="node.data.callDetails.context.length === 0">
+                                <h4>Called on 0 jQuery element</h4>
+                                <p class="advice">Useless function call, as the jQuery object is empty.</p>
+                            </div>
+
                             <div ng-if="node.data.callDetails.context.length == 1 && node.data.callDetails.context.firstElementPath">
                                 <h4>Called on 1 jQuery element</h4>
                                 <div>{{node.data.callDetails.context.firstElementPath}}</div>