Bug 1118253 - Deselect job when clicking any empty page area

ui/css/treeherder.css

@@ -23,10 +23,6 @@ a:visited {
     height: 100%;
 }
 
-.getnext-footer {
-    margin-bottom: 0;
-}
-
 .pagination, .carousel, .panel-title a {
     cursor: pointer;
 }

ui/index.html

@@ -21,7 +21,8 @@
             <div class="th-navbar">
                 <ng-include id="th-global-top-nav-panel" src="'partials/main/thGlobalTopNavPanel.html'"></ng-include>
             </div>
-            <div class="th-content">
+            <div class="th-content"
+                 ng-click="clearJobOnClick($event)">
                 <span class="th-view-content" ng-cloak>
                     <ng-view ></ng-view>
                 </span>
@@ -116,6 +117,7 @@
                 <span class="revision">
                     <a href="{{currentRepo.url}}/rev/{{revision}}"
                        title="open revision {{revision}} on {{currentRepo.url}}"
+                       ignore-job-clear-on-click
                        >{{revision}}</a>
                     <span title="{{name}}: {{email}}">{{name|initials}}</span>
                     <span title="{{escaped_comment}}">
@@ -130,7 +132,9 @@
         <!-- Clone target for "more" link for large revision sets -->
         <script type="'text/ng-template'" id="pushlogRevisionsClone.html">
             <li>
-                <a href="{{currentRepo.url}}/pushloghtml?changeset={{revision}}" target="_blank"> ...and more
+                <a href="{{currentRepo.url}}/pushloghtml?changeset={{revision}}"
+                   ignore-job-clear-on-click
+                   target="_blank"> ...and more
                     <i class="fa fa-external-link-square"></i>
                 </a>
             </li>
@@ -173,6 +177,7 @@
         <script type="'text/ng-template'" id="jobBtnClone.html">
             <span class="btn job-btn btn-xs {{ btnClass }} {{ key }}"
                   data-jmkey="{{ key }}"
+                  ignore-job-clear-on-click
                   title="{{ title }}">{{ value }}</span>
         </script>
 

ui/js/controllers/main.js

@@ -37,6 +37,17 @@ treeherder.controller('MainCtrl', [
             ThResultSetStore.setSelectedJob($rootScope.repoName);
         };
 
+        // Clear the job if it occurs in a particular area
+        $scope.clearJobOnClick = function(event) {
+            var element = event.target;
+            // Suppress for various UI elements so selection is preserved
+            var ignoreClear = element.hasAttribute("ignore-job-clear-on-click");
+
+            if (!ignoreClear) {
+                $scope.closeJob();
+            }
+        };
+
         $scope.processKeyboardInput = function(ev){
 
             // If the user is in an editable element or the user is pressing

ui/js/directives/clonejobs.js

@@ -174,15 +174,6 @@ treeherder.directive('thCloneJobs', [
         }, 200);
     };
 
-    var clearJobCb = function(ev, el, job) {
-        clearSelectJobStyles();
-
-        // Reset selected job to null to initialize nav position
-        ThResultSetStore.setSelectedJob($rootScope.repoName);
-
-        $rootScope.$emit(thEvents.jobClear, job);
-    };
-
     var togglePinJobCb = function(ev, el, job){
         $rootScope.$emit(thEvents.jobPin, job);
     };
@@ -309,11 +300,6 @@ treeherder.directive('thCloneJobs', [
 
             ThResultSetStore.setSelectedJob($rootScope.repoName, el, job);
 
-        } else {
-            // If user didn't select a job or anchor clear the selected job
-            if (el.prop("tagName") !== "A") {
-                _.bind(clearJobCb, this, ev, el)();
-            }
         }
     };
 

ui/js/directives/resultsets.js

@@ -132,7 +132,8 @@ treeherder.directive('thAuthor', function () {
             scope.authorEmail = email;
         },
         template: '<span title="open resultsets for {{authorName}}: {{authorEmail}}">' +
-                      '<a href="{{authorResultsetFilterUrl}}">{{authorName}}</a></span>'
+                      '<a href="{{authorResultsetFilterUrl}}"' +
+                         'ignore-job-clear-on-click>{{authorName}}</a></span>'
     };
 });
 

