chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/legacy/legacy.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../../ui/components/input/input.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -15,6 +17,8 @@ import * as EmulationUtils from '../utils/utils.js';
 
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title for user agent client hints form
@@ -446,7 +450,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).value;
       this.#handleInputChange(stateKey, value);
     };
-    return LitHtml.html`
+    return html`
       <label class="full-row label input-field-label-container">
         ${label}
         <input
@@ -472,7 +476,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).value;
       this.#handleInputChange('platformVersion', value);
     };
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.platformLabel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.platformProperties)} role="group">
         <input
@@ -511,7 +515,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).checked;
       this.#handleInputChange('mobile', value);
     };
-    const mobileCheckboxInput = this.#showMobileCheckbox ? LitHtml.html`
+    const mobileCheckboxInput = this.#showMobileCheckbox ? html`
       <label class="mobile-checkbox-container">
         <input type="checkbox" @input=${handleMobileChange} .checked=${mobile}
           jslog=${VisualLogging.toggle('mobile').track({
@@ -521,8 +525,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
-                                                           LitHtml.html``;
-    return LitHtml.html`
+                                                           html``;
+    return html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">
         <input
@@ -569,7 +573,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         const value = (event.target as HTMLInputElement).value;
         this.#handleUseragentInputChange(value, index, 'brandVersion');
       };
-      return LitHtml.html`
+      return html`
         <div class="full-row brand-row" aria-label=${i18nString(UIStrings.brandProperties)} role="group">
           <input
             class="input-field ua-brand-name-input"
@@ -598,7 +602,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${
           {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
             title=${i18nString(UIStrings.brandUserAgentDelete)}
@@ -609,11 +613,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
             @keypress=${handleKeyPress}
             aria-label=${i18nString(UIStrings.brandUserAgentDelete)}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </div>
       `;
     });
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.useragent)}</span>
       ${brandElements}
       <div
@@ -625,11 +629,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
         @click=${this.#handleAddUseragentBrandClick}
         @keypress=${this.#handleAddUseragentBrandKeyPress}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           aria-hidden="true"
           .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
       </div>
     `;
@@ -664,7 +668,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         const value = (event.target as HTMLInputElement).value;
         this.#handleFullVersionListInputChange(value, index, 'brandVersion');
       };
-      return LitHtml.html`
+      return html`
         <div
           class="full-row brand-row"
           aria-label=${i18nString(UIStrings.brandProperties)}
@@ -697,7 +701,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${
           {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
@@ -708,11 +712,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
             @keypress=${handleKeyPress}
             aria-label=${i18nString(UIStrings.brandFullVersionListDelete)}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </div>
       `;
     });
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.fullVersionList)}</span>
       ${elements}
       <div
