refactor(devtools): style the profiler dialogs to match the current design

Decrease the font size and tone down the paddings and margins. Use `ng-button` instead of `mat-button`. (cherry picked from commit e66aeac8d0)
2026-09-14 13:54:52 +08:00 · 2026-01-09 13:29:42 +02:00
parent 0fd8477f3f
commit f41d721ce0
10 changed files with 59 additions and 31 deletions
@@ -349,7 +349,7 @@ export class DirectiveExplorerComponent {
    const selectedFrame = this._frameManager.selectedFrame();

    if (!this._frameManager.activeFrameHasUniqueUrl()) {
-      const error = `The currently inspected frame does not have a unique url on this page. Cannot inspect object.`;
+      const error = `The currently inspected frame does not have a unique URL on this page. Cannot inspect object.`;
      this.snackBar.open(error, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      this._messageBus.emit('log', [{level: 'warn', message: error}]);
      return;
@@ -356,7 +356,7 @@ describe('DirectiveExplorerComponent', () => {
        expect(messageBusMock.emit).toHaveBeenCalledWith('log', [
          {
            level: 'warn',
-            message: `The currently inspected frame does not have a unique url on this page. Cannot inspect object.`,
+            message: `The currently inspected frame does not have a unique URL on this page. Cannot inspect object.`,
          },
        ]);
      });
@@ -109,6 +109,7 @@ export class PropertyViewBodyComponent {
    this.controller().logValue(node);
    this._snackBar.open(`Logged value of '${node.prop.name}' to the console`, 'Dismiss', {
      duration: 2000,
+      horizontalPosition: 'left',
    });
  }

@@ -5,6 +5,9 @@ package(default_visibility = ["//devtools:__subpackages__"])
 sass_binary(
    name = "profiler-import-dialog_styles",
    src = "profiler-import-dialog.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
 )

 ng_project(
@@ -19,5 +22,6 @@ ng_project(
    deps = [
        "//:node_modules/@angular/core",
        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/shared/button",
    ],
 )
@@ -1,22 +1,22 @@
@switch (data.status) {
  @case ('ERROR') {
-    <h1 mat-dialog-title>Error</h1>
-    <div mat-dialog-content>
+    <h1>Error</h1>
+    <div>
      <p>Could not process uploaded file.</p>
      <p class="error">
        {{ data.errorMessage }}
      </p>
    </div>
-    <div mat-dialog-actions>
-      <button mat-flat-button [mat-dialog-close]="false">Close</button>
+    <div class="actions">
+      <button ng-button [mat-dialog-close]="false">Close</button>
    </div>
  }
  @case ('INVALID_VERSION') {
-    <h1 mat-dialog-title>Warning</h1>
-    <div mat-dialog-content>
+    <h1>Warning</h1>
+    <div>
      <p>
        The file you are attempting to upload was recorded in a different format than the one
-        supported by your current Angular DevTools version
+        supported by your current Angular DevTools version.
      </p>
      <p>
        Current format version:
@@ -28,9 +28,9 @@
      </p>
      <p>Files recorded in older versions may no longer be compatible. Do you wish to continue?</p>
    </div>
-    <div mat-dialog-actions>
-      <button mat-flat-button [mat-dialog-close]="false">No Thanks</button>
-      <button mat-flat-button [mat-dialog-close]="true">Yes</button>
+    <div class="actions">
+      <button ng-button [mat-dialog-close]="false">No, Thanks</button>
+      <button ng-button btnType="secondary" [mat-dialog-close]="true">Yes</button>
    </div>
  }
 }
@@ -1,8 +1,30 @@
-.profiler-version {
-  color: var(--green-01);
-}
+@use '../../../../styles/typography';

-.imported-version,
-.error {
-  color: var(--dynamic-red-01);
+:host {
+  display: block;
+  padding: 1rem;
+
+  h1 {
+    @extend %heading-600;
+    margin: 0;
+    padding: 0;
+  }
+
+  p {
+    @extend %body-01;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .profiler-version {
+    color: var(--dynamic-green-01);
+  }
+
+  .imported-version,
+  .error {
+    color: var(--dynamic-red-01);
+  }
 }
@@ -7,15 +7,8 @@
 */

 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogClose} from '@angular/material/dialog';
+import {ButtonComponent} from '../../../shared/button/button.component';

 interface DialogData {
  profilerVersion?: number;
@@ -28,7 +21,7 @@ interface DialogData {
  selector: 'ng-profiler-import-dialog',
  templateUrl: './profiler-import-dialog.component.html',
  styleUrls: ['./profiler-import-dialog.component.scss'],
-  imports: [MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MatButton],
+  imports: [MatDialogClose, ButtonComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfilerImportDialogComponent {
@@ -177,7 +177,7 @@ export class TransferStateComponent {
      const errorDetail =
        err instanceof Error ? `${err.name}: ${err.message}` : JSON.stringify(err);

-      this.snackBar.open(message, 'Dismiss', {duration: 3000});
+      this.snackBar.open(message, 'Dismiss', {duration: 3000, horizontalPosition: 'left'});
      this.messageBus.emit('log', [{level: 'error', message: `${message}: ${errorDetail}`}]);
    }
  }
@@ -31,8 +31,10 @@ describe('ButtonComponent', () => {
    expect(element.classList.contains('size-compact')).toBeFalse();
  });

-  it('should change the type to secondary', () => {
-    expect(component.btnType()).toEqual('secondary');
+  it('should change the type to secondary', async () => {
+    fixture.componentRef.setInput('btnType', 'secondary');
+    await fixture.whenStable();
+
    expect(element.classList.contains('type-secondary')).toBeTrue();
  });

@@ -38,6 +38,12 @@
    )
  );

+  @include mat.dialog-overrides(
+    (
+      container-elevation-shadow: 1,
+    )
+  );
+
  /* FRAGILE */
  .mat-mdc-menu-item {
    min-height: 32px;