From dbd66ec46b9f0f55d4d9889054c546d9c4e1de9b Mon Sep 17 00:00:00 2001 From: Milo Date: Mon, 12 May 2025 17:21:27 +0000 Subject: [PATCH] refactor(devtools): switch default font to material symbols (#61281) update from Material Icons to Material Symbols, and use the local font copy instead of Google fonts to avoid version mismatches PR Close #61281 --- .../projects/demo-standalone/src/BUILD.bazel | 1 + .../demo-standalone/src/assets/BUILD.bazel | 9 +++++++ .../projects/demo-standalone/src/index.html | 5 +++- .../ng-devtools/src/lib/devtools.component.ts | 20 +++++++------- .../shell-browser/src/assets/BUILD.bazel | 4 +-- .../projects/shell-browser/src/index.html | 2 +- .../shell-browser/src/popups/not-angular.html | 6 ++--- .../shell-browser/src/popups/production.html | 6 ++--- .../shell-browser/src/popups/supported.html | 8 +++--- .../shell-browser/src/popups/unsupported.html | 8 +++--- devtools/src/BUILD.bazel | 1 + devtools/src/assets/BUILD.bazel | 9 +++++++ devtools/src/index.html | 5 +++- .../material-symbols-outlined/BUILD.bazel | 19 +++++++++++++ .../material-symbols-outlined}/LICENSE | 0 .../material-symbols-outlined/LOCAL_MODS.md | 1 + .../material-symbols-outlined.woff2 | Bin 0 -> 334064 bytes .../material-symbols-outlined/outlined.css} | 25 +++++++----------- .../google/material-design-icons/BUILD.bazel | 19 ------------- .../material-design-icons/LOCAL_MODS.md | 1 - .../MaterialIcons-Regular.ttf | Bin 345516 -> 0 bytes 21 files changed, 84 insertions(+), 65 deletions(-) create mode 100644 devtools/projects/demo-standalone/src/assets/BUILD.bazel create mode 100644 devtools/src/assets/BUILD.bazel create mode 100644 third_party/fonts.google.com/material-symbols-outlined/BUILD.bazel rename third_party/{github.com/google/material-design-icons => fonts.google.com/material-symbols-outlined}/LICENSE (100%) create mode 100644 third_party/fonts.google.com/material-symbols-outlined/LOCAL_MODS.md create mode 100644 third_party/fonts.google.com/material-symbols-outlined/material-symbols-outlined.woff2 rename third_party/{github.com/google/material-design-icons/material-icons.css => fonts.google.com/material-symbols-outlined/outlined.css} (55%) delete mode 100644 third_party/github.com/google/material-design-icons/BUILD.bazel delete mode 100644 third_party/github.com/google/material-design-icons/LOCAL_MODS.md delete mode 100644 third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf diff --git a/devtools/projects/demo-standalone/src/BUILD.bazel b/devtools/projects/demo-standalone/src/BUILD.bazel index 1f991e6e911..68cf32ace19 100644 --- a/devtools/projects/demo-standalone/src/BUILD.bazel +++ b/devtools/projects/demo-standalone/src/BUILD.bazel @@ -62,6 +62,7 @@ filegroup( ":browser_specific_styles", ":demo_styles", ":index.html", + "//devtools/projects/demo-standalone/src/assets", "//packages/zone.js/bundles:zone.umd.js", ], ) diff --git a/devtools/projects/demo-standalone/src/assets/BUILD.bazel b/devtools/projects/demo-standalone/src/assets/BUILD.bazel new file mode 100644 index 00000000000..2168887f51e --- /dev/null +++ b/devtools/projects/demo-standalone/src/assets/BUILD.bazel @@ -0,0 +1,9 @@ +package(default_visibility = ["//:__subpackages__"]) + +filegroup( + name = "assets", + srcs = [ + "//third_party/fonts.google.com/material-symbols-outlined", + "//third_party/fonts.google.com/material-symbols-outlined:LICENSE", + ], +) diff --git a/devtools/projects/demo-standalone/src/index.html b/devtools/projects/demo-standalone/src/index.html index f84db818ce0..958e2f5ac35 100644 --- a/devtools/projects/demo-standalone/src/index.html +++ b/devtools/projects/demo-standalone/src/index.html @@ -6,7 +6,10 @@ - + diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts index e4bc309270e..731698ff650 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts @@ -20,6 +20,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {Frame} from './application-environment'; import {BrowserStylesService} from './application-services/browser_styles_service'; import {WINDOW_PROVIDER} from './application-providers/window_provider'; +import {MatIconRegistry} from '@angular/material/icon'; const DETECT_ANGULAR_ATTEMPTS = 10; @@ -56,7 +57,7 @@ const LAST_SUPPORTED_VERSION = 9; imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule], providers: [WINDOW_PROVIDER, ThemeService], }) -export class DevToolsComponent implements OnInit, OnDestroy { +export class DevToolsComponent implements OnDestroy { readonly AngularStatus = AngularStatus; readonly angularStatus = signal(AngularStatus.UNKNOWN); readonly angularVersion = signal(undefined); @@ -77,9 +78,7 @@ export class DevToolsComponent implements OnInit, OnDestroy { }); private readonly _messageBus = inject>(MessageBus); - private readonly _themeService = inject(ThemeService); private readonly _frameManager = inject(FrameManager); - private readonly _browserStyles = inject(BrowserStylesService); private _interval$ = interval(500).subscribe((attempt) => { if (attempt === DETECT_ANGULAR_ATTEMPTS) { @@ -88,13 +87,10 @@ export class DevToolsComponent implements OnInit, OnDestroy { this._messageBus.emit('queryNgAvailability'); }); - inspectFrame(frame: Frame) { - this._frameManager.inspectFrame(frame); - } - - ngOnInit(): void { - this._themeService.initializeThemeWatcher(); - this._browserStyles.initBrowserSpecificStyles(); + constructor() { + inject(ThemeService).initializeThemeWatcher(); + inject(BrowserStylesService).initBrowserSpecificStyles(); + inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-outlined'); this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration}) => { this.angularStatus.set(version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST); @@ -106,6 +102,10 @@ export class DevToolsComponent implements OnInit, OnDestroy { }); } + inspectFrame(frame: Frame) { + this._frameManager.inspectFrame(frame); + } + ngOnDestroy(): void { this._interval$.unsubscribe(); } diff --git a/devtools/projects/shell-browser/src/assets/BUILD.bazel b/devtools/projects/shell-browser/src/assets/BUILD.bazel index 1402a23dcd9..d7ac87d0f91 100644 --- a/devtools/projects/shell-browser/src/assets/BUILD.bazel +++ b/devtools/projects/shell-browser/src/assets/BUILD.bazel @@ -7,7 +7,7 @@ filegroup( "**/*.png", "*.css", ]) + [ - "//third_party/github.com/google/material-design-icons", - "//third_party/github.com/google/material-design-icons:LICENSE", + "//third_party/fonts.google.com/material-symbols-outlined", + "//third_party/fonts.google.com/material-symbols-outlined:LICENSE", ], ) diff --git a/devtools/projects/shell-browser/src/index.html b/devtools/projects/shell-browser/src/index.html index 51643ce57b1..41f90405c1c 100644 --- a/devtools/projects/shell-browser/src/index.html +++ b/devtools/projects/shell-browser/src/index.html @@ -8,7 +8,7 @@ diff --git a/devtools/projects/shell-browser/src/popups/not-angular.html b/devtools/projects/shell-browser/src/popups/not-angular.html index a83828a1b55..f38821cae80 100644 --- a/devtools/projects/shell-browser/src/popups/not-angular.html +++ b/devtools/projects/shell-browser/src/popups/not-angular.html @@ -1,7 +1,7 @@