@@ -724,11 +728,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
         @click=${this.#handleAddFullVersionListBrandClick}
         @keypress=${this.#handleAddFullVersionListBrandKeyPress}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           aria-hidden="true"
           .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
       </div>
     `;
@@ -747,52 +751,51 @@ export class UserAgentClientHintsForm extends HTMLElement {
         'architecture');
     const deviceModelSection = this.#renderDeviceModelSection();
     // clang-format off
-    const submitButton = this.#showSubmitButton ? LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+    const submitButton = this.#showSubmitButton ? html`
+      <devtools-button
         .variant=${Buttons.Button.Variant.OUTLINED}
         .type=${'submit'}
       >
         ${i18nString(UIStrings.update)}
-      </${Buttons.Button.Button.litTagName}>
+      </devtools-button>
     ` : LitHtml.nothing;
     // clang-format on
 
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       <section class="root">
         <div
           class="tree-title"
           role="button"
           @click=${this.#handleTreeClick}
-          tabindex="0"
+          tabindex=${this.#isFormDisabled ? '-1' : '0'}
           @keydown=${this.#handleTreeExpand}
           aria-expanded=${this.#isFormOpened}
           aria-controls="form-container"
-          @disabled=${this.#isFormDisabled}
           aria-disabled=${this.#isFormDisabled}
           aria-label=${i18nString(UIStrings.title)}
           jslog=${VisualLogging.toggleSubpane().track({click: true})}
         >
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             class=${this.#isFormOpened ? 'rotate-icon' : ''}
             .data=${{
               color: 'var(--icon-default)',
               iconName: 'triangle-right',
               width: '14px',
             } as IconButton.Icon.IconData}
-          ></${IconButton.Icon.Icon.litTagName}>
+          ></devtools-icon>
           ${i18nString(UIStrings.title)}
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${{
               color: 'var(--icon-default)',
               iconName: 'info',
               width: '16px',
             } as IconButton.Icon.IconData}
             title=${i18nString(UIStrings.userAgentClientHintsInfo)}
-            class='info-icon',
-          ></${IconButton.Icon.Icon.litTagName}>
+            class='info-icon'
+          ></devtools-icon>
           <x-link
-           tabindex="0"
+           tabindex=${this.#isFormDisabled ? '-1' : '0'}
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="link"

package/front_end/panels/settings/settings-meta.ts

@@ -98,10 +98,10 @@ UI.ViewManager.registerViewExtension({
     const Settings = await loadSettingsModule();
     return LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, new Settings.AISettingsTab.AISettingsTab());
   },
-  iconName: 'spark',
+  iconName: 'button-magic',
   settings: ['console-insights-enabled'],
   condition: config => {
-    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestylerDogfood?.enabled) ?? false;
+    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled) ?? false;
   },
 });
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -585,7 +585,7 @@ export class DebuggerPlugin extends Plugin {
         !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
-            this.scriptFileForDebuggerModel.values().next().value;
+            this.scriptFileForDebuggerModel.values().next().value as Bindings.ResourceScriptMapping.ResourceScriptFile;
         const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
         contextMenu.debugSection().appendItem(
             addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile), {jslogContext: 'add-source-map'});

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -33,8 +33,8 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
-import {type SourcesView} from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {SourcesView} from './SourcesView.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 export const HistoryDepth = 20;
 

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -7,7 +7,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {SourcesView} from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -16,7 +16,7 @@ import {
   registerEditorAction,
   type SourcesView,
 } from './SourcesView.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -6,9 +6,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 import {SourcesView} from './SourcesView.js';
+import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**

package/front_end/panels/sources/SourcesNavigator.test.ts

@@ -459,6 +459,7 @@ describeWithMockConnection('NetworkNavigatorView', () => {
         }
       });
       setMockConnectionResponseHandler('Debugger.setBlackboxPatterns', () => ({}));
+      setMockConnectionResponseHandler('Debugger.setBlackboxExecutionContexts', () => ({}));
     });
 
     const updatePatternSetting = async (settingValue: Common.Settings.RegExpSettingItem[]) => {

package/front_end/panels/sources/SourcesPanel.ts

@@ -744,6 +744,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
     const uiSourceCode = event.data;
+    UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
     if (this.editorView.mainWidget() &&
         Common.Settings.Settings.instance().moduleSetting('auto-reveal-in-navigator').get()) {
       void this.revealInNavigator(uiSourceCode, true);
@@ -904,6 +905,12 @@ export class SourcesPanel extends UI.Panel.Panel implements
       SDK.NetworkRequest.NetworkRequest|UISourceCodeFrame): void {
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
       this.appendUISourceCodeItems(event, contextMenu, target);
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, target);
+        contextMenu.headerSection().appendAction(
+            'drjones.sources-panel-context',
+        );
+      }
       return;
     }
     if (target instanceof UISourceCodeFrame) {

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -522,7 +522,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.restoreEditorProperties(view, savedSelectionRange, savedScrollLineNumber);
     }
 
-    this.tabbedPane.appendTab(tabId, title, view, tooltip, userGesture, undefined, undefined, index);
+    this.tabbedPane.appendTab(tabId, title, view, tooltip, userGesture, undefined, undefined, index, 'editor');
 
     this.updateFileTitle(uiSourceCode);
     this.addUISourceCodeListeners(uiSourceCode);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -44,7 +44,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {CoveragePlugin} from './CoveragePlugin.js';
 import {CSSPlugin} from './CSSPlugin.js';
 import {DebuggerPlugin} from './DebuggerPlugin.js';
-import {type Plugin} from './Plugin.js';
+import type {Plugin} from './Plugin.js';
 import {MemoryProfilePlugin, PerformanceProfilePlugin} from './ProfilePlugin.js';
 import {ResourceOriginPlugin} from './ResourceOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -12,7 +14,6 @@ import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Breakpoints from '../../../models/breakpoints/breakpoints.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -23,6 +24,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import breakpointsViewStyles from './breakpointsView.css.js';
 import {findNextNodeForKeyboardNavigation, getDifferentiatingPathMap, type TitleInfo} from './BreakpointsViewUtils.js';
 
+const {html, Directives: {ifDefined, repeat, classMap, live}} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Label for a checkbox to toggle pausing on uncaught exceptions in the breakpoint sidebar of the Sources panel. When the checkbox is checked, DevTools will pause if an uncaught exception is thrown at runtime.
@@ -577,7 +580,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           (this.#independentPauseToggles || this.#pauseOnUncaughtExceptions) && this.#pauseOnCaughtExceptions;
       const pauseOnCaughtExceptionIsDisabled = !this.#independentPauseToggles && !this.#pauseOnUncaughtExceptions;
       // clang-format off
-      const out = LitHtml.html`
+      const out = html`
         <div class='pause-on-uncaught-exceptions'
             tabindex='0'
             @click=${clickHandler}
@@ -603,10 +606,10 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             </label>
         </div>
         <div role=tree>
-          ${LitHtml.Directives.repeat(
+          ${repeat(
             this.#breakpointGroups,
             group => group.url,
-            (group, groupIndex) => LitHtml.html`${this.#renderBreakpointGroup(group, groupIndex)}`)}
+            (group, groupIndex) => html`${this.#renderBreakpointGroup(group, groupIndex)}`)}
         </div>`;
       // clang-format on
       LitHtml.render(out, this.#shadow, {host: this});
@@ -708,9 +711,9 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         i18nString(UIStrings.editLogpoint) :
         i18nString(UIStrings.editCondition);
     // clang-format off
-    return LitHtml.html`
+    return html`
     <button data-edit-breakpoint @click=${clickHandler} title=${title} jslog=${VisualLogging.action('edit-breakpoint').track({click: true})}>
-      <${IconButton.Icon.Icon.litTagName} name="edit"></${IconButton.Icon.Icon.litTagName}>
+      <devtools-icon name="edit"></devtools-icon>
     </button>
       `;
     // clang-format on
@@ -724,9 +727,9 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       event.consume();
     };
     // clang-format off
