Warning when bind on multiple elements

app/views/results.html

@@ -70,7 +70,11 @@
                     </div>
                     
                     <div class="details">
-                        <button ng-click="onNodeDetailsClick(node)">i</button>
+                        <button ng-click="onNodeDetailsClick(node)" 
+                                ng-class="{
+                                    'warningDetails': node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5
+                                }"
+                                ng-if="node.data.type != 'script loaded'">i</button>
                         <div class="detailsOverlay" ng-show="node.data.showDetails">
                             <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
 
@@ -84,14 +88,22 @@
                                 <div>{{node.data.callDetails.context.firstElementPath}}</div>
                             </div>
 
-                            <h4>Backtrace</h4>
-                            <div class="table">
-                                <div ng-repeat="trace in node.data.parsedBacktrace track by $index">
-                                    <div>{{trace.fnName || '(anonymous)'}}</div>
-                                    <div class="trace"><a href="{{trace.filePath}}" title="{{trace.filePath}}" target="_blank">{{trace.fileName || 'HTML'}}</a>:{{trace.line}}</div>
-                                </div>
-                                <div ng-if="node.data.parsedBacktrace.length == 0">
-                                    <div>can't find any backtrace :/</div>
+                            <div ng-if="node.data.callDetails.context.length > 1">
+                                <h4>Called on {{node.data.callDetails.context.length}} jQuery elements</h4>
+                                <p class="advice" ng-if="node.data.callDetails.context.length > 5">The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferred if available (from v1.7).</p>
+                                <p ng-if="node.data.callDetails.context.firstElementPath"><b>First one is:</b> {{node.data.callDetails.context.firstElementPath}}</p>
+                            </div>
+
+                            <div ng-if="node.data.parsedBacktrace">
+                                <h4>Backtrace</h4>
+                                <div class="table">
+                                    <div ng-repeat="trace in node.data.parsedBacktrace track by $index">
+                                        <div>{{trace.fnName || '(anonymous)'}}</div>
+                                        <div class="trace"><a href="{{trace.filePath}}" title="{{trace.filePath}}" target="_blank">{{trace.fileName || 'HTML'}}</a>:{{trace.line}}</div>
+                                    </div>
+                                    <div ng-if="node.data.parsedBacktrace.length == 0 && node.data.type != 'script loaded'">
+                                        <div>can't find any backtrace :/</div>
+                                    </div>
                                 </div>
                             </div>
 
@@ -107,7 +119,12 @@
                                     <div ng-repeat="node in node.children">
                                         <div class="index">{{$index}}</div>
                                         <div class="type">{{node.data.type}}</div>
-                                        <div class="value">{{node.data.callDetails.arguments[0]}}</div>
+                                        <div class="value">
+                                            {{node.data.callDetails.arguments[0]}}
+                                            <span ng-if="node.data.callDetails.arguments.length > 1"> : {{node.data.callDetails.arguments[1]}}</span>
+                                            <span ng-if="node.data.callDetails.arguments.length > 2"> : {{node.data.callDetails.arguments[2]}}</span>
+                                            <span ng-if="node.data.callDetails.arguments.length > 3"> : {{node.data.callDetails.arguments[3]}}</span>
+                                        </div>
                                         <div class="duration" ng-if="node.data.time != undefined">{{node.data.time}} ms <div ng-if="node.data.time > slowRequestsLimit" class="warningIcon"></div></div>
                                         <div class="duration" ng-if="node.data.time == undefined"></div>
                                     </div>