chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

package/front_end/ui/legacy/Toolbar.ts

@@ -11,7 +11,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {createIcon} from '../kit/kit.js';
-import type {TemplateResult} from '../lit/lit.js';
+import {nothing, render, type TemplateResult} from '../lit/lit.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -412,10 +412,13 @@ export class Toolbar extends HTMLElement {
       const widget = Widget.get(item.element);
       if (widget) {
         widget.detach();
+      } else {
+        item.element.remove();
       }
     }
     this.items = [];
-    this.removeChildren();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(nothing, this);
   }
 
   hideSeparatorDupes(): void {

package/front_end/ui/legacy/Treeoutline.ts

@@ -37,7 +37,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Buttons from '../components/buttons/buttons.js';
 import * as Highlighting from '../components/highlighting/highlighting.js';
 import type {Icon} from '../kit/kit.js';
@@ -1427,8 +1427,8 @@ function hasBooleanAttribute(element: Element, name: string): boolean {
   return element.hasAttribute(name) && element.getAttribute(name) !== 'false';
 }
 
-interface TreeNode<NodeT> {
-  children(): NodeT[];
+export interface TreeNode<NodeT> {
+  treeNodeChildren(): Iterable<NodeT>;
 }
 
 export interface TreeSearchResult<NodeT> {
@@ -1438,17 +1438,23 @@ export interface TreeSearchResult<NodeT> {
 }
 
 export class TreeSearch < NodeT extends TreeNode<NodeT>,
-                                        SearchResultT extends TreeSearchResult<NodeT >= TreeSearchResult<NodeT>> {
+                                        SearchResultT extends TreeSearchResult<NodeT >= TreeSearchResult<NodeT>> extends
+    Common.ObjectWrapper.ObjectWrapper<TreeSearch.EventTypes> {
   #matches: SearchResultT[] = [];
   #currentMatchIndex = 0;
   #nodeMatchMap: WeakMap<NodeT, SearchResultT[]>|undefined;
 
-  reset(): void {
+  #reset(): void {
     this.#matches = [];
     this.#nodeMatchMap = undefined;
     this.#currentMatchIndex = 0;
   }
 
+  reset(): void {
+    this.#reset();
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
+  }
+
   currentMatch(): SearchResultT|undefined {
     return this.#matches.at(this.#currentMatchIndex);
   }
@@ -1497,11 +1503,13 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
 
   next(): SearchResultT|undefined {
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex + 1, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.currentMatch();
   }
 
   prev(): SearchResultT|undefined {
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex - 1, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.currentMatch();
   }
 
@@ -1529,7 +1537,7 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
     this.#matches.push(...preOrderMatches);
     updateCurrentMatchIndex(/* isPostOrder=*/ false);
     yield* preOrderMatches.values();
-    for (const child of node.children()) {
+    for (const child of node.treeNodeChildren()) {
       yield* this.#innerSearch(child, currentMatch, jumpBackwards, match);
     }
     const postOrderMatches = match(node, /* isPostOrder=*/ true);
@@ -1540,16 +1548,27 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
 
   search(node: NodeT, jumpBackwards: boolean, match: (node: NodeT, isPostOrder: boolean) => SearchResultT[]): number {
     const currentMatch = this.currentMatch();
-    this.reset();
+    this.#reset();
     // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars
     for (const _ of this.#innerSearch(node, currentMatch, jumpBackwards, match)) {
       // run the generator
     }
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.#matches.length;
   }
 }
 
+export namespace TreeSearch {
+  export const enum Events {
+    SEARCH_CHANGED = 'SearchChanged',
+  }
+
+  export interface EventTypes {
+    [Events.SEARCH_CHANGED]: void;
+  }
+}
+
 class TreeViewTreeElement extends TreeElement {
   static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog']));
   #clonedAttributes = new Set<string>();
@@ -1864,7 +1883,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 +1895,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 +1933,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/color_picker/Spectrum.ts

@@ -38,7 +38,7 @@ import * as Host from '../../../../core/host/host.js';
 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 TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as SrgbOverlay from '../../../components/srgb_overlay/srgb_overlay.js';
 import {createIcon, Icon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';

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

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Platform from '../../../../core/platform/platform.js';
-import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
@@ -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();
     }
   }
 

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

@@ -4,7 +4,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as RenderCoordinator from '../../../components/render_coordinator/render_coordinator.js';
 
 import {type DataGridData, DataGridImpl, DataGridNode, Events as DataGridEvents, type Parameters} from './DataGrid.js';

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -36,7 +36,7 @@
   position: sticky;
   top: 0;
   height: 21px;
-  z-index: 1;
+  z-index: 2;
 }
 
 .data-grid .aria-live-label {

package/front_end/ui/legacy/components/inline_editor/AnimationTimingUI.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* 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 Geometry from '../../../../models/geometry/geometry.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -12,6 +13,15 @@ import type {AnimationTimingModel} from './AnimationTimingModel.js';
 import {BezierUI} from './BezierUI.js';
 import {CSSLinearEasingModel, type Point} from './CSSLinearEasingModel.js';
 
+const UIStrings = {
+  /**
+   * @description Tooltip text for control points in the linear easing editor.
+   */
+  doubleClickToDelete: 'Double-click to delete',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/AnimationTimingUI.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 const DOUBLE_CLICK_DELAY = 500;
 
 interface Params {
@@ -130,6 +140,10 @@ class LinearEasingPresentation {
     circle.setAttribute('cx', String(controlX));
     circle.setAttribute('cy', String(controlY));
     circle.setAttribute('r', String(this.params.pointRadius));
+    // SVG sub-elements do not support tooltips via the 'title' attribute.
+    // Instead, a child <title> element must be appended to the shape.
+    const title = UI.UIUtils.createSVGChild(circle, 'title');
+    title.textContent = i18nString(UIStrings.doubleClickToDelete);
   }
 
   timingPointToPosition(point: Point): Position {
@@ -178,6 +192,10 @@ class LinearEasingUI {
   #doubleClickTimer?: number;
   #pointIndexForDoubleClick?: number;
   #mouseDownPosition?: {x: number, y: number};
+  /**
+   * The rendered SVG coordinate position of the dragged control point at the start of the drag gesture.
+   */
+  #dragStartPointPosition?: Position;
 
   #svg: Element;
 
@@ -214,6 +232,8 @@ class LinearEasingUI {
   #handleControlPointClick(event: MouseEvent, pointIndex: number): void {
     this.#selectedPointIndex = pointIndex;
     this.#mouseDownPosition = {x: event.x, y: event.y};
+    const controlPosition = this.#presentation.renderedPositions?.[pointIndex];
+    this.#dragStartPointPosition = controlPosition ? {...controlPosition} : undefined;
 
     // This is a workaround to understand whether the user double clicked
     // a point or not. The reason is, we also want to handle drag interactions
@@ -259,26 +279,20 @@ class LinearEasingUI {
   }
 
   #updatePointPosition(mouseX: number, mouseY: number): void {
-    if (this.#selectedPointIndex === undefined || this.#mouseDownPosition === undefined) {
-      return;
-    }
-
-    const controlPosition = this.#presentation.renderedPositions?.[this.#selectedPointIndex];
-    if (!controlPosition) {
+    if (this.#selectedPointIndex === undefined || this.#mouseDownPosition === undefined ||
+        this.#dragStartPointPosition === undefined) {
       return;
     }
 
+    // By calculating the position relative to the initial drag start position (#dragStartPointPosition)
+    // and the total drag distance (deltaX/deltaY), we avoid incremental coordinate drift and rounding
+    // errors that would accumulate if we updated the mouse starting point relative to the previous frame's position.
     const deltaX = mouseX - this.#mouseDownPosition.x;
     const deltaY = mouseY - this.#mouseDownPosition.y;
 
-    this.#mouseDownPosition = {
-      x: mouseX,
-      y: mouseY,
-    };
-
     const newPoint = {
-      x: controlPosition.x + deltaX,
-      y: controlPosition.y + deltaY,
+      x: this.#dragStartPointPosition.x + deltaX,
+      y: this.#dragStartPointPosition.y + deltaY,
     };
 
     this.#model.setPoint(this.#selectedPointIndex, this.#presentation.positionToTimingPoint(newPoint));

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../../../core/common/common.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -135,11 +136,13 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     if (!pivot) {
       return null;
     }
+    const logContext = VisualLogging.bezierPresetCategory()
+                           .track({click: true})
+                           .context(Platform.StringUtilities.toKebabCase(presetGroup[0].name));
 
     const presetElement = document.createElement('div');
     presetElement.classList.add('bezier-preset-category');
-    presetElement.setAttribute(
-        'jslog', `${VisualLogging.bezierPresetCategory().track({click: true}).context(presetGroup[0].name)}`);
+    presetElement.setAttribute('jslog', `${logContext}`);
     const iconElement = UI.UIUtils.createSVGChild(presetElement, 'svg', 'bezier-preset monospace');
     const category = {presets: presetGroup, presetIndex: 0, icon: presetElement};
     this.presetUI.draw(pivot, iconElement);

package/front_end/ui/legacy/components/inline_editor/CSSLinearEasingModel.ts

@@ -6,8 +6,17 @@ import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.
 
 const cssParser = CodeMirror.css.cssLanguage.parser;
 
+/**
+ * Represents a point in a linear easing function graph.
+ */
 export interface Point {
+  /**
+   * The timeline percentage fraction (0 to 100).
+   */
   input: number;
+  /**
+   * The progress value (typically between 0 and 1, but can exceed bounds for bounce/elastic effects).
+   */
   output: number;
 }
 
@@ -105,6 +114,10 @@ const KeywordToValue: Record<string, string> = {
   linear: 'linear(0 0%, 1 100%)',
 };
 
+/**
+ * Model representing a CSS `linear()` easing function, conforming to the CSS Easing Level 1 specification.
+ * It parses CSS linear easing text into a list of control points and manages point mutations.
+ */
 export class CSSLinearEasingModel {
   #points: Point[];
 
@@ -207,7 +220,17 @@ export class CSSLinearEasingModel {
     this.#points.splice(index, 1);
   }
 
+  /**
+   * Sets the timing point at the specified index, clamping its input value (percentage)
+   * to ensure it remains non-decreasing and within the bounds of neighboring points.
+   *
+   * @param index The index of the point to update.
+   * @param point The new timing point coordinates.
+   */
   setPoint(index: number, point: Point): void {
+    const minInput = index > 0 ? this.#points[index - 1].input : 0;
+    const maxInput = index < this.#points.length - 1 ? this.#points[index + 1].input : 100;
+    point.input = Math.max(minInput, Math.min(point.input, maxInput));
     this.#points[index] = point;
   }