-    return LitHtml.html`
+    return html`
     <button data-remove-breakpoint @click=${clickHandler} title=${tooltipText} aria-label=${tooltipText} jslog=${VisualLogging.action('remove-breakpoint').track({click: true})}>
-      <${IconButton.Icon.Icon.litTagName} name="bin"></${IconButton.Icon.Icon.litTagName}>
+      <devtools-icon name="bin"></devtools-icon>
     </button>
       `;
     // clang-format on
@@ -789,18 +792,15 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointGroupExpandedStateChanged);
       event.consume();
     };
-    const classMap = {
-      active: this.#breakpointsActive,
-    };
     // clang-format off
-    return LitHtml.html`
-      <details class=${LitHtml.Directives.classMap(classMap)}
+    return html`
+      <details class=${classMap({active: this.#breakpointsActive})}
                ?data-first-group=${groupIndex === 0}
                ?data-last-group=${groupIndex === this.#breakpointGroups.length - 1}
                role=group
                aria-label='${group.name}'
                aria-description='${group.url}'
-               ?open=${LitHtml.Directives.live(group.expanded)}
+               ?open=${live(group.expanded)}
                @toggle=${toggleHandler}>
           <summary @contextmenu=${contextmenuHandler}
                    tabindex='-1'
@@ -811,7 +811,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               ${this.#renderRemoveBreakpointButton(group.breakpointItems, i18nString(UIStrings.removeAllBreakpointsInFile), Host.UserMetrics.Action.BreakpointsInFileRemovedFromRemoveButton)}
             </span>
           </summary>
-        ${LitHtml.Directives.repeat(
+        ${repeat(
           group.breakpointItems,
           item => item.id,
           (item, breakpointItemIndex) => this.#renderBreakpointEntry(item, group.editable, groupIndex, breakpointItemIndex))}
@@ -833,7 +833,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     };
 
     const checked = group.breakpointItems.some(item => item.status === BreakpointStatus.ENABLED);
-    return LitHtml.html`
+    return html`
       <input class='group-checkbox small' type='checkbox'
             aria-label=''
             .checked=${checked}
@@ -846,7 +846,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #renderFileIcon(): LitHtml.TemplateResult {
-    return LitHtml.html`<${IconButton.Icon.Icon.litTagName} name="file-script"></${IconButton.Icon.Icon.litTagName}>`;
+    return html`<devtools-icon name="file-script"></devtools-icon>`;
   }
 
   #onBreakpointEntryContextMenu(event: Event, breakpointItem: BreakpointItem, editable: boolean): void {
@@ -909,20 +909,19 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       this.#onBreakpointEntryContextMenu(event, breakpointItem, editable);
       event.consume();
     };
-    const classMap = {
-      'breakpoint-item': true,
-      hit: breakpointItem.isHit,
-      'conditional-breakpoint': breakpointItem.type === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT,
-      logpoint: breakpointItem.type === SDK.DebuggerModel.BreakpointType.LOGPOINT,
-    };
     const breakpointItemDescription = this.#getBreakpointItemDescription(breakpointItem);
     const codeSnippet = Platform.StringUtilities.trimEndWithMaxLength(breakpointItem.codeSnippet, MAX_SNIPPET_LENGTH);
     const codeSnippetTooltip = this.#getCodeSnippetTooltip(breakpointItem.type, breakpointItem.hoverText);
     const itemsInGroup = this.#breakpointGroups[groupIndex].breakpointItems;
 
     // clang-format off
-    return LitHtml.html`
-    <div class=${LitHtml.Directives.classMap(classMap)}
+    return html`
+    <div class=${classMap({
+            'breakpoint-item': true,
+            hit: breakpointItem.isHit,
+            'conditional-breakpoint': breakpointItem.type === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT,
+            logpoint: breakpointItem.type === SDK.DebuggerModel.BreakpointType.LOGPOINT,
+          })}
          ?data-first-breakpoint=${breakpointItemIndex === 0}
          ?data-last-breakpoint=${breakpointItemIndex === itemsInGroup.length - 1}
          aria-label=${breakpointItemDescription}
@@ -942,7 +941,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               tabindex=-1
               jslog=${VisualLogging.toggle('breakpoint').track({change: true})}>
       </label>
-      <span class='code-snippet' @click=${codeSnippetClickHandler} title=${codeSnippetTooltip} jslog=${VisualLogging.action('sources.jump-to-breakpoint').track({click: true})}>${codeSnippet}</span>
+      <span class='code-snippet' @click=${codeSnippetClickHandler} title=${ifDefined(codeSnippetTooltip)} jslog=${VisualLogging.action('sources.jump-to-breakpoint').track({click: true})}>${codeSnippet}</span>
       <span class='breakpoint-item-location-or-actions'>
         ${editable ? this.#renderEditBreakpointButton(breakpointItem) : LitHtml.nothing}
         ${this.#renderRemoveBreakpointButton([breakpointItem], i18nString(UIStrings.removeBreakpoint), Host.UserMetrics.Action.BreakpointRemovedFromRemoveButton)}

package/front_end/panels/sources/components/HeadersView.ts

@@ -15,6 +15,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import HeadersViewStyles from './HeadersView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description The title of a button that adds a field to input a header in the editor form.
@@ -345,7 +347,7 @@ export class HeadersViewComponent extends HTMLElement {
     if (this.#parsingError) {
       const fileName = this.#uiSourceCode?.name() || '.headers';
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
         <div class="center-wrapper">
           <div class="centered">
             <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
@@ -358,23 +360,23 @@ export class HeadersViewComponent extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       ${this.#headerOverrides.map((headerOverride, blockIndex) =>
-        LitHtml.html`
+        html`
           ${this.#renderApplyToRow(headerOverride.applyTo, blockIndex)}
           ${headerOverride.headers.map((header, headerIndex) =>
-            LitHtml.html`
+            html`
               ${this.#renderHeaderRow(header, blockIndex, headerIndex)}
             `,
           )}
         `,
       )}
-      <${Buttons.Button.Button.litTagName}
+      <devtools-button
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'headers-view.add-override-rule'}
           class="add-block">
         ${i18nString(UIStrings.addOverrideRule)}
-      </${Buttons.Button.Button.litTagName}>
+      </devtools-button>
       <div class="learn-more-row">
         <x-link
             href="https://goo.gle/devtools-override"
@@ -401,13 +403,13 @@ export class HeadersViewComponent extends HTMLElement {
 
   #renderApplyToRow(pattern: string, blockIndex: number): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="row" data-block-index=${blockIndex}
            jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined)}>
         <div>${i18n.i18n.lockedString('Apply to')}</div>
         <div class="separator">:</div>
         ${this.#renderEditable(pattern, 'apply-to')}
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
         title=${i18nString(UIStrings.removeBlock)}
         .size=${Buttons.Button.Size.SMALL}
         .iconUrl=${trashIconUrl}
@@ -416,7 +418,7 @@ export class HeadersViewComponent extends HTMLElement {
         .variant=${Buttons.Button.Variant.ICON}
         .jslogContext=${'headers-view.remove-apply-to-section'}
         class="remove-block inline-button"
-      ></${Buttons.Button.Button.litTagName}>
+      ></devtools-button>
       </div>
     `;
     // clang-format on
