From f41d721ce0cd27919af89363260bbd942718f598 Mon Sep 17 00:00:00 2001 From: hawkgs Date: Fri, 9 Jan 2026 13:29:42 +0200 Subject: [PATCH] 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 e66aeac8d07aac7b31d7ef0bde7769f9319b8e98) --- .../directive-explorer.component.ts | 2 +- .../directive-explorer.spec.ts | 2 +- .../property-view-body.component.ts | 1 + .../profiler-import-dialog/BUILD.bazel | 4 +++ .../profiler-import-dialog.component.html | 20 +++++------ .../profiler-import-dialog.component.scss | 34 +++++++++++++++---- .../profiler-import-dialog.component.ts | 13 ++----- .../transfer-state.component.ts | 2 +- .../shared/button/button.component.spec.ts | 6 ++-- .../ng-devtools/src/styles/_overrides.scss | 6 ++++ 10 files changed, 59 insertions(+), 31 deletions(-) diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts index 80fbb911be7..1125edfdf89 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts @@ -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; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts index ae74f3688a2..e0d5d27820e 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts @@ -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.`, }, ]); }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts index e2d985f4851..c9cce0b034d 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts @@ -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', }); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel index 9e321f68a88..0cb6f2dde58 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel @@ -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", ], ) diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html index 27a482c1828..1f87ffa07a7 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html @@ -1,22 +1,22 @@ @switch (data.status) { @case ('ERROR') { -

Error

-
+

Error

+

Could not process uploaded file.

{{ data.errorMessage }}

-
- +
+
} @case ('INVALID_VERSION') { -

Warning

-
+

Warning

+

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.

Current format version: @@ -28,9 +28,9 @@

Files recorded in older versions may no longer be compatible. Do you wish to continue?

-
- - +
+ +
} } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss index 2c24f6d39cb..5b4e72fbfd2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss @@ -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); + } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts index 5b58c1487a8..9d8cadf8a3c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts @@ -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 { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts index 634d897126f..fe80411d89b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts @@ -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}`}]); } } diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts index 25e69b85c90..2655a44a066 100644 --- a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts @@ -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(); }); diff --git a/devtools/projects/ng-devtools/src/styles/_overrides.scss b/devtools/projects/ng-devtools/src/styles/_overrides.scss index aeeda461f79..2910c4e9ac4 100644 --- a/devtools/projects/ng-devtools/src/styles/_overrides.scss +++ b/devtools/projects/ng-devtools/src/styles/_overrides.scss @@ -38,6 +38,12 @@ ) ); + @include mat.dialog-overrides( + ( + container-elevation-shadow: 1, + ) + ); + /* FRAGILE */ .mat-mdc-menu-item { min-height: 32px;