chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -8,7 +8,6 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
@@ -87,12 +86,12 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
             color: 'var(--icon-error)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}>
+          }}>
         </devtools-icon>
         <span id="error-message-text">${this.#data.errorMessage}</span>
       </div>
     `;
-    // clang-format on
+            // clang-format on
   }
 
   #renderSource(sourceText: string): LitHtml.LitTemplate {

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

@@ -12,7 +12,6 @@ import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -37,11 +36,11 @@ const UIStrings = {
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Elements panel
    */
-  buttonClickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Network panel
    */
-  buttonClickToRevealInNetworkPanel: 'Click to reveal in Network panel',
+  clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
    *@description Value of status, specifying rule set contains how many errors.
    */
@@ -113,9 +112,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
     LitHtml.render(html`
       <div class="ruleset-container"
       jslog=${VisualLogging.pane('preloading-rules')}>
-        <devtools-data-grid-controller .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </devtools-data-grid-controller>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -173,7 +170,7 @@ function ruleSetRenderer(
     return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInElements}
-        title=${i18nString(UIStrings.buttonClickToRevealInElementsPanel)}
+        title=${i18nString(UIStrings.clickToOpenInElementsPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -191,7 +188,7 @@ function ruleSetRenderer(
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}
@@ -228,7 +225,7 @@ function ruleSetRenderer(
     return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInNetwork}
-        title=${i18nString(UIStrings.buttonClickToRevealInNetworkPanel)}
+        title=${i18nString(UIStrings.clickToOpenInNetworkPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -245,7 +242,7 @@ function ruleSetRenderer(
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}

package/front_end/panels/autofill/AutofillView.ts

@@ -11,7 +11,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AutofillManager from '../../models/autofill_manager/autofill_manager.js';
-import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as Input from '../../ui/components/input/input.js';
@@ -102,7 +101,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/autofill/AutofillView.ts', UISt
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-autofill-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #autoOpenViewSetting: Common.Settings.Setting<boolean>;
@@ -368,8 +366,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
           @rowmouseenter=${this.#onGridRowMouseEnter}
           @rowmouseleave=${this.#onGridRowMouseLeave}
           class="filled-fields-grid"
-          .data=${gridData as DataGrid.DataGridController.DataGridControllerData}
-        >
+          .data=${gridData}>
         </devtools-data-grid-controller>
       </div>
     `;
@@ -450,7 +447,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     return html`
       ${autofillType}
       ${adornerContent.textContent ? html`
-          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent} as Adorners.Adorner.AdornerData}></devtools-adorner>
+          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent}}></devtools-adorner>
         `: LitHtml.nothing}
     `;
     // clang-format on

package/front_end/panels/console/ConsoleView.ts

@@ -1363,7 +1363,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   private registerShortcuts(): void {
     this.shortcuts.set(
-        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl),
+        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl.value),
         this.clearPromptBackwards.bind(this));
   }
 

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -2,13 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import '../../../ui/components/panel_feedback/panel_feedback.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -56,7 +55,6 @@ export class OverviewStartRequestedEvent extends Event {
 }
 
 export class CSSOverviewStartView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -100,11 +98,11 @@ export class CSSOverviewStartView extends HTMLElement {
             feedbackUrl: FEEDBACK_LINK,
             quickStartUrl: DOC_LINK,
             quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
-          } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
+          }}>
         </devtools-panel-feedback>
         <devtools-feedback-button .data=${{
           feedbackUrl: FEEDBACK_LINK,
-          } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
+          }}>
         </devtools-feedback-button>
       </div>
     `, this.#shadow, {

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -9,8 +9,6 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
-import type * as ElementsComponents from './components/components.js';
-
 const {html} = LitHtml;
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
@@ -114,8 +112,6 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
   }];
 }
 
-type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
-
 export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateResult {
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
@@ -123,8 +119,10 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
   const id = getNodeId(sdkNode);
-  return html`<devtools-accessibility-tree-node .data=${
-      {name, role, ignored, properties, id} as Data}></devtools-accessibility-tree-node>`;
+  return html`<devtools-accessibility-tree-node .data=${{
+    name, role, ignored, properties, id,
+  }
+  }></devtools-accessibility-tree-node>`;
 }
 
 export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -304,11 +304,6 @@ export class GridItemValidator extends CSSRuleValidator {
       'grid-row',
       'grid-row-end',
       'grid-row-start',
-      // At the time of writing (November 2022), `justify-self` is only in effect in grid layout.
-      // There are no other browsers that support `justify-self` in other layouts.
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
-      // TODO: move `justify-self` to other validator or change pop-over text if Chrome supports CSS Align in other layouts.
-      'justify-self',
     ]);
   }
 

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
@@ -217,7 +216,6 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
     }
 
     UI.Context.Context.instance().setFlavor(ColorSwatchPopoverIcon, this);
-    Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.STYLES_TAB);
   }
 
   private spectrumResized(): void {

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -38,6 +38,10 @@ const UIStrings = {
    * @description Similar with forceElementState but allows users to force specific state of the selected element.
    */
   forceElementSpecificStates: 'Force specific element state',
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementStatePaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -125,6 +129,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         iconName: 'help',
         size: Buttons.Button.Size.SMALL,
         jslogContext: 'learn-more',
+        title: i18nString(UIStrings.learnMore),
       };
       learnMoreButton.addEventListener(
           'click',

package/front_end/panels/elements/ElementsPanel.ts

@@ -110,7 +110,7 @@ const UIStrings = {
   /**
    * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    * @description Warning/error text displayed when a node cannot be found in the current page.
    */
@@ -1083,13 +1083,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.setLabel(contentElement, i18nString(UIStrings.sidePanelContent));
 
     const stylesView = new UI.View.SimpleView(
-        i18nString(UIStrings.styles), /* isWebComponent */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
+        i18nString(UIStrings.styles), /* useShadowDom */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');
     stylesSplitWidget.show(stylesView.element);
 
     const computedView = new UI.View.SimpleView(
-        i18nString(UIStrings.computed), /* isWebComponent */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
+        i18nString(UIStrings.computed), /* useShadowDom */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
     computedView.element.classList.add('composite', 'fill');
 
     tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
@@ -1293,7 +1293,7 @@ export class ContextMenuProvider implements
       return;
     }
     contextMenu.revealSection().appendItem(
-        i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+        i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
         {jslogContext: 'elements.reveal-node'});
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -797,7 +797,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isShadowRoot = this.nodeInternal.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
-    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
+    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
     const treeOutline = this.treeOutline;
     if (!treeOutline) {
       return;

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

@@ -279,6 +279,96 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
                stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-link-swatch');
            assert.strictEqual(animationNameSwatches?.length, 2);
          });
+
+      describe('jumping to animations panel', () => {
+        let domModel: SDK.DOMModel.DOMModel;
+        beforeEach(() => {
+          const target = createTarget();
+          const domModelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+          assert.exists(domModelBeforeAssertion);
+          domModel = domModelBeforeAssertion;
+        });
+
+        afterEach(() => {
+          sinon.reset();
+        });
+
+        it('should render a jump-to icon when the animation with the given name exists for the node', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          assert.exists(jumpToIcon);
+        });
+
+        it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const revealerSpy = sinon.spy(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          jumpToIcon?.dispatchEvent(new Event('mouseup'));
+          assert.isTrue(
+              revealerSpy.calledWith(stubAnimationGroup),
+              'Common.Revealer.reveal is not called for the animation group');
+        });
+
+        it('should not render a jump-to icon when the animation with the given name does not exist for the node',
+           async () => {
+             const getAnimationGroupForAnimationStub =
+                 sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                     .resolves(null);
+             const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+               nodeId: 1 as Protocol.DOM.NodeId,
+               backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+               nodeType: Node.ELEMENT_NODE,
+               nodeName: 'div',
+               localName: 'div',
+               nodeValue: '',
+             });
+             const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+             sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+             stylePropertyTreeElement.updateTitle();
+             await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+             const jumpToIcon =
+                 stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+             assert.notExists(jumpToIcon);
+           });
+      });
     });
   });
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -96,7 +96,7 @@ const UIStrings = {
   /**
    *@description Context menu item for style property in edit mode
    */
-  revealInSourcesPanel: 'Reveal in Sources panel',
+  openInSourcesPanel: 'Open in Sources panel',
   /**
    *@description A context menu item in Styles panel to copy CSS declaration
    */
@@ -757,6 +757,33 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
       jslogContext,
     };
 
