chrome-devtools-frontend 1.0.1724140 → 1.0.1726686

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

@@ -166,8 +166,8 @@ export class PreloadingDisabledInfobar extends UI.Widget.VBox {
   #disabledByHoldbackPrefetchSpeculationRules = false;
   #disabledByHoldbackPrerenderSpeculationRules = false;
 
-  constructor(view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['flex-none']});
     this.#view = view;
   }
 

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

@@ -127,9 +127,9 @@ export class PreloadingGrid extends UI.Widget.VBox {
   #pageURL?: Platform.DevToolsPath.UrlString;
   #onSelect?: ({rowId}: {rowId: string}) => void;
 
-  constructor(view?: View) {
-    super();
-    this.#view = view ?? PRELOADING_GRID_DEFAULT_VIEW;
+  constructor(element?: HTMLElement, view: View = PRELOADING_GRID_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
     this.requestUpdate();
   }
 
@@ -144,6 +144,9 @@ export class PreloadingGrid extends UI.Widget.VBox {
   }
 
   set onSelect(onSelect: ({rowId}: {rowId: string}) => void) {
+    if (this.#onSelect === onSelect) {
+      return;
+    }
     this.#onSelect = onSelect;
     this.requestUpdate();
   }

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

@@ -169,17 +169,13 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 /** Grid component to show SpeculationRules rule sets. **/
-const RuleSetGridBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
-    Common.ObjectWrapper.eventMixin(
-        UI.Widget.VBox,
-    );
-
-export class RuleSetGrid extends RuleSetGridBase {
+export class RuleSetGrid extends UI.Widget.VBox {
   readonly #view: View;
   #data: RuleSetGridData|null = null;
+  #onSelect: (ruleSetId: Protocol.Preload.RuleSetId) => void = () => {};
 
-  constructor(view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
   }
 
@@ -192,10 +188,22 @@ export class RuleSetGrid extends RuleSetGridBase {
     this.requestUpdate();
   }
 
+  get onSelect(): (ruleSetId: Protocol.Preload.RuleSetId) => void {
+    return this.#onSelect;
+  }
+
+  set onSelect(onSelect: (ruleSetId: Protocol.Preload.RuleSetId) => void) {
+    if (this.#onSelect === onSelect) {
+      return;
+    }
+    this.#onSelect = onSelect;
+    this.requestUpdate();
+  }
+
   override performUpdate(): void {
     const input: ViewInput = {
       data: this.#data,
-      onSelect: this.dispatchEventToListeners.bind(this, Events.SELECT),
+      onSelect: this.#onSelect,
       onRevealInElements: this.#revealSpeculationRulesInElements.bind(this),
       onRevealInNetwork: this.#revealSpeculationRulesInNetwork.bind(this),
       onRevealPreloadsAssociatedWithRuleSet: this.#revealAttemptViewWithFilter.bind(this),
@@ -235,11 +243,3 @@ export class RuleSetGrid extends RuleSetGridBase {
     void Common.Revealer.reveal(new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(ruleSet.id));
   }
 }
-
-export const enum Events {
-  SELECT = 'select',
-}
-
-export interface EventTypes {
-  [Events.SELECT]: Protocol.Preload.RuleSetId;
-}

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

@@ -425,8 +425,8 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 export class UsedPreloadingView extends UI.Widget.VBox {
   readonly #view: View;
 
-  constructor(view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
   }
 

package/front_end/panels/application/preloading/preloadingView.css

@@ -4,12 +4,12 @@
  * found in the LICENSE file.
  */
 
-.empty-state {
+:host > .widget > .empty-state {
   display: none;
 }
 
 .empty {
-  .empty-state {
+  &.widget > .empty-state {
     display: flex;
   }
 
@@ -26,13 +26,21 @@
     margin: var(--sys-size-2) 0;
   }
 
-  .toolbar-filter {
+  devtools-toolbar-input {
     max-width: var(--sys-size-29);
+    flex-grow: 1;
+    flex-shrink: 1;
   }
 }
 
 devtools-split-view {
-  .preloading-grid-widget-container > .vbox {
+  [slot="main"],
+  [slot="sidebar"],
+  [slot="main"] > .vbox {
     height: 100%;
   }
 }
+
+.pretty-print-button {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+}

package/front_end/panels/application/preloading/preloadingViewDropDown.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-:host {
+.widget {
   padding: var(--sys-size-2) var(--sys-size-1) var(--sys-size-2) var(--sys-size-2);
 }
 

package/front_end/panels/application/storageView.css

@@ -4,14 +4,22 @@
  * found in the LICENSE file.
  */
 
-.report-row {
-  display: flex;
-  align-items: center;
-  white-space: normal;
+.report-subtitle {
+  font: var(--sys-typescale-body4-regular);
+  padding: 0 var(--sys-size-9) var(--sys-size-7);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  &:has(.quota-override-error:empty) {
-    margin: 0;
-  }
+devtools-report .report-section {
+  display: grid;
+  grid-column: 1 / 3;
+  grid-template-columns: subgrid;
+}
+
+devtools-report-section:has(.quota-override-error:empty) {
+  display: none;
 }
 
 .clear-site-data-checkboxes-row {
@@ -34,15 +42,6 @@
   margin-top: var(--sys-size-7);
 }
 
-.link {
-  margin-left: 10px;
-  display: none;
-}
-
-.report-row:hover .link {
-  display: inline;
-}
-
 .quota-override-editor-with-button {
   align-items: baseline;
   display: flex;
@@ -77,7 +76,7 @@
   min-width: fit-content;
 }
 
-.clear-storage-container {
+:host {
   overflow: auto;
 }
 
@@ -87,10 +86,6 @@
   --nested-checkbox-indent: var(--sys-size-11);
 }
 
-.report-content-box {
-  overflow: initial;
-}
-
 .include-third-party-cookies-row {
   margin-left: var(--nested-checkbox-indent);
 

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -224,7 +224,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               title=${getLocalizedCategory(category)}
               ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
                                 breakpoints.some(breakpoint => breakpoint.enabled())}
-              ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
+              .checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
               @change=${(e: Event) => onCheckboxClicked(e, category)}
             >${getLocalizedCategory(category)}</devtools-checkbox>
             <ul role="group">
@@ -238,7 +238,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     class=${classes(breakpoint)}
                     tabIndex=-1
                     title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
-                    ?checked=${breakpoint.enabled()}
+                    .checked=${breakpoint.enabled()}
                     aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
                                                                             : Lit.nothing}
                     @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -204,10 +204,9 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showPage),
   order: 2,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
-  async loadView(universe) {
+  async loadView() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesNavigator.NetworkNavigatorView.instance(
-        {forceNew: null, networkProjectManager: universe.networkProjectManager});
+    return Sources.SourcesNavigator.NetworkNavigatorView.instance();
   },
 });
 
@@ -219,10 +218,9 @@ UI.ViewManager.registerViewExtension({
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   condition: () => !Root.Runtime.Runtime.isTraceApp(),
-  async loadView(universe) {
+  async loadView() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesNavigator.OverridesNavigatorView.instance(
-        {forceNew: null, networkProjectManager: universe.networkProjectManager});
+    return Sources.SourcesNavigator.OverridesNavigatorView.instance();
   },
 });
 
@@ -234,9 +232,9 @@ UI.ViewManager.registerViewExtension({
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html' && !Root.Runtime.Runtime.isTraceApp(),
-  async loadView(universe) {
+  async loadView() {
     const Sources = await loadSourcesModule();
-    return new Sources.SourcesNavigator.ContentScriptsNavigatorView(universe.networkProjectManager);
+    return new Sources.SourcesNavigator.ContentScriptsNavigatorView();
   },
 });
 

package/front_end/panels/comments/CommentsPane.ts

@@ -58,6 +58,10 @@ const UIStrings = {
    * @description Tab label for sent and resolved comments in the comments drawer.
    */
   sent: 'Sent',
+  /**
+   * @description Label shown next to an element anchor in the comments drawer when the target DOM node has been removed or can no longer be found.
+   */
+  removed: 'removed',
 } as const;
 
 const UIStringsNotTranslate = {
@@ -85,7 +89,10 @@ export interface ViewInput {
   threads: ThreadViewData[];
   onTabSelect: (tab: Tab) => void;
   onClearAll: () => void;
-  onThreadClick: (thread: CommentManager.CommentManager.CommentThread) => void;
+  onThreadClick: (
+      thread: CommentManager.CommentManager.CommentThread,
+      fallbackPosition?: {left: number, top: number},
+      ) => void;
   onDeleteThread: (threadId: string) => void;
   onSendToAgent: () => void;
 }
@@ -148,6 +155,12 @@ function renderThreadStatus(
 export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   const isQueued = input.activeTab === 'queued';
   const isSent = input.activeTab === 'sent';
+  const onThreadClick = (e: Event, thread: CommentManager.CommentManager.CommentThread): void => {
+    const rowEl = e.currentTarget as HTMLElement;
+    const rowRect = rowEl.getBoundingClientRect();
+    const badgeRect = rowEl.querySelector('.comment-pin-badge')?.getBoundingClientRect();
+    input.onThreadClick(thread, {left: badgeRect?.left ?? rowRect.left, top: rowRect.top});
+  };
   // clang-format off
   render(html`
     <style>${commentsPaneStyles}</style>
@@ -192,22 +205,23 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
             item => item.thread.id,
             item => html`
               <li
-                class="comment-thread-item"
+                class="comment-thread-item ${item.thread.isOrphaned ? 'orphaned' : ''}"
                 role="listitem"
                 tabindex="0"
-                @click=${() => input.onThreadClick(item.thread)}
+                @click=${(e: Event) => onThreadClick(e, item.thread)}
                 @keydown=${(e: KeyboardEvent) => {
                   if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    input.onThreadClick(item.thread);
+                    onThreadClick(e, item.thread);
                   }
                 }}
                 jslog=${VisualLogging.item('comment-thread').track({ click: true })}>
-                <div class="comment-pin-badge">${item.thread.index}</div>
-                <span class="anchor-chip">
+                <div class="comment-pin-badge" aria-hidden="true"></div>
+                <span class="anchor-chip ${item.thread.isOrphaned ? 'orphaned' : ''}">
                   ${'node' in item.title ?
-                    widget(CommonPanels.DOMLinkifier.DOMNodeLink, { node: item.title.node, options: { preventKeyboardFocus: true } }) :
+                    widget(CommonPanels.DOMLinkifier.DOMNodeLink, { node: item.title.node, options: { preventKeyboardFocus: true, disabled: item.thread.isOrphaned } }) :
                     html`<span class="anchor-chip-text">${item.title.text}</span>`}
+                  ${item.thread.isOrphaned ? html`<span class="orphaned-label">(${i18nString(UIStrings.removed)})</span>` : Lit.nothing}
                 </span>
                 <div class="comment-text">${item.commentText}</div>
                 ${renderThreadStatus(item.thread, input.onDeleteThread)}
@@ -311,8 +325,11 @@ export class CommentsPane extends UI.Widget.Widget {
     this.requestUpdate();
   };
 
-  #handleThreadClick = (thread: CommentManager.CommentManager.CommentThread): void => {
-    void Common.Revealer.reveal(thread);
+  #handleThreadClick = (
+      thread: CommentManager.CommentManager.CommentThread,
+      position?: {left: number, top: number},
+      ): void => {
+    void Common.Revealer.reveal(new CommentManager.CommentThread.RevealableThread(thread, position));
   };
 
   #handleDeleteThread = (threadId: string): void => {

package/front_end/panels/comments/commentsPane.css

@@ -123,20 +123,19 @@
   }
 
   .comment-pin-badge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     width: var(--sys-size-9);
     height: var(--sys-size-9);
     margin-right: var(--sys-size-2);
     border-radius: var(--sys-shape-corner-full) var(--sys-shape-corner-full) var(--sys-shape-corner-full) var(--sys-shape-corner-extra-small);
     background-color: var(--sys-color-primary);
-    color: var(--sys-color-on-primary);
-    font-size: var(--sys-typescale-body5-size);
-    font-weight: var(--ref-typeface-weight-bold);
     flex-shrink: 0;
   }
 
+  .comment-thread-item.orphaned .comment-pin-badge {
+    background-color: var(--sys-color-surface-variant);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
   .anchor-chip {
     display: flex;
     height: calc(var(--sys-size-8) + var(--sys-size-2));
@@ -155,6 +154,26 @@
     pointer-events: none;
   }
 
+  .anchor-chip.orphaned {
+    border-style: dashed;
+    border-color: var(--sys-color-neutral-outline);
+    background: transparent;
+    color: var(--sys-color-state-disabled);
+    gap: var(--sys-size-3);
+  }
+
+  .anchor-chip.orphaned .anchor-chip-text {
+    color: var(--sys-color-state-disabled);
+  }
+
+  .orphaned-label {
+    flex-shrink: 0;
+    color: var(--sys-color-on-surface-subtle);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    font-style: italic;
+  }
+
   .anchor-chip devtools-widget,
   .anchor-chip-text {
     display: block;

package/front_end/panels/common/CommentThreadWidget.ts

@@ -231,7 +231,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             ${buttonText}
           </devtools-button>
         </div>
-      ` : html`${input.comments.map(comment => comment.author === 'DEVELOPER' ? html`
+      ` : html`<div class="thread-body">${input.comments.map(comment => comment.author === 'DEVELOPER' ? html`
           <div class="comment-text"
             @click=${() => {input.onSetEditMode(true);}}
           >
@@ -248,7 +248,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               )}
             </div>
           </div>
-        `)}
+        `)}</div>
       `}
     </div>
   `, target);