chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/elements/DOMLinkifier.ts

@@ -21,8 +21,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface Options extends Common.Linkifier.Options {
+  hiddenClassList?: string[];
+}
+
 export const decorateNodeLabel = function(
-    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Common.Linkifier.Options): void {
+    node: SDK.DOMModel.DOMNode, parentElement: HTMLElement, options: Options): void {
   const originalNode = node;
   const isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
   if (isPseudo && node.parentNode) {
@@ -69,7 +73,7 @@ export const decorateNodeLabel = function(
       const classesElement = parentElement.createChild('span', 'extra node-label-class');
       for (let i = 0; i < classes.length; ++i) {
         const className = classes[i];
-        if (className && !foundClasses.has(className)) {
+        if (className && !options.hiddenClassList?.includes(className) && !foundClasses.has(className)) {
           const part = '.' + className;
           title += part;
           UI.UIUtils.createTextChild(classesElement, part);
@@ -93,22 +97,20 @@ export const decorateNodeLabel = function(
   UI.Tooltip.Tooltip.install(parentElement, options.tooltip || title);
 };
 
-export const linkifyNodeReference = function(
-    node: SDK.DOMModel.DOMNode|null, options: Common.Linkifier.Options|undefined = {
-      tooltip: undefined,
-      preventKeyboardFocus: undefined,
-      textContent: undefined,
-      isDynamicLink: false,
-    }): Node {
+export const linkifyNodeReference = function(node: SDK.DOMModel.DOMNode|null, options: Options|undefined = {
+  tooltip: undefined,
+  preventKeyboardFocus: undefined,
+  textContent: undefined,
+  isDynamicLink: false,
+}): Node {
   if (!node) {
     return document.createTextNode(i18nString(UIStrings.node));
   }
 
   const root = document.createElement('span');
   root.classList.add('monospace');
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles], delegatesFocus: undefined});
-  const link = (shadowRoot.createChild('button', 'node-link text-button link-style') as HTMLButtonElement);
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles]});
+  const link = shadowRoot.createChild('button', 'node-link text-button link-style');
   link.classList.toggle('dynamic-link', options.isDynamicLink);
   link.setAttribute('jslog', `${VisualLogging.link('node').track({click: true, keydown: 'Enter'})}`);
 
@@ -129,14 +131,13 @@ export const linkifyNodeReference = function(
 };
 
 export const linkifyDeferredNodeReference = function(
-    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Common.Linkifier.Options|undefined = {
+    deferredNode: SDK.DOMModel.DeferredDOMNode, options: Options|undefined = {
       tooltip: undefined,
       preventKeyboardFocus: undefined,
     }): Node {
   const root = document.createElement('div');
-  const shadowRoot =
-      UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles], delegatesFocus: undefined});
-  const link = (shadowRoot.createChild('button', 'node-link text-button link-style') as HTMLDivElement);
+  const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles]});
+  const link = shadowRoot.createChild('button', 'node-link text-button link-style');
   link.setAttribute('jslog', `${VisualLogging.link('node').track({click: true})}`);
   link.createChild('slot');
   link.addEventListener('click', deferredNode.resolve.bind(deferredNode, onDeferredNodeResolved), false);
@@ -166,7 +167,7 @@ export class Linkifier implements Common.Linkifier.Linkifier {
 
     return linkifierInstance;
   }
-  linkify(object: Object, options?: Common.Linkifier.Options): Node {
+  linkify(object: Object, options?: Options): Node {
     if (object instanceof SDK.DOMModel.DOMNode) {
       return linkifyNodeReference(object, options);
     }

package/front_end/panels/elements/ElementStatePaneWidget.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     'in-range',
     'out-of-range',
     'visited',
+    'link',
     'checked',
     'indeterminate',
     'placeholder-shown',
@@ -105,7 +106,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
       const args = checkboxes.lastCall.args;
       assert.strictEqual(args[0], node, 'Called forcePseudoState with wrong node');
       assert.strictEqual(args[1], pseudoClass, 'Called forcePseudoState with wrong pseudo-state');
-      assert.strictEqual(args[2], true, 'Called forcePseudoState with wrong enable state');
+      assert.isTrue(args[2], 'Called forcePseudoState with wrong enable state');
     }
   });
 