+    if (match.propertyName === LinkableNameProperties.ANIMATION ||
+        match.propertyName === LinkableNameProperties.ANIMATION_NAME) {
+      const el = document.createElement('span');
+      el.appendChild(swatch);
+
+      const node = this.#treeElement.node();
+      if (node) {
+        const animationModel = node.domModel().target().model(SDK.AnimationModel.AnimationModel);
+        void animationModel?.getAnimationGroupForAnimation(match.text, node.id).then(maybeAnimationGroup => {
+          if (!maybeAnimationGroup) {
+            return;
+          }
+
+          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
+          icon.setAttribute('role', 'button');
+          icon.addEventListener('mouseup', ev => {
+            ev.consume(true);
+
+            void Common.Revealer.reveal(maybeAnimationGroup);
+          });
+          el.insertBefore(icon, swatch);
+        });
+      }
+      return [el];
+    }
+
     return [swatch];
   }
 
@@ -1934,7 +1961,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     const revealCallback = this.navigateToSource.bind(this) as () => void;
     contextMenu.defaultSection().appendItem(
-        i18nString(UIStrings.revealInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
+        i18nString(UIStrings.openInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
     void contextMenu.show();
   }
 

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -8,8 +8,6 @@ import '../../../ui/components/node_text/node_text.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -288,11 +286,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
           color: 'var(--sys-color-on-surface)',
           width: '12px',
           height: '10px',
-        } as IconButton.Icon.IconData}>
+        }}>
         </devtools-icon>
       </button>
       `;
-    // clang-format on
+          // clang-format on
   }
 
   #render(): void {
@@ -330,7 +328,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     nodeTitle: crumb.title.main,
                     nodeId: crumb.title.extras.id,
                     nodeClasses: crumb.title.extras.classes,
-                  } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
+                  }}></devtools-node-text></a>
                 </li>`;
             })}
           </ul>

