Bug 1407906 - Make the filter by job field icon a toggle

ui/js/controllers/main.js

@@ -581,11 +581,16 @@ treeherderApp.controller('MainCtrl', [
         $scope.fieldFilters = [];
         $scope.fieldChoices = thJobFilters.getFieldChoices();
 
-        $scope.startNewFieldFilter = function () {
-            $scope.newFieldFilter = { field: "", value: "" };
+        $scope.toggleFieldFilterVisibility = function () {
+            if ($scope.newFieldFilter === null) {
+                $scope.newFieldFilter = { field: "", value: "" };
+            }
+            $scope.isFieldFilterVisible = !$scope.isFieldFilterVisible;
         };
+
         $scope.cancelNewFieldFilter = function () {
             $scope.newFieldFilter = null;
+            $scope.isFieldFilterVisible = !$scope.isFieldFilterVisible;
         };
 
         // we have to set the field match type here so that the UI can either
@@ -623,8 +628,9 @@ treeherderApp.controller('MainCtrl', [
 
             thJobFilters.addFilter(field, value);
 
-            // Hide the new field filter form.
-            $scope.newFieldFilter = null;
+            // Clear the values and close the input form group
+            $scope.newFieldFilter = { field: "", value: "" };
+            $scope.isFieldFilterVisible = !$scope.isFieldFilterVisible;
         };
 
         $scope.fromChangeValue = function () {

ui/partials/main/thActiveFiltersBar.html

@@ -1,5 +1,5 @@
 <!-- Show this certain filters are active in Treeherder -->
-<div ng-if="newFieldFilter || filterBarFilters.length"
+<div ng-if="isFieldFilterVisible || filterBarFilters.length"
      class="alert-info active-filters-bar">
     <div ng-show="filterBarFilters.length" ng-cloak>
       <span class="active-filters-title">
@@ -20,7 +20,7 @@
           </span>
       </span>
     </div>
-    <div ng-if="newFieldFilter">
+    <div ng-if="isFieldFilterVisible">
       <form novalidate class="form-inline" role="form">
         <div class="form-group input-group-sm new-filter-input">
           <label class="sr-only" for="job-filter-field">Field</label>

ui/partials/main/thWatchedRepoNavPanel.html

@@ -97,7 +97,7 @@
 
         <span>
           <span class="btn btn-view-nav btn-sm"
-                ng-click="startNewFieldFilter()"
+                ng-click="toggleFieldFilterVisibility()"
                 title="Filter by a job field">
             <i class="fa fa-filter" />
           </span>