thWatchedRepoNavPanel.html

<div id="watched-repo-navbar" class="th-context-navbar watched-repo-navbar clearfix">

  <th-watched-repo ng-repeat="watchedRepo in repoModel.watchedRepos"></th-watched-repo>

  <div class="navbar-right">
    <span>
      <form role="search" class="form-inline">

        <span class="btn btn-sm btn-view-nav nav-menu-btn"
              ng-show="serverChanged" ng-cloak
              ng-click="updateButtonClick()"
              id="revisionChangedLabel"
              title="New version of Treeherder has been deployed. Reload to pick up changes.">
          <span class="fa fa-exclamation-circle" />&nbsp;Treeherder update available
        </span>

        <!--Unclassified Failures Button-->
        <span class="btn btn-sm"
              title="Loaded failures / Toggle filtering for unclassified failures"
              tabindex="0" role="button"
              ng-class="{'btn-unclassified-failures': getAllUnclassifiedFailureCount(repoName),
                         'btn-view-nav': getAllUnclassifiedFailureCount(repoName)===0}"
              ng-click="toggleUnclassifiedFailures()">
          <span id="unclassified-failure-count">
            {{ getAllUnclassifiedFailureCount(repoName) }}</span> unclassified
        </span>

        <!--Filtered Unclassified Failures Button-->
        <span class="navbar-badge badge"
              title="Reflects the unclassified failures which pass the current filters"
              ng-hide="getFilteredUnclassifiedFailureCount(repoName) === getAllUnclassifiedFailureCount(repoName)">
          <span id="filtered-unclassified-failure-count">
            {{ getFilteredUnclassifiedFailureCount(repoName) }}</span>
        </span>

        <!--Toggle Tiers filter Button-->
        <span th-checkbox-dropdown-container class="dropdown">
          <span id="tierLabel" role="button"
                  title="Show/hide job tiers"
                  data-toggle="dropdown"
                  class="btn btn-view-nav btn-sm nav-menu-btn">Tiers
            <span class="fa fa-angle-down lightgray"></span>
          </span>
          <ul class="dropdown-menu checkbox-dropdown-menu"
              role="menu">
            <li ng-repeat="tier in jobFilters.tiers">
              <div class="checkbox dropdown-link">
                <label title="{{(isSingleTierSelected() && tiers[tier] == true) ? 'Must have at least one tier selected at all times' : ''}}">
                  <input id="tier-checkbox"
                         type="checkbox"
                         class="dropdown-checkboxk"
                         ng-model="tiers[tier]"
                         ng-disabled="isSingleTierSelected() && tiers[tier] == true"
                         ng-change="tierToggled(tier)">
                  tier {{::tier}}
                </label>
              </div>
            </li>
          </ul>
        </span>

        <!--Hidden Jobs Button-->
        <span class="btn btn-view-nav btn-sm"
              title="{{ !isSkippingExclusionProfiles ? 'Click to show excluded jobs' : 'Click to hide excluded jobs'}}"
              tabindex="0" role="button"
              ng-click="toggleExcludedJobs()">
          <span class="btn-toggle-excluded"
             ng-class="{ 'btn-excluded': !isSkippingExclusionProfiles }">
            <i class="fa"
               ng-class="{ 'fa-eye-slash': !isSkippingExclusionProfiles,
                           'fa-eye': isSkippingExclusionProfiles }"></i>
          </span>
        </span>

        <!-- Toggle Duplicate Jobs -->
        <span class="btn btn-view-nav btn-sm btn-toggle-duplicate-jobs"
              tabindex="1" role="button"
              title="{{ showDuplicateJobs ? 'Hide Duplicate Jobs' : 'Show Duplicate Jobs' }}"
              ng-click="groupState !== 'expanded' && toggleShowDuplicateJobs()"
              ng-disabled="groupState === 'expanded'"
              ng-class="{ 'btn-excluded': !showDuplicateJobs }">
        </span>

        <!--Toggle Revisions Button-->
        <span class="btn-group">
          <span class="btn btn-view-nav btn-sm btn-collapse-resultsets"
                title="{{ allCollapsed('revision-list') ? 'Show revision list': 'Hide revision list'}}"
                tabindex="0" role="button"
                ng-click="toggleAllRevisions()">
                <i class="fa fa-code-fork"
                    ng-class="{'revision-collapsed': allCollapsed('revision-list')}"></i>
          </span>
        </span>

        <span class="btn-group">
          <!--Toggle Group State Button-->
          <span class="btn btn-view-nav btn-sm btn-toggle-group-state"
                tabindex="0" role="button"
                ng-click="toggleGroupState()">(
            <span ng-if="groupState === 'collapsed'"
                  class="group-state-nav-icon"
                  title="Expand job groups">+</span>
            <span ng-if="groupState !== 'collapsed'"
                  class="group-state-nav-icon"
                  title="Collapse job groups">-</span>
          )</span>
        </span>

        <!--Result Status Filter Chicklets-->
        <span class="resultStatusChicklets">
            <ng-include src="'partials/main/thFilterChicklets.html'"></ng-include>
        </span>

        <!--Quick Filter Field-->
        <span ng-controller="SearchCtrl"
              id="quick-filter-parent"
              class="form-group form-inline">
          <input id="quick-filter"
                 class="form-control input-sm" required
                 title="Click to enter filter values"
                 ng-model="searchQueryStr" ng-keydown="search($event)" type="text"
                 placeholder="Filter platforms & jobs"
                 blur-this>
          <span id="quick-filter-clear-button"
                class="fa fa-times-circle"
                title="Clear this filter"
                ng-click="clearFilterBox()"></span>
        </span>
      </form>
    </span>
  </div>
</div>