build: improve dev app appearance toggles (#27446)

Currently we have some toggles to change the appearance of the dev app (e.g. changing the theme, updating the direction). It has a few problems:
1. We have a lot of toggles so we're starting to run out of space in the toolbar.
2. The state of some of the toggles is saved in `localStorage` while for others it isn't.
3. The code is a bit messy since we were adding these toggles ad-hoc.

These changes address the issues by:
1. Switching all the buttons to icons which take up less space.
2. Having a centralized way to save the state to `localStorage` so we don't need to do it on a case-by-case basis.
3. Cleaning up the logic a bit.

I've also added a dedicated button for toggling the tokens theming API, because currently it's done through a query parameter which isn't easy to discover.

Author: crisbeto

src/dev-app/dev-app.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, inject, ViewEncapsulation} from '@angular/core';
-import {ActivatedRoute, RouterModule} from '@angular/router';
+import {Component, ViewEncapsulation} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {DevAppLayout} from './dev-app/dev-app-layout';
 
 /** Root component for the dev-app demos. */
@@ -18,14 +18,4 @@ import {DevAppLayout} from './dev-app/dev-app-layout';
   standalone: true,
   imports: [DevAppLayout, RouterModule],
 })
-export class DevApp {
-  route = inject(ActivatedRoute);
-
-  constructor() {
-    this.route.queryParams.subscribe(q => {
-      (document.querySelector('#theme-styles') as any).href = q.hasOwnProperty('tokenapi')
-        ? 'theme-token-api.css'
-        : 'theme.css';
-    });
-  }
-}
+export class DevApp {}

src/dev-app/dev-app/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
         "//src/material/list",
         "//src/material/sidenav",
         "//src/material/toolbar",
+        "//src/material/tooltip",
         "@npm//@angular/router",
     ],
 )

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

@@ -43,7 +43,7 @@
     be one level above the density class in the DOM. At the same time, we want the density to apply
     to the toolbar while always keeping it in LTR at the same time.
    -->
-  <main [attr.dir]="dir.value" [ngClass]="getDensityClass()" class="demo-main">
+  <main [attr.dir]="state.direction" [ngClass]="getDensityClass()" class="demo-main">
     <!-- The toolbar should always be in the LTR direction -->
     <mat-toolbar color="primary" dir="ltr">
       <button mat-icon-button (click)="navigation.open('mouse')">
@@ -52,28 +52,53 @@
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
         <div class="demo-config-buttons">
-          <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+          <button
+            mat-icon-button
+            (click)="toggleFullscreen()"
+            matTooltip="Toggle fullscreen">
             <mat-icon>fullscreen</mat-icon>
           </button>
-          <button mat-button (click)="toggleAnimations()">
-            {{animationsDisabled ? 'Enable' : 'Disable'}} animations
+          <button
+            mat-icon-button
+            (click)="toggleTokens()"
+            [matTooltip]="state.tokensEnabled ? 'Disable tokens' : 'Enable tokens'">
+            <mat-icon>brush</mat-icon>
           </button>
-          <button mat-button (click)="isDark = !isDark">
-            {{isDark ? 'Light' : 'Dark'}} theme
+          <button
+            mat-icon-button
+            (click)="toggleAnimations()"
+            [matTooltip]="state.animations ? 'Disable animations' : 'Enable animations'">
+            <mat-icon>animation</mat-icon>
           </button>
-          <button mat-button (click)="rippleOptions.disabled = !rippleOptions.disabled">
-            {{rippleOptions.disabled ? 'Enable' : 'Disable'}} ripples
+          <button
+            mat-icon-button
+            (click)="toggleTheme()"
+            [matTooltip]="state.darkTheme ? 'Switch to light theme' : 'Switch to dark theme'">
+            <mat-icon>dark_mode</mat-icon>
           </button>
-          <button mat-button (click)="toggleStrongFocus()">
-            {{strongFocus ? 'Disable strong focus' : 'Enable strong focus'}}
+          <button
+            mat-icon-button
+            (click)="toggleRippleDisabled()"
+            [matTooltip]="state.rippleDisabled ? 'Enable ripples' : 'Disable ripples'">
+            <mat-icon>waves</mat-icon>
           </button>
-          <button mat-button (click)="dir.value = (dir.value === 'rtl' ? 'ltr' : 'rtl')"
-                  title="Toggle between RTL and LTR">
-            {{dir.value.toUpperCase()}}
+          <button
+            mat-icon-button
+            (click)="toggleStrongFocus()"
+            [matTooltip]="state.strongFocusEnabled ? 'Disable strong focus' : 'Enable strong focus'">
+            <mat-icon>accessibility</mat-icon>
           </button>
