Fix console message resizing tracking

ResizeObserver was not a right approach for this since console messages
would be removed from DOM on scolling. This CL recovers the previous
logic but uses DOM events to avoid ConsoleViewMessage from directly
depending on TreeOutline.

Fixed: 461836623
Change-Id: I05c6fbae98065bf3643c4f55682bfae5f489872a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7260695
Reviewed-by: Philip Pfaffe <[email protected]>
Auto-Submit: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/console/ConsoleViewMessage.ts

@@ -982,10 +982,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const renderResult = await UI.UIUtils.Renderer.render(node);
       if (renderResult) {
         this.selectableChildren.push(renderResult);
-        const resizeObserver = new ResizeObserver(() => {
+        // FIXME: this should not be needed once ConsoleViewMessage is rendering
+        // declaratively and the tree outline auto-resizes itself.
+        renderResult.element.addEventListener('dimensionschanged', () => {
           this.messageResized({data: renderResult.element});
         });
-        resizeObserver.observe(renderResult.element);
         result.appendChild(renderResult.element);
       } else {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));

front_end/panels/elements/ElementsTreeOutlineRenderer.ts

@@ -33,7 +33,7 @@
  */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as UI from '../../ui/legacy/legacy.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
@@ -75,6 +75,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       treeOutline.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      treeOutline.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: treeOutline.element,
       forceSelect: treeOutline.forceSelect.bind(treeOutline),

front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1697,6 +1697,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       section.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      section.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    section.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: section.element,
       forceSelect: section.forceSelect.bind(section),