From 78afe889fdde8657deefa98ec4d06e08c371a4ee Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alexbodurri1117@gmail.com>
Date: Wed, 30 Aug 2023 18:41:16 -0400
Subject: [PATCH] refactor(devtools): migrate material legacy components to mdc
 (#51590)

Removes all legacy angular material imports and moves devtools over to mdc.

PR Close #51590
---
 .../projects/demo-standalone/src/BUILD.bazel  |  2 +-
 .../src/app/demo-app/todo/dialog.component.ts |  4 +-
 .../app/demo-app/todo/todo-app.component.ts   |  6 +-
 .../projects/demo-standalone/src/styles.scss  | 49 +------------
 .../devtools-tabs.component.html              | 41 ++++++-----
 .../devtools-tabs.component.scss              | 71 ++++++++++---------
 .../devtools-tabs/devtools-tabs.component.ts  | 14 ++--
 .../lib/devtools-tabs/devtools-tabs.module.ts | 10 +--
 .../directive-explorer.module.ts              |  8 +--
 .../breadcrumbs/breadcrumbs.component.scss    | 11 +--
 .../breadcrumbs/breadcrumbs.module.ts         |  4 +-
 .../directive-forest.module.ts                |  4 +-
 .../filter/filter.component.html              |  8 ++-
 .../filter/filter.component.scss              | 36 ++++++----
 .../directive-forest/filter/filter.module.ts  |  4 +-
 .../property-tab/property-tab.module.ts       |  4 +-
 .../property-view-header.component.html       |  2 +-
 .../property-view-header.component.scss       | 24 +++++--
 .../property-view/property-view.module.ts     |  4 +-
 .../profiler-import-dialog.component.ts       |  2 +-
 .../profiler/profiler.component.scss          | 22 +++---
 .../profiler/profiler.component.ts            |  2 +-
 .../devtools-tabs/profiler/profiler.module.ts | 10 +--
 .../timeline/frame-selector.component.html    |  2 +
 .../timeline/frame-selector.component.scss    |  6 ++
 .../recording-visualizer.module.ts            |  4 +-
 .../timeline/timeline-controls.component.scss |  6 +-
 .../profiler/timeline/timeline.module.ts      | 16 ++---
 .../router-tree/router-tree.module.ts         |  2 +-
 .../ng-devtools/src/lib/devtools.module.ts    |  4 +-
 .../app/demo-app/todo/app-todo.component.ts   |  2 +-
 devtools/src/app/demo-app/todo/app.module.ts  |  6 +-
 .../src/app/demo-app/todo/dialog.component.ts |  2 +-
 devtools/styles.scss                          | 20 ++++--
 34 files changed, 209 insertions(+), 203 deletions(-)

diff --git a/devtools/projects/demo-standalone/src/BUILD.bazel b/devtools/projects/demo-standalone/src/BUILD.bazel
index 76ff76d8810..f6c2f1638cf 100644
--- a/devtools/projects/demo-standalone/src/BUILD.bazel
+++ b/devtools/projects/demo-standalone/src/BUILD.bazel
@@ -11,7 +11,7 @@ sass_binary(
     src = "styles.scss",
     include_paths = ["external/npm/node_modules"],
     sourcemap = False,
-    deps = ["//devtools:material_sass_deps"],
+    deps = ["//devtools:global_styles"],
 )
 
 sass_binary(
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
index c0cbda8eb65..4f416594ebe 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/dialog.component.ts
@@ -9,8 +9,8 @@
 import {CommonModule} from '@angular/common';
 import {Component, Inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogModule as MatDialogModule, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
 
 
 export interface DialogData {
diff --git a/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts b/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
index 1ab429e754d..87cbca71a9a 100644
--- a/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
+++ b/devtools/projects/demo-standalone/src/app/demo-app/todo/todo-app.component.ts
@@ -9,9 +9,9 @@
 import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyDialog as MatDialog, MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatDialog, MatDialogModule} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {RouterLink, RouterOutlet} from '@angular/router';
 
 import {DialogComponent} from './dialog.component';
diff --git a/devtools/projects/demo-standalone/src/styles.scss b/devtools/projects/demo-standalone/src/styles.scss
index bb87d3e30fd..b5f91b71cf6 100644
--- a/devtools/projects/demo-standalone/src/styles.scss
+++ b/devtools/projects/demo-standalone/src/styles.scss
@@ -1,48 +1 @@
-@use 'sass:map';
-@use 'external/npm/node_modules/@angular/material/index' as mat;
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-// Light theme
-$light-primary: mat.define-palette(mat.$grey-palette, 700, 200);
-$light-accent: mat.define-palette(mat.$blue-palette, 800);
-$light-theme: mat.define-light-theme($light-primary, $light-accent);
-
-// Dark theme
-$dark-primary: mat.define-palette(mat.$blue-grey-palette, 50);
-$dark-accent: mat.define-palette(mat.$blue-palette, 200);
-$dark-theme: map.deep-merge(
-  mat.define-dark-theme($dark-primary, $dark-accent),
-  (
-    'color': (
-      'background': (
-        background: #202124,
-        card: #202124,
-      ),
-      'foreground': (
-        text: #bcc5ce,
-      ),
-    ),
-    'background': (
-      background: #202124,
-      card: #202124,
-    ),
-    'foreground': (
-      'text': #bcc5ce,
-    ),
-  )
-);
-
-.light-theme {
-  @include mat.all-legacy-component-themes($light-theme);
-}
-
-.dark-theme {
-  @include mat.all-legacy-component-themes($dark-theme);
-}
+@use '../../../styles.scss' as devtools;
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 4a830175f65..74eb0ed70e4 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
@@ -1,18 +1,23 @@
-<nav #navBar mat-tab-nav-bar [color]="'accent'">
+<nav class="devtools-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 [class.inspector-active]="inspectorRunning">pin_end</mat-icon>
+    <button (click)="toggleInspector()" matTooltip="Inspect element">
+      <mat-icon [class.inspector-active]="inspectorRunning"> pin_end </mat-icon>
     </button>
-    <button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
+
+    <button [matMenuTriggerFor]="menu" matTooltip="Open settings">
       <mat-icon> settings </mat-icon>
     </button>
-    <button mat-icon-button color="primary" [matMenuTriggerFor]="info" matTooltip="Info">
+
+    <button [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">
@@ -20,6 +25,7 @@
     </span>
     <ng-container *ngIf="latestSHA; let sha"> | DevTools SHA: {{ sha }} </ng-container>
   </section>
+
 </nav>
 
 <div class="tab-content">
@@ -33,21 +39,20 @@
 </div>
 
 <mat-menu #menu="matMenu">
-  <div mat-menu-item disableRipple>
-    <mat-slide-toggle
-      (change)="toggleTimingAPI($event)"
-      (click)="$event.stopPropagation()">Enable timing API</mat-slide-toggle>
+  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
+    <mat-slide-toggle [checked]="timingAPIEnabled">
+      Enable timing API
+    </mat-slide-toggle>
   </div>
-  <div mat-menu-item disableRipple>
-    <mat-slide-toggle
-      [checked]="currentTheme === 'dark-theme'"
-      (change)="themeService.toggleDarkMode($event.checked)"
-      (click)="$event.stopPropagation()">Dark Mode</mat-slide-toggle>
+  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); themeService.toggleDarkMode(currentTheme === 'light-theme')">
+    <mat-slide-toggle [checked]="currentTheme === 'dark-theme'">
+      Dark Mode
+    </mat-slide-toggle>
   </div>
-  <div mat-menu-item disableRipple>
-    <mat-slide-toggle
-      (change)="showCommentNodes = $event.checked"
-      (click)="$event.stopPropagation()">Show comment nodes</mat-slide-toggle>
+  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); showCommentNodes = $event.checked">
+    <mat-slide-toggle [checked]="showCommentNodes">
+      Show comment nodes
+    </mat-slide-toggle>
   </div>
 </mat-menu>
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
index 50ba9cfeef0..2104db6b890 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -2,7 +2,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  display: block;
+  display: block;  
 }
 
 .hidden {
@@ -15,6 +15,25 @@
 
 #nav-buttons {
   display: flex;
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.8;
+
+    &:active {
+      opacity: 1
+    }
+  }
+}
+
+:host-context(.dark-theme) {
+  #nav-buttons {
+    button {
+      color: #fff;
+    }
+  }
 }
 
 .inspector-active {
@@ -42,24 +61,14 @@
   user-select: text;
 }
 
