chrome-devtools-frontend 1.0.1662289 → 1.0.1662965

package/front_end/panels/recorder/recorder.ts

@@ -4,7 +4,6 @@
 
 import * as ControlButton from './ControlButton.js';
 import * as CreateRecordingView from './CreateRecordingView.js';
-import * as RecorderController from './RecorderController.js';
 import * as RecorderEvents from './RecorderEvents.js';
 import * as RecorderPanel from './RecorderPanel.js';
 import * as RecordingListView from './RecordingListView.js';
@@ -18,7 +17,6 @@ import * as TimelineSection from './TimelineSection.js';
 export {
   ControlButton,
   CreateRecordingView,
-  RecorderController,
   RecorderEvents,
   RecorderPanel,
   RecordingListView,

package/front_end/panels/settings/AISettingsTab.ts

@@ -75,6 +75,16 @@ const UIStrings = {
    * @description Label for a button to collapse an accordion.
    */
   showLess: 'Show less',
+  /**
+   * @description Accessible label for a button to expand an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showMoreOfSetting: 'Show more of {PH1}',
+  /**
+   * @description Accessible label for a button to collapse an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showLessOfSetting: 'Show less of {PH1}',
   /**
    * @description Header for a list of feature attributes. 'When on, you’ll be able to …'.
    */
@@ -358,6 +368,9 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
           <devtools-button
             .data=${{
               title: settingData.settingExpandState.isSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
+              accessibleLabel: settingData.settingExpandState.isSettingExpanded ?
+                  i18nString(UIStrings.showLessOfSetting, {PH1: settingData.settingName}) :
+                  i18nString(UIStrings.showMoreOfSetting, {PH1: settingData.settingName}),
               size: Buttons.Button.Size.SMALL,
               iconName: settingData.settingExpandState.isSettingExpanded ? 'chevron-up' : 'chevron-down',
               variant: Buttons.Button.Variant.ICON,

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 27fac8d1924b08d4a6bb70e21df6482a1d430b2b
+Revision: 7eaaa785deda657a652efc66266b8cc2957167f9
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/spinners/Spinner.ts

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import {html, render} from '../../lit/lit.js';
+import {Directives, html, render} from '../../lit/lit.js';
 
 import spinnerStyles from './spinner.css.js';
 
+const {classMap} = Directives;
+
 export interface SpinnerProperties {
   active: boolean;
 }
@@ -48,39 +50,34 @@ export class Spinner extends HTMLElement {
   }
 
   #render(): void {
-    // The radius of the circles are set to 2.75rem as per implementation
-    // of indeterminate progress indicator in
-    // https://github.com/material-components/material-components-web/tree/master/packages/mdc-circular-progress.
-    // Changing the value of the radius will cause errors in animation.
+    // The radius is set to 40 to allow for stroke width padding, and
+    // pathLength=100 is used for scalable, unitless animation length.
     // clang-format off
-    const content = this.active ? html`
-      <div class="indeterminate-spinner">
-        <div class="left-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-        <div class="center-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-        <div class="right-circle">
-          <svg viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="2.75rem"></circle></svg>
-        </div>
-      </div>
-    ` : html`
-      <div class="inactive-spinner">
-        <svg viewBox="0 0 100 100">
-          <circle cx="50%" cy="50%" r="2.75rem"></circle>
+    const spinnerClasses = {
+      indeterminate: this.active,
+      spinner: true,
+    };
+
+    render(
+      html`
+        <style>
+          ${spinnerStyles}
+        </style>
+        <svg
+          class=${classMap(spinnerClasses)}
+          viewBox="0 0 100 100"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="44"
+            pathLength="100"
+          ></circle>
         </svg>
-      </div>
-    `;
-    render(html`
-      <style>
-        ${spinnerStyles}
-      </style>
-      ${content}
-    `, this.#shadow, {host: this});
+      `,
+      this.#shadow,
+      {host: this},
+    );
     // clang-format on
   }
 }

package/front_end/ui/components/spinners/spinner.css

@@ -18,87 +18,43 @@
   animation: spinner-container-animation 1.5s linear infinite;
 }
 