-          <button mat-button (click)="selectNextDensity()"
-                  title="Use next density scale: {{densityScales[getNextDensityIndex()]}}">
-            Density scale: {{densityScales[this.currentDensityIndex]}}
+          <button
+            mat-icon-button
+            (click)="toggleDirection()"
+            [matTooltip]="state.direction === 'rtl' ? 'Switch to LTR' : 'Switch to RTL'">
+            <mat-icon>keyboard_tab_rtl</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            (click)="toggleDensity()"
+            [matTooltip]="'Density: ' + state.density">
+            <mat-icon>grid_on</mat-icon>
           </button>
         </div>
       </div>

src/dev-app/dev-app/dev-app-layout.ts

@@ -6,22 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directionality} from '@angular/cdk/bidi';
 import {ChangeDetectorRef, Component, ElementRef, Inject, ViewEncapsulation} from '@angular/core';
-
-import {DevAppDirectionality} from './dev-app-directionality';
-import {DevAppRippleOptions} from './ripple-options';
 import {CommonModule, DOCUMENT} from '@angular/common';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatListModule} from '@angular/material/list';
 import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
-
-const isDarkThemeKey = 'ANGULAR_COMPONENTS_DEV_APP_DARK_THEME';
-
-export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {DevAppDirectionality} from './dev-app-directionality';
+import {DevAppRippleOptions} from './ripple-options';
+import {getAppState, setAppState} from './dev-app-state';
 
 /** Root component for the dev-app demos. */
 @Component({
@@ -37,13 +34,12 @@ export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
     MatListModule,
     MatSidenavModule,
     MatToolbarModule,
+    MatTooltipModule,
     RouterModule,
   ],
 })
 export class DevAppLayout {
-  readonly darkThemeClass = 'demo-unicorn-dark-theme';
-  _isDark = false;
-  strongFocus = false;
+  state = getAppState();
   navItems = [
     {name: 'Examples', route: '/examples'},
     {name: 'CDK Dialog', route: '/cdk-dialog'},
@@ -126,108 +122,79 @@ export class DevAppLayout {
     {name: 'Legacy Tooltip', route: '/legacy-tooltip'},
   ];
 
-  /** Currently selected density scale based on the index. */
-  currentDensityIndex = 0;
-
   /** List of possible global density scale values. */
-  densityScales = [0, -1, -2, -3, 'minimum', 'maximum'];
-
-  /** Whether animations are disabled. */
-  animationsDisabled = localStorage.getItem(ANIMATIONS_STORAGE_KEY) === 'true';
+  private _densityScales = [0, -1, -2, -3, 'minimum', 'maximum'];
 
   constructor(
     private _element: ElementRef<HTMLElement>,
-    public rippleOptions: DevAppRippleOptions,
-    @Inject(Directionality) public dir: DevAppDirectionality,
-    cdr: ChangeDetectorRef,
+    private _rippleOptions: DevAppRippleOptions,
+    @Inject(Directionality) private _dir: DevAppDirectionality,
+    private _changeDetectorRef: ChangeDetectorRef,
     @Inject(DOCUMENT) private _document: Document,
   ) {
-    dir.change.subscribe(() => cdr.markForCheck());
-    try {
-      const isDark = localStorage.getItem(isDarkThemeKey);
-      if (isDark != null) {
-        // We avoid calling the setter and apply the themes directly here.
-        // This avoids writing the same value, that we just read, back to localStorage.
-        this._isDark = isDark === 'true';
-        this.updateThemeClass(this._isDark);
-      }
-    } catch (error) {
-      console.error(`Failed to read ${isDarkThemeKey} from localStorage: `, error);
-    }
+    this.toggleTheme(this.state.darkTheme);
+    this.toggleStrongFocus(this.state.strongFocusEnabled);
+    this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
+    this.toggleRippleDisabled(this.state.rippleDisabled);
+    this.toggleDirection(this.state.direction);
   }
 
-  get isDark(): boolean {
-    return this._isDark;
-  }
-
-  set isDark(value: boolean) {
-    // Noop if the value is the same as is already set.
-    if (value !== this._isDark) {
-      this._isDark = value;
-      this.updateThemeClass(this._isDark);
-
-      try {
-        localStorage.setItem(isDarkThemeKey, String(value));
-      } catch (error) {
-        console.error(`Failed to write ${isDarkThemeKey} to localStorage: `, error);
-      }
-    }
+  toggleTheme(value = !this.state.darkTheme) {
+    this.state.darkTheme = value;
+    this._document.body.classList.toggle('demo-unicorn-dark-theme', value);
+    setAppState(this.state);
   }
 
   toggleFullscreen() {
-    // Cast to `any`, because the typings don't include the browser-prefixed methods.
-    const elem = this._element.nativeElement.querySelector('.demo-content') as any;
-    if (elem.requestFullscreen) {
-      elem.requestFullscreen();
-    } else if (elem.webkitRequestFullScreen) {
-      elem.webkitRequestFullScreen();
-    } else if (elem.mozRequestFullScreen) {
-      elem.mozRequestFullScreen();
-    } else if (elem.msRequestFullScreen) {
-      elem.msRequestFullScreen();
-    }
+    this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
   }
 
-  updateThemeClass(isDark?: boolean) {
-    if (isDark) {
-      this._document.body.classList.add(this.darkThemeClass);
-    } else {
-      this._document.body.classList.remove(this.darkThemeClass);
-    }
+  toggleStrongFocus(value = !this.state.strongFocusEnabled) {
+    this.state.strongFocusEnabled = value;
+    this._document.body.classList.toggle('demo-strong-focus', value);
+    setAppState(this.state);
   }
 
-  toggleStrongFocus() {
-    const strongFocusClass = 'demo-strong-focus';
-
-    this.strongFocus = !this.strongFocus;
+  toggleAnimations() {
+    this.state.animations = !this.state.animations;
+    setAppState(this.state);
+    location.reload();
+  }
 
-    if (this.strongFocus) {
-      this._document.body.classList.add(strongFocusClass);
-    } else {
-      this._document.body.classList.remove(strongFocusClass);
+  toggleDensity(index?: number) {
+    if (index == null) {
+      index = (this._densityScales.indexOf(this.state.density) + 1) % this._densityScales.length;
     }
+
+    this.state.density = this._densityScales[index];
+    setAppState(this.state);
   }
 
-  toggleAnimations() {
-    localStorage.setItem(ANIMATIONS_STORAGE_KEY, !this.animationsDisabled + '');
-    location.reload();
+  toggleRippleDisabled(value = !this.state.rippleDisabled) {
+    this._rippleOptions.disabled = this.state.rippleDisabled = value;
+    setAppState(this.state);
   }
 
-  /** Gets the index of the next density scale that can be selected. */
-  getNextDensityIndex() {
-    return (this.currentDensityIndex + 1) % this.densityScales.length;
+  toggleDirection(value: Direction = this.state.direction === 'ltr' ? 'rtl' : 'ltr') {
+    if (value !== this._dir.value) {
+      this._dir.value = this.state.direction = value;
+      this._changeDetectorRef.markForCheck();
+      setAppState(this.state);
+    }
   }
 
-  /** Selects the next possible density scale. */
-  selectNextDensity() {
-    this.currentDensityIndex = this.getNextDensityIndex();
+  toggleTokens(value = !this.state.tokensEnabled) {
+    // We need to diff this one since it's a bit more expensive to toggle.
+    if (value !== this.state.tokensEnabled) {
+      (document.getElementById('theme-styles') as HTMLLinkElement).href = value
+        ? 'theme-token-api.css'
+        : 'theme.css';
+      this.state.tokensEnabled = value;
+      setAppState(this.state);
+    }
   }
 
-  /**
-   * Updates the density classes on the host element. Applies a unique class for
-   * a given density scale, so that the density styles are conditionally applied.
-   */
   getDensityClass() {
-    return `demo-density-${this.densityScales[this.currentDensityIndex]}`;
+    return `demo-density-${this.state.density}`;
   }
 }

src/dev-app/dev-app/dev-app-state.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Direction} from '@angular/cdk/bidi';
+
+const KEY = 'MAT_DEV_APP_STATE';
+
+/** State of the appearance of the dev app. */
+export interface DevAppState {
+  density: string | number;
+  animations: boolean;
+  darkTheme: boolean;
+  rippleDisabled: boolean;
+  strongFocusEnabled: boolean;
+  tokensEnabled: boolean;
+  direction: Direction;
+}
+
+/** Gets the current appearance state of the dev app. */
+export function getAppState(): DevAppState {
+  let value: DevAppState | null = null;
+
+  // Needs a try/catch since some browsers throw an error when accessing in incognito.
+  try {
+    const storageValue = localStorage.getItem(KEY);
+
+    if (storageValue) {
+      value = JSON.parse(storageValue);
+    }
+  } catch {}
+
+  if (!value) {
+    value = {
+      density: 0,
+      animations: true,
+      darkTheme: false,
+      rippleDisabled: false,
+      strongFocusEnabled: false,
+      tokensEnabled: false,
+      direction: 'ltr',
+    };
+
+    saveToStorage(value);
+  }
+
+  return value;
+}
+
+/** Saves the state of the dev app apperance in local storage. */
+export function setAppState(newState: DevAppState): void {
+  const currentState = getAppState();
+  const keys = Object.keys(currentState) as (keyof DevAppState)[];
+
+  // Only write to storage if something actually changed.
+  for (const key of keys) {
+    if (currentState[key] !== newState[key]) {
+      saveToStorage(newState);
+      break;
+    }
+  }
+}
+
+function saveToStorage(value: DevAppState): void {
+  // Needs a try/catch since some browsers throw an error when accessing in incognito.
+  try {
+    localStorage.setItem(KEY, JSON.stringify(value));
+  } catch {}
+}

src/dev-app/index.html

@@ -10,7 +10,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="theme.css" rel="stylesheet" id="theme-styles">
 
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">