chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -117,22 +117,22 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
+export class DeveloperResourcesView extends UI.Widget.VBox {
   readonly #loader: SDK.PageResourceLoader.PageResourceLoader;
   readonly #view: View;
   #selectedItem: SDK.PageResourceLoader.PageResource|null = null;
   #filters: TextUtils.TextUtils.ParsedFilter[] = [];
 
   constructor(view: View = DEFAULT_VIEW) {
-    super(true);
+    super({useShadowDom: true});
     this.#view = view;
 
     this.#loader = SDK.PageResourceLoader.PageResourceLoader.instance();
-    this.#loader.addEventListener(SDK.PageResourceLoader.Events.UPDATE, this.update, this);
-    this.update();
+    this.#loader.addEventListener(SDK.PageResourceLoader.Events.UPDATE, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const {loading, resources} = this.#loader.getScopedNumberOfResources();
     const input = {
       onFilterChanged: (e: CustomEvent<string>) => {
@@ -152,13 +152,13 @@ export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   async select(resource: SDK.PageResourceLoader.PageResource): Promise<void> {
-    await this.lastUpdatePromise;
+    await this.updateComplete;
     this.#selectedItem = resource;
-    this.update();
+    this.requestUpdate();
   }
 
   async selectedItem(): Promise<SDK.PageResourceLoader.PageResource|null> {
-    await this.lastUpdatePromise;
+    await this.updateComplete;
     return this.#selectedItem;
   }
 
@@ -171,6 +171,6 @@ export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
     } else {
       this.#filters = [];
     }
-    this.update();
+    this.requestUpdate();
   }
 }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -255,7 +255,7 @@ type ComputedStyleData = {
   name: string,
 };
 
-export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
@@ -269,22 +269,22 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
 
   constructor(computedStyleModel: ComputedStyleModel) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
     this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
-    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
 
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
-    this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.update.bind(this));
+    this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.groupComputedStylesSetting = Common.Settings.Settings.instance().createSetting('group-computed-styles', false);
     this.groupComputedStylesSetting.addChangeListener(() => {
-      this.update();
+      this.requestUpdate();
     });
 
     const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