-.indeterminate-spinner {
+.spinner {
+  height: 100%;
+  width: 100%;
+}
+
+.spinner.indeterminate {
   /*
   * The value for animation duration has been obtained by plugging in values defined
   * in packages/mdc-circular-progress/_circular-progress-theme.scss to
   * functions defined in packages/mdc-circular-progress/_circular-progress.scss.
   * https://github.com/material-components/material-components-web
   */
-  animation: indeterminate-spinner-animation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  height: 100%;
-  width: 100%;
-
-  .left-circle {
-    height: 100%;
-    width: 50%;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-
-    & > svg {
-      position: absolute;
-      width: 200%;
-      /*
-      * The value for animation duration has been obtained from values defined
-      * in packages/mdc-circular-progress/_circular-progress-theme.scss
-      * https://github.com/material-components/material-components-web
-      */
-      animation: indeterminate-left-circle-spinner-animation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-    }
-  }
-
-  .center-circle {
-    height: 100%;
-    width: 5%;
-    display: inline-block;
-    position: absolute;
-    overflow: hidden;
-    top: 0;
-    left: 47.5%;
-    box-sizing: border-box;
-
-    & > svg {
-      position: absolute;
-      width: 2000%;
-      left: -900%;
-      transform: rotate(180deg);
-    }
-  }
+  animation: indeterminate-spinner-animation 5332ms cubic-bezier(0.4, 0, 0.2, 1)
+    infinite both;
 
-  .right-circle {
-    height: 100%;
-    width: 50%;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-
-    & > svg {
-      position: absolute;
-      width: 200%;
-      left: -100%;
-      /*
-      * The value for animation duration has been obtained from values defined
-      * in packages/mdc-circular-progress/_circular-progress-theme.scss
-      * https://github.com/material-components/material-components-web
-      */
-      animation: indeterminate-right-circle-spinner-animation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-    }
-  }
 }
 
-.inactive-spinner circle {
+.spinner circle {
   stroke: var(--sys-color-state-disabled);
   stroke-width: var(--sys-size-6);
   fill: transparent;
+  transform-origin: 50% 50%;
+  transform: rotate(-90deg);
 }
 
-.indeterminate-spinner circle {
+
+.spinner.indeterminate circle {
   stroke: var(--sys-color-primary);
-  stroke-width: var(--sys-size-6);
-  fill: transparent;
-  stroke-dasharray: 290px;
-  stroke-dashoffset: 150px;
+  stroke-dasharray: 100, 100;
+  stroke-dashoffset: 0;
+  /*
+  * The value for animation duration has been obtained from values defined
+  * in packages/mdc-circular-progress/_circular-progress-theme.scss
+  * https://github.com/material-components/material-components-web
+  */
+  animation: indeterminate-spinner-circle-animation 1333ms
+    cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 @keyframes spinner-container-animation {
@@ -141,30 +97,22 @@
   }
 }
 
-@keyframes indeterminate-left-circle-spinner-animation {
-  0% {
-    transform: rotate(265deg);
-  }
-
-  50% {
-    transform: rotate(130deg);
-  }
-
-  100% {
-    transform: rotate(265deg);
-  }
-}
-
-@keyframes indeterminate-right-circle-spinner-animation {
+@keyframes indeterminate-spinner-circle-animation {
   0% {
-    transform: rotate(-265deg);
+    stroke-dasharray: 5, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-90deg);
   }
 
   50% {
-    transform: rotate(-130deg);
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-225deg);
   }
 
   100% {
-    transform: rotate(-265deg);
+    stroke-dasharray: 5, 100;
+    stroke-dashoffset: 0;
+    transform: rotate(-90deg);
   }
 }

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

@@ -2124,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.
@@ -2148,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)) {
@@ -2186,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);
     }
   }
@@ -2199,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/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();
     }
   }