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 class="nav-wrapper">
    <div id="nav-buttons">
      <button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
        <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
      </button>
      <button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
        <mat-icon> settings </mat-icon>
      </button>
      <button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
        <mat-icon> info </mat-icon>
      </button>
    </div>

    <select
      matTooltip="Select a frame to inspect with Angular Devtools"
      class="ng-select size-compact frame-selector"
      (change)="emitSelectedFrame($event)"
    >
      @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>
    }
  </div>
</nav>

<mat-tab-nav-panel #tabPanel>
  @if (!applicationEnvironment.frameSelectorEnabled || frameManager.selectedFrame() !== null) {
    <div class="tab-content">
      @let componentsVisible = activeTab() === 'Components';
      <ng-directive-explorer
        [hidden]="!componentsVisible"
        [showCommentNodes]="showCommentNodes()"
        [isHydrationEnabled]="isHydrationEnabled()"
        (toggleInspector)="toggleInspector()"
        [signalGraphEnabled]="signalGraphEnabled()"
      />

      @let profilerVisible = activeTab() === 'Profiler';
      @defer (when profilerVisible; prefetch on idle) {
        <ng-profiler [hidden]="!profilerVisible" />
      }

      @let routerTreeVisible = activeTab() === 'Router Tree';
      @defer (when routerTreeVisible; prefetch on idle) {
        <ng-router-tree
          [hidden]="!routerTreeVisible"
          [snapToRoot]="snapToRoot()"
          [routes]="routes()"
        />
      }

      @let injectorTreeVisible = activeTab() === 'Injector Tree';
      @defer (when injectorTreeVisible; prefetch on idle) {
        <ng-injector-tree
          [hidden]="!injectorTreeVisible"
          [componentExplorerView]="componentExplorerView()"
          [providers]="providers()"
        />
      }
    </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>
    @if (supportedApis().routes) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle
          [checked]="routerGraphEnabled()"
          (change)="setRouterGraph($event.checked)"
        >
          Enable Router Graph</mat-slide-toggle
        >
      </label>
    }
    @if (supportedApis().signals) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle
          [checked]="signalGraphEnabled()"
          (change)="setSignalGraph($event.checked)"
        >
          Enable Signal Graph (experimental)</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>