Record non-DOM loggable sizes

Bug: 406819817
Change-Id: I59d14c9ac8ac9ad072e14b238f80298cd0ed7d82
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6406317
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -496,7 +496,8 @@ export class AXBreadcrumb {
     if (!this.axNodeInternal.ignored() && this.axNodeInternal.hasOnlyUnloadedChildren()) {
       this.nodeElementInternal.classList.add('children-unloaded');
       UI.ARIAUtils.setExpanded(this.nodeElementInternal, false);
-      VisualLogging.registerLoggable(this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal);
+      VisualLogging.registerLoggable(
+          this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal, new DOMRect(0, 0, 16, 16));
     }
 
     if (!this.axNodeInternal.isDOMNode()) {
@@ -518,7 +519,8 @@ export class AXBreadcrumb {
     this.nodeElementInternal.classList.add('parent');
     UI.ARIAUtils.setExpanded(this.nodeElementInternal, true);
     this.childrenGroupElement.appendChild(breadcrumb.element());
-    VisualLogging.registerLoggable(this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal);
+    VisualLogging.registerLoggable(
+        this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal, new DOMRect(0, 0, 16, 16));
   }
 
   hasExpandedChildren(): number {

front_end/panels/sources/SourcesPanel.ts

@@ -506,13 +506,14 @@ export class SourcesPanel extends UI.Panel.Panel implements
     if (withOverlay && !this.overlayLoggables) {
       this.overlayLoggables = {debuggerPausedMessage: {}, resumeButton: {}, stepOverButton: {}};
       VisualLogging.registerLoggable(
-          this.overlayLoggables.debuggerPausedMessage, `${VisualLogging.dialog('debugger-paused')}`, null);
+          this.overlayLoggables.debuggerPausedMessage, `${VisualLogging.dialog('debugger-paused')}`, null,
+          new DOMRect(0, 0, 200, 20));
       VisualLogging.registerLoggable(
           this.overlayLoggables.resumeButton, `${VisualLogging.action('debugger.toggle-pause')}`,
-          this.overlayLoggables.debuggerPausedMessage);
+          this.overlayLoggables.debuggerPausedMessage, new DOMRect(0, 0, 20, 20));
       VisualLogging.registerLoggable(
           this.overlayLoggables.stepOverButton, `${VisualLogging.action('debugger.step-over')}`,
-          this.overlayLoggables.debuggerPausedMessage);
+          this.overlayLoggables.debuggerPausedMessage, new DOMRect(0, 0, 20, 20));
     }
     this.#lastPausedTarget = new WeakRef(details.debuggerModel.target());
   }

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1285,7 +1285,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         // This is the first time this group has been created, so register its loggable.
         this.#loggableForGroupByLogContext.set(group.jslogContext, loggable);
         VisualLogging.registerLoggable(
-            loggable, `${VisualLogging.section().context(`timeline.${group.jslogContext}`)}`, this.delegate.element);
+            loggable, `${VisualLogging.section().context(`timeline.${group.jslogContext}`)}`, this.delegate.element,
+            new DOMRect(0, 0, 200, 100));
       }
     }
   }

front_end/ui/legacy/ContextMenu.test.ts

@@ -120,9 +120,9 @@ describeWithEnvironment('ContextMenu', () => {
     const menuId = impressions.find(i => !i.parent)?.id;
     assert.exists(menuId);
     assert.sameDeepMembers(impressions.map(i => ({...i, id: 0})), [
-      {id: 0, type: 67, height: 0, width: 0},
-      {id: 0, type: 29, parent: menuId, context: 42, height: 0, width: 0},
-      {id: 0, type: 29, parent: menuId, context: 44, height: 0, width: 0},
+      {id: 0, type: 67, height: 40, width: 200},
+      {id: 0, type: 29, parent: menuId, context: 42, height: 20, width: 200},
+      {id: 0, type: 29, parent: menuId, context: 44, height: 20, width: 200},
     ]);
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.dispatchEventToListeners(

front_end/ui/legacy/ContextMenu.ts

@@ -426,6 +426,9 @@ export interface ContextMenuOptions {
   y?: number;
 }
 
+const MENU_ITEM_HEIGHT_FOR_LOGGING = 20;
+const MENU_ITEM_WIDTH_FOR_LOGGING = 200;
+
 export class ContextMenu extends SubMenu {
   protected override contextMenu: this;
   private pendingTargets: unknown[];
@@ -545,14 +548,15 @@ export class ContextMenu extends SubMenu {
         if (descriptor.type === 'checkbox') {
           VisualLogging.registerLoggable(
               descriptor, `${VisualLogging.toggle().track({click: true}).context(descriptor.jslogContext)}`,
-              parent || descriptors);
+              parent || descriptors, new DOMRect(0, 0, MENU_ITEM_WIDTH_FOR_LOGGING, MENU_ITEM_HEIGHT_FOR_LOGGING));
         } else if (descriptor.type === 'item') {
           VisualLogging.registerLoggable(
               descriptor, `${VisualLogging.action().track({click: true}).context(descriptor.jslogContext)}`,
-              parent || descriptors);
+              parent || descriptors, new DOMRect(0, 0, MENU_ITEM_WIDTH_FOR_LOGGING, MENU_ITEM_HEIGHT_FOR_LOGGING));
         } else if (descriptor.type === 'subMenu') {
           VisualLogging.registerLoggable(
-              descriptor, `${VisualLogging.item().context(descriptor.jslogContext)}`, parent || descriptors);
+              descriptor, `${VisualLogging.item().context(descriptor.jslogContext)}`, parent || descriptors,
+              new DOMRect(0, 0, MENU_ITEM_WIDTH_FOR_LOGGING, MENU_ITEM_HEIGHT_FOR_LOGGING));
         }
         if (descriptor.subItems) {
           this.registerLoggablesWithin(descriptor.subItems, descriptor);
@@ -592,7 +596,9 @@ export class ContextMenu extends SubMenu {
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
             Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, this.onItemSelected, this);
       }
-      VisualLogging.registerLoggable(menuObject, `${VisualLogging.menu()}`, this.loggableParent);
+      VisualLogging.registerLoggable(
+          menuObject, `${VisualLogging.menu()}`, this.loggableParent,
+          new DOMRect(0, 0, MENU_ITEM_WIDTH_FOR_LOGGING, MENU_ITEM_HEIGHT_FOR_LOGGING * menuObject.length));
       this.registerLoggablesWithin(menuObject);
       this.openHostedMenu = menuObject;
       // showContextMenuAtPoint call above synchronously issues a clear event for previous context menu (if any),

front_end/ui/legacy/Treeoutline.ts

@@ -843,7 +843,8 @@ export class TreeElement {
       this.collapse();
       ARIAUtils.unsetExpandable(this.listItemNode);
     } else {
-      VisualLogging.registerLoggable(this.expandLoggable, `${VisualLogging.expand()}`, this.listItemNode);
+      VisualLogging.registerLoggable(
+          this.expandLoggable, `${VisualLogging.expand()}`, this.listItemNode, new DOMRect(0, 0, 16, 16));
       ARIAUtils.setExpanded(this.listItemNode, false);
     }
   }

front_end/ui/visual_logging/LoggingDriver.test.ts

@@ -1034,6 +1034,6 @@ describe('LoggingDriver', () => {
     ]);
     assert.deepInclude(
         VisualLoggingTesting.NonDomState.getNonDomLoggables(parent),
-        {loggable, config: {ve: 1, context: '123'}, parent});
+        {loggable, config: {ve: 1, context: '123'}, parent, size: undefined});
   });
 });

