From f4699619e865ee937ca522d7a837ead1e2821fd9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:54:15 +0100
Subject: [PATCH] build: minor improvement to dev app density toggling (#28571)

Fixes a minor gripe where the density tooltip closes when the button is pressed so the user needs to re-focus to see which density is currently active.

(cherry picked from commit 66d0f2d8076ba276bb744499f0ee5a575967dd11)
---
 src/dev-app/dev-app/dev-app-layout.html |  3 ++-
 src/dev-app/dev-app/dev-app-layout.ts   | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
index 62bbfa434256..de932824b808 100644
--- a/src/dev-app/dev-app/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -112,8 +112,9 @@ <h1>Angular Material Demos</h1>
             }
           </button>
           <button
+            #densityTooltip="matTooltip"
             mat-icon-button
-            (click)="toggleDensity()"
+            (click)="toggleDensity(undefined, densityTooltip)"
             [matTooltip]="'Density: ' + state.density">
             <mat-icon>grid_on</mat-icon>
           </button>
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index 43d1548b2fcf..87664147d3a0 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -15,7 +15,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTooltip, MatTooltipModule} from '@angular/material/tooltip';
 import {DevAppDirectionality} from './dev-app-directionality';
 import {DevAppRippleOptions} from './ripple-options';
 import {getAppState, setAppState} from './dev-app-state';
@@ -142,13 +142,19 @@ export class DevAppLayout {
     location.reload();
   }
 
-  toggleDensity(index?: number) {
+  toggleDensity(index?: number, tooltipInstance?: MatTooltip) {
     if (index == null) {
       index = (this._densityScales.indexOf(this.state.density) + 1) % this._densityScales.length;
     }
 
     this.state.density = this._densityScales[index];
     setAppState(this.state);
+
+    // Keep the tooltip open so we can see what the density was changed to. Ideally we'd
+    // always show the density in a badge, but the M2 badge is too large for the toolbar.
+    if (tooltipInstance) {
+      requestAnimationFrame(() => tooltipInstance.show(0));
+    }
   }
 
   toggleRippleDisabled(value = !this.state.rippleDisabled) {