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

<section id="main-toolbar">
  <div class="tools">
    <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>

  <nav
    mat-tab-nav-bar
    mat-stretch-tabs="false"
    [disablePagination]="true"
    [color]="'accent'"
    [tabPanel]="tabPanel"
  >
    @for (tab of tabs(); track $index) {
      <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
        {{ tab }}
      </a>
    }
  </nav>

  @if (angularVersion()) {
    <div 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() }}
    </div>
  }
</section>

<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>