Add specific sub-filters on warnings in the timeline

front/src/css/timeline.css

@@ -143,6 +143,10 @@
   border: 1px dotted #aaa;
   text-align: left;
 }
+.subFilters {
+  margin-left: 3em;
+  font-size: 0.9em;
+}
 .table {
   display: table;
   width: 100%;
@@ -306,9 +310,27 @@
   color: #e74c3c;
   cursor: pointer;
 }
-.warningsFilterOn > div {
+.queryWithoutResultsFilterOn > div {
   display: none;
 }
-.warningsFilterOn > div.warning {
+.queryWithoutResultsFilterOn > div.queryWithoutResults {
+  display: table-row;
+}
+.jQueryCallOnEmptyObjectFilterOn > div {
+  display: none;
+}
+.jQueryCallOnEmptyObjectFilterOn > div.jQueryCallOnEmptyObject {
+  display: table-row;
+}
+.eventNotDelegatedFilterOn > div {
+  display: none;
+}
+.eventNotDelegatedFilterOn > div.eventNotDelegated {
+  display: table-row;
+}
+.jsErrorFilterOn > div {
+  display: none;
+}
+.jsErrorFilterOn > div.jsError {
   display: table-row;
 }

front/src/js/controllers/timelineCtrl.js

@@ -4,6 +4,14 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
     $scope.runId = $routeParams.runId;
     $scope.Menu = Menu.setCurrentPage('timeline', $scope.runId);
 
+    $scope.warningsFilterOn = false;
+    $scope.warningsFilters = {
+        queryWithoutResults: true,
+        jQueryCallOnEmptyObject: true,
+        eventNotDelegated: true,
+        jsError: true
+    };
+
     function loadResults() {
         // Load result if needed
         if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {

front/src/js/directives/offendersDirectives.js

@@ -766,10 +766,23 @@
                 element.append(getProfilerLineHTML(scope.index, scope.node));
                 element[0].id = 'line_' + scope.index;
 
-                if (scope.node.warning || scope.node.error) {
+                if (scope.node.warning) {
                     element[0].classList.add('warning');
+
+                    if (scope.node.queryWithoutResults) {
+                        element[0].classList.add('queryWithoutResults');
+                    }
+
+                    if (scope.node.jQueryCallOnEmptyObject) {
+                        element[0].classList.add('jQueryCallOnEmptyObject');
+                    }
+
+                    if (scope.node.eventNotDelegated) {
+                        element[0].classList.add('eventNotDelegated');
+                    }
                 }
 
+
                 // Bind click on the details icon
                 var detailsIcon = element[0].querySelector('.details div');
                 if (detailsIcon) {

front/src/less/timeline.less

@@ -162,6 +162,11 @@
     text-align: left;
 }
 
+.subFilters {
+    margin-left: 3em;
+    font-size: 0.9em;
+}
+
 .table {
     display: table;
     width: 100%;
@@ -346,10 +351,34 @@
     color: #e74c3c;
     cursor: pointer;
 }
-.warningsFilterOn {
+.queryWithoutResultsFilterOn {
     > div {
         display: none;
-        &.warning {
+        &.queryWithoutResults {
+            display: table-row;
+        }
+    }
+}
+.jQueryCallOnEmptyObjectFilterOn {
+    > div {
+        display: none;
+        &.jQueryCallOnEmptyObject {
+            display: table-row;
+        }
+    }
+}
+.eventNotDelegatedFilterOn {
+    > div {
+        display: none;
+        &.eventNotDelegated {
+            display: table-row;
+        }
+    }
+}
+.jsErrorFilterOn {
+    > div {
+        display: none;
+        &.jsError {
             display: table-row;
         }
     }

front/src/views/timeline.html

@@ -60,11 +60,30 @@
     </p>
     <div class="filters">
         <div>
-            <input type="checkbox" ng-model="warningsFilterOn" id="warningsFilterOn" />
-            <label for="warningsFilterOn">Show warnings only</label>
+            <input type="checkbox" name="warningsFilter" ng-model="warningsFilterOn" id="warningsFilterOn" />
+            <label for="warningsFilterOn">Filter on warnings and errors</label>
+            <div class="subFilters" ng-if="warningsFilterOn">
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.queryWithoutResults" id="queryWithoutResultsFilterOn"/>
+                    <label for="queryWithoutResultsFilterOn">Queries without results</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.jQueryCallOnEmptyObject" id="jQueryCallOnEmptyObjectFilterOn" />
+                    <label for="jQueryCallOnEmptyObjectFilterOn">jQuery calls on empty object</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.eventNotDelegated" id="eventNotDelegatedFilterOn" />
+                    <label for="eventNotDelegatedFilterOn">Events not delegated</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.jsError" id="jsErrorFilterOn" />
+                    <label for="jsErrorFilterOn">Errors</label>
+                </div>
+            </div>
         </div>
+        {{queryWithoutResultsFilterOn}}
     </div>
-    <div class="table" ng-class="{warningsFilterOn: warningsFilterOn}">
+    <div class="table" ng-class="{queryWithoutResultsFilterOn: warningsFilterOn && warningsFilters.queryWithoutResults, jQueryCallOnEmptyObjectFilterOn: warningsFilterOn && warningsFilters.jQueryCallOnEmptyObject, eventNotDelegatedFilterOn: warningsFilterOn && warningsFilters.eventNotDelegated, jsErrorFilterOn: warningsFilterOn && warningsFilters.jsError}">
         <div class="headers">
             <div><!-- index --></div>
             <div>Type</div>

lib/tools/jsExecutionTransformer.js

@@ -15,9 +15,7 @@ var jsExecutionTransformer = function() {
             queriesWithoutResults: 0
         };
 
-        var offenders = {
-
-        };
+        var offenders = {};
 
         var hasjQuery = (data.toolsResults.phantomas.metrics.jQueryVersionsLoaded > 0);
         if (hasjQuery) {
@@ -53,11 +51,13 @@ var jsExecutionTransformer = function() {
 
                     if (node.data.resultsNumber === 0) {
                         metrics.queriesWithoutResults ++;
+                        node.queryWithoutResults = true;
                         node.warning = true;
                     }
 
                     if (contextLength === 0) {
                         metrics.jQueryCallsOnEmptyObject ++;
+                        node.jQueryCallOnEmptyObject = true;
                         node.warning = true;
                     }