mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(devtools): improve the look of app state screens
Improve the look of "app not detected", "unsupported version" and "prod app not supported" screens.
This commit is contained in:
hawkgs
Andrew Kushnir
parent
06fb97abf9
commit
aee536c8ca
5 changed files with 107 additions and 78 deletions
|
|
@ -11,71 +11,82 @@
|
|||
></ng-devtools-tabs>
|
||||
</div>
|
||||
} @else {
|
||||
<p class="text-message">Angular Devtools only supports Angular versions 12 and above</p>
|
||||
<div class="devtools-state-screen">
|
||||
<mat-icon>upgrade</mat-icon>
|
||||
<p class="text-message">
|
||||
Angular DevTools only supports Angular versions 12 and above.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<p
|
||||
class="text-message"
|
||||
matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
|
||||
>
|
||||
We detected an application built with production configuration. Angular DevTools only
|
||||
supports development builds.
|
||||
</p>
|
||||
<div class="devtools-state-screen">
|
||||
<mat-icon>code_off</mat-icon>
|
||||
<p
|
||||
class="text-message"
|
||||
matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
|
||||
>
|
||||
We detected an application built with a production configuration. Angular DevTools only
|
||||
supports development builds.
|
||||
</p>
|
||||
|
||||
<div class="ng-dev-mode-causes">
|
||||
<p>
|
||||
If this application was built in development mode, please check if the
|
||||
<code>window.ng</code> global object is available in your application. If it is missing,
|
||||
then something is preventing Angular from running in development mode properly.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Are you calling <code>enableProdMode()</code> in your application? Read more about
|
||||
<a target="_blank" href="https://angular.dev/api/core/enableProdMode"
|
||||
>enableProdMode()</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
<li>
|
||||
Is <code>"optimization": true</code> set in your angular.json? Read more about
|
||||
<div class="ng-dev-mode-causes">
|
||||
<p>
|
||||
If this application was built in development mode, please check if the
|
||||
<code>window.ng</code> global object is available in your application. If it is
|
||||
missing, then something is preventing Angular from running in development mode
|
||||
properly.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Are you calling <code>enableProdMode()</code> in your application? Read more about
|
||||
<a target="_blank" href="https://angular.dev/api/core/enableProdMode"
|
||||
>enableProdMode()</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
<li>
|
||||
Is <code>"optimization": true</code> set in your angular.json? Read more about
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
|
||||
>optimization configuration</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
<li>
|
||||
Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
|
||||
more about
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
|
||||
>default configurations</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
If you are still experiencing problems, you can open an issue with a reproduction on
|
||||
our
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
|
||||
>optimization configuration</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
<li>
|
||||
Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
|
||||
more about
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
|
||||
>default configurations</a
|
||||
>
|
||||
on angular.dev.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
If you are still experiencing problems, you can open an issue with a reproduction on our
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
|
||||
>issue tracker</a
|
||||
>.
|
||||
</p>
|
||||
href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
|
||||
>issue tracker</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@case (AngularStatus.DOES_NOT_EXIST) {
|
||||
<p class="text-message not-detected">
|
||||
<span
|
||||
class="info-icon"
|
||||
<div class="devtools-state-screen">
|
||||
<mat-icon>error</mat-icon>
|
||||
<p
|
||||
class="text-message"
|
||||
matTooltip="You see this message because the app is still loading, or this is not an Angular application"
|
||||
>i</span
|
||||
>
|
||||
Angular application not detected.
|
||||
</p>
|
||||
Angular application not detected.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
@case (AngularStatus.UNKNOWN) {
|
||||
<div class="initializing">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue