chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -19,7 +19,7 @@ const UIStrings = {
   trustTokens: 'Private state tokens',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/TrustTokensTreeElement.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
   private view?: ApplicationComponents.TrustTokensView.TrustTokensView;

package/front_end/panels/application/WebMCPView.ts

@@ -1053,7 +1053,8 @@ export class PayloadWidget extends UI.Widget.Widget {
   #symbolizedError?: Bindings.SymbolizedError.SymbolizedError|null;
   #view: typeof PAYLOAD_DEFAULT_VIEW;
 
-  constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: PayloadViewInput, output: object, target: HTMLElement) => void = PAYLOAD_DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -56,7 +56,7 @@ const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BounceTrackingMitigationsView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const enum ScreenStatusType {
   INITIALIZING = 'Initializing',

package/front_end/panels/application/components/CrashReportContextGrid.ts

@@ -29,7 +29,7 @@ const UIStrings = {
   copyValue: 'Copy value',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/CrashReportContextGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface CrashReportContextGridData {
   entries: Array<{key: string, value: string}>;

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -25,7 +25,7 @@ const UIStrings = {
   endpointsDescription: 'Here you will find the list of endpoints that receive the reports',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/EndpointsGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
 

package/front_end/panels/application/components/ReportsGrid.ts

@@ -46,7 +46,7 @@ const UIStrings = {
   generatedAt: 'Generated at',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
 

package/front_end/panels/application/components/TrustTokensView.ts

@@ -59,7 +59,7 @@ const UIStrings = {
   learnMore: 'Learn more',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/TrustTokensView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface TrustTokensViewInput {
   tokens: Protocol.Storage.TrustTokens[];

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -57,7 +57,7 @@ const UIStrings = {
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/application/preloading/components/MismatchedPreloadingGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 class PreloadingUIUtils {
   static status(status: SDK.PreloadingModel.PreloadingStatus): string {

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -37,7 +37,7 @@ const UIStrings = {
   prefetchFallbackReady: 'Prefetch fallback ready',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html, nothing, Directives: {styleMap}} = Lit;
 

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -49,7 +49,7 @@ const UIStrings = {
   buttonRevealPreloadsAssociatedWithRuleSet: 'Reveal speculative loads associated with this rule set',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/RuleSetGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface RuleSetGridData {
   rows: RuleSetGridRow[];
@@ -169,7 +169,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 /** Grid component to show SpeculationRules rule sets. **/
-export class RuleSetGrid extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const RuleSetGridBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class RuleSetGrid extends RuleSetGridBase {
   readonly #view: View;
   #data: RuleSetGridData|null = null;
 

package/front_end/panels/application/serviceWorkerUpdateCycleView.css

@@ -56,6 +56,8 @@
 
   .service-worker-update-timing-bar-clickable:focus-visible {
     background-color: var(--sys-color-state-focus-highlight);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: calc(-1 * var(--sys-size-2));
   }
 
   .service-worker-update-timing-bar-clickable[aria-checked="true"]::before {

package/front_end/panels/autofill/AutofillView.ts

@@ -103,7 +103,7 @@ const AUTOFILL_INFO_URL = 'https://goo.gle/devtools-autofill-panel' as Platform.
 const AUTOFILL_FEEDBACK_URL = 'https://crbug.com/329106326' as Platform.DevToolsPath.UrlString;
 
 const str_ = i18n.i18n.registerUIStrings('panels/autofill/AutofillView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
   autoOpenViewSetting: Common.Settings.Setting<boolean>;
@@ -298,7 +298,7 @@ export class AutofillView extends UI.Widget.VBox {
   #matches: AutofillManager.AutofillManager.Match[] = [];
   #highlightedMatches: AutofillManager.AutofillManager.Match[] = [];
 
-  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view = DEFAULT_VIEW) {
+  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#autofillManager = autofillManager;
     this.#view = view;

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -262,9 +262,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox<S
   #filterText: string|null = null;
   #view: View;
   #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
-  constructor(
-      breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
-      view = DEFAULT_VIEW) {
+  constructor(breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
+              view: View = DEFAULT_VIEW) {
     super({useShadowDom: 'pure'});
     this.#view = view;
     this.#jslog = jslog;

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -216,7 +216,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     }
   }
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
 
     this.#view = view;

package/front_end/panels/changes/ChangesSidebar.ts

@@ -63,27 +63,39 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
 };
 
-export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const ChangesSidebarBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class ChangesSidebar extends ChangesSidebarBase {
   #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl|null = null;
   readonly #view: View;
   readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }
 
-  set workspaceDiff(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+  set workspaceDiff(
+      workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl,
+  ) {
     if (this.#workspaceDiff) {
       this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#removeUISourceCode.bind(this));
       this.#workspaceDiff.removeEventListener(
-          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED,
+          this.uiSourceCodeModifiedStatusChanged,
+          this,
+      );
     }
     this.#workspaceDiff = workspaceDiff;
     this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#addUISourceCode.bind(this));
     this.#workspaceDiff.addEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED,
+        this.uiSourceCodeModifiedStatusChanged,
+        this,
+    );
     this.requestUpdate();
   }
 
@@ -100,7 +112,9 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.#view(input, {}, this.contentElement);
   }
 
-  #selectionChanged(selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null): void {
+  #selectionChanged(
+      selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null,
+      ): void {
     this.#selectedUISourceCode = selectedUISourceCode;
     this.dispatchEventToListeners(Events.SELECTED_UI_SOURCE_CODE_CHANGED);
     this.requestUpdate();
@@ -108,16 +122,40 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   #addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     this.#sourceCodes.add(uiSourceCode);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.TitleChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted,
+        this.requestUpdate,
+        this,
+    );
     this.requestUpdate();
   }
 
   #removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.TitleChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged,
+        this.requestUpdate,
+        this,
+    );
+    uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted,
+        this.requestUpdate,
+        this,
+    );
     if (uiSourceCode === this.#selectedUISourceCode) {
       let newSelection;
       for (const sourceCode of this.#sourceCodes.values()) {
@@ -127,7 +165,9 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
         newSelection = sourceCode;
       }
       this.#sourceCodes.delete(uiSourceCode);
-      this.#selectionChanged(newSelection ?? this.#sourceCodes.values().next().value ?? null);
+      this.#selectionChanged(
+          newSelection ?? this.#sourceCodes.values().next().value ?? null,
+      );
     } else {
       this.#sourceCodes.delete(uiSourceCode);
     }
@@ -135,7 +175,8 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private uiSourceCodeModifiedStatusChanged(
-      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
+      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>,
+      ): void {
     const {isModified, uiSourceCode} = event.data;
     if (isModified) {
       this.#addUISourceCode(uiSourceCode);

package/front_end/panels/changes/ChangesView.ts

@@ -77,7 +77,7 @@ export class ChangesView extends UI.Widget.VBox<ShadowRoot> {
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   readonly #view: View;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {useShadowDom: 'pure'});
 
     this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();

package/front_end/panels/console/ConsolePrompt.ts

@@ -44,8 +44,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePrompt.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
-    UI.Widget.Widget) {
+const ConsolePromptBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.Widget> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.Widget,
+    );
+
+export class ConsolePrompt extends ConsolePromptBase {
   private addCompletionsFromHistory: boolean;
   #history: TextEditor.AutocompleteHistory.AutocompleteHistory;
   private initialText: string;

package/front_end/panels/console/ConsoleSidebar.ts

@@ -171,8 +171,12 @@ const CONSOLE_API_PARSED_FILTERS = [{
   regex: undefined,
 }];
 
-export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox<ShadowRoot>>(
-    UI.Widget.VBox) {
+const ConsoleSidebarBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox<ShadowRoot>> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class ConsoleSidebar extends ConsoleSidebarBase {
   #view: View;
   readonly #groups = [
     new ConsoleFilterGroup(GroupName.ALL, [], ConsoleFilter.allLevelsFilterValue()),

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1187,6 +1187,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
 
+  get updateRecord(): Elements.ElementUpdateRecord.ElementUpdateRecord|null {
+    return this.#updateRecord;
+  }
+
+  set updateRecord(updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null) {
+    if (this.#updateRecord === updateRecord) {
+      return;
+    }
+    this.#updateRecord = updateRecord;
+    this.requestUpdate();
+  }
+
   get node(): SDK.DOMModel.DOMNode {
     return this.#node;
   }