refactor(devtools): make devtools resizing in the demo app easier (angular#64307)

Set `pointer-events` of the `iframe` to `none` while dragging. This should stop the events context interference and make resizing of the panel easier.

PR Close angular#64307

Author: hawkgs

devtools/src/app/devtools-app/devtools-app.component.html

@@ -1,6 +1,18 @@
-<as-split unit="percent" [direction]="'vertical'" [gutterSize]="9">
+<as-split
+  unit="percent"
+  [direction]="'vertical'"
+  [gutterSize]="9"
+  (dragStart)="resizingDevtools.set(true)"
+  (dragEnd)="resizingDevtools.set(false)"
+>
   <as-split-area size="40">
-    <iframe #ref src="demo-app/todos/app" id="sample-app" title="todos-app"></iframe>
+    <iframe
+      #ref
+      src="demo-app/todos/app"
+      id="sample-app"
+      title="todos-app"
+      [style.pointer-events]="resizingDevtools() ? 'none' : 'auto'"
+    ></iframe>
   </as-split-area>
   <as-split-area size="60">
     <div class="devtools-wrapper">

devtools/src/app/devtools-app/devtools-app.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, ElementRef, viewChild} from '@angular/core';
+import {Component, ElementRef, signal, viewChild} from '@angular/core';
 
 import {IFrameMessageBus} from '../../iframe-message-bus';
 import {DevToolsComponent} from '../../../projects/ng-devtools';
@@ -21,4 +21,5 @@ import {SplitComponent} from '../../../projects/ng-devtools/src/lib/shared/split
 export class AppDevToolsComponent {
   messageBus: IFrameMessageBus | null = null;
   readonly iframe = viewChild<ElementRef>('ref');
+  readonly resizingDevtools = signal(false);
 }