front_end/ui/visual_logging/LoggingDriver.ts

@@ -263,8 +263,11 @@ async function process(): Promise<void> {
   }
   for (let i = 0; i < nonDomRoots.length; ++i) {
     const root = nonDomRoots[i];
-    for (const {loggable, config, parent} of getNonDomLoggables(root)) {
+    for (const {loggable, config, parent, size} of getNonDomLoggables(root)) {
       const loggingState = getOrCreateLoggingState(loggable, config, parent);
+      if (size) {
+        loggingState.size = size;
+      }
       processForDebugging(loggable);
       visibleLoggables.push(loggable);
       loggingState.impressionLogged = true;

front_end/ui/visual_logging/NonDomState.test.ts

@@ -8,21 +8,22 @@ describe('NonDomState', () => {
   it('registers, unregisters and returns loggables', () => {
     const parent = {};
     const child = {};
+    const size = new DOMRect(0, 0, 100, 100);
     VisualLogging.NonDomState.registerLoggable(parent, {ve: 1, context: '1'});
-    VisualLogging.NonDomState.registerLoggable(child, {ve: 1, context: '2'}, parent);
+    VisualLogging.NonDomState.registerLoggable(child, {ve: 1, context: '2'}, parent, size);
 
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(), [
-      {loggable: parent, config: {ve: 1, context: '1'}, parent: undefined},
+      {loggable: parent, config: {ve: 1, context: '1'}, parent: undefined, size: undefined},
     ]);
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(parent), [
-      {loggable: child, config: {ve: 1, context: '2'}, parent},
+      {loggable: child, config: {ve: 1, context: '2'}, parent, size},
     ]);
 
     VisualLogging.NonDomState.unregisterLoggables(parent);
 
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(parent), []);
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(), [
-      {loggable: parent, config: {ve: 1, context: '1'}, parent: undefined},
+      {loggable: parent, config: {ve: 1, context: '1'}, parent: undefined, size: undefined},
     ]);
     VisualLogging.NonDomState.unregisterLoggables();
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(), []);
@@ -36,7 +37,7 @@ describe('NonDomState', () => {
     loggables.pop();
 
     assert.sameDeepMembers(VisualLogging.NonDomState.getNonDomLoggables(), [
-      {loggable, config: {ve: 1, context: '1'}, parent: undefined},
+      {loggable, config: {ve: 1, context: '1'}, parent: undefined, size: undefined},
     ]);
     VisualLogging.NonDomState.unregisterLoggables();
   });

front_end/ui/visual_logging/NonDomState.ts

@@ -8,6 +8,7 @@ interface LoggableRegistration {
   loggable: Loggable;
   config: LoggingConfig;
   parent?: Loggable;
+  size?: DOMRect;
 }
 
 let registry = new WeakMap<Loggable, LoggableRegistration[]>();
@@ -16,9 +17,9 @@ function getLoggables(parent?: Loggable): LoggableRegistration[] {
   return registry.get(parent || nullParent) || [];
 }
 
-export function registerLoggable(loggable: Loggable, config: LoggingConfig, parent?: Loggable): void {
+export function registerLoggable(loggable: Loggable, config: LoggingConfig, parent?: Loggable, size?: DOMRect): void {
   const values = getLoggables(parent);
-  values.push({loggable, config, parent});
+  values.push({loggable, config, parent, size});
   registry.set(parent || nullParent, values);
 }