package/front_end/panels/elements/components/LayoutPane.ts

@@ -11,7 +11,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
@@ -467,7 +466,7 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeText.NodeText.NodeTextData}></devtools-node-text>
+          }}></devtools-node-text>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} class="color-picker-label" style="background: ${element.color};" jslog=${VisualLogging.showStyleEditor('color').track({click: true})}>
@@ -482,7 +481,7 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
                                            .variant=${Buttons.Button.Variant.ICON}
                                            @click=${onElementClick}></devtools-button>
     </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   #renderBooleanSetting(setting: BooleanSetting): LitHtml.TemplateResult {

package/front_end/panels/elements/components/QueryContainer.ts

@@ -6,8 +6,6 @@ import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as SDK from '../../../core/sdk/sdk.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -97,7 +95,7 @@ export class QueryContainer extends HTMLElement {
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
+      }}></devtools-node-text></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,
@@ -126,14 +124,14 @@ export class QueryContainer extends HTMLElement {
           class=${axisIconClasses} .data=${{
             iconName: 'width',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}></devtools-icon>)
+          }}></devtools-icon>)
         ${areBothAxesQueried && this.#queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.width || LitHtml.nothing}
         ${areBothAxesQueried && this.#queriedSizeDetails.height ? 'height:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.height || LitHtml.nothing}
       </span>
     `;
-    // clang-format on
+            // clang-format on
   }
 }
 

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -275,3 +275,16 @@ devtools-css-angle,
 devtools-css-length {
   display: inline-block;
 }
+
+devtools-icon.open-in-animations-panel {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-default);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-default-hover);
+  }
+}

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -29,8 +29,6 @@ export class SizeInputElement extends HTMLElement {
   #title: Platform.UIString.LocalizedString;
   #jslogContext: string;
 
-  static readonly litTagName = LitHtml.literal`device-mode-emulation-size-input`;
-
   constructor(title: Platform.UIString.LocalizedString, {jslogContext}: {jslogContext: string}) {
     super();
     this.#title = title;

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -37,7 +37,7 @@ const UIStrings = {
   /**
    *@description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    *@description Text in Event Listeners Widget of the Elements panel
    */
@@ -340,7 +340,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       }
       if (object.subtype === 'node') {
         menu.defaultSection().appendItem(
-            i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+            i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
             {jslogContext: 'reveal-in-elements'});
       }
       menu.defaultSection().appendItem(

package/front_end/panels/event_listeners/eventListenersView.css

@@ -8,7 +8,7 @@
   padding: 0 0 0 5px;
   overflow: hidden;
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
 }
 
@@ -33,11 +33,12 @@
 
 .event-listener-details {
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
+  gap: var(--sys-size-2);
 
   devtools-button {
-    height: 18px;
+    height: var(--sys-size-8);
   }
 }