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.

Author: crisbeto

src/dev-app/dev-app/dev-app-layout.html

@@ -120,8 +120,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>

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';
@@ -143,13 +143,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) {