angular/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

<nav
  class="devtools-nav"
  #navBar
  mat-tab-nav-bar
  mat-stretch-tabs="false"
  [disablePagination]="true"
  [color]="'accent'"
  [tabPanel]="tabPanel"
>
  <div id="nav-buttons">
    <button (click)="toggleInspector()" matTooltip="Inspect element">
      <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
    </button>
    <button [matMenuTriggerFor]="menu" matTooltip="Open settings">
      <mat-icon> settings </mat-icon>
    </button>
    <button [matMenuTriggerFor]="info" matTooltip="Info">
      <mat-icon> info </mat-icon>
    </button>
  </div>

  <select
    matTooltip="Select a frame to inspect with Angular Devtools"
    class="frame-selector"
    (change)="emitSelectedFrame($event.target.value)"
  >
    @for (frame of frameManager.frames; track frame.id) {
      <option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
        @if (frame.id === TOP_LEVEL_FRAME_ID) {
          top
        } @else {
          {{ frame.name }} ({{ frame.id }})
        }
      </option>
    } @empty {
      <option value="0" selected>top</option>
    }
  </select>

  @for (tab of tabs(); track $index) {
    <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
      {{ tab }}
    </a>
  }
  @if (angularVersion()) {
    <section id="app-angular-version">
      Angular version:

      @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
        <span id="version-number">
          {{ angularVersion() }}
        </span>
      } @else {
        <span
          id="version-number"
          matTooltip="
            Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
            older versions of Angular, but it is not officially supported.
          "
          class="unsupported-version"
        >
          {{ angularVersion() }} (unsupported)
        </span>
      }

      | DevTools: {{ extensionVersion() }}
    </section>
  }
</nav>

<mat-tab-nav-panel #tabPanel>
  @if (!applicationEnvironment.frameSelectorEnabled || frameManager.selectedFrame !== null) {
    <div class="tab-content">
      <ng-directive-explorer
        [showCommentNodes]="showCommentNodes()"
        [isHydrationEnabled]="isHydrationEnabled()"
        [class.hidden]="activeTab() !== 'Components'"
        (toggleInspector)="toggleInspector()"
      />
      <ng-profiler [class.hidden]="activeTab() !== 'Profiler'" />
      <ng-router-tree [routes]="routes()" [class.hidden]="activeTab() !== 'Router Tree'" />
      <ng-injector-tree [class.hidden]="activeTab() !== 'Injector Tree'" />
    </div>
  }
</mat-tab-nav-panel>

<mat-menu #menu="matMenu">
  <div (click)="$event.stopPropagation()">
    @if (!profilingNotificationsSupported) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle [checked]="timingAPIEnabled()" (change)="toggleTimingAPI()">
          Enable timing API
        </mat-slide-toggle>
      </label>
    }
    <label mat-menu-item disableRipple>
      @let currentTheme = themeService.currentTheme();
      <mat-slide-toggle
        [checked]="currentTheme === 'dark-theme'"
        (click)="themeService.toggleDarkMode(currentTheme === 'light-theme')"
      >
        Dark Mode
      </mat-slide-toggle>
    </label>
    <label mat-menu-item disableRipple>
      <mat-slide-toggle
        [checked]="showCommentNodes()"
        (change)="showCommentNodes.set($event.checked)"
      >
        Show comment nodes
      </mat-slide-toggle>
    </label>
  </div>
</mat-menu>

<mat-menu #info="matMenu">
  <a mat-menu-item href="https://angular.dev/tools/devtools" target="_blank">
    <mat-icon>library_books</mat-icon>
    Guide
  </a>
  <a mat-menu-item href="https://github.com/angular/angular" target="_blank">
    <mat-icon>launch</mat-icon>
    GitHub
  </a>
  <a mat-menu-item href="https://github.com/angular/angular/issues" target="_blank">
    <mat-icon>bug_report</mat-icon>
    Issues
  </a>
</mat-menu>