@@ -292,14 +293,14 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for a and area with href', async () => {
     await assertExpectedPseudoClasses(
         'a',
-        ['visited', 'read-write'],
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
 
     await assertExpectedPseudoClasses(
         'area',
-        ['visited', 'read-write'],
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -59,11 +59,12 @@ enum SpecificPseudoStates {
   IN_RANGE = 'in-range',
   OUT_OF_RANGE = 'out-of-range',
   VISITED = 'visited',
+  LINK = 'link',
   CHECKED = 'checked',
   INDETERMINATE = 'indeterminate',
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
-}  // TODO(crbug.com/332914922): Also add :link and tests for :visited when the bug is fixed.
+}
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
   private readonly inputs: HTMLInputElement[];
@@ -108,7 +109,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const createElementStateCheckbox = (state: string): HTMLDivElement => {
       const div = document.createElement('div');
       div.id = state;
-      const label = UI.UIUtils.CheckboxLabel.create(':' + state, undefined, undefined, undefined, true);
+      const label =
+          UI.UIUtils.CheckboxLabel.createWithStringLiteral(':' + state, undefined, undefined, undefined, true);
       const input = label.checkboxElement;
       this.inputStates.set(input, state);
       input.addEventListener('click', (clickListener as EventListener), false);
@@ -207,6 +209,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.OUT_OF_RANGE, createElementStateCheckbox(SpecificPseudoStates.OUT_OF_RANGE));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.VISITED, createElementStateCheckbox(SpecificPseudoStates.VISITED));
+    this.specificPseudoStateDivs.set(SpecificPseudoStates.LINK, createElementStateCheckbox(SpecificPseudoStates.LINK));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.CHECKED, createElementStateCheckbox(SpecificPseudoStates.CHECKED));
     this.specificPseudoStateDivs.set(
@@ -225,6 +228,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     setDualStateCheckboxes(SpecificPseudoStates.READ_ONLY, SpecificPseudoStates.READ_WRITE);
     setDualStateCheckboxes(SpecificPseudoStates.IN_RANGE, SpecificPseudoStates.OUT_OF_RANGE);
     setDualStateCheckboxes(SpecificPseudoStates.ENABLED, SpecificPseudoStates.DISABLED);
+    setDualStateCheckboxes(SpecificPseudoStates.VISITED, SpecificPseudoStates.LINK);
 
     this.specificHeader = document.createElement('details');
     this.specificHeader.classList.add('specific-details');
@@ -259,7 +263,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([elementStatePaneWidgetStyles]);
     this.update();
   }
