Add update scheduling support to widgets

This CL adds support for RenderCoordinator to widgets. This is done by adding a new `update()` method to the `Widget` class that schedules a write job with the RenderCoordinator. The `update()` method returns a promise that resolves when the update is complete.

This CL also updates all of the legacy widgets that extend the `Widget` class to use the new `update()` method. This ensures that all of the legacy widgets are using the RenderCoordinator to schedule their updates.

This CL is part of a larger effort to improve the performance of the DevTools. By using the RenderCoordinator, we can ensure that the legacy widgets are only updated when they are visible on the screen. This can significantly improve the performance of the DevTools, especially for large and complex pages.

Bug: 301364727
Change-Id: I3b638aadf169a37a0328cfe16e3c462a709bc0da
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6021958
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/models/persistence/EditFileSystemView.ts

@@ -128,7 +128,7 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
     return IsolatedFileSystemManager.instance().fileSystem(this.fileSystemPath) as PlatformFileSystem;
   }
 
-  private update(): void {
+  override update(): void {
     if (this.muteUpdate) {
       return;
     }

front_end/panels/application/IndexedDBViews.ts

@@ -473,7 +473,10 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(true);
   }
 
-  update(objectStore: ObjectStore, index: Index|null): void {
+  override update(objectStore: ObjectStore|null = null, index: Index|null = null): void {
+    if (!objectStore) {
+      return;
+    }
     this.objectStore = objectStore;
     this.index = index;
 

front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -285,7 +285,10 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     node.remove();
   }
 
-  update(cache: SDK.ServiceWorkerCacheModel.Cache): void {
+  override update(cache: SDK.ServiceWorkerCacheModel.Cache|null = null): void {
+    if (!cache) {
+      return;
+    }
     this.cache = cache;
     this.resetDataGrid();
     void this.updateData(true);

front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -249,7 +249,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return null;
   }
 
-  private update(): void {
+  override update(): void {
     const target = UI.Context.Context.instance().flavor(SDK.Target.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;

front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -349,7 +349,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (this.#highlightedBreakpoint) {
       const oldHighlightedBreakpoint = this.#highlightedBreakpoint;

front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -372,7 +372,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const isEmpty = this.#breakpoints.length === 0;
     this.#list.element.classList.toggle('hidden', isEmpty);
     this.#emptyElement.classList.toggle('hidden', !isEmpty);

front_end/panels/coverage/CoverageListView.ts

@@ -195,7 +195,7 @@ export class CoverageListView extends UI.Widget.VBox {
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: URLCoverageInfo[]): void {
+  override update(coverageInfo: URLCoverageInfo[] = []): void {
     let hadUpdates = false;
     const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
     const rootNode = this.dataGrid.rootNode();

front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -145,7 +145,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     }
   }
 
-  update(items: Iterable<SDK.PageResourceLoader.PageResource>): void {
+  override update(items: Iterable<SDK.PageResourceLoader.PageResource> = []): void {
     let hadUpdates = false;
     const rootNode = this.dataGrid.rootNode();
     for (const item of items) {

front_end/panels/elements/ClassesPaneWidget.ts

@@ -157,7 +157,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([classesPaneWidgetStyles]);
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       return;
     }

front_end/panels/elements/ElementStatePaneWidget.ts

@@ -262,7 +262,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([elementStatePaneWidgetStyles]);
     this.update();
   }
-  private update(): void {
+  override update(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();