From da690ca84afadd7536143390f6df492eaafec9fc Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Tue, 4 Feb 2020 10:34:34 -0500 Subject: [PATCH] feat(devtools): Implement Component/Directive Search (rangle/angular-devtools#25) --- .../component-explorer.module.ts | 15 -- .../component-tree.component.css | 43 ---- .../component-tree.component.ts | 133 ---------- .../devtools-tabs.component.html | 2 +- .../devtools-tabs/devtools-tabs.component.ts | 4 +- .../lib/devtools-tabs/devtools-tabs.module.ts | 7 +- .../directive-explorer.component.css} | 0 .../directive-explorer.component.html} | 2 +- .../directive-explorer.component.ts} | 10 +- .../directive-explorer.module.ts | 17 ++ .../component-data-source.ts | 4 + .../directive-forest-utils.ts} | 0 .../directive-forest.component.css | 94 +++++++ .../directive-forest.component.html} | 21 +- .../directive-forest.component.ts | 230 ++++++++++++++++++ .../filter/filter.component.css | 36 +++ .../filter/filter.component.html | 19 ++ .../filter/filter.component.ts | 28 +++ .../directive-forest}/index-forest.spec.ts | 0 .../directive-forest}/index-forest.ts | 0 .../profiler/profile.component.css | 0 .../profiler/profile.component.html | 0 .../profiler/profiler.component.ts | 0 .../profiler/profiler.module.ts | 0 .../recording-dialog.component.css | 0 .../recording-dialog.component.html | 0 .../recording-dialog.component.ts | 0 .../recording-visualizer.component.css | 0 .../recording-visualizer.component.html | 0 .../recording-visualizer.component.ts | 0 .../recording-visualizer.module.ts | 0 .../recording/recording.component.css | 0 .../recording/recording.component.html | 0 .../profiler/recording/recording.component.ts | 0 .../recording/timeline/format-records.ts | 0 .../recording/timeline/timeline.component.css | 0 .../timeline/timeline.component.html | 0 .../recording/timeline/timeline.component.ts | 1 - .../recording/timeline/timeline.module.ts | 0 .../time-travel/time-travel-builder.spec.ts | 0 .../time-travel/time-travel-builder.ts | 0 .../time-travel/time-travel.component.css | 0 .../time-travel/time-travel.component.html | 0 .../time-travel/time-travel.component.ts | 0 .../time-travel/time-travel.module.ts | 0 .../property-view/property-data-source.ts | 0 .../property-expanded-directive-properties.ts | 0 .../property-view/property-view.component.css | 0 .../property-view.component.html | 0 .../property-view/property-view.component.ts | 0 .../property-view/property-view.module.ts | 0 .../src/lib/devtools.component.css | 28 +++ .../src/lib/devtools.component.html | 7 +- .../ng-devtools/src/lib/devtools.component.ts | 15 ++ .../ng-devtools/src/lib/devtools.module.ts | 3 +- .../ng-devtools/src/lib/images/angular.svg | 16 ++ 56 files changed, 520 insertions(+), 215 deletions(-) delete mode 100644 projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.module.ts delete mode 100644 projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.css delete mode 100644 projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.ts rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-explorer.component.css => directive-explorer/directive-explorer.component.css} (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-explorer.component.html => directive-explorer/directive-explorer.component.html} (79%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-explorer.component.ts => directive-explorer/directive-explorer.component.ts} (91%) create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-tree => directive-explorer/directive-forest}/component-data-source.ts (97%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-tree/component-tree-utils.ts => directive-explorer/directive-forest/directive-forest-utils.ts} (100%) create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-tree/component-tree.component.html => directive-explorer/directive-forest/directive-forest.component.html} (58%) create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.css create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.html create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-tree => directive-explorer/directive-forest}/index-forest.spec.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer/component-tree => directive-explorer/directive-forest}/index-forest.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/profile.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/profile.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/profiler.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/profiler.module.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-dialog/recording-dialog.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-dialog/recording-dialog.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-dialog/recording-dialog.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-visualizer/recording-visualizer.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-visualizer/recording-visualizer.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-visualizer/recording-visualizer.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording-visualizer/recording-visualizer.module.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/recording.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/timeline/format-records.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/timeline/timeline.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/timeline/timeline.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/timeline/timeline.component.ts (98%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/recording/timeline/timeline.module.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel-builder.spec.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel-builder.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/profiler/time-travel/time-travel.module.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-data-source.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-expanded-directive-properties.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-view.component.css (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-view.component.html (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-view.component.ts (100%) rename projects/ng-devtools/src/lib/devtools-tabs/{component-explorer => directive-explorer}/property-view/property-view.module.ts (100%) create mode 100644 projects/ng-devtools/src/lib/images/angular.svg diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.module.ts deleted file mode 100644 index 1b36a884a23..00000000000 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatIconModule } from '@angular/material/icon'; - -import { ComponentExplorerComponent } from './component-explorer.component'; -import { ComponentTreeComponent } from './component-tree/component-tree.component'; -import { PropertyViewModule } from './property-view/property-view.module'; -import { MatTreeModule } from '@angular/material/tree'; - -@NgModule({ - declarations: [ComponentExplorerComponent, ComponentTreeComponent], - exports: [ComponentExplorerComponent], - imports: [MatTreeModule, MatIconModule, CommonModule, PropertyViewModule], -}) -export class ComponentExplorerModule {} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.css b/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.css deleted file mode 100644 index ab5f346be52..00000000000 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.css +++ /dev/null @@ -1,43 +0,0 @@ -:host { - width: 100%; - height: 100%; - overflow: auto; -} -:host /deep/ .mat-tree-node .mat-icon { - font-size: 12px; - width: 16px; - height: 16px; -} - -:host /deep/ .mat-tree-node { - min-height: 20px !important; - cursor: default; - font-family: Menlo, monospace; - border-radius: 5px; - margin-left: 2px; -} - -:host /deep/ .mat-tree-node, -.mat-nested-tree-node { - font-size: 11px; -} - -:host /deep/ mat-tree-node > button { - outline: none; - border: 0; - background: transparent; - padding: 0; - margin-top: 3px; -} - -:host /deep/ mat-tree-node:hover { - background-color: #f3f3f3; -} - -:host /deep/ mat-tree-node.selected { - background-color: #dadada; -} - -.dir-names { - opacity: 0.4; -} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.ts deleted file mode 100644 index 47e68409d23..00000000000 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.ts +++ /dev/null @@ -1,133 +0,0 @@ -import { Component, Input, EventEmitter, HostListener, Output, ViewChild, ElementRef } from '@angular/core'; -import { Node } from 'protocol'; -import { FlatTreeControl, CdkTree } from '@angular/cdk/tree'; -import { FlatNode, ComponentDataSource } from './component-data-source'; - -import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'; -import { isChildOf, parentCollapsed } from './component-tree-utils'; - -@Component({ - selector: 'ng-component-tree', - templateUrl: './component-tree.component.html', - styleUrls: ['./component-tree.component.css'], -}) -export class ComponentTreeComponent { - @Input() set forest(forest: Node[]) { - this.dataSource.update(forest); - if (!this._initialized && forest && forest.length) { - this.treeControl.expandAll(); - this._initialized = true; - } - } - - @Output() selectNode = new EventEmitter(); - - @ViewChild(CdkTree) tree: CdkTree; - - - selectedNode: FlatNode | null = null; - treeControl = new FlatTreeControl( - node => node.level, - node => node.expandable - ); - dataSource = new ComponentDataSource(this.treeControl); - - private _initialized = false; - - hasChild = (_: number, node: FlatNode) => node.expandable; - - constructor(private _host: ElementRef) {} - - select(node: FlatNode): void { - this.selectNode.emit(node.original); - this.selectedNode = node; - - // We wait for the CD to run. - setTimeout(() => { - const el = this._host.nativeElement.querySelector('.selected'); - if (!el) { - return; - } - scrollIntoViewIfNeeded(el, { - scrollMode: 'if-needed', - block: 'nearest', - inline: 'nearest', - }); - }, 0); - } - - @HostListener('document:keydown.ArrowUp', ['$event']) - navigateUp(evnt: KeyboardEvent): void { - if (!this.selectedNode) { - return; - } - evnt.preventDefault(); - const data = this.dataSource.data; - let prevIdx = data.findIndex(e => e.id === this.selectedNode.id) - 1; - if (prevIdx < 0) { - return; - } - let prevNode = data[prevIdx]; - const currentNode = data[prevIdx + 1]; - if (prevNode.id.length <= currentNode.id.length) { - return this.select(data[prevIdx]); - } - while (prevIdx >= 0 && parentCollapsed(prevIdx, data, this.treeControl)) { - prevIdx--; - prevNode = data[prevIdx]; - } - this.select(data[prevIdx]); - } - - @HostListener('document:keydown.ArrowDown', ['$event']) - navigateDown(evnt: KeyboardEvent): void { - if (!this.selectedNode) { - return; - } - const data = this.dataSource.data; - let idx = data.findIndex(e => e.id === this.selectedNode.id); - const currentNode = data[idx]; - if (!this.treeControl.isExpanded(currentNode) && currentNode.expandable) { - for (let i = idx + 1; i < data.length; i++) { - const node = data[i]; - if (!isChildOf(node.id, currentNode.id)) { - idx = i; - break; - } - } - } else { - idx++; - } - if (idx >= data.length) { - return; - } - this.select(data[idx]); - evnt.preventDefault(); - } - - @HostListener('document:keydown.ArrowLeft', ['$event']) - collapseCurrent(evnt: KeyboardEvent): void { - if (!this.selectedNode) { - return; - } - this.treeControl.collapse(this.selectedNode); - evnt.preventDefault(); - } - - @HostListener('document:keydown.ArrowRight', ['$event']) - expandCurrent(evnt: KeyboardEvent): void { - if (!this.selectedNode) { - return; - } - this.treeControl.expand(this.selectedNode); - evnt.preventDefault(); - } - - isSelected(node: FlatNode): boolean { - if (!this.selectedNode) { - return false; - } - return this.selectedNode.id.join(',') === node.id.join(','); - } -} - diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html index 2033a2f2935..8587dd22a1e 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html +++ b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html @@ -1,6 +1,6 @@ - + diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts index 49d88fea5b7..911fc4864b2 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts @@ -1,7 +1,7 @@ import { Component, Input, ViewChild } from '@angular/core'; import { Events, MessageBus } from 'protocol'; import { MatTabGroup } from '@angular/material/tabs'; -import { ComponentExplorerComponent } from './component-explorer/component-explorer.component'; +import { DirectiveExplorerComponent } from './directive-explorer/directive-explorer.component'; @Component({ selector: 'ng-devtools-tabs', @@ -12,7 +12,7 @@ export class DevToolsTabsComponent { @Input() messageBus: MessageBus; @Input() angularVersion: string | undefined = undefined; @ViewChild(MatTabGroup) tabGroup: MatTabGroup; - @ViewChild(ComponentExplorerComponent) componentExplorer: ComponentExplorerComponent; + @ViewChild(DirectiveExplorerComponent) componentExplorer: DirectiveExplorerComponent; inspectorRunning = false; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts index 98041f1f8d6..7cd833d808f 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts @@ -1,15 +1,14 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - import { DevToolsTabsComponent } from './devtools-tabs.component'; import { MatTabsModule } from '@angular/material/tabs'; -import { ComponentExplorerModule } from './component-explorer/component-explorer.module'; -import { ProfilerModule } from './component-explorer/profiler/profiler.module'; +import { DirectiveExplorerModule } from './directive-explorer/directive-explorer.module'; +import { ProfilerModule } from './directive-explorer/profiler/profiler.module'; @NgModule({ declarations: [DevToolsTabsComponent], - imports: [MatTabsModule, ComponentExplorerModule, ProfilerModule, CommonModule], + imports: [MatTabsModule, DirectiveExplorerModule, ProfilerModule, CommonModule], exports: [DevToolsTabsComponent] }) export class DevToolsTabModule {} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html similarity index 79% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html index b16d58080e9..57eef5e227c 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.html +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html @@ -1,4 +1,4 @@ - +
Properties of {{ data.key }}
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts similarity index 91% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts index aab9dc2e8e3..8b8baee9dcc 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-explorer.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts @@ -8,15 +8,15 @@ import { ComponentExplorerViewQuery, ComponentExplorerView, ComponentExplorerViewProperties, } from 'protocol'; -import { IndexedNode } from './component-tree/index-forest'; +import { IndexedNode } from './directive-forest/index-forest'; import { PropertyViewComponent } from './property-view/property-view.component'; @Component({ - selector: 'ng-component-explorer', - templateUrl: './component-explorer.component.html', - styleUrls: ['./component-explorer.component.css'], + selector: 'ng-directive-explorer', + templateUrl: './directive-explorer.component.html', + styleUrls: ['./directive-explorer.component.css'], }) -export class ComponentExplorerComponent implements OnInit { +export class DirectiveExplorerComponent implements OnInit { @Input() messageBus: MessageBus; @ViewChildren(PropertyViewComponent) propertyViews: QueryList; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts new file mode 100644 index 00000000000..caed050ec4c --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; + +import { DirectiveExplorerComponent } from './directive-explorer.component'; +import { DirectiveForestComponent } from './directive-forest/directive-forest.component'; +import { FilterComponent } from './directive-forest/filter/filter.component'; +import { PropertyViewModule } from './property-view/property-view.module'; +import { MatTreeModule } from '@angular/material/tree'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [DirectiveExplorerComponent, DirectiveForestComponent, FilterComponent], + exports: [DirectiveExplorerComponent], + imports: [MatTreeModule, MatIconModule, CommonModule, PropertyViewModule, MatButtonModule], +}) +export class DirectiveExplorerModule {} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts similarity index 97% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-data-source.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts index b2f7d165dac..63e323e308a 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-data-source.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts @@ -65,6 +65,10 @@ export class ComponentDataSource extends DataSource { return this._data; } + get expandedDataValues() { + return this._expandedData.value; + } + update(forest: Node[]): void { if (!forest) { return; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree-utils.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree-utils.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css new file mode 100644 index 00000000000..ea4f289bf04 --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css @@ -0,0 +1,94 @@ +:host { + width: 100%; + height: 100%; + overflow: auto; +} +:host /deep/ .mat-tree-node .mat-icon { + font-size: 12px; + width: 16px; + height: 16px; +} + +:host /deep/ .mat-tree-node { + min-height: 20px !important; + cursor: default; + font-family: Menlo, monospace; + border-radius: 5px; + margin-left: 2px; +} + +:host /deep/ .mat-tree-node, +.mat-nested-tree-node { + font-size: 11px; +} + +:host /deep/ mat-tree-node > button { + outline: none; + border: 0; + background: transparent; + padding: 0; + margin-top: 3px; +} + +:host /deep/ mat-tree-node:hover { + background-color: #f3f3f3; +} + +:host /deep/ mat-tree-node.selected { + background-color: #dadada; +} + +:host /deep/ mat-tree-node.matched { + background-color: #b298e4; + color: #fff; +} + +:host /deep/ mat-tree-node.matched:hover { + background-color: #8463be; +} + +:host /deep/ mat-tree-node.matched.selected { + background-color: #6f56bb; + color: #fcd736; +} + +:host /deep/ mat-tree-node.matched .dir-names { + opacity: 0.8; +} + +:host /deep/ mat-tree-node { + transition: background-color 100ms; +} + +.dir-names { + opacity: 0.4; +} + +.filter { + display: flex +} + +.filter .icon { + width: 20px; + height: 20px; + margin: auto 12px; + opacity: 0.7; +} + +.filter .filter-input { + border: none; + background: rgba(0, 0, 0, 0.003); + box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); + width: 100%; + font-size: 20px; + font-family: inherit; + font-weight: inherit; + color: inherit; + line-height: 1.4em; + padding: 12px 6px; +} + +.up-down-buttons { + width: 20%; + display: flex; +} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html similarity index 58% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html index 0817e81e3d9..6b6b2cc38dd 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/component-tree.component.html +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html @@ -1,23 +1,32 @@ + + - + {{ node.name }} [{{ node.directives }}] - + +
+
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts new file mode 100644 index 00000000000..76e4865e201 --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts @@ -0,0 +1,28 @@ +import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; + +@Component({ + selector: 'ng-filter', + templateUrl: './filter.component.html', + styleUrls: ['./filter.component.css'] +}) +export class FilterComponent { + @Output() filter: EventEmitter = new EventEmitter(); + @Output() nextMatched: EventEmitter = new EventEmitter(); + @Output() prevMatched: EventEmitter = new EventEmitter(); + + @Input() hasMatched = false; + + @ViewChild('filterInput') filterElement: ElementRef; + + emitFilter(event: InputEvent) { + this.filter.emit((event.target as HTMLInputElement).value); + } + + emitNextMatched() { + this.nextMatched.emit(); + } + + emitPrevMatched() { + this.prevMatched.emit(); + } +} diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/index-forest.spec.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest.spec.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/index-forest.spec.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest.spec.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/index-forest.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/component-tree/index-forest.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profile.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profile.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profile.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profile.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profile.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profile.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profile.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profile.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profiler.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profiler.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profiler.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profiler.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profiler.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profiler.module.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/profiler.module.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/profiler.module.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-dialog/recording-dialog.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-dialog/recording-dialog.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.module.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording-visualizer/recording-visualizer.module.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording-visualizer/recording-visualizer.module.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/recording.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/recording.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/format-records.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/format-records.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts similarity index 98% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts index 2cfc5fa6654..30a0344eb1c 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts @@ -28,7 +28,6 @@ export class TimelineComponent { currentView = 1; get recordsView(): AppEntry { - console.log('hit'); if (this.view === 'timeline') { // null coalesce to aggregated if no data was recorded since aggregated will be empty, whereas // timeline will not even exist diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.module.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/recording/timeline/timeline.module.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.module.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel-builder.spec.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel-builder.spec.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel-builder.spec.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel-builder.spec.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel-builder.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel-builder.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel-builder.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel-builder.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.module.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/profiler/time-travel/time-travel.module.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/time-travel/time-travel.module.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-data-source.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-data-source.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-data-source.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-data-source.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-expanded-directive-properties.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-expanded-directive-properties.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-expanded-directive-properties.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-expanded-directive-properties.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.css similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.css rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.css diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.component.ts diff --git a/projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.module.ts similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/component-explorer/property-view/property-view.module.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-view/property-view.module.ts diff --git a/projects/ng-devtools/src/lib/devtools.component.css b/projects/ng-devtools/src/lib/devtools.component.css index ea8f9fe7d94..2d9d79fec3d 100644 --- a/projects/ng-devtools/src/lib/devtools.component.css +++ b/projects/ng-devtools/src/lib/devtools.component.css @@ -6,3 +6,31 @@ .noselect { user-select: none; } + +.initializing { + margin: auto; + width: 125px; + height: 100%; + display: flex; + align-items: center; +} + +.initializing .loading { + background: url("./images/angular.svg"); + border-radius: 50%; + width: 125px; + height: 125px; + float: left; + text-align: center; + animation: pulse 1s infinite; +} + +@keyframes pulse +{ + 0% { + box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); + } + 100% { + box-shadow: 0 0 0 35px rgba(0, 0, 0, 0); + } +} diff --git a/projects/ng-devtools/src/lib/devtools.component.html b/projects/ng-devtools/src/lib/devtools.component.html index a0c1d3d5a99..91b8a795edb 100644 --- a/projects/ng-devtools/src/lib/devtools.component.html +++ b/projects/ng-devtools/src/lib/devtools.component.html @@ -1,5 +1,5 @@ -
+
@@ -10,8 +10,9 @@
-
- Initializing... +
+
+
diff --git a/projects/ng-devtools/src/lib/devtools.component.ts b/projects/ng-devtools/src/lib/devtools.component.ts index 95abb23822f..34b9ff1fdc6 100644 --- a/projects/ng-devtools/src/lib/devtools.component.ts +++ b/projects/ng-devtools/src/lib/devtools.component.ts @@ -1,11 +1,26 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core'; import { MessageBus, Events } from 'protocol'; import { interval } from 'rxjs'; +import { animate, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'ng-devtools', templateUrl: './devtools.component.html', styleUrls: ['./devtools.component.css'], + animations: [ + trigger( + 'enterAnimation', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('200ms', style({ opacity: 1 })) + ]), + transition(':leave', [ + style({ opacity: 1 }), + animate('200ms', style({ opacity: 0 })) + ]) + ] + ) + ] }) export class DevToolsComponent implements OnInit, OnDestroy { angularExists: boolean | null = null; diff --git a/projects/ng-devtools/src/lib/devtools.module.ts b/projects/ng-devtools/src/lib/devtools.module.ts index 68bce24e007..5fe8b00c7c4 100644 --- a/projects/ng-devtools/src/lib/devtools.module.ts +++ b/projects/ng-devtools/src/lib/devtools.module.ts @@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common'; import { DevToolsComponent } from './devtools.component'; import { DevToolsTabModule } from './devtools-tabs/devtools-tabs.module'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; @NgModule({ declarations: [DevToolsComponent], - imports: [CommonModule, DevToolsTabModule], + imports: [CommonModule, DevToolsTabModule, MatProgressSpinnerModule], exports: [DevToolsComponent], }) export class DevToolsModule {} diff --git a/projects/ng-devtools/src/lib/images/angular.svg b/projects/ng-devtools/src/lib/images/angular.svg new file mode 100644 index 00000000000..bf081acb129 --- /dev/null +++ b/projects/ng-devtools/src/lib/images/angular.svg @@ -0,0 +1,16 @@ + + + + + + + + + +