From 79519409cd6a28fca723715e4a811fbca55eaec8 Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alexbodurri1117@gmail.com>
Date: Thu, 29 Jan 2026 15:45:58 -0500
Subject: [PATCH] feat(devtools): promote router tree to stable

Previous the router tree was an opt-in feature that required manual enablement in settings.

Now the router tree is enabled by default whenever the application supports it and routes are detected.

(cherry picked from commit 35046d3dbae565b11836750688aae857f46140fd)
---
 .../src/lib/application-services/settings.ts           |  6 ------
 .../application-services/test-utils/settings_mock.ts   |  1 -
 .../src/lib/devtools-tabs/devtools-tabs.component.html |  9 ---------
 .../src/lib/devtools-tabs/devtools-tabs.component.ts   | 10 +---------
 4 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/devtools/projects/ng-devtools/src/lib/application-services/settings.ts b/devtools/projects/ng-devtools/src/lib/application-services/settings.ts
index 83b16e8901a..82518e7636d 100644
--- a/devtools/projects/ng-devtools/src/lib/application-services/settings.ts
+++ b/devtools/projects/ng-devtools/src/lib/application-services/settings.ts
@@ -21,12 +21,6 @@ export class Settings {
     initialValue: false,
   });
 
-  readonly routerGraphEnabled = this.settingsStore.create({
-    key: 'router_graph_enabled',
-    category: 'general',
-    initialValue: false,
-  });
-
   readonly timingAPIEnabled = this.settingsStore.create({
     key: 'timing_api_enabled',
     category: 'general',
diff --git a/devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts b/devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts
index 9dbe1c5e57f..7689b8217b6 100644
--- a/devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts
+++ b/devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts
@@ -12,7 +12,6 @@ import {SettingsStore} from '../settings_store';
 import {ThemePreference} from '../theme_types';
 
 export class SettingsMock extends Settings {
-  routerGraphEnabled = signal(false);
   showCommentNodes = signal(false);
   timingAPIEnabled = signal(false);
   theme = signal<ThemePreference>('system');
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
index d4a3f4d643a..838ebd9624c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -138,15 +138,6 @@
       />
       <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().transferState) {
       <label mat-menu-item disableRipple>
         <mat-slide-toggle
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
index 0e98fc17d2a..16ce30ea0c5 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -84,7 +84,6 @@ export class DevToolsTabsComponent {
   readonly inspectorRunning = signal(false);
 
   protected readonly showCommentNodes = this.settings.showCommentNodes;
-  protected readonly routerGraphEnabled = this.settings.routerGraphEnabled;
   protected readonly timingAPIEnabled = this.settings.timingAPIEnabled;
   protected readonly signalGraphEnabled = () => this.supportedApis().signals;
   protected readonly transferStateEnabled = this.settings.transferStateEnabled;
@@ -104,7 +103,7 @@ export class DevToolsTabsComponent {
     if (supportedApis.dependencyInjection) {
       tabs.push('Injector Tree');
     }
-    if (this.routerGraphEnabled() && this.routes().length > 0) {
+    if (supportedApis.routes && this.routes().length > 0) {
       tabs.push('Router Tree');
     }
     if (supportedApis.transferState && this.transferStateEnabled()) {
@@ -197,13 +196,6 @@ export class DevToolsTabsComponent {
       : this.messageBus.emit('disableTimingAPI');
   }
 
-  protected setRouterGraph(enabled: boolean): void {
-    this.routerGraphEnabled.set(enabled);
-    if (!enabled) {
-      this.activeTab.set('Components');
-    }
-  }
-
   protected setTransferStateTab(enabled: boolean): void {
     this.transferStateEnabled.set(enabled);
     if (!enabled && this.activeTab() === 'Transfer State') {