From b29b95b0f894e2e2636ce9bf80ebd9bbc6b21ecf Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 18 Apr 2022 09:35:56 +0200
Subject: [PATCH] fix(devtools): clean up menu layout (#45665)

The menus weren't using the `mat-menu` component correctly which had led to some inconsistent spacing and the need for style overrides. These changes correctly wrap the menu content in `mat-menu-item` which has the added benefit of having keyboard support. I had to keep some of the overrides in order to preserve the dense layout of the menus.

I've also cleaned up the component by:
* Removing some unnecessary styles.
* Switching single-class usages of `ngClass` to `class.` bindings.
* Not using `br` tags for spacing.

PR Close #45665
---
 .../devtools-tabs.component.html              | 74 +++++++++----------
 .../devtools-tabs.component.scss              | 51 +++++--------
 2 files changed, 50 insertions(+), 75 deletions(-)

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 4dbe2f56b6f..4a830175f65 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,7 +1,7 @@
 <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>
+      <mat-icon [class.inspector-active]="inspectorRunning">pin_end</mat-icon>
     </button>
     <button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
       <mat-icon> settings </mat-icon>
@@ -25,51 +25,43 @@
 <div class="tab-content">
   <ng-directive-explorer
     [showCommentNodes]="showCommentNodes"
-    [ngClass]="{ hidden: activeTab !== 'Components' }"
+    [class.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>
+  <ng-profiler [class.hidden]="activeTab !== 'Profiler'"></ng-profiler>
+  <ng-router-tree [routes]="routes" [class.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 #menu="matMenu">
+  <div mat-menu-item disableRipple>
+    <mat-slide-toggle
+      (change)="toggleTimingAPI($event)"
+      (click)="$event.stopPropagation()">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>
+  <div mat-menu-item disableRipple>
+    <mat-slide-toggle
+      (change)="showCommentNodes = $event.checked"
+      (click)="$event.stopPropagation()">Show comment nodes</mat-slide-toggle>
+  </div>
 </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/angular/angular" target="_blank">
-      <mat-icon>launch</mat-icon>
-      GitHub
-    </a>
-    <a mat-button class="menu-toggle-button" href="https://github.com/angular/angular/issues" target="_blank">
-      <mat-icon>bug_report</mat-icon>
-      Issues
-    </a>
-  </div>
+  <a mat-menu-item href="https://angular.io/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>
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 388eec2127c..50ba9cfeef0 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
@@ -51,6 +51,12 @@ button.mat-icon-button {
 
 mat-icon {
   font-size: 16px;
+
+  .mat-menu-item & {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
 }
 
 .mat-tab-link {
@@ -63,41 +69,24 @@ mat-icon {
   font-weight: 400;
 }
 
-::ng-deep {
-  .options-menu {
-    padding: 1rem 1.25rem;
-  }
+.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;
 
-  .info-menu {
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .info-menu mat-icon {
-    height: unset;
-    width: unset;
-  }
-
-  body.dark-theme .menu-toggle-button {
+  ::ng-deep .dark-theme & {
     color: white;
   }
 
-  .menu-toggle-button {
-    mat-icon {
-      position: relative;
-      top: -1px;
-      margin-right: 5px;
-    }
+  mat-slide-toggle {
+    width: 100%;
+    height: 100%;
   }
 }
 
-.menu-toggle-button {
-  font-size: 0.7em;
-  font-weight: 500;
-  color: #777;
-}
-
 :host-context(.dark-theme) {
   #version-number {
     color: #5caace;
@@ -108,12 +97,6 @@ mat-icon {
   }
 }
 
-:host-context(.light-theme) {
-  mat-icon {
-    color: rgba(0, 0, 0, 0.87);
-  }
-}
-
 @media only screen and (max-width: 700px) {
   #app-angular-version {
     max-width: 135px;