@@ -425,21 +427,21 @@ export class HeadersViewComponent extends HTMLElement {
   #renderHeaderRow(header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number):
       LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}
            jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent')}>
         ${this.#renderEditable(header.name, 'header-name red', true)}
         <div class="separator">:</div>
         ${this.#renderEditable(header.value, 'header-value')}
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           title=${i18nString(UIStrings.addHeader)}
           .size=${Buttons.Button.Size.SMALL}
           .iconUrl=${plusIconUrl}
           .variant=${Buttons.Button.Variant.ICON}
           .jslogContext=${'headers-view.add-header'}
           class="add-header inline-button"
-        ></${Buttons.Button.Button.litTagName}>
-        <${Buttons.Button.Button.litTagName}
+        ></devtools-button>
+        <devtools-button
           title=${i18nString(UIStrings.removeHeader)}
           .size=${Buttons.Button.Size.SMALL}
           .iconUrl=${trashIconUrl}
@@ -447,7 +449,7 @@ export class HeadersViewComponent extends HTMLElement {
           ?hidden=${!this.#isDeletable(blockIndex, headerIndex)}
           .jslogContext=${'headers-view.remove-header'}
           class="remove-header inline-button"
-        ></${Buttons.Button.Button.litTagName}>
+        ></devtools-button>
       </div>
     `;
     // clang-format on
@@ -460,7 +462,7 @@ export class HeadersViewComponent extends HTMLElement {
     // value from the previous render.
     // clang-format off
     const jslog = isKey ? VisualLogging.key() : VisualLogging.value();
-    return LitHtml.html`<span jslog=${jslog.track({change: true, keydown: 'Enter|Escape|Tab', click: true})}
+    return html`<span jslog=${jslog.track({change: true, keydown: 'Enter|Escape|Tab', click: true})}
                               contenteditable="true"
                               class="editable ${className}"
                               tabindex="0"

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -3,10 +3,11 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Trace from '../../models/trace/trace.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {addDecorationToEvent, buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
   type HighlightedEntryInfo,
@@ -30,6 +31,7 @@ export class AnimationsTrackAppender implements TrackAppender {
 
   #compatibilityBuilder: CompatibilityTracksAppender;
   #parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>;
+  #eventAppendedCallback = this.#eventAppendedCallbackFunction.bind(this);
 
   constructor(compatibilityBuilder: CompatibilityTracksAppender, parsedTrace: Trace.Handlers.Types.ParsedTrace) {
     this.#compatibilityBuilder = compatibilityBuilder;
@@ -42,7 +44,8 @@ export class AnimationsTrackAppender implements TrackAppender {
       return trackStartLevel;
     }
     this.#appendTrackHeaderAtLevel(trackStartLevel, expanded);
-    return this.#compatibilityBuilder.appendEventsAtLevel(animations, trackStartLevel, this);
+    return this.#compatibilityBuilder.appendEventsAtLevel(
+        animations, trackStartLevel, this, this.#eventAppendedCallback);
   }
 
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
@@ -53,6 +56,18 @@ export class AnimationsTrackAppender implements TrackAppender {
     this.#compatibilityBuilder.registerTrackForGroup(group, this);
   }
 
+  #eventAppendedCallbackFunction(event: Trace.Types.Events.Event, index: number): void {
+    if (event && Trace.Types.Events.isSyntheticAnimation(event)) {
+      const CLSInsight = Trace.Insights.InsightRunners.CumulativeLayoutShift;
+      const failures = CLSInsight.getNonCompositedFailure(event);
+      if (failures.length) {
+        addDecorationToEvent(this.#compatibilityBuilder.getFlameChartTimelineData(), index, {
+          type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,
+        });
+      }
+    }
+  }
+
   colorForEvent(): string {
     return ThemeSupport.ThemeSupport.instance().getComputedValue('--app-color-rendering');
   }