mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
e60276f640
Allows the ng-devtools library to be built with bazel. ng-devtools can now be used as a dependency in other bazel build rules.
75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<nav #navBar mat-tab-nav-bar [color]="'accent'">
|
|
<div id="nav-buttons">
|
|
<button mat-icon-button color="primary" (click)="toggleInspector()" matTooltip="Inspect element">
|
|
<mat-icon [ngClass]="{ 'inspector-active': inspectorRunning }"> pin_end </mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
|
|
<mat-icon> settings </mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="primary" [matMenuTriggerFor]="info" matTooltip="Info">
|
|
<mat-icon> info </mat-icon>
|
|
</button>
|
|
</div>
|
|
<a class="mat-tab-link" mat-tab-link *ngFor="let tab of tabs" (click)="changeTab(tab)" [active]="activeTab === tab">
|
|
{{ tab }}
|
|
</a>
|
|
<section *ngIf="angularVersion" id="app-angular-version">
|
|
Angular version:
|
|
<span id="version-number">
|
|
{{ angularVersion }}
|
|
</span>
|
|
<ng-container *ngIf="latestSHA; let sha"> | DevTools SHA: {{ sha }} </ng-container>
|
|
</section>
|
|
</nav>
|
|
|
|
<div class="tab-content">
|
|
<ng-directive-explorer
|
|
[showCommentNodes]="showCommentNodes"
|
|
[ngClass]="{ hidden: activeTab !== 'Components' }"
|
|
(toggleInspector)="toggleInspector()"
|
|
></ng-directive-explorer>
|
|
<ng-profiler [ngClass]="{ hidden: activeTab !== 'Profiler' }"></ng-profiler>
|
|
<ng-router-tree [routes]="routes" [ngClass]="{ hidden: activeTab !== 'Router Tree' }"></ng-router-tree>
|
|
</div>
|
|
|
|
<mat-menu #menu="matMenu" class="options-menu">
|
|
<mat-slide-toggle (change)="toggleTimingAPI($event)" class="menu-toggle-button" (click)="$event.stopPropagation()">
|
|
Enable timing API
|
|
</mat-slide-toggle>
|
|
<br />
|
|
<br />
|
|
<mat-slide-toggle
|
|
[checked]="currentTheme === 'dark-theme'"
|
|
(change)="themeService.toggleDarkMode($event.checked)"
|
|
class="menu-toggle-button"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
Dark Mode
|
|
</mat-slide-toggle>
|
|
<br />
|
|
<br />
|
|
<mat-slide-toggle
|
|
(change)="showCommentNodes = $event.checked"
|
|
class="menu-toggle-button"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
Show comment nodes
|
|
</mat-slide-toggle>
|
|
</mat-menu>
|
|
|
|
<mat-menu #info="matMenu">
|
|
<div class="info-menu">
|
|
<a mat-button class="menu-toggle-button" href="https://angular.io/devtools" target="_blank">
|
|
<mat-icon>library_books</mat-icon>
|
|
Guide
|
|
</a>
|
|
<a mat-button class="menu-toggle-button" href="https://github.com/rangle/angular-devtools" target="_blank">
|
|
<mat-icon>launch</mat-icon>
|
|
GitHub
|
|
</a>
|
|
<a mat-button class="menu-toggle-button" href="https://github.com/rangle/angular-devtools/issues" target="_blank">
|
|
<mat-icon>bug_report</mat-icon>
|
|
Issues
|
|
</a>
|
|
</div>
|
|
</mat-menu>
|