ui/js/filters.js

@@ -42,15 +42,18 @@ treeherder.filter('linkifyBugs', function() {
         var str = input || '';
         var bug_matches = /.*-- ([0-9]+)|.*bug-([0-9]+)|.*Bug ([0-9]+)/ig.exec(str);
         var pr_matches = /PR#([0-9]+)/i.exec(str);
+        var clear_attr = 'ignore-job-clear-on-click';
         if (pr_matches) {
             var pr_url = "https://github.com/mozilla-b2g/gaia/pull/" + pr_matches[1];
-            var pr_hyperlink = '<a href="' + pr_url + '">' + pr_matches[1] + '</a>';
+            var pr_hyperlink = '<a href="' + pr_url + '" ' + clear_attr + '>' +
+                               pr_matches[1] + '</a>';
             str = str.replace(pr_matches[1], pr_hyperlink);
         }
         if (bug_matches) {
             var bug_match = bug_matches[1] || bug_matches[2] || bug_matches[3];
             var bug_url = "https://bugzilla.mozilla.org/show_bug.cgi?id=" + bug_match;
-            var bug_hyperlink = '<a href="' + bug_url + '">' + bug_match + '</a>';
+            var bug_hyperlink = '<a href="' + bug_url + '" ' + clear_attr + '>' +
+                                bug_match + '</a>';
             str = str.replace(bug_match, bug_hyperlink);
         }
         return str;

ui/js/providers.js

@@ -185,9 +185,6 @@ treeherder.provider('thEvents', function() {
             // fired (surprisingly) when a job is clicked
             jobClick: "job-click-EVT",
 
-            // fired on click outside a job element
-            jobClear: "job-clear-EVT",
-
             // fired when the job details are loaded
             jobDetailLoaded: "job-detail-loaded-EVT",
 

ui/partials/main/jobs.html

@@ -13,7 +13,8 @@
         <span class="btn btn-default btn-sm glyphicon glyphicon-download" ng-show="isLoadingJobs"></span>
         <span>
           <a href="{{::revisionResultsetFilterUrl}}"
-             title="open this resultset">{{::resultsetDateStr}}</a> - </span>
+             title="open this resultset"
+             ignore-job-clear-on-click>{{::resultsetDateStr}}</a> - </span>
         <th-author author="{{::resultset.author}}"></th-author>
       </span>
       <span>
@@ -21,8 +22,10 @@
         <span class="btn btn-default btn-sm btn-resultset"
               tabindex="0" role="button"
               title="pin all visible jobs in this resultset"
+              ignore-job-clear-on-click
               ng-click="pinAllShownJobs()">
-          <span class="glyphicon glyphicon-pushpin"></span>
+          <span class="glyphicon glyphicon-pushpin"
+                ignore-job-clear-on-click></span>
         </span>
 
         <th-action-button ng-hide="isLoadingJobs"></th-action-button>
@@ -31,18 +34,22 @@
               tabindex="0" role="button"
               title="cancel all jobs in this resultset"
               ng-show="currentRepo.repository_group.name == 'try' || user.is_staff"
+              ignore-job-clear-on-click
               ng-click="cancelAllJobs(resultset.revision)">
-          <span class="fa fa-times-circle cancel-job-icon dim-quarter"></span>
+          <span class="fa fa-times-circle cancel-job-icon dim-quarter"
+                ignore-job-clear-on-click></span>
         </span>
       </span>
 
       <span class="btn btn-default btn-sm btn-resultset revision-button"
             tabindex="0" role="button"
-            ng-click="toggleRevisions()"
-            title="show revisions">
-        <i class="fa fa-code-fork fa-lg
-                  result-set-fa-icon"></i>
-        <span ng-if="resultset.revision_count <= 20">{{::resultset.revision_count}}</span>
+            title="show revisions"
+            ignore-job-clear-on-click
+            ng-click="toggleRevisions()">
+        <i class="fa fa-code-fork fa-lg" ignore-job-clear-on-click
+           result-set-fa-icon"></i>
+        <span ng-if="resultset.revision_count <= 20" ignore-job-clear-on-click>
+            {{::resultset.revision_count}}</span>
         <span ng-if="resultset.revision_count > 20">&gt20</span>
       </span>
       <th-result-counts class="result-counts"/>
@@ -97,8 +104,7 @@
 </div>
 
 <!-- Get next resultsets footer -->
-<div class="well getnext-footer" ng-if="result_sets.length > 1"
-     ng-click="closeJob()">
+<div class="well" ng-if="result_sets.length > 1">
      get next:
     <div class="btn-group">
         <div class="btn btn-default btn-sm"

ui/partials/main/thActionButton.html

@@ -1,10 +1,15 @@
     <span class="dropdown">
-        <a class="btn btn-default btn-sm btn-resultset dropdown-toggle" data-hover="dropdown" data-delay="1000" href="#">
+        <a class="btn btn-default btn-sm btn-resultset dropdown-toggle"
+           data-hover="dropdown" data-delay="1000" href="#">
             <b class="caret"></b>
         </a>
         <ul class="dropdown-menu pull-left">
-            <li><a target="_blank" href="https://tbpl.mozilla.org/mcmerge/?cset={{::resultset.revision}}&tree={{::repoName}}">mcMerge</a></li>
-            <li><a target="_blank" href="https://secure.pub.build.mozilla.org/buildapi/self-serve/{{::repoName}}/rev/{{::resultset.revision}}">BuildAPI</a></li>
-            <li><a target="_blank" href="" prevent-default-on-left-click  ng-click="openRevisionListWindow()">Revision URL List</a></li>
+            <li><a target="_blank" ignore-job-clear-on-click
+                   href="https://tbpl.mozilla.org/mcmerge/?cset={{::resultset.revision}}&tree={{::repoName}}">mcMerge</a></li>
+            <li><a target="_blank" ignore-job-clear-on-click
+                   href="https://secure.pub.build.mozilla.org/buildapi/self-serve/{{::repoName}}/rev/{{::resultset.revision}}">BuildAPI</a></li>
+            <li><a target="_blank" ignore-job-clear-on-click
+                   href="" prevent-default-on-left-click
+                   ng-click="openRevisionListWindow()">Revision URL List</a></li>
         </ul>
     </span>

ui/partials/main/thResultCounts.html

@@ -1,10 +1,11 @@
     <span class="btn btn-default btn-sm btn-resultset result-status-total-count"
           tabindex="0" role="button"
-          ng-click="toggleJobs()"
-          title="total job count - toggle jobs">
-            <i class="fa fa-list fa-lg result-set-fa-icon"></i>
-            <span class="result-status-total-value"></span>
+          title="total job count - toggle jobs"
+          ignore-job-clear-on-click
+          ng-click="toggleJobs()">
+        <i class="fa fa-list fa-lg result-set-fa-icon" ignore-job-clear-on-click></i>
+        <span class="result-status-total-value" ignore-job-clear-on-click></span>
     </span>
-    <span class="result-status-count-group">
+    <span class="result-status-count-group" ignore-job-clear-on-click>
         <th-result-status-count ng-repeat="resultStatus in statusList"/>
     </span>

ui/partials/main/thResultStatusCount.html

@@ -1,5 +1,7 @@
-<span class="result-status-count text-right"
+<span class="result-status-count text-right" ignore-job-clear-on-click
       ng-click="toggleResultSetResultStatusFilter(resultStatus)">
-        <span class="rs-count-number"></span>
-        <span class="rs-count-text visible-lg-inline"></span>
-    </span>
+        <span class="rs-count-number"
+              ignore-job-clear-on-click></span>
+        <span class="rs-count-text visible-lg-inline"
+              ignore-job-clear-on-click></span>
+</span>

ui/plugins/controller.js

@@ -284,11 +284,6 @@ treeherder.controller('PluginCtrl', [
             $rootScope.selectedJob = job;
         });
 
-        $rootScope.$on(thEvents.jobClear, function(event, job) {
-            $rootScope.selectedJob = null;
-            $scope.$digest();
-        });
-
         $scope.bug_job_map_list = [];
 
         $scope.classificationTypes = thClassificationTypes;