chrome-devtools-frontend 1.0.1661063 → 1.0.1662289

package/front_end/panels/application/application.ts

@@ -18,9 +18,6 @@ import * as ExtensionStorageModel from './ExtensionStorageModel.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
 import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
-import * as InterestGroupStorageModel from './InterestGroupStorageModel.js';
-import * as InterestGroupStorageView from './InterestGroupStorageView.js';
-import * as InterestGroupTreeElement from './InterestGroupTreeElement.js';
 import * as KeyValueStorageItemsView from './KeyValueStorageItemsView.js';
 import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
@@ -62,9 +59,6 @@ export {
   FrameDetailsView,
   IndexedDBModel,
   IndexedDBViews,
-  InterestGroupStorageModel,
-  InterestGroupStorageView,
-  InterestGroupTreeElement,
   KeyValueStorageItemsView,
   OpenedWindowDetailsView,
   OriginTrialTreeView,

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

@@ -7,7 +7,6 @@ import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as BounceTrackingMitigationsView from './BounceTrackingMitigationsView.js';
 import * as CrashReportContextGrid from './CrashReportContextGrid.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
-import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as PermissionsPolicySection from './PermissionsPolicySection.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
@@ -23,7 +22,6 @@ export {
   BounceTrackingMitigationsView,
   CrashReportContextGrid,
   EndpointsGrid,
-  InterestGroupAccessGrid,
   PermissionsPolicySection,
   ProtocolHandlersView,
   ReportsGrid,

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

@@ -243,7 +243,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             .data=${
               {
                 affectedRequest,
-                requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(),
+                requestResolver: this.#data.requestResolver || new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance()),
                 displayURL: true,
                 urlToDisplay: url,
               }

package/front_end/panels/application/serviceWorkersView.css

@@ -96,10 +96,6 @@
   min-width: 80px;
 }
 
-.report-field-value {
-  white-space: normal;
-}
-
 .report-field-value-filename,
 .service-worker-client-string {
   max-width: 400px;
@@ -162,3 +158,43 @@ devtools-icon.error-icon {
   vertical-align: bottom;
   width: var(--sys-size-7);
 }
+
+.service-worker-toolbar {
+  margin-left: var(--sys-size-4);
+}
+
+.report-field {
+  display: flex;
+  padding: var(--sys-size-3) 0;
+}
+
+.report-field-name {
+  font: var(--sys-typescale-body5-medium);
+  color: var(--sys-color-on-surface-subtle);
+  flex: 0 0 128px;
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+.report-field-value {
+  font: var(--sys-typescale-body4-regular);
+  flex: auto;
+  padding: 0 var(--sys-size-6);
+  white-space: normal;
+  user-select: text;
+}
+
+.service-worker-section {
+  border-bottom: 1px solid var(--sys-color-divider);
+  grid-column: 1 / 3;
+  padding: 0 var(--sys-size-9) 11px var(--sys-size-9);
+}
+
+.service-worker-section-container {
+  display: contents;
+}
+
+devtools-widget {
+  display: block;
+}
+

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -4,14 +4,18 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import xhrBreakpointsSidebarPaneStyles from './xhrBreakpointsSidebarPane.css.js';
 
+const {classMap, ifDefined, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
@@ -63,8 +67,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/XHRBreakpoints
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const containerToBreakpointEntry = new WeakMap<Element, HTMLElement>();
 
-const breakpointEntryToCheckbox = new WeakMap<Element, UI.UIUtils.CheckboxLabel>();
-
 let xhrBreakpointsSidebarPaneInstance: XHRBreakpointsSidebarPane|null = null;
 
 export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.ContextFlavorListener.ContextFlavorListener,
@@ -75,9 +77,8 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   readonly #emptyElement: HTMLElement;
   readonly #breakpointElements: Map<string, Element>;
   readonly #addButton: UI.Toolbar.ToolbarButton;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  #hitBreakpoint?: any;
+  #hitBreakpoint?: string;
+  #editingBreakpoint: string|null = null;
 
   private constructor() {
     super({
@@ -138,14 +139,11 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
 
     const inputElementContainer = document.createElement('p');
     inputElementContainer.classList.add('breakpoint-condition');
-    inputElementContainer.textContent = i18nString(UIStrings.breakWhenUrlContains);
     inputElementContainer.setAttribute('jslog', `${VisualLogging.value('condition').track({change: true})}`);
-
-    const inputElement = inputElementContainer.createChild('span', 'breakpoint-condition-input');
-    UI.ARIAUtils.setLabel(inputElement, i18nString(UIStrings.urlBreakpoint));
     this.addListElement(inputElementContainer, this.#list.element.firstChild as Element | null);
 
-    const commit = (_element: Element, newText: string): void => {
+    const commit = (e: UI.TextPrompt.TextPromptElement.CommitEvent): void => {
+      const newText = e.detail;
       this.removeListElement(inputElementContainer);
       SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, true);
       this.setBreakpoint(newText);
@@ -157,8 +155,24 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       this.update();
     };
 
-    const config = new UI.InplaceEditor.Config(commit, cancel, undefined);
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
+    // clang-format off
+    /* eslint-disable-next-line @devtools/no-lit-render-outside-of-view */
+    render(
+      html`
+        ${i18nString(UIStrings.breakWhenUrlContains)}
+        <devtools-prompt
+            value=""
+            render-as-block
+            ?editing=${true}
+            aria-label=${i18nString(UIStrings.urlBreakpoint)}
+            class="breakpoint-condition-input"
+            @commit=${commit}
+            @cancel=${cancel}>
+        </devtools-prompt>
+      `,
+      inputElementContainer
+    );
+    // clang-format on
   }
 
   heightForItem(_item: string): number {
@@ -173,15 +187,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     if (this.#breakpoints.indexOf(breakKeyword) !== -1) {
       this.#list.refreshItem(breakKeyword);
     } else {
-      this.#breakpoints.insertWithComparator(breakKeyword, (a, b) => {
-        if (a > b) {
-          return 1;
-        }
-        if (a < b) {
-          return -1;
-        }
-        return 0;
-      });
+      this.#breakpoints.insertWithComparator(breakKeyword, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
     }
     if (!this.#list.selectedItem() || !this.hasFocus()) {
       this.#list.selectItem(this.#breakpoints.at(0));
@@ -191,54 +197,95 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   createElementForItem(item: string): Element {
     const listItemElement = document.createElement('div');
     UI.ARIAUtils.markAsListitem(listItemElement);
-    const element = listItemElement.createChild('div', 'breakpoint-entry');
-    containerToBreakpointEntry.set(listItemElement, element);
     const enabled = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().xhrBreakpoints().get(item) || false;
-    UI.ARIAUtils.markAsCheckbox(element);
-    UI.ARIAUtils.setChecked(element, enabled);
-    element.addEventListener('contextmenu', this.contextMenu.bind(this, item), true);
-
     const title = item ? i18nString(UIStrings.urlContainsS, {PH1: item}) : i18nString(UIStrings.anyXhrOrFetch);
-    const checkbox = UI.UIUtils.CheckboxLabel.create(title, enabled, undefined, undefined, /* small */ true);
-    UI.ARIAUtils.setHidden(checkbox, true);
-    UI.ARIAUtils.setLabel(element, title);
-    element.appendChild(checkbox);
-    checkbox.addEventListener('click', this.checkboxClicked.bind(this, item, enabled), false);
-    element.addEventListener('click', event => {
-      if (event.target === element) {
-        this.checkboxClicked(item, enabled);
-      }
-    }, false);
-    breakpointEntryToCheckbox.set(element, checkbox);
-    checkbox.tabIndex = -1;
-    element.tabIndex = -1;
-    if (item === this.#list.selectedItem()) {
-      element.tabIndex = 0;
-      this.setDefaultFocusedElement(element);
-    }
-    element.addEventListener('keydown', event => {
-      let handled = false;
-      if (event.key === ' ') {
-        this.checkboxClicked(item, enabled);
-        handled = true;
-      } else if (event.key === 'Enter') {
-        this.labelClicked(item);
-        handled = true;
+
+    const commit = (e: UI.TextPrompt.TextPromptElement.CommitEvent): void => {
+      if (this.#editingBreakpoint !== item) {
+        return;
       }
+      const newText = e.detail;
+      this.#editingBreakpoint = null;
+      this.#removeBreakpoint(item);
+      this.#addBreakpoint(newText, enabled);
+      this.#list.selectItem(newText);
+      this.focus();
+    };
 
-      if (handled) {
-        event.consume(true);
+    const cancel = (): void => {
+      if (this.#editingBreakpoint !== item) {
+        return;
       }
-    });
+      this.#editingBreakpoint = null;
+      this.#list.refreshItem(item);
+      this.focus();
+    };
 
-    if (item === this.#hitBreakpoint) {
-      element.classList.add('breakpoint-hit');
-      UI.ARIAUtils.setDescription(element, i18nString(UIStrings.breakpointHit));
-    }
+    // clang-format off
+    /* eslint-disable-next-line @devtools/no-lit-render-outside-of-view */
+    render(
+      html`
+        <div class=${classMap({'breakpoint-entry': true, 'breakpoint-hit': item === this.#hitBreakpoint})}
+             role="checkbox"
+             aria-checked=${enabled ? 'true' : 'false'}
+             aria-label=${title}
+             aria-description=${ifDefined(item === this.#hitBreakpoint ? i18nString(UIStrings.breakpointHit) : undefined)}
+             tabindex=${item === this.#list.selectedItem() ? '0' : '-1'}
+             ?autofocus=${item === this.#list.selectedItem()}
+             ${ref((el?: Element) => {
+               if (el instanceof HTMLElement) {
+                 containerToBreakpointEntry.set(listItemElement, el);
+                 this.#breakpointElements.set(item, listItemElement);
+               }
+             })}
+             @click=${(event: Event) => {
+               if (event.target === event.currentTarget) {
+                 this.checkboxClicked(item, enabled);
+               }
+             }}
+             @contextmenu=${(e: Event) => this.contextMenu(item, e)}
+             @keydown=${(event: KeyboardEvent) => {
+               let handled = false;
+               if (event.key === ' ') {
+                 this.checkboxClicked(item, enabled);
+                 handled = true;
+               } else if (event.key === 'Enter') {
+                 this.#startEditing(item);
+                 handled = true;
+               }
+               if (handled) {
+                 event.consume(true);
+               }
+             }}>
+          <devtools-checkbox
+              class="cursor-auto"
+              aria-hidden="true"
+              .checked=${enabled}
+              .small=${true}
+              .title=${title}
+              @click=${(e: Event) => e.stopPropagation()}
+              @change=${() => this.checkboxClicked(item, enabled)}
+              @dblclick=${() => this.#startEditing(item)}
+              tabindex="-1"
+              jslog=${VisualLogging.toggle().track({click: true})}>
+            <devtools-prompt
+                value=${item}
+                render-as-block
+                ?editing=${item === this.#editingBreakpoint}
+                aria-label=${title}
+                class=${classMap({'breakpoint-condition-input': item === this.#editingBreakpoint})}
+                jslog=${VisualLogging.value('condition').track({change: true})}
+                @commit=${commit}
+                @cancel=${cancel}>
+              ${title}
+            </devtools-prompt>
+          </devtools-checkbox>
+        </div>
+      `,
+      listItemElement
+    );
+    // clang-format on
 
-    checkbox.classList.add('cursor-auto');
-    checkbox.addEventListener('dblclick', this.labelClicked.bind(this, item), false);
-    this.#breakpointElements.set(item, listItemElement);
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
@@ -262,9 +309,15 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       if (!breakpointEntryElement) {
         throw new Error('Expected breakpoint entry to be found for an element');
       }
-      this.setDefaultFocusedElement(breakpointEntryElement);
+      const prompt =
+          _to === this.#editingBreakpoint ? toElement.querySelector('devtools-prompt') as HTMLElement | null : null;
+      this.setDefaultFocusedElement(prompt || breakpointEntryElement);
       breakpointEntryElement.tabIndex = 0;
       if (this.hasFocus()) {
+        if (prompt) {
+          prompt.focus();
+          return;
+        }
         breakpointEntryElement.focus();
       }
     }
@@ -297,84 +350,55 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     }
   }
 
-  private contextMenu(breakKeyword: string, event: Event): void {
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+  #addBreakpoint(url: string, enabled = true): void {
+    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(url, enabled);
+    this.setBreakpoint(url);
+  }
 
-    function removeBreakpoint(this: XHRBreakpointsSidebarPane): void {
-      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
-      this.removeBreakpoint(breakKeyword);
-    }
+  #removeBreakpoint(url: string): void {
+    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(url);
+    this.removeBreakpoint(url);
+  }
 
-    function removeAllBreakpoints(this: XHRBreakpointsSidebarPane): void {
-      for (const url of this.#breakpointElements.keys()) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(url);
-        this.removeBreakpoint(url);
-      }
-      this.update();
+  #removeAllBreakpoints(): void {
+    for (const url of this.#breakpointElements.keys()) {
+      this.#removeBreakpoint(url);
     }
+    this.update();
+  }
+
+  #toggleBreakpoint(url: string, checked: boolean): void {
+    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().toggleXHRBreakpoint(url, checked);
+    this.#list.refreshItem(url);
+    this.#list.selectItem(url);
+  }
+
+  private contextMenu(breakKeyword: string, event: Event): void {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const removeAllTitle = i18nString(UIStrings.removeAllBreakpoints);
 
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.addBreakpoint), this.addButtonClicked.bind(this),
         {jslogContext: 'sources.add-xhr-fetch-breakpoint'});
-    contextMenu.defaultSection().appendItem(
-        i18nString(UIStrings.removeBreakpoint), removeBreakpoint.bind(this),
-        {jslogContext: 'sources.remove-xhr-fetch-breakpoint'});
-    contextMenu.defaultSection().appendItem(
-        removeAllTitle, removeAllBreakpoints.bind(this), {jslogContext: 'sources.remove-all-xhr-fetch-breakpoints'});
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint),
+                                            this.#removeBreakpoint.bind(this, breakKeyword),
+                                            {jslogContext: 'sources.remove-xhr-fetch-breakpoint'});
+    contextMenu.defaultSection().appendItem(removeAllTitle, this.#removeAllBreakpoints.bind(this),
+                                            {jslogContext: 'sources.remove-all-xhr-fetch-breakpoints'});
     void contextMenu.show();
   }
 
   private checkboxClicked(breakKeyword: string, checked: boolean): void {
     const hadFocus = this.hasFocus();
-    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().toggleXHRBreakpoint(breakKeyword, !checked);
-    this.#list.refreshItem(breakKeyword);
-    this.#list.selectItem(breakKeyword);
+    this.#toggleBreakpoint(breakKeyword, !checked);
     if (hadFocus) {
       this.focus();
     }
   }
 
-  private labelClicked(breakKeyword: string): void {
-    const element = this.#breakpointElements.get(breakKeyword);
-    const inputElement = document.createElement('span');
-    inputElement.classList.add('breakpoint-condition');
-    inputElement.textContent = breakKeyword;
-    inputElement.setAttribute('jslog', `${VisualLogging.value('condition').track({change: true})}`);
-    if (element) {
-      this.#list.element.insertBefore(inputElement, element);
-      element.classList.add('hidden');
-    }
-
-    const commit = (inputElement: Element, newText: string, _oldText: string|null, element?: Element): void => {
-      this.removeListElement(inputElement);
-      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
-      this.removeBreakpoint(breakKeyword);
-      let enabled = true;
-      if (element) {
-        const breakpointEntryElement = containerToBreakpointEntry.get(element);
-        const checkboxElement =
-            breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
-        if (checkboxElement) {
-          enabled = checkboxElement.checked;
-        }
-      }
-      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, enabled);
-      this.setBreakpoint(newText);
-      this.#list.selectItem(newText);
-      this.focus();
-    };
-
-    const cancel = (inputElement: Element, element?: Element): void => {
-      this.removeListElement(inputElement);
-      if (element) {
-        element.classList.remove('hidden');
-      }
-      this.focus();
-    };
-
-    const config = new UI.InplaceEditor.Config(commit, cancel, element);
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
+  #startEditing(item: string): void {
+    this.#editingBreakpoint = item;
+    this.#list.refreshItem(item);
   }
 
   flavorChanged(_object: Object|null): void {

package/front_end/panels/common/ExtensionServer.ts

@@ -446,9 +446,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     const {pluginName, mediaType, port, capabilities} = message;
     const extensionOrigin = this.getExtensionOrigin(_shared_port);
-    Extensions.RecorderPluginManager.RecorderPluginManager.instance().addPlugin(
-        new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(
-            pluginName, port, capabilities, extensionOrigin, mediaType));
+    const recorderPluginManager = Extensions.RecorderPluginManager.RecorderPluginManager.instance();
+    recorderPluginManager.addPlugin(new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(
+        pluginName, port, capabilities, extensionOrigin, recorderPluginManager, mediaType));
     return this.status.OK();
   }
 

package/front_end/panels/console/ConsoleView.ts

@@ -345,7 +345,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private pendingSidebarMessages: ConsoleViewMessage[] = [];
   private userHasOpenedSidebarAtLeastOnce = false;
   private issueToolbarThrottle: Common.Throttler.Throttler;
-  private requestResolver = new Logs.RequestResolver.RequestResolver();
+  private requestResolver = new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance());
   private issueResolver =
       new IssuesManager.IssueResolver.IssueResolver(IssuesManager.IssuesManager.IssuesManager.instance());
   #isDetached = false;