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

<section class="main-toolbar">
  <div class="tools">
    <button
      class="toolbar-btn"
      (click)="toggleInspector()"
      matTooltip="Inspect element"
      aria-label="Inspect element"
    >
      <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </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="tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
        {{ tab }}
      </a>
    }
  </nav>

  <div class="settings">
    <div class="ver-ruler"></div>
    <button class="toolbar-btn" [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
      <mat-icon> info </mat-icon>
    </button>
    <button
      class="toolbar-btn"
      [matMenuTriggerFor]="menu"
      matTooltip="Open settings"
      aria-label="Open settings"
    >
      <mat-icon> settings </mat-icon>
    </button>
  </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()"
      />

      @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()"
        />
      }

      @let transferStateVisible = activeTab() === 'Transfer State';
      @defer (when transferStateVisible; prefetch on idle) {
        <ng-transfer-state [hidden]="!transferStateVisible" />
      }
    </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()" />
        <span class="ng-mat-menu-label-text"> Enable timing API </span>
      </label>
    }
    <label mat-menu-item disableRipple>
      @let currentTheme = themeService.currentTheme();
      <mat-slide-toggle
        [checked]="currentTheme === 'dark'"
        (click)="themeService.toggleDarkMode(currentTheme === 'light')"
      />
      <span class="ng-mat-menu-label-text">Dark Mode</span>
    </label>
    <label mat-menu-item disableRipple>
      <mat-slide-toggle
        [checked]="showCommentNodes()"
        (change)="showCommentNodes.set($event.checked)"
      />
      <span class="ng-mat-menu-label-text">Show comment nodes</span>
    </label>
    @if (supportedApis().routes) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle
          [checked]="routerGraphEnabled()"
          (change)="setRouterGraph($event.checked)"
        />
        <span class="ng-mat-menu-label-text">Enable Router Tree</span>
      </label>
    }
    @if (supportedApis().signals) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle
          [checked]="signalGraphEnabled()"
          (change)="setSignalGraph($event.checked)"
        />
        <span class="ng-mat-menu-label-text">Enable Signal Graph (experimental)</span>
      </label>
    }
    @if (supportedApis().transferState) {
      <label mat-menu-item disableRipple>
        <mat-slide-toggle
          [checked]="transferStateEnabled()"
          (change)="setTransferStateTab($event.checked)"
        />
        <span class="ng-mat-menu-label-text">Enable Transfer State Tab</span>
      </label>
    }
  </div>
</mat-menu>

<mat-menu #info="matMenu">
  <p mat-menu-item class="version-label">
    Angular version:
    @if (majorAngularVersion() > 12 || majorAngularVersion() === 0) {
      {{ angularVersion() }}
    } @else {
      <span
        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.
        "
      >
        {{ angularVersion() }} (unsupported)
      </span>
    }
  </p>
  <p mat-menu-item class="version-label">DevTools version: {{ extensionVersion() }}</p>
  <a mat-menu-item href="https://angular.dev/tools/devtools" target="_blank">
    <mat-icon class="menu-icon">library_books</mat-icon>
    Guide
  </a>
  <a mat-menu-item href="https://github.com/angular/angular" target="_blank">
    <mat-icon class="menu-icon">launch</mat-icon>
    GitHub
  </a>
  <a mat-menu-item href="https://github.com/angular/angular/issues" target="_blank">
    <mat-icon class="menu-icon">bug_report</mat-icon>
    Issues
  </a>
</mat-menu>