-  private update(): void {
+  override update(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
@@ -381,8 +385,10 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
     if (isElementOfTypes(node, ['a', 'area']) && node.getAttribute('href') !== undefined) {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, false);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, false);
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, true);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, true);
     }
 
     if (isInputWithTypeRadioOrCheckbox(node) || isElementOfTypes(node, ['option'])) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -49,6 +49,7 @@ import type {AXTreeNodeData} from './AccessibilityTreeUtils.js';
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
+import {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
 import type {ElementsTreeElement} from './ElementsTreeElement.js';
@@ -145,6 +146,10 @@ const UIStrings = {
    * @description Accessible name for the DOM tree explorer view.
    */
   domTreeExplorer: 'DOM tree explorer',
+  /**
+   * @description A context menu item to reveal a submenu with badge settings.
+   */
+  adornerSettings: 'Badge settings',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
@@ -202,7 +207,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private currentSearchResultIndex: number;
   pendingNodeReveal: boolean;
   private readonly adornerManager: ElementsComponents.AdornerManager.AdornerManager;
-  private adornerSettingsPane: ElementsComponents.AdornerSettingsPane.AdornerSettingsPane|null;
   private readonly adornersByName: Map<string, Set<Adorners.Adorner.Adorner>>;
   accessibilityTreeButton?: HTMLElement;
   domTreeButton?: HTMLElement;
@@ -276,9 +280,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    this.stylesWidget = StylesSidebarPane.instance();
-    this.computedStyleWidget = new ComputedStyleWidget();
-    this.metricsWidget = new MetricsSidebarPane();
+    const computedStyleModel = new ComputedStyleModel();
+    this.stylesWidget = new StylesSidebarPane(computedStyleModel);
+    this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
+    this.metricsWidget = new MetricsSidebarPane(computedStyleModel);
 
     Common.Settings.Settings.instance()
         .moduleSetting('sidebar-position')
@@ -300,7 +305,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
         Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
-    this.adornerSettingsPane = null;
     this.adornersByName = new Map();
   }
 
@@ -1186,30 +1190,23 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  showAdornerSettingsPane(): void {
-    // Delay the initialization of the pane to the first showing
-    // since usually this pane won't be used.
-    if (!this.adornerSettingsPane) {
-      this.adornerSettingsPane = new ElementsComponents.AdornerSettingsPane.AdornerSettingsPane();
-      this.adornerSettingsPane.addEventListener('adornersettingupdated', (event: Event) => {
-        const {adornerName, isEnabledNow, newSettings} =
-            (event as ElementsComponents.AdornerSettingsPane.AdornerSettingUpdatedEvent).data;
-        const adornersToUpdate = this.adornersByName.get(adornerName);
+  populateAdornerSettingsContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const adornerSubMenu = contextMenu.viewSection().appendSubMenuItem(
+        i18nString(UIStrings.adornerSettings), false, 'show-adorner-settings');
+    const adornerSettings = this.adornerManager.getSettings();
+    for (const [adorner, isEnabled] of adornerSettings) {
+      adornerSubMenu.defaultSection().appendCheckboxItem(adorner, () => {
+        const updatedIsEnabled = !isEnabled;
+        const adornersToUpdate = this.adornersByName.get(adorner);
         if (adornersToUpdate) {
-          for (const adorner of adornersToUpdate) {
-            isEnabledNow ? adorner.show() : adorner.hide();
+          for (const adornerToUpdate of adornersToUpdate) {
+            updatedIsEnabled ? adornerToUpdate.show() : adornerToUpdate.hide();
           }
         }
-        this.adornerManager.updateSettings(newSettings);
-      });
-      this.searchableViewInternal.element.prepend(this.adornerSettingsPane);
+        this.adornerManager.getSettings().set(adorner, updatedIsEnabled);
+        this.adornerManager.updateSettings(adornerSettings);
+      }, {checked: isEnabled, jslogContext: adorner});
     }
-
-    const adornerSettings = this.adornerManager.getSettings();
-    this.adornerSettingsPane.data = {
-      settings: adornerSettings,
-    };
-    this.adornerSettingsPane.show();
   }
 
   isAdornerEnabled(adornerText: string): boolean {

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,17 +6,17 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {ComputedStyleModel, Events, type ComputedStyleChangedEvent} from './ComputedStyleModel.js';
+import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
   private readonly updateThrottler: Common.Throttler.Throttler;
   private updateWhenVisible: boolean;
-  constructor(delegatesFocus?: boolean) {
+  constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
     super(true, delegatesFocus);
     this.element.classList.add('flex-none');
-    this.computedStyleModelInternal = new ComputedStyleModel();
-    this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onCSSModelChanged, this);
+    this.computedStyleModelInternal = computedStyleModel;
+    this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
 
     this.updateThrottler = new Common.Throttler.Throttler(100);
     this.updateWhenVisible = false;
@@ -34,11 +34,11 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  async doUpdate(): Promise<void> {
+  override async doUpdate(): Promise<void> {
     return;
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;
@@ -57,6 +57,6 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent|null>): void {
+  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -522,7 +522,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       const selectedElementCommand = '$0';
       UI.Tooltip.Tooltip.install(
           this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
-      UI.ARIAUtils.markAsHidden(this.hintElement);
+      UI.ARIAUtils.setHidden(this.hintElement, true);
     }
   }
 
@@ -537,6 +537,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.contentElement && !this.aiButtonContainer) {
       this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {
@@ -1628,7 +1629,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const hasText = (forceValue || value.length > 0);
-    const attrSpanElement = (parentElement.createChild('span', 'webkit-html-attribute') as HTMLElement);
+    const attrSpanElement = parentElement.createChild('span', 'webkit-html-attribute');
     attrSpanElement.setAttribute(
         'jslog', `${VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
           change: true,

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -71,10 +71,6 @@ const UIStrings = {
    *@description Link text content in Elements Tree Outline of the Elements panel
    */
   reveal: 'reveal',
-  /**
-   * @description A context menu item to open the badge settings pane
-   */
-  adornerSettings: 'Badge settings\u2026',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -130,8 +126,7 @@ export class ElementsTreeOutline extends
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
     this.shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        shadowContainer,
-        {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default], delegatesFocus: undefined});
+        shadowContainer, {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default]});
     const outlineDisclosureElement = this.shadowRoot.createChild('div', 'elements-disclosure');
 
     this.elementInternal = this.element;
@@ -940,9 +935,7 @@ export class ElementsTreeOutline extends
       treeElement.populatePseudoElementContextMenu(contextMenu);
     }
 
-    contextMenu.viewSection().appendItem(i18nString(UIStrings.adornerSettings), () => {
-      ElementsPanel.instance().showAdornerSettingsPane();
-    }, {jslogContext: 'show-adorner-settings'});
+    ElementsPanel.instance().populateAdornerSettingsContextMenu(contextMenu);
 
     contextMenu.appendApplicableItems(treeElement.node());
     void contextMenu.show();

package/front_end/panels/elements/LayersWidget.ts

@@ -64,7 +64,7 @@ export class LayersWidget extends UI.Widget.Widget {
     return this.update();
   }
 
-  private async update(): Promise<void> {
+  override async update(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -36,6 +36,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
@@ -51,8 +52,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   }[];
   private isEditingMetrics?: boolean;
 
-  constructor() {
-    super();
+  constructor(computedStyleModel: ComputedStyleModel) {
+    super(computedStyleModel);
 
     this.originalPropertyData = null;
     this.previousPropertyDataCandidate = null;

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -80,6 +80,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
     super(true);
 
     this.sharedModel = sharedModel;
+    this.sharedModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
     this.sharedModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
 
     this.sectionTitle = document.createElement('div');

package/front_end/panels/elements/PropertyMatchers.test.ts

@@ -153,7 +153,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(match.space.map(n => ast.text(n)), ['in', 'srgb', 'var(--interpolation)', 'hue']);
+      assert.deepEqual(match.space.map(n => ast.text(n)), ['in', 'srgb', 'var(--interpolation)', 'hue']);
       assert.strictEqual(match.color1.map(n => ast.text(n)).join(), 'red,var(--percentage)');
       assert.strictEqual(match.color2.map(n => ast.text(n)).join(), 'rgb(var(--rgb))');
     }
@@ -189,7 +189,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       assert.exists(ast, text);
       assert.exists(match, text);
 
-      assert.deepStrictEqual(match.space.map(n => ast.text(n)).join(' '), space, text);
+      assert.deepEqual(match.space.map(n => ast.text(n)).join(' '), space, text);
       assert.strictEqual(match.color1.map(n => ast.text(n)).join(' '), color1, text);
       assert.strictEqual(match.color2.map(n => ast.text(n)).join(' '), color2, text);
     }
@@ -252,34 +252,40 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       return matches.map(m => matchedResult.getMatch(m)?.text);
     }
 
-    assert.deepStrictEqual(match('animation-name', 'first, second, -moz-third'), ['first', 'second', '-moz-third']);
-    assert.deepStrictEqual(match('animation-name', 'first'), ['first']);
-    assert.deepStrictEqual(match('font-palette', 'first'), ['first']);
+    assert.deepEqual(match('animation-name', 'first, second, -moz-third'), ['first', 'second', '-moz-third']);
+    assert.deepEqual(match('animation-name', 'first'), ['first']);
+    assert.deepEqual(match('font-palette', 'first'), ['first']);
     {
-      assert.deepStrictEqual(match('position-try-fallbacks', 'flip-block'), []);
-      assert.deepStrictEqual(match('position-try-fallbacks', '--one'), ['--one']);
-      assert.deepStrictEqual(match('position-try-fallbacks', '--one, --two'), ['--one', '--two']);
+      assert.deepEqual(match('position-try-fallbacks', 'flip-block'), []);
+      assert.deepEqual(match('position-try-fallbacks', '--one'), ['--one']);
+      assert.deepEqual(match('position-try-fallbacks', '--one, --two'), ['--one', '--two']);
     }
     {
-      assert.deepStrictEqual(match('position-try', 'flip-block'), []);
-      assert.deepStrictEqual(match('position-try', '--one'), ['--one']);
-      assert.deepStrictEqual(match('position-try', '--one, --two'), ['--one', '--two']);
+      assert.deepEqual(match('position-try', 'flip-block'), []);
+      assert.deepEqual(match('position-try', '--one'), ['--one']);
+      assert.deepEqual(match('position-try', '--one, --two'), ['--one', '--two']);
     }
     {
       injectVariableSubstitutions({
         '--duration-and-easing': '1s linear',
       });
-      assert.deepStrictEqual(match('animation', '1s linear --animation-name'), ['--animation-name']);
-      assert.deepStrictEqual(match('animation', '1s linear linear'), ['linear']);
-      assert.deepStrictEqual(
+      assert.deepEqual(match('animation', '1s linear --animation-name'), ['--animation-name']);
+      assert.deepEqual(match('animation', '1s linear linear'), ['linear']);
+      assert.deepEqual(
           match('animation', '1s linear --first-name, 1s ease-in --second-name'), ['--first-name', '--second-name']);
-      assert.deepStrictEqual(match('animation', '1s linear'), []);
+      assert.deepEqual(match('animation', '1s linear'), []);
       // Matching to variable names inside `var()` functions are fine as it is handled by variable renderer in usage.
-      assert.deepStrictEqual(
-          match('animation', 'var(--duration-and-easing) linear'), ['--duration-and-easing', 'linear']);
-      assert.deepStrictEqual(
+      assert.deepEqual(match('animation', 'var(--duration-and-easing) linear'), ['--duration-and-easing', 'linear']);
+      assert.deepEqual(
           match('animation', '1s linear var(--non-existent, --animation-name)'),
           ['--non-existent', '--animation-name']);
+      assert.deepEqual(match('animation', '1s step-start 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s step-end 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-start) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-end) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-none) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, start) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, end) 0s kf'), ['kf']);
     }
   });
 
@@ -341,7 +347,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
       const matches = SDK.CSSPropertyParser.TreeSearch.findAll(
           ast, node => matchedResult.getMatch(node) instanceof Elements.PropertyMatchers.FontMatch);
-      assert.deepStrictEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans"', 'sans-serif']);
+      assert.deepEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans"', 'sans-serif']);
     }
   });
 
@@ -364,7 +370,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid-template-areas', '"a a a" "b b b" "c c c"', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a a"', '"b b b"', '"c c c"']);
     }
     {
@@ -372,7 +378,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid-template', '"a a a" var(--row) / auto 1fr auto', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a a"', 'var(--row) / auto 1fr auto']);
     }
     {
@@ -382,7 +388,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[header-top] "a a" var(--row-with-names)', '[main-top] "b b b" 1fr [main-bottom] / auto 1fr auto']);
     }
@@ -393,7 +399,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[header-top] "a a"', '"b b b" var(--line-name)', '"c c" / auto 1fr auto']);
     }
@@ -404,7 +410,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[line1] "a a" [line2]', 'var(--double-row)', '"b b" / auto 1fr auto']);
     }
@@ -413,7 +419,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid', '"a a" var(--unresolved) / auto 1fr auto;', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a" var(--unresolved) / auto 1fr auto']);
     }
   });
@@ -520,7 +526,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
             'position-try', 'flip-block, --top, --bottom', new Elements.PropertyMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, 'flip-block, --top, --bottom');
-        assert.strictEqual(match.preamble.length, 0);
+        assert.lengthOf(match.preamble, 0);
       } {
         const {ast, match, text} = matchSingleValue(
             'position-try', '/* comment */ most-height --top, --bottom',
@@ -537,7 +543,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
             new Elements.PropertyMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, '/* comment */ flip-block, --top, /* comment */ --bottom');
-        assert.strictEqual(match.preamble.length, 0);
+        assert.lengthOf(match.preamble, 0);
       } {
         const {match} = matchSingleValue('position-try', 'revert', new Elements.PropertyMatchers.PositionTryMatcher());
         assert.isNull(match);

package/front_end/panels/elements/PropertyMatchers.ts

@@ -292,6 +292,9 @@ export class LinkableNameMatcher extends matcherBase(LinkableNameMatch) {
         'ease-in': AnimationLonghandPart.EASING_FUNCTION,
         'ease-out': AnimationLonghandPart.EASING_FUNCTION,
         'ease-in-out': AnimationLonghandPart.EASING_FUNCTION,
+        steps: AnimationLonghandPart.EASING_FUNCTION,
+        'step-start': AnimationLonghandPart.EASING_FUNCTION,
+        'step-end': AnimationLonghandPart.EASING_FUNCTION,
       }),
   );
 

package/front_end/panels/elements/PropertyRenderer.test.ts

@@ -18,17 +18,17 @@ describeWithEnvironment('PropertyRenderer', () => {
     it('parses text', () => {
       // Prevent normaliztaion to get an accurate representation of the parser result.
       sinon.stub(Element.prototype, 'normalize');
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(
               Array.from(Elements.PropertyRenderer.Renderer.renderValueElement('--p', 'var(--v)', []).childNodes)),
           ['var', '(', '--v', ')']);
 
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Array.from(
               Elements.PropertyRenderer.Renderer.renderValueElement('--p', '/* comments are text */ 1px solid 4', [])
                   .childNodes)),
           ['/* comments are text */', ' ', '1px', ' ', 'solid', ' ', '4']);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Array.from(
               Elements.PropertyRenderer.Renderer
                   .renderValueElement('--p', '2px var(--double, var(--fallback, black)) #32a1ce rgb(124 125 21 0)', [])
@@ -47,7 +47,7 @@ describeWithEnvironment('PropertyRenderer', () => {
       const ast = new SDK.CSSPropertyParser.SyntaxTree(property, rule, tree);
       const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, []);
       const context = new Elements.PropertyRenderer.RenderingContext(ast, new Map(), matchedResult);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Elements.PropertyRenderer.Renderer.render(tree, context).nodes).join(''), rule,
           Printer.walk(ast).get());
     });
@@ -60,7 +60,7 @@ describeWithEnvironment('PropertyRenderer', () => {
       const ast = new SDK.CSSPropertyParser.SyntaxTree(property, rule, tree);
       const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, []);
       const context = new Elements.PropertyRenderer.RenderingContext(ast, new Map(), matchedResult);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Elements.PropertyRenderer.Renderer.render(tree, context).nodes).join(''), property,
           Printer.walk(ast).get());
     });