chrome-devtools-frontend 1.0.1534717 → 1.0.1536371

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/network/components/DirectSocketConnectionView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -112,9 +110,9 @@ export interface ViewInput {
   onCopyRow: () => void;
 }
 
-export type View = (input: ViewInput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   function isCategoryOpen(name: string): boolean {
     return input.openCategories.includes(name);
   }
@@ -203,7 +201,7 @@ export const DEFAULT_VIEW: View = (input, target) => {
     ${renderCategory(CATEGORY_NAME_GENERAL, i18nString(UIStrings.general), generalContent)}
     ${renderCategory(CATEGORY_NAME_OPTIONS, i18nString(UIStrings.options), optionsContent)}
     ${socketInfo.openInfo ? renderCategory(CATEGORY_NAME_OPEN_INFO, i18nString(UIStrings.openInfo), openInfoContent) : Lit.nothing}
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
@@ -278,7 +276,7 @@ export class DirectSocketConnectionView extends UI.Widget.Widget {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
       }
     };
-    this.#view(viewInput, this.contentElement);
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #setIsOpen(categoryName: string, open: boolean): void {

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?.triggerFormSubmission();
+            });
           }
         } else if (this.isRecording) {
           void this.#onRecordingFinished();
@@ -1233,15 +1238,21 @@ 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,
+          defaultRecordingName: this.#recorderSettings.defaultTitle,
+          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
   }