@@ -334,7 +334,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const [nodeStyles, matchedStyles] =
         await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
     if (!nodeStyles || !matchedStyles) {

package/front_end/panels/elements/EventListenersWidget.ts

@@ -135,7 +135,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class EventListenersWidget extends UI.Widget.VBox {
   private showForAncestorsSetting: Common.Settings.Setting<boolean>;
   private readonly dispatchFilterBySetting: Common.Settings.Setting<string>;
   private readonly showFrameworkListenersSetting: Common.Settings.Setting<boolean>;
@@ -147,19 +147,19 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.#view = view;
     this.showForAncestorsSetting =
         Common.Settings.Settings.instance().moduleSetting('show-event-listeners-for-ancestors');
-    this.showForAncestorsSetting.addChangeListener(this.update.bind(this));
+    this.showForAncestorsSetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.dispatchFilterBySetting =
         Common.Settings.Settings.instance().createSetting('event-listener-dispatch-filter-type', DispatchFilterBy.All);
-    this.dispatchFilterBySetting.addChangeListener(this.update.bind(this));
+    this.dispatchFilterBySetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.showFrameworkListenersSetting =
         Common.Settings.Settings.instance().createSetting('show-frameowkr-listeners', true);
     this.showFrameworkListenersSetting.setTitle(i18nString(UIStrings.frameworkListeners));
-    this.showFrameworkListenersSetting.addChangeListener(this.update.bind(this));
+    this.showFrameworkListenersSetting.addChangeListener(this.requestUpdate.bind(this));
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-    this.update();
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate.bind(this));
+    this.requestUpdate();
   }
 
   static instance(opts: {
@@ -173,7 +173,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
     return eventListenersWidgetInstance;
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const dispatchFilter = this.dispatchFilterBySetting.get();
     const showPassive = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Passive;
     const showBlocking = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Blocking;
@@ -186,7 +186,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
       onDispatchFilterTypeChange: (value: string) => {
         this.dispatchFilterBySetting.set(value);
       },
-      onEventListenersViewChange: this.update.bind(this),
+      onEventListenersViewChange: this.requestUpdate.bind(this),
       dispatchFilters: [
         {name: i18nString(UIStrings.all), value: DispatchFilterBy.All},
         {name: i18nString(UIStrings.passive), value: DispatchFilterBy.Passive},
@@ -279,7 +279,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'elements.refresh-event-listeners': {
-        EventListenersWidget.instance().update();
+        EventListenersWidget.instance().requestUpdate();
         return true;
       }
     }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -42,27 +42,27 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class NodeStackTraceWidget extends UI.Widget.VBox {
   readonly #linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
-    super(true /* isWebComponent */);
+    super({useShadowDom: true});
     this.#view = view;
   }
 
   override wasShown(): void {
     super.wasShown();
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-    this.update();
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
   override willHide(): void {
     super.willHide();
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate, this);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     const stackTrace = await node?.creationStackTrace() ?? undefined;

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -77,21 +77,21 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class PlatformFontsWidget extends UI.Widget.VBox {
   private readonly sharedModel: ComputedStyleModel;
   readonly #view: View;
 
   constructor(sharedModel: ComputedStyleModel, view: View = DEFAULT_VIEW) {
-    super(true);
+    super({useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
 
     this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.update, this);
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const cssModel = this.sharedModel.cssModel();
     const node = this.sharedModel.node();
     if (!node || !cssModel) {

package/front_end/panels/elements/PropertiesWidget.ts

@@ -103,7 +103,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 const getShowAllPropertiesSetting = (): Common.Settings.Setting<boolean> =>
     Common.Settings.Settings.instance().createSetting('show-all-properties', /* defaultValue */ false);
 
-export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class PropertiesWidget extends UI.Widget.VBox {
   private node: SDK.DOMModel.DOMNode|null;
   private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null = null;
@@ -112,8 +112,8 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   readonly #view: View;
   #displayNoMatchingPropertyMessage = false;
 
-  constructor(throttlingTimeout?: number, view: View = DEFAULT_VIEW) {
-    super(true /* isWebComponent */, throttlingTimeout);
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
     this.registerRequiredCSS(propertiesWidgetStyles);
 
     this.showAllPropertiesSetting = getShowAllPropertiesSetting();
@@ -138,7 +138,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.DOMPropertiesExpanded);
     });
 
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private onFilterChanged(event: CustomEvent<string>): void {
@@ -150,7 +150,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     const previousDisplay = this.#displayNoMatchingPropertyMessage;
     this.internalFilterProperties();
     if (previousDisplay !== this.#displayNoMatchingPropertyMessage) {
-      this.update();
+      this.requestUpdate();
     }
   }
 
@@ -169,10 +169,10 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
 
   private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.node = event.data;
-    this.update();
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     if (this.lastRequestedNode) {
       this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(OBJECT_GROUP_NAME);
       delete this.lastRequestedNode;
@@ -218,6 +218,6 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     if (this.node !== node) {
       return;
     }
-    this.update();
+    this.requestUpdate();
   }
 }

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -10,6 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -772,7 +773,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   private webglDisabledBanner(): UI.EmptyWidget.EmptyWidget {
     const emptyWidget = new UI.EmptyWidget.EmptyWidget(
         i18nString(UIStrings.cantDisplayLayers), i18nString(UIStrings.webglSupportIsDisabledInYour));
-    emptyWidget.contentElement.appendChild(i18n.i18n.getFormatLocalizedString(
+    emptyWidget.contentElement.appendChild(uiI18n.getFormatLocalizedString(
         str_, UIStrings.checkSForPossibleReasons,
         {PH1: UI.XLink.XLink.create('about:gpu', undefined, undefined, undefined, 'about-gpu')}));
     return emptyWidget;

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -397,7 +397,7 @@ export interface EventTypes {
   [Events.WINDOW_CHANGED]: void;
 }
 
-export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget {
+export class PaintProfilerCommandLogView extends UI.Widget.VBox {
   private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private log: SDK.PaintProfiler.PaintProfilerLogItem[];
   private readonly treeItemCache: Map<SDK.PaintProfiler.PaintProfilerLogItem, LogTreeElement>;
@@ -435,10 +435,10 @@ export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWid
 
   updateWindow(selectionWindow: {left: number, right: number}|null): void {
     this.selectionWindow = selectionWindow;
-    this.update();
+    this.requestUpdate();
   }
 
-  override doUpdate(): Promise<void> {
+  override performUpdate(): Promise<void> {
     if (!this.selectionWindow || !this.log.length) {
       this.treeOutline.removeChildren();
       return Promise.resolve();

package/front_end/panels/network/RequestCookiesView.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -120,7 +121,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
     this.siteHasCookieInOtherPartition =
         this.element.createChild('div', 'cookies-panel-item site-has-cookies-in-other-partition');
     this.siteHasCookieInOtherPartition.appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
+        uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
           PH1: UI.XLink.XLink.create(
               'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
               undefined, 'learn-more'),

package/front_end/panels/network/RequestTimingView.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -412,7 +413,7 @@ export class RequestTimingView extends UI.Widget.VBox {
           'https://web.dev/custom-metrics/#server-timing-api', i18nString(UIStrings.theServerTimingApi), undefined,
           undefined, 'server-timing-api');
       information.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1: link}));
+          uiI18n.getFormatLocalizedString(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1: link}));
 
       return tableElement;
     }

package/front_end/panels/recorder/RecorderController.ts

@@ -233,6 +233,7 @@ export class RecorderController extends LitElement {
       'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
 
   #recordingView?: Components.RecordingView.RecordingView;
+  #createRecordingView?: Components.CreateRecordingView.CreateRecordingView;
 
   constructor() {
     super();
@@ -804,7 +805,9 @@ export class RecorderController extends LitElement {
     this.#clearError();
   }
 
-  async #onRecordingStarted(event: Components.CreateRecordingView.RecordingStartedEvent): Promise<void> {
+  async #onRecordingStarted(
+      data: {name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string}):
+      Promise<void> {
     // Recording is not available in device mode.
     await this.#disableDeviceModeIfEnabled();
 
@@ -815,10 +818,10 @@ export class RecorderController extends LitElement {
     // -- Recording logic starts here --
     Host.userMetrics.recordingToggled(Host.UserMetrics.RecordingToggled.RECORDING_STARTED);
     this.currentRecordingSession = new Models.RecordingSession.RecordingSession(this.#getMainTarget(), {
-      title: event.name,
-      selectorAttribute: event.selectorAttribute,
-      selectorTypesToRecord: event.selectorTypesToRecord.length ? event.selectorTypesToRecord :
-                                                                  Object.values(Models.Schema.SelectorType),
+      title: data.name,
+      selectorAttribute: data.selectorAttribute,
+      selectorTypesToRecord: data.selectorTypesToRecord.length ? data.selectorTypesToRecord :
+                                                                 Object.values(Models.Schema.SelectorType),
     });
     this.#setCurrentRecording(await this.#storage.saveRecording(this.currentRecordingSession.cloneUserFlow()));
 
@@ -901,7 +904,7 @@ export class RecorderController extends LitElement {
     this.dispatchEvent(new Events.RecordingStateChangedEvent(this.currentRecording.flow));
   }
 
-  async #onRecordingCancelled(): Promise<void> {
+  async onRecordingCancelled(): Promise<void> {
     if (this.previousPage) {
       this.#setCurrentPage(this.previousPage);
     }
@@ -1060,15 +1063,17 @@ export class RecorderController extends LitElement {
 
       case Actions.RecorderActions.START_RECORDING:
         if (this.currentPage !== Pages.CREATE_RECORDING_PAGE && !this.isRecording) {
-          this.#shortcutHelper.handleShortcut(this.#onRecordingStarted.bind(
-              this,
-              new Components.CreateRecordingView.RecordingStartedEvent(
-                  this.#recorderSettings.defaultTitle, this.#recorderSettings.defaultSelectors,
-                  this.#recorderSettings.selectorAttribute)));
+          this.#shortcutHelper.handleShortcut(this.#onRecordingStarted.bind(this, {
+            name: this.#recorderSettings.defaultTitle,
+            selectorTypesToRecord: this.#recorderSettings.defaultSelectors,
+            selectorAttribute: this.#recorderSettings.selectorAttribute ? this.#recorderSettings.selectorAttribute :
+                                                                          undefined,
+          }));
         } else if (this.currentPage === Pages.CREATE_RECORDING_PAGE) {
-          const view = this.renderRoot.querySelector('devtools-create-recording-view');
-          if (view) {
-            this.#shortcutHelper.handleShortcut(view.startRecording.bind(view));
+          if (this.#createRecordingView) {
+            this.#shortcutHelper.handleShortcut(() => {
+              this.#createRecordingView?.startRecording();
+            });
           }
         } else if (this.isRecording) {
           void this.#onRecordingFinished();
@@ -1233,15 +1238,20 @@ export class RecorderController extends LitElement {
   #renderCreateRecordingPage(): Lit.TemplateResult {
     // clang-format off
     return html`
-      <devtools-create-recording-view
-        .data=${
-          {
-            recorderSettings: this.#recorderSettings,
-          } as Components.CreateRecordingView.CreateRecordingViewData
-        }
-        @recordingstarted=${this.#onRecordingStarted}
-        @recordingcancelled=${this.#onRecordingCancelled}
-      ></devtools-create-recording-view>
+      <devtools-widget
+        class="recording-view"
+        .widgetConfig=${UI.Widget.widgetConfig(Components.CreateRecordingView.CreateRecordingView, {
+          recorderSettings: this.#recorderSettings,
+          onRecordingStarted: this.#onRecordingStarted.bind(this),
+          onRecordingCancelled: this.onRecordingCancelled.bind(this),
+        })}
+        ${UI.Widget.widgetRef(
+          Components.CreateRecordingView.CreateRecordingView,
+          widget => {
+            this.#createRecordingView = widget;
+          },
+        )}
+      ></devtools-widget>
     `;
     // clang-format on
   }