feat(devtools): create an info snackbar when a user logs a property

Previously there is no feedback when clicking this button in Angular DevTools itself, which can produce some confusion if the user does not have the browser console open as well, or if they accidentally turned on some filtering in the browser console.

Now Angular Devtools uses mat snack bar to inform the user that the task was successful

Author: AleksanderBodurri

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts

@@ -19,6 +19,7 @@ import {
 import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 
 import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../../protocol';
 import {
@@ -41,13 +42,15 @@ import {FlatNode} from '../../../../../shared/object-tree-explorer/object-tree-t
     MatIcon,
     MatTooltip,
     MatExpansionModule,
+    MatSnackBarModule,
     DocsRefButtonComponent,
     DependencyViewerComponent,
     ObjectTreeExplorerComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PropertyViewBodyComponent {
+  private readonly _snackBar = inject(MatSnackBar);
   private readonly signalGraph = inject(SignalGraphManager);
   protected readonly supportedApis = inject(SUPPORTED_APIS);
 
@@ -104,6 +107,9 @@ export class PropertyViewBodyComponent {
   logValue(e: Event, node: FlatNode): void {
     e.stopPropagation();
     this.controller().logValue(node);
+    this._snackBar.open(`Logged value of '${node.prop.name}' to the console`, 'Dismiss', {
+      duration: 2000,
+    });
   }
 
   handleInspect(node: FlatNode): void {