From aee536c8ca3fe72e9d966499e33d45ee1763e7f8 Mon Sep 17 00:00:00 2001 From: hawkgs Date: Fri, 12 Dec 2025 00:06:36 +0200 Subject: [PATCH] refactor(devtools): improve the look of app state screens Improve the look of "app not detected", "unsupported version" and "prod app not supported" screens. --- .../src/lib/devtools.component.html | 119 ++++++++++-------- .../src/lib/devtools.component.scss | 44 +++++-- .../ng-devtools/src/lib/devtools.component.ts | 6 +- .../ng-devtools/src/lib/devtools_spec.ts | 12 +- .../ng-devtools/src/styles/_typography.scss | 4 +- 5 files changed, 107 insertions(+), 78 deletions(-) diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.html b/devtools/projects/ng-devtools/src/lib/devtools.component.html index d1a95bf1221..0b501478193 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.html @@ -11,71 +11,82 @@ > } @else { -

Angular Devtools only supports Angular versions 12 and above

+
+ upgrade +

+ Angular DevTools only supports Angular versions 12 and above. +

+
} } @else { -

- We detected an application built with production configuration. Angular DevTools only - supports development builds. -

+
+ code_off +

+ We detected an application built with a production configuration. Angular DevTools only + supports development builds. +

-
-

- If this application was built in development mode, please check if the - window.ng global object is available in your application. If it is missing, - then something is preventing Angular from running in development mode properly. -

-
    -
  • - Are you calling enableProdMode() in your application? Read more about - enableProdMode() - on angular.dev. -
    • -
  • - Is "optimization": true set in your angular.json? Read more about +
    +

    + If this application was built in development mode, please check if the + window.ng global object is available in your application. If it is + missing, then something is preventing Angular from running in development mode + properly. +

    +
      +
    • + Are you calling enableProdMode() in your application? Read more about + enableProdMode() + on angular.dev. +
      • +
    • + Is "optimization": true set in your angular.json? Read more about + optimization configuration + on angular.dev. +
      • +
    • + Is "defaultConfiguration": "production" set in your angular.json? Read + more about + default configurations + on angular.dev. +
      • +
    +

    + If you are still experiencing problems, you can open an issue with a reproduction on + our optimization configuration - on angular.dev. -

    • -
  • - Is "defaultConfiguration": "production" set in your angular.json? Read - more about - default configurations - on angular.dev. -
    • -
-

- If you are still experiencing problems, you can open an issue with a reproduction on our - issue tracker. -

+ href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml" + >issue tracker. +

+
} } @case (AngularStatus.DOES_NOT_EXIST) { -

- + error +

i - Angular application not detected. -

+ Angular application not detected. +

+ } @case (AngularStatus.UNKNOWN) {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss index 3ddecdf3858..cae166f1980 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.scss +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.scss @@ -42,21 +42,30 @@ } } -.text-message { - @extend %heading-500; - text-align: center; - cursor: help; +.devtools-state-screen { + padding: 1rem; + height: 100%; + overflow-y: auto; + box-sizing: border-box; - .info-icon { - display: inline-block; - font-size: 0.8em; - border-radius: 50%; - border: solid 2px var(--primary-contrast); - cursor: pointer; - width: 16px; - height: 16px; - font-weight: bold; + mat-icon { + display: block; + font-size: 32px; + width: 32px; + height: 32px; + margin-inline: auto; + margin-block-start: 0.5rem; + color: var(--quinary-contrast); + } + + .text-message { + @extend %heading-500; text-align: center; + margin: 0; + + &[matTooltip] { + cursor: help; + } } } @@ -67,6 +76,15 @@ margin: auto; border: 1px solid var(--quinary-contrast); border-radius: 16px; + margin-top: 1rem; + + p:first-of-type { + margin-top: 0; + } + + p:last-of-type { + margin-bottom: 0; + } code { padding: 2px; diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts index e51f662f46d..3cb97fceb55 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts @@ -24,7 +24,7 @@ import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {Frame} from './application-environment'; import {BrowserStylesService} from './application-services/browser_styles_service'; -import {MatIconRegistry} from '@angular/material/icon'; +import {MatIcon, MatIconRegistry} from '@angular/material/icon'; import {SUPPORTED_APIS} from './application-providers/supported_apis'; const DETECT_ANGULAR_ATTEMPTS = 20; @@ -47,13 +47,13 @@ enum AngularStatus { EXISTS, } -const LAST_SUPPORTED_VERSION = 9; +export const LAST_SUPPORTED_VERSION = 9; @Component({ selector: 'ng-devtools', templateUrl: './devtools.component.html', styleUrls: ['./devtools.component.scss'], - imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule], + imports: [DevToolsTabsComponent, MatIcon, MatTooltip, MatProgressSpinnerModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DevToolsComponent implements OnDestroy { diff --git a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts index bbd2dd517c2..4671c4b041b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FrameManager} from './application-services/frame_manager'; -import {DevToolsComponent} from './devtools.component'; +import {DevToolsComponent, LAST_SUPPORTED_VERSION} from './devtools.component'; import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component'; import {MessageBus} from '../../../protocol'; import {SETTINGS_MOCK} from './application-services/test-utils/settings_mock'; @@ -54,8 +54,8 @@ describe('DevtoolsComponent', () => { component.angularStatus.set(component.AngularStatus.EXISTS); component.angularIsInDevMode.set(false); fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain( - 'We detected an application built with production configuration. Angular DevTools only supports development builds.', + expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain( + 'We detected an application built with a production configuration. Angular DevTools only supports development builds.', ); }); @@ -64,8 +64,8 @@ describe('DevtoolsComponent', () => { component.angularIsInDevMode.set(true); component.angularVersion.set('1.0.0'); fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain( - 'Angular Devtools only supports Angular versions 12 and above', + expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain( + `Angular DevTools only supports Angular versions ${LAST_SUPPORTED_VERSION} and above`, ); }); @@ -73,7 +73,7 @@ describe('DevtoolsComponent', () => { component.angularStatus.set(component.AngularStatus.DOES_NOT_EXIST); fixture.detectChanges(); // expect the text to be "Angular application not detected" - expect(fixture.nativeElement.querySelector('.not-detected').textContent).toContain( + expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain( 'Angular application not detected', ); }); diff --git a/devtools/projects/ng-devtools/src/styles/_typography.scss b/devtools/projects/ng-devtools/src/styles/_typography.scss index c79bea63b9c..5715c2a0743 100644 --- a/devtools/projects/ng-devtools/src/styles/_typography.scss +++ b/devtools/projects/ng-devtools/src/styles/_typography.scss @@ -17,7 +17,7 @@ $font-size: 0.75rem; // 12px font-family: $font-family; font-size: 1.125rem; // 18px font-weight: 500; - line-height: 1rem; + line-height: 1.375rem; letter-spacing: normal; padding: 0.5rem 0.25rem; } @@ -26,7 +26,7 @@ $font-size: 0.75rem; // 12px font-family: $font-family; font-size: 1rem; // 16px font-weight: 500; - line-height: 1rem; + line-height: 1.375rem; letter-spacing: normal; padding: 0.5rem 0.25rem; }