-button.mat-icon-button {
-  height: 30px;
-  width: 30px;
-  line-height: 30px;
-  margin-right: 0px;
-}
-
 mat-icon {
-  font-size: 16px;
-
-  .mat-menu-item & {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.mat-tab-link {
+.mat-mdc-tab-link {
   min-width: unset;
   line-height: 30px;
   height: 30px;
@@ -69,24 +78,6 @@ mat-icon {
   font-weight: 400;
 }
 
-.mat-menu-item {
-  font-size: 0.7em;
-  font-weight: 500;
-  height: 36px;
-  line-height: 36px;
-  overflow: visible; // Avoids clipping of the button toggle ripple.
-  color: #777;
-
-  ::ng-deep .dark-theme & {
-    color: white;
-  }
-
-  mat-slide-toggle {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 :host-context(.dark-theme) {
   #version-number {
     color: #5caace;
@@ -108,3 +99,15 @@ mat-icon {
     display: none;
   }
 }
+
+.mat-mdc-tab-header {
+  --mdc-secondary-navigation-tab-container-height: 30px;
+}
+
+.mat-mdc-menu-item.mdc-list-item {
+  ::ng-deep {
+    label {
+      cursor: pointer;
+    }
+  }
+}
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 a01bfdc2199..2edfffd9432 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
@@ -7,8 +7,8 @@
  */
 
 import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatLegacySlideToggleChange as MatSlideToggleChange} from '@angular/material/legacy-slide-toggle';
-import {MatLegacyTabNav as MatTabNav} from '@angular/material/legacy-tabs';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {MatTabNav} from '@angular/material/tabs';
 import {Events, MessageBus, Route} from 'protocol';
 import {Subscription} from 'rxjs';
 
@@ -33,6 +33,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
   inspectorRunning = false;
   routerTreeEnabled = false;
   showCommentNodes = false;
+  timingAPIEnabled = false;
 
   private _currentThemeSubscription: Subscription;
   currentTheme: Theme;
@@ -51,6 +52,8 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
     this._messageBus.on('updateRouterTree', (routes) => {
       this.routes = routes || [];
     });
+
+    this.navbar.stretchTabs = false;
   }
 
   get tabs(): string[] {
@@ -97,8 +100,9 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
     this.inspectorRunning = !this.inspectorRunning;
   }
 
-  toggleTimingAPI(change: MatSlideToggleChange): void {
-    change.checked ? this._messageBus.emit('enableTimingAPI') :
-                     this._messageBus.emit('disableTimingAPI');
+  toggleTimingAPI(): void {
+    this.timingAPIEnabled = !this.timingAPIEnabled;
+    this.timingAPIEnabled ? this._messageBus.emit('enableTimingAPI') :
+                            this._messageBus.emit('disableTimingAPI');
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
index f8917922c41..6283fba4f57 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
@@ -8,12 +8,12 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
-import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {DevToolsTabsComponent} from './devtools-tabs.component';
 import {DirectiveExplorerModule} from './directive-explorer/directive-explorer.module';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
index 462829a5d4b..a3cb1abb198 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
@@ -9,11 +9,11 @@
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
-import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 
 import {AngularSplitModule} from '../../vendor/angular-split/public_api';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
index 452226510db..ebf9bac094c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
@@ -1,8 +1,9 @@
-.mat-card.breadcrumb-card {
+.mdc-card.breadcrumb-card { 
   padding: 0;
   width: 100%;
   height: 24px;
   display: flex;
+  flex-direction: row;
 
   .scroll-button {
     height: 100%;
@@ -28,13 +29,15 @@
     }
 
     button {
+      height: 24px;
+
       &.selected {
         background-color: rgb(243, 243, 243);
       }
     }
   }
 
-  .mat-button {
+  .mdc-button {
     height: 20px;
     line-height: 20px;
     font-size: 11px;
@@ -49,7 +52,7 @@
 }
 
 :host-context(.dark-theme) {
-  .mat-card {
+  .mdc-card {
     &.breadcrumb-card {
       .scroll-button {
         background-color: rgb(41, 42, 45);
@@ -64,7 +67,7 @@
         }
       }
 
-      .mat-button {
+      .mdc-button {
         color: #5caace;
         &:hover {
           background-color: #093e69;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
index ad0c93b1ce8..011f7432d0b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {BreadcrumbsComponent} from './breadcrumbs.component';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
index 8d90364ca19..d2c84cee4f2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
@@ -9,9 +9,9 @@
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {BreadcrumbsModule} from './breadcrumbs/breadcrumbs.module';
 import {DirectiveForestComponent} from './directive-forest.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
index 8f71cf1d606..15f976f822a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html
@@ -12,16 +12,20 @@
       placeholder="Search components"
     />
   </label>
+
   <div class="up-down-buttons" *ngIf="hasMatched">
-    <button mat-icon-button matTooltip="Select previous element" (click)="emitPrevMatched()">
+  
+    <button matTooltip="Select previous element" (click)="emitPrevMatched()">
       <mat-icon class="mat-icon-rtl-mirror">
         expand_less
       </mat-icon>
     </button>
-    <button mat-icon-button matTooltip="Select next element" (click)="emitNextMatched()">
+    <button matTooltip="Select next element" (click)="emitNextMatched()">
       <mat-icon class="">
         expand_more
       </mat-icon>
     </button>
+
   </div>
+
 </mat-card>
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
index 06a7d812720..e18f591fd5f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
@@ -36,27 +36,29 @@
   }
 }
 
+.mdc-card {
+  flex-direction: row;
+}
+
 .up-down-buttons {
   display: flex;
 
   button {
-    width: 24px;
-    height: 24px;
-  }
-}
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
 
-:host {
-  ::ng-deep {
-    .up-down-buttons {
-      .mat-icon-button {
-        line-height: 25px;
-      }
+    opacity: 0.5;
 
-      button {
-        mat-icon {
-          opacity: 0.5;
-        }
-      }
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:active {
+      opacity: 1;
     }
   }
 }
@@ -70,4 +72,8 @@
       }
     }
   }
+
+  mat-icon {
+    color: #fff;
+  }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
index dcca3fd2f91..023536cd24d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {FilterComponent} from './filter.component';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
index 10e5fa5bfab..1ae16b50ecc 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
@@ -8,10 +8,10 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {ComponentMetadataComponent} from './component-metadata.component';
 import {PropertyTabHeaderComponent} from './property-tab-header.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html
index bf6d71b1eb7..50fef455a49 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar>
     {{ directive }}
-    <button matTooltip="Open source" mat-icon-button (click)="handleViewSource($event)">
+    <button matTooltip="Open source" (click)="handleViewSource($event)">
         <mat-icon> code </mat-icon>
     </button>
 </mat-toolbar>
\ No newline at end of file
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
index 63fa519154c..f692920f725 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
@@ -14,14 +14,26 @@ mat-toolbar {
   line-height: 10px;
 }
 
-.button {
-  height: 20px;
-  width: 20px;
-  float: right;
+button {
+  padding: 0;
+  background: none;
+  border: none;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  &:active {
+    opacity: 1;
+  }
 }
 
 :host-context(.dark-theme) {
-  .mat-icon-button {
-    fill: #fff;
+  button {
+    color: #fff;
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
index f294f05de3d..b210c715ac4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
@@ -10,11 +10,11 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 
 import {PropertyEditorComponent} from './property-editor.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
index 1a6f87f65f0..8e0ae352c08 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 interface DialogData {
   profilerVersion?: number;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
index cb03f19b2bb..cd3b530e2fc 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
@@ -3,20 +3,16 @@
   font-size: 1em;
   width: 100%;
   height: calc(100% - 30px);
-}
 
-.mat-card {
-  display: flex;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  height: wrap-content;
-  margin: 0 !important;
-  padding: 5px !important;
-  box-shadow: none !important;
-  border-radius: 0;
+  p {
+    margin: 0;
+  }
 }
 
 .mat-icon {
   font-size: 18px;
+  top: 4px;
+  position: relative;
 }
 
 .profiler-control {
@@ -28,9 +24,6 @@
 }
 
 .instructions {
-  margin-bottom: 0 !important;
-  align-self: center;
-
   &.hidden {
     display: none;
   }
@@ -61,3 +54,8 @@
     }
   }
 }
+
+.mdc-card {
+  flex-direction: row;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
index 334fb621873..28939878256 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {Events, MessageBus, ProfilerFrame} from 'protocol';
 import {Subject, Subscription} from 'rxjs';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
index 8df94c7fd17..1cec0ab9b45 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
@@ -9,12 +9,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {ProfilerImportDialogComponent} from './profiler-import-dialog.component';
 import {ProfilerComponent} from './profiler.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.html
index b2b696c5a96..893cec7ebce 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.html
@@ -1,7 +1,9 @@
 <mat-card class="bar-graph-container">
+
   <p class="txt-frames" matTooltip="{{ selectionLabel }} / {{ (graphData$ | async)?.length }}">
     {{ selectionLabel }} / {{ (graphData$ | async)?.length }}
   </p>
+
   <button
     mat-icon-button
     matTooltip="Select previous frame"
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
index f6b5de7e7fd..18b2eac0f9c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
@@ -2,6 +2,7 @@
   padding: 2px;
   height: 54px;
   display: flex;
+  flex-direction: row;
   align-items: flex-end;
   justify-content: center;
   align-items: center;
@@ -73,3 +74,8 @@
     }
   }
 }
+
+
+cdk-virtual-scroll-viewport {
+  height: 50px;
+}
\ No newline at end of file
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
index 40e1fe66cfd..0242e8fa036 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatCardModule} from '@angular/material/card';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {NgxFlamegraphModule} from 'ngx-flamegraph';
 
 import {AngularSplitModule} from '../../../../vendor/angular-split/public_api';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
index 9f69c5d5d2b..84ac48896eb 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
@@ -1,10 +1,8 @@
 .visual-controls {
   display: flex;
   flex-direction: column;
-  height: 80px;
   justify-content: space-around;
-  margin-right: 25px;
-  width: 180px;
+  min-width: 30%;
 }
 
 .hidden {
@@ -32,7 +30,7 @@
   }
 
   ::ng-deep .details {
-    flex: 1 1 150px;
+    flex: 1;
     display: flex;
     flex-direction: column;
     font-weight: 500;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
index 98dc05761ba..2e3d3f999cb 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
@@ -10,15 +10,15 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatInputModule} from '@angular/material/input';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {NgxFlamegraphModule} from 'ngx-flamegraph';
 
 import {FrameSelectorComponent} from './frame-selector.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
index 3131cb56847..dce99886c9c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatSelectModule} from '@angular/material/select';
 
 import {RouterTreeComponent} from './router-tree.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.module.ts b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
index fa3369258bc..1fadc433ec7 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
@@ -8,8 +8,8 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {DevToolsTabModule} from './devtools-tabs/devtools-tabs.module';
 import {DevToolsComponent} from './devtools.component';
diff --git a/devtools/src/app/demo-app/todo/app-todo.component.ts b/devtools/src/app/demo-app/todo/app-todo.component.ts
index ed69d2c47cd..58a2a46779b 100644
--- a/devtools/src/app/demo-app/todo/app-todo.component.ts
+++ b/devtools/src/app/demo-app/todo/app-todo.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 
 import {DialogComponent} from './dialog.component';
 
diff --git a/devtools/src/app/demo-app/todo/app.module.ts b/devtools/src/app/demo-app/todo/app.module.ts
index a7135bc0878..0b88dfebaaa 100644
--- a/devtools/src/app/demo-app/todo/app.module.ts
+++ b/devtools/src/app/demo-app/todo/app.module.ts
@@ -9,9 +9,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {RouterModule} from '@angular/router';
 
 import {AppTodoComponent} from './app-todo.component';
diff --git a/devtools/src/app/demo-app/todo/dialog.component.ts b/devtools/src/app/demo-app/todo/dialog.component.ts
index 2f74e25a367..874a027689f 100644
--- a/devtools/src/app/demo-app/todo/dialog.component.ts
+++ b/devtools/src/app/demo-app/todo/dialog.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: string;
diff --git a/devtools/styles.scss b/devtools/styles.scss
index bb87d3e30fd..aa9d3b9cf2d 100644
--- a/devtools/styles.scss
+++ b/devtools/styles.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'external/npm/node_modules/@angular/material/index' as mat;
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+@include mat.all-component-typographies();
+@include mat.core();
 
 html,
 body {
@@ -40,9 +40,21 @@ $dark-theme: map.deep-merge(
 );
 
 .light-theme {
-  @include mat.all-legacy-component-themes($light-theme);
+  @include mat.all-component-themes($light-theme);
 }
 
 .dark-theme {
-  @include mat.all-legacy-component-themes($dark-theme);
+  background: #202124;
+  @include mat.all-component-themes($dark-theme);
+}
+
+
+ng-devtools {
+  .mdc-card {
+    padding: 4px;
+  }
+}
+
+.mat-mdc-menu-content {
+  padding: 0 !important;
 }