Skip to content

Commit aee536c

Browse files
hawkgsAndrewKushnir
hawkgs
authored and
AndrewKushnir
committed
refactor(devtools): improve the look of app state screens
Improve the look of "app not detected", "unsupported version" and "prod app not supported" screens.
1 parent 06fb97a commit aee536c

5 files changed

Lines changed: 107 additions & 78 deletions

File tree

‎devtools/projects/ng-devtools/src/lib/devtools.component.html‎

Lines changed: 65 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,71 +11,82 @@
1111
></ng-devtools-tabs>
1212
</div>
1313
} @else {
14-
<p class="text-message">Angular Devtools only supports Angular versions 12 and above</p>
14+
<div class="devtools-state-screen">
15+
<mat-icon>upgrade</mat-icon>
16+
<p class="text-message">
17+
Angular DevTools only supports Angular versions 12 and above.
18+
</p>
19+
</div>
1520
}
1621
} @else {
17-
<p
18-
class="text-message"
19-
matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
20-
>
21-
We detected an application built with production configuration. Angular DevTools only
22-
supports development builds.
23-
</p>
24-
25-
<div class="ng-dev-mode-causes">
26-
<p>
27-
If this application was built in development mode, please check if the
28-
<code>window.ng</code> global object is available in your application. If it is missing,
29-
then something is preventing Angular from running in development mode properly.
22+
<div class="devtools-state-screen">
23+
<mat-icon>code_off</mat-icon>
24+
<p
25+
class="text-message"
26+
matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
27+
>
28+
We detected an application built with a production configuration. Angular DevTools only
29+
supports development builds.
3030
</p>
31-
<ul>
32-
<li>
33-
Are you calling <code>enableProdMode()</code> in your application? Read more about
34-
<a target="_blank" href="https://angular.dev/api/core/enableProdMode"
35-
>enableProdMode()</a
36-
>
37-
on angular.dev.
38-
</li>
39-
<li>
40-
Is <code>"optimization": true</code> set in your angular.json? Read more about
41-
<a
42-
target="_blank"
43-
href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
44-
>optimization configuration</a
45-
>
46-
on angular.dev.
47-
</li>
48-
<li>
49-
Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
50-
more about
31+
32+
<div class="ng-dev-mode-causes">
33+
<p>
34+
If this application was built in development mode, please check if the
35+
<code>window.ng</code> global object is available in your application. If it is
36+
missing, then something is preventing Angular from running in development mode
37+
properly.
38+
</p>
39+
<ul>
40+
<li>
41+
Are you calling <code>enableProdMode()</code> in your application? Read more about
42+
<a target="_blank" href="https://angular.dev/api/core/enableProdMode"
43+
>enableProdMode()</a
44+
>
45+
on angular.dev.
46+
</li>
47+
<li>
48+
Is <code>"optimization": true</code> set in your angular.json? Read more about
49+
<a
50+
target="_blank"
51+
href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
52+
>optimization configuration</a
53+
>
54+
on angular.dev.
55+
</li>
56+
<li>
57+
Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
58+
more about
59+
<a
60+
target="_blank"
61+
href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
62+
>default configurations</a
63+
>
64+
on angular.dev.
65+
</li>
66+
</ul>
67+
<p>
68+
If you are still experiencing problems, you can open an issue with a reproduction on
69+
our
5170
<a
5271
target="_blank"
53-
href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
54-
>default configurations</a
55-
>
56-
on angular.dev.
57-
</li>
58-
</ul>
59-
<p>
60-
If you are still experiencing problems, you can open an issue with a reproduction on our
61-
<a
62-
target="_blank"
63-
href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
64-
>issue tracker</a
65-
>.
66-
</p>
72+
href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
73+
>issue tracker</a
74+
>.
75+
</p>
76+
</div>
6777
</div>
6878
}
6979
}
7080
@case (AngularStatus.DOES_NOT_EXIST) {
71-
<p class="text-message not-detected">
72-
<span
73-
class="info-icon"
81+
<div class="devtools-state-screen">
82+
<mat-icon>error</mat-icon>
83+
<p
84+
class="text-message"
7485
matTooltip="You see this message because the app is still loading, or this is not an Angular application"
75-
>i</span
7686
>
77-
Angular application not detected.
78-
</p>
87+
Angular application not detected.
88+
</p>
89+
</div>
7990
}
8091
@case (AngularStatus.UNKNOWN) {
8192
<div class="initializing">

‎devtools/projects/ng-devtools/src/lib/devtools.component.scss‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,30 @@
4242
}
4343
}
4444

