chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/ui/legacy/TextPrompt.ts

@@ -68,7 +68,7 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  * @attribute value Sets the initial text value that's edited when editing starts. If not provided, the slot's inner text is used.
  */
 export class TextPromptElement extends HTMLElement {
-  static readonly observedAttributes = ['editing', 'completions', 'placeholder', 'cancel-on-blur'];
+  static readonly observedAttributes = ['editing', 'completions', 'placeholder', 'cancel-on-blur', 'render-as-block'];
   static formAssociated = true;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #internals = this.attachInternals();
@@ -79,6 +79,7 @@ export class TextPromptElement extends HTMLElement {
   #completionObserver = new MutationObserver(this.#onMutate.bind(this));
   #validator?: (value: string) => null | Platform.UIString.LocalizedString;
   #cancelOnBlur = false;
+  #isEditing = false;
 
   constructor() {
     super();
@@ -101,6 +102,18 @@ export class TextPromptElement extends HTMLElement {
     return this.#cancelOnBlur;
   }
 
+  set renderAsBlock(renderAsBlock: boolean) {
+    if (renderAsBlock) {
+      this.setAttribute('render-as-block', '');
+    } else {
+      this.removeAttribute('render-as-block');
+    }
+  }
+
+  get renderAsBlock(): boolean {
+    return this.hasAttribute('render-as-block');
+  }
+
   #onMutate(changes: MutationRecord[]): void {
     const listId = this.getAttribute('completions');
     if (!listId) {
@@ -159,6 +172,17 @@ export class TextPromptElement extends HTMLElement {
           this.#completionObserver.disconnect();
         }
         break;
+      case 'render-as-block':
+        if (this.#isEditing) {
+          if (isTruthy(newValue)) {
+            this.#textPrompt.renderAsBlock();
+            this.#entrypoint.style.display = 'block';
+          } else {
+            this.#textPrompt.renderAsInlineBlock();
+            this.#entrypoint.style.display = 'inline';
+          }
+        }
+        break;
     }
   }
 
@@ -188,6 +212,7 @@ export class TextPromptElement extends HTMLElement {
   }
 
   #startEditing(): void {
+    this.#isEditing = true;
     const truncatedTextPlaceholder = this.getAttribute('placeholder');
     const placeholder = this.#entrypoint.createChild('span');
     const initialText = this.getAttribute('value') ?? this.#slot.deepInnerText();
@@ -198,6 +223,13 @@ export class TextPromptElement extends HTMLElement {
     }
     this.#slot.remove();
 
+    if (this.renderAsBlock) {
+      this.#textPrompt.renderAsBlock();
+      this.#entrypoint.style.display = 'block';
+    } else {
+      this.#textPrompt.renderAsInlineBlock();
+      this.#entrypoint.style.display = 'inline';
+    }
     const proxy =
         this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ !this.#cancelOnBlur));
     proxy.addEventListener('keydown', this.#editingValueKeyDown.bind(this));
@@ -206,6 +238,7 @@ export class TextPromptElement extends HTMLElement {
   }
 
   #stopEditing(): void {
+    this.#isEditing = false;
     this.#entrypoint.removeChildren();
     this.#entrypoint.appendChild(this.#slot);
     this.#textPrompt.detach();
@@ -224,6 +257,9 @@ export class TextPromptElement extends HTMLElement {
   }
 
   #done(e: Event, commit: boolean): void {
+    if (!this.#isEditing) {
+      return;
+    }
     const target = e.target as HTMLElement;
     const text = target.textContent || '';
     if (commit) {
@@ -238,9 +274,11 @@ export class TextPromptElement extends HTMLElement {
         return;
       }
 
+      this.#isEditing = false;
       this.dispatchEvent(new TextPromptElement.CommitEvent(text));
     } else {
       this.#internals.setValidity({});
+      this.#isEditing = false;
       this.dispatchEvent(new TextPromptElement.CancelEvent());
     }
     e.consume();
@@ -365,6 +403,16 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
 
   renderAsBlock(): void {
     this.proxyElementDisplay = 'block';
+    if (this.proxyElement) {
+      (this.proxyElement as HTMLElement).style.display = 'block';
+    }
+  }
+
+  renderAsInlineBlock(): void {
+    this.proxyElementDisplay = 'inline-block';
+    if (this.proxyElement) {
+      (this.proxyElement as HTMLElement).style.display = 'inline-block';
+    }
   }
 
   /**

package/front_end/ui/legacy/Treeoutline.ts

@@ -1864,7 +1864,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     }
   }
 
-  protected override addNodes(nodes: NodeList|Node[], nextSibling?: Node|null): void {
+  protected override addNodes(nodes: NodeList|Node[]): void {
     for (const node of getTreeNodes(nodes)) {
       if (TreeViewTreeElement.get(node)) {
         continue;  // Not sure this can happen
@@ -1876,10 +1876,18 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       if (parent.treeElement.childCount() === 0) {
         parent.treeElement.childrenListElement.classList.add(...parent.classes.values());
       }
-      while (nextSibling && nextSibling.nodeType !== Node.ELEMENT_NODE) {
-        nextSibling = nextSibling.nextSibling;
+      let nextElement: TreeElement|null = null;
+      for (let e: Element|null = node.nextElementSibling; e; e = e.nextElementSibling) {
+        const nextTreeEl = TreeViewTreeElement.get(e);
+        if (nextTreeEl) {
+          nextElement = nextTreeEl;
+          break;
+        }
+        if (e instanceof TreeElementWrapper && e.treeElement && e.treeElement.parent === parent.treeElement) {
+          nextElement = e.treeElement;
+          break;
+        }
       }
-      const nextElement = nextSibling ? TreeViewTreeElement.get(nextSibling) : null;
       const index = nextElement ? parent.treeElement.indexOfChild(nextElement) : parent.treeElement.children().length;
       let treeElement;
       if (node instanceof HTMLLIElement) {
@@ -1906,12 +1914,12 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
         }
       }
     }
-    for (const element of getStyleElements(nodes)) {
+    for (const element of new Set(getStyleElements(nodes))) {
       this.#treeOutline.shadowRoot.appendChild(element.cloneNode(true));
     }
   }
 
-  protected override removeNodes(nodes: NodeList): void {
+  protected override removeNodes(nodes: NodeList|Node[]): void {
     for (const node of getTreeNodes(nodes)) {
       if (node instanceof HTMLLIElement) {
         TreeViewTreeElement.get(node)?.remove();

package/front_end/ui/legacy/UIUtils.ts

@@ -1190,7 +1190,7 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label'];
+  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label', 'small'];
 
   readonly #shadowRoot!: DocumentFragment;
   #checkboxElement!: HTMLInputElement;
@@ -1255,6 +1255,8 @@ export class CheckboxLabel extends HTMLElement {
       this.#textElement.title = newValue ?? '';
     } else if (name === 'aria-label') {
       this.#checkboxElement.ariaLabel = newValue;
+    } else if (name === 'small') {
+      this.#checkboxElement.classList.toggle('small', newValue !== null);
     }
   }
 
@@ -1282,6 +1284,14 @@ export class CheckboxLabel extends HTMLElement {
     this.toggleAttribute('checked', checked);
   }
 
+  get small(): boolean {
+    return this.hasAttribute('small');
+  }
+
+  set small(small: boolean) {
+    this.toggleAttribute('small', small);
+  }
+
   set disabled(disabled: boolean) {
     this.toggleAttribute('disabled', disabled);
   }
@@ -2114,10 +2124,6 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
           value['_$litType$'] === 1);
     }
 
-    function isLitDirective(value: unknown): value is {values: unknown[]} {
-      return Boolean(typeof value === 'object' && value && '_$litDirective$' in value && 'values' in value);
-    }
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function isCallable(value: unknown): value is(...args: any[]) => any {
       // Native class constructors cannot be invoked without 'new', and we shouldn't attempt to wrap them.
@@ -2138,7 +2144,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
         HTMLElementWithLightDOMTemplate.patchLitTemplate(value);
         return value;
       }
-      if (isLitDirective(value)) {
+      if (Lit.isLitDirective(value)) {
         for (let i = 0; i < value.values.length; i++) {
           const subvalue = value.values[i];
           if (isCallable(subvalue)) {
@@ -2176,9 +2182,28 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
 
   #onChange(mutationList: MutationRecord[]): void {
     this.onChange(mutationList);
-    for (const mutation of mutationList) {
-      this.removeNodes(mutation.removedNodes);
-      this.addNodes(mutation.addedNodes, mutation.nextSibling);
+    const addedNodes = new Set<Node>();
+    const removedNodes = new Set<Node>();
+    for (let i = 0; i < mutationList.length; i++) {
+      const mutation = mutationList[i];
+      for (const node of mutation.addedNodes) {
+        addedNodes.add(node);
+      }
+      for (const node of mutation.removedNodes) {
+        removedNodes.add(node);
+      }
+    }
+    if (removedNodes.size > 0) {
+      this.removeNodes([...removedNodes]);
+    }
+
+    const finalAddedNodes = [...addedNodes].filter(n => this.templateRoot.contains(n));
+    if (finalAddedNodes.length > 0) {
+      this.addNodes(finalAddedNodes);
+    }
+
+    for (let i = 0; i < mutationList.length; i++) {
+      const mutation = mutationList[i];
       this.updateNode(mutation.target, mutation.attributeName);
     }
   }
@@ -2189,10 +2214,10 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   protected updateNode(_node: Node, _attributeName: string|null): void {
   }
 
-  protected addNodes(_nodes: NodeList|Node[], _nextSibling?: Node|null): void {
+  protected addNodes(_nodes: NodeList|Node[]): void {
   }
 
-  protected removeNodes(_nodes: NodeList): void {
+  protected removeNodes(_nodes: NodeList|Node[]): void {
   }
 
   static findCorrespondingElement(

package/front_end/ui/legacy/Widget.ts

@@ -76,16 +76,20 @@ export function widgetConfig<F extends WidgetFactory<AnyWidget>, ParamKeys exten
 let currentUpdateQueue: Map<AnyWidget, PromiseWithResolvers<void>>|null = null;
 const currentlyProcessed = new Set<AnyWidget>();
 let nextUpdateQueue = new Map<AnyWidget, PromiseWithResolvers<void>>();
-let pendingAnimationFrame: number|null = null;
+const pendingAnimationFrames = new WeakMap<Window, number>();
 let overallUpdatePromise: PromiseWithResolvers<void>|null = null;
 
 function enqueueIntoNextUpdateQueue(widget: AnyWidget): Promise<void> {
   const scheduledUpdate = nextUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
   nextUpdateQueue.delete(widget);
   nextUpdateQueue.set(widget, scheduledUpdate);
-  if (pendingAnimationFrame === null) {
-    const widgetWindow = widget.contentElement.window() || window;
-    pendingAnimationFrame = widgetWindow.requestAnimationFrame(runNextUpdate);
+  const widgetWindow = widget.contentElement.window() || window;
+  if (!pendingAnimationFrames.has(widgetWindow)) {
+    const frameId = widgetWindow.requestAnimationFrame(() => {
+      pendingAnimationFrames.delete(widgetWindow);
+      runNextUpdate();
+    });
+    pendingAnimationFrames.set(widgetWindow, frameId);
   }
   return scheduledUpdate.promise;
 }
@@ -121,14 +125,13 @@ function cancelUpdate(widget: AnyWidget): void {
 
 function resolveOverallUpdatePromise(): void {
   if (currentlyProcessed.size === 0 && (!currentUpdateQueue || currentUpdateQueue.size === 0) &&
-      nextUpdateQueue.size === 0 && !pendingAnimationFrame && overallUpdatePromise) {
+      nextUpdateQueue.size === 0 && overallUpdatePromise) {
     overallUpdatePromise.resolve();
     overallUpdatePromise = null;
   }
 }
 
 function runNextUpdate(): void {
-  pendingAnimationFrame = null;
   if (!currentUpdateQueue) {
     currentUpdateQueue = nextUpdateQueue;
     nextUpdateQueue = new Map();
@@ -155,9 +158,13 @@ function runNextUpdate(): void {
         const nextUpdate = nextUpdateQueue.get(widget);
         if (nextUpdate) {
           void nextUpdate.promise.then(resolve);
-          if (pendingAnimationFrame === null) {
-            const widgetWindow = widget.contentElement.window() || window;
-            pendingAnimationFrame = widgetWindow.requestAnimationFrame(runNextUpdate);
+          const widgetWindow = widget.contentElement.window() || window;
+          if (!pendingAnimationFrames.has(widgetWindow)) {
+            const frameId = widgetWindow.requestAnimationFrame(() => {
+              pendingAnimationFrames.delete(widgetWindow);
+              runNextUpdate();
+            });
+            pendingAnimationFrames.set(widgetWindow, frameId);
           }
         } else {
           resolve();
@@ -578,7 +585,7 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   }
 
   static get allUpdatesComplete(): Promise<void> {
-    if (!pendingAnimationFrame && !currentUpdateQueue && currentlyProcessed.size === 0) {
+    if (nextUpdateQueue.size === 0 && !currentUpdateQueue && currentlyProcessed.size === 0) {
       return Promise.resolve();
     }
     if (!overallUpdatePromise) {

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -688,10 +688,10 @@ export class CookiesTable extends UI.Widget.VBox {
       ]);
       void Common.Revealer.reveal(requestFilter);
     }, {jslogContext: 'show-requests-with-this-cookie'});
-    if (IssuesManager.RelatedIssue.hasIssues(cookie)) {
+    if (IssuesManager.RelatedIssue.hasIssues(cookie, IssuesManager.IssuesManager.IssuesManager.instance())) {
       contextMenu.revealSection().appendItem(i18nString(UIStrings.showIssueAssociatedWithThis), () => {
         // TODO(chromium:1077719): Just filter for the cookie instead of revealing one of the associated issues.
-        void IssuesManager.RelatedIssue.reveal(cookie);
+        void IssuesManager.RelatedIssue.reveal(cookie, IssuesManager.IssuesManager.IssuesManager.instance());
       }, {jslogContext: 'show-issue-associated-with-this'});
     }
   }

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -71,6 +71,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   #hideableColumns = new Set<string>();
   #hiddenColumns = new Set<string>();
   #usedCreationNode: DataGridElementNode|null = null;
+  #sortingChangedScheduled = false;
 
   constructor() {
     super();
@@ -247,6 +248,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       const sort = column.getAttribute('sort') === 'descending' ? Order.Descending :
           column.getAttribute('sort') === 'ascending'           ? Order.Ascending :
                                                                   undefined;
+      const disclosure = hasBooleanAttribute(column, 'disclosure');
       const columnDescriptor = {
         id,
         title: title as Platform.UIString.LocalizedString,
@@ -259,6 +261,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
         weight,
         editable,
         dataType,
+        disclosure,
       };
       this.#dataGrid.addColumn(columnDescriptor);
       this.#columns.push(columnDescriptor);
@@ -289,7 +292,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     return false;
   }
 
-  #getDataRows(nodes: NodeList): HTMLElement[] {
+  #getDataRows(nodes: NodeList|Node[]): HTMLElement[] {
     return [...nodes]
         .flatMap(node => {
           if (node instanceof HTMLTableRowElement) {
@@ -303,7 +306,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
         .filter(node => node.querySelector('td') && !hasBooleanAttribute(node, 'placeholder'));
   }
 
-  #getStyleElements(nodes: NodeList): HTMLElement[] {
+  #getStyleElements(nodes: NodeList|Node[]): HTMLElement[] {
     return [...nodes].flatMap(node => {
       if (node instanceof HTMLStyleElement) {
         return [node];
@@ -325,10 +328,16 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     return null;
   }
 
-  override addNodes(nodes: NodeList): void {
+  override addNodes(nodes: NodeList|Node[]): void {
     for (const element of this.#getDataRows(nodes)) {
+      if (getNode(element)) {
+        continue;
+      }
       const parentRow = element.parentElement?.closest('td')?.closest('tr');
       const parentDataGridNode = parentRow ? getNode(parentRow) : undefined;
+      if (parentRow && !parentDataGridNode) {
+        continue;
+      }
       const parentNode = parentDataGridNode || this.#dataGrid.rootNode();
       const nextNode = this.#findNextExistingNode(element);
       const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
@@ -352,14 +361,17 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       if (hasBooleanAttribute(element, 'highlighted')) {
         node.setHighlighted(true);
       }
+      if (hasBooleanAttribute(element, 'expanded')) {
+        node.expand();
+      }
     }
-    for (const element of this.#getStyleElements(nodes)) {
+    for (const element of new Set(this.#getStyleElements(nodes))) {
       this.#shadowRoot.appendChild(element.cloneNode(true));
     }
-    this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
+    this.#scheduleSortingChanged();
   }
 
-  override removeNodes(nodes: NodeList): void {
+  override removeNodes(nodes: NodeList|Node[]): void {
     for (const element of this.#getDataRows(nodes)) {
       const node = getNode(element);
       if (node) {
@@ -387,6 +399,12 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
         dataGridNode.setInactive(hasBooleanAttribute(dataRow, 'inactive'));
       } else if (attributeName === 'highlighted') {
         dataGridNode.setHighlighted(hasBooleanAttribute(dataRow, 'highlighted'));
+      } else if (attributeName === 'expanded') {
+        if (hasBooleanAttribute(dataRow, 'expanded')) {
+          dataGridNode.expand();
+        } else {
+          dataGridNode.collapse();
+        }
       } else {
         this.#updateHasChildren(dataGridNode, dataRow);
         dataGridNode.refresh();
@@ -394,6 +412,17 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     }
   }
 
+  #scheduleSortingChanged(): void {
+    if (this.#sortingChangedScheduled) {
+      return;
+    }
+    this.#sortingChangedScheduled = true;
+    queueMicrotask(() => {
+      this.#sortingChangedScheduled = false;
+      this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
+    });
+  }
+
   deselectRow(): void {
     this.#dataGrid.selectedNode?.deselect();
   }
@@ -430,7 +459,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     // However, if we have nodes added, that will trigger a sort anyway so we
     // don't need to re-sort again.
     if (this.#dataGrid.sortColumnId() !== null && !hadAddedNodes) {
-      this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
+      this.#scheduleSortingChanged();
     }
   }