45-
.text-message {
46-
@extend %heading-500;
47-
text-align: center;
48-
cursor: help;
45+
.devtools-state-screen {
46+
padding: 1rem;
47+
height: 100%;
48+
overflow-y: auto;
49+
box-sizing: border-box;
4950

50-
.info-icon {
51-
display: inline-block;
52-
font-size: 0.8em;
53-
border-radius: 50%;
54-
border: solid 2px var(--primary-contrast);
55-
cursor: pointer;
56-
width: 16px;
57-
height: 16px;
58-
font-weight: bold;
51+
mat-icon {
52+
display: block;
53+
font-size: 32px;
54+
width: 32px;
55+
height: 32px;
56+
margin-inline: auto;
57+
margin-block-start: 0.5rem;
58+
color: var(--quinary-contrast);
59+
}
60+
61+
.text-message {
62+
@extend %heading-500;
5963
text-align: center;
64+
margin: 0;
65+
66+
&[matTooltip] {
67+
cursor: help;
68+
}
6069
}
6170
}
6271

@@ -67,6 +76,15 @@
6776
margin: auto;
6877
border: 1px solid var(--quinary-contrast);
6978
border-radius: 16px;
79+
margin-top: 1rem;
80+
81+
p:first-of-type {
82+
margin-top: 0;
83+
}
84+
85+
p:last-of-type {
86+
margin-bottom: 0;
87+
}
7088

7189
code {
7290
padding: 2px;

‎devtools/projects/ng-devtools/src/lib/devtools.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
2424
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
2525
import {Frame} from './application-environment';
2626
import {BrowserStylesService} from './application-services/browser_styles_service';
27-
import {MatIconRegistry} from '@angular/material/icon';
27+
import {MatIcon, MatIconRegistry} from '@angular/material/icon';
2828
import {SUPPORTED_APIS} from './application-providers/supported_apis';
2929

3030
const DETECT_ANGULAR_ATTEMPTS = 20;
@@ -47,13 +47,13 @@ enum AngularStatus {
4747
EXISTS,
4848
}
4949

50-
const LAST_SUPPORTED_VERSION = 9;
50+
export const LAST_SUPPORTED_VERSION = 9;
5151

5252
@Component({
5353
selector: 'ng-devtools',
5454
templateUrl: './devtools.component.html',
5555
styleUrls: ['./devtools.component.scss'],
56-
imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
56+
imports: [DevToolsTabsComponent, MatIcon, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
5757
changeDetection: ChangeDetectionStrategy.OnPush,
5858
})
5959
export class DevToolsComponent implements OnDestroy {

‎devtools/projects/ng-devtools/src/lib/devtools_spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {Component} from '@angular/core';
1010
import {ComponentFixture, TestBed} from '@angular/core/testing';
1111
import {FrameManager} from './application-services/frame_manager';
12-
import {DevToolsComponent} from './devtools.component';
12+
import {DevToolsComponent, LAST_SUPPORTED_VERSION} from './devtools.component';
1313
import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
1414
import {MessageBus} from '../../../protocol';
1515
import {SETTINGS_MOCK} from './application-services/test-utils/settings_mock';
@@ -54,8 +54,8 @@ describe('DevtoolsComponent', () => {
5454
component.angularStatus.set(component.AngularStatus.EXISTS);
5555
component.angularIsInDevMode.set(false);
5656
fixture.detectChanges();
57-
expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
58-
'We detected an application built with production configuration. Angular DevTools only supports development builds.',
57+
expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
58+
'We detected an application built with a production configuration. Angular DevTools only supports development builds.',
5959
);
6060
});
6161

@@ -64,16 +64,16 @@ describe('DevtoolsComponent', () => {
6464
component.angularIsInDevMode.set(true);
6565
component.angularVersion.set('1.0.0');
6666
fixture.detectChanges();
67-
expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
68-
'Angular Devtools only supports Angular versions 12 and above',
67+
expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
68+
`Angular DevTools only supports Angular versions ${LAST_SUPPORTED_VERSION} and above`,
6969
);
7070
});
7171

7272
it('should render Angular application not detected when Angular Status is DOES_NOT_EXIST', () => {
7373
component.angularStatus.set(component.AngularStatus.DOES_NOT_EXIST);
7474
fixture.detectChanges();
7575
// expect the text to be "Angular application not detected"
76-
expect(fixture.nativeElement.querySelector('.not-detected').textContent).toContain(
76+
expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
7777
'Angular application not detected',
7878
);
7979
});

‎devtools/projects/ng-devtools/src/styles/_typography.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $font-size: 0.75rem; // 12px
1717
font-family: $font-family;
1818
font-size: 1.125rem; // 18px
1919
font-weight: 500;
20-
line-height: 1rem;
20+
line-height: 1.375rem;
2121
letter-spacing: normal;
2222
padding: 0.5rem 0.25rem;
2323
}
@@ -26,7 +26,7 @@ $font-size: 0.75rem; // 12px
2626
font-family: $font-family;
2727
font-size: 1rem; // 16px
2828
font-weight: 500;
29-
line-height: 1rem;
29+
line-height: 1.375rem;
3030
letter-spacing: normal;
3131
padding: 0.5rem 0.25rem;
3232
}

0 commit comments

Comments
 (0)