chrome-devtools-frontend 1.0.1571573 → 1.0.1572937

package/front_end/panels/security/cookieReportView.css

@@ -33,7 +33,7 @@
   font: var(--sys-typescale-body4-regular);
 }
 
-.x-link {
+.devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
   cursor: pointer;

package/front_end/panels/settings/AISettingsTab.ts

@@ -249,7 +249,7 @@ interface AiSettingParams {
 
 interface ViewInput {
   disabledReasons: string[];
-  sharedDisclaimerBulletPoints: Array<{icon: string, text: Common.UIString.LocalizedString|Lit.TemplateResult}>;
+  sharedDisclaimerBulletPoints: Array<{icon: string, text: Common.UIString.LocalizedString|Lit.LitTemplate}>;
   settingToParams: Map<Common.Settings.Setting<boolean>, AiSettingParams>;
   expandSetting(setting: Common.Settings.Setting<boolean>): void;
   toggleSetting(setting: Common.Settings.Setting<boolean>, ev: Event): void;
@@ -658,13 +658,11 @@ export class AISettingsTab extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #getSharedDisclaimerBulletPoints(): Array<{icon: string, text: Common.UIString.LocalizedString|Lit.TemplateResult}> {
-    const tosLink = UI.XLink.XLink.create(
-        'https://policies.google.com/terms', i18nString(UIStrings.termsOfService), undefined, undefined,
-        'terms-of-service');
-    const privacyNoticeLink = UI.XLink.XLink.create(
-        'https://policies.google.com/privacy', i18nString(UIStrings.privacyNotice), undefined, undefined,
-        'privacy-notice');
+  #getSharedDisclaimerBulletPoints(): Array<{icon: string, text: Common.UIString.LocalizedString|Lit.LitTemplate}> {
+    const tosLink = html`<devtools-link href="https://policies.google.com/terms" .jslogContext=${'terms-of-service'}>${
+        i18nString(UIStrings.termsOfService)}</devtools-link>`;
+    const privacyNoticeLink = html`<devtools-link href="https://policies.google.com/privacy" .jslogContext=${
+                                  'privacy-notice'}>${i18nString(UIStrings.privacyNotice)}</devtools-link>`;
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
@@ -680,10 +678,10 @@ export class AISettingsTab extends UI.Widget.VBox {
       },
       {
         icon: 'policy',
-        text: html`${uiI18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
+        text: uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.termsOfServicePrivacyNotice, {
           PH1: tosLink,
           PH2: privacyNoticeLink,
-        })}`,
+        }),
       },
     ];
   }

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view*/
 
+import '../../../../ui/kit/kit.js';
 import '../../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -488,13 +489,6 @@ export class UserAgentClientHintsForm extends HTMLElement {
     this.dispatchEvent(new ClientHintsChangeEvent());
   };
 
-  #handleLinkPress = (event: KeyboardEvent): void => {
-    if (event.code === 'Space' || event.code === 'Enter') {
-      event.preventDefault();
-      (event.target as HTMLAnchorElement).click();
-    }
-  };
-
   #handleSubmit = (event: Event): void => {
     event.preventDefault();
     if (this.#showSubmitButton) {
@@ -869,17 +863,15 @@ export class UserAgentClientHintsForm extends HTMLElement {
             ${i18nString(UIStrings.title)}
           </div>
           <devtools-icon tabindex=${this.#isFormDisabled ? '-1' : '0'} class=info-icon name=info aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)} title=${i18nString(UIStrings.userAgentClientHintsInfo)}></devtools-icon>
-          <x-link
+          <devtools-link
            tabindex=${this.#isFormDisabled ? '-1' : '0'}
            href="https://web.dev/user-agent-client-hints/"
-           target="_blank"
            class="link"
-           @keypress=${this.#handleLinkPress}
            aria-label=${i18nString(UIStrings.learnMore)}
-           jslog=${VisualLogging.link('learn-more').track({click: true})}
+           .jslogContext=${'learn-more'}
           >
             ${i18nString(UIStrings.learnMore)}
-          </x-link>
+          </devtools-link>
         </div>
         <form
           id="form-container"

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

@@ -141,7 +141,7 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.experiments),
   commandPrompt: i18nLazyString(UIStrings.showExperiments),
   order: 3,
-  experiment: Root.Runtime.ExperimentName.ALL,
+  experiment: Root.ExperimentNames.ExperimentName.ALL,
   async loadView() {
     const Settings = await loadSettingsModule();
     return new Settings.SettingsScreen.ExperimentsSettingsTab();

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
@@ -141,9 +142,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     </div>
     <div class=link-wrapper>
       <devtools-icon name=open-externally class=link-icon></devtools-icon>
-      <x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
-                                          jslog=${VisualLogging.link('learn-more')}>${
-                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>
+      <devtools-link class="devtools-link" href="https://goo.gle/devtools-loc"
+                                          .jslogContext=${'learn-more'}>${
+                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</devtools-link>
     </div>
     `,
       // clang-format on

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -74,7 +74,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     if (this.uiSourceCodeIds.has(uiSourceCode.canonicalScriptId())) {
       return false;
     }
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
         Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return false;

package/front_end/panels/sources/NavigatorView.ts

@@ -179,7 +179,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private authoredNode?: NavigatorGroupTreeNode;
   private deployedNode?: NavigatorGroupTreeNode;
   private navigatorGroupByFolderSetting: Common.Settings.Setting<boolean>;
-  private navigatorGroupByAuthoredExperiment?: Root.Runtime.ExperimentName;
+  private navigatorGroupByAuthoredExperiment?: Root.ExperimentNames.ExperimentName;
   #workspace!: Workspace.Workspace.WorkspaceImpl;
   private groupByFrame?: boolean;
   private groupByAuthored?: boolean;
@@ -217,7 +217,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.navigatorGroupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigator-group-by-folder');
     this.navigatorGroupByFolderSetting.addChangeListener(this.groupingChanged.bind(this));
     if (enableAuthoredGrouping) {
-      this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
+      this.navigatorGroupByAuthoredExperiment = Root.ExperimentNames.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     }
 
     Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListChanged.bind(this));
@@ -457,7 +457,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
         Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return;
@@ -1188,7 +1188,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   private ignoreListChanged(): void {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE)) {
       this.groupingChanged();
     } else {
       this.rootNode.updateTitleRecursive();

package/front_end/panels/sources/SourcesPanel.ts

@@ -639,7 +639,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   private addExperimentMenuItem(
-      menuSection: UI.ContextMenu.Section, experiment: Root.Runtime.ExperimentName,
+      menuSection: UI.ContextMenu.Section, experiment: Root.ExperimentNames.ExperimentName,
       menuItem: Common.UIString.LocalizedString): void {
     /** menu handler **/
     function toggleExperiment(): void {
@@ -670,10 +670,11 @@ export class SourcesPanel extends UI.Panel.Panel implements
         {checked: groupByFolderSetting.get(), jslogContext: groupByFolderSetting.name});
 
     this.addExperimentMenuItem(
-        contextMenu.viewSection(), Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
+        contextMenu.viewSection(), Root.ExperimentNames.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
         i18nString(UIStrings.groupByAuthored));
     this.addExperimentMenuItem(
-        contextMenu.viewSection(), Root.Runtime.ExperimentName.JUST_MY_CODE, i18nString(UIStrings.hideIgnoreListed));
+        contextMenu.viewSection(), Root.ExperimentNames.ExperimentName.JUST_MY_CODE,
+        i18nString(UIStrings.hideIgnoreListed));
   }
 
   updateLastModificationTime(): void {
@@ -968,7 +969,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     const eventTarget = (event.target as Node);
     if (!uiSourceCode.project().isServiceProject() &&
         !eventTarget.isSelfOrDescendant(this.navigatorTabbedLocation.widget().element) &&
-        !(Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+        !(Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.JUST_MY_CODE) &&
           Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
               uiSourceCode))) {
       contextMenu.revealSection().appendItem(

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

@@ -377,10 +377,10 @@ export class HeadersViewComponent extends HTMLElement {
         ${i18nString(UIStrings.addOverrideRule)}
       </devtools-button>
       <div class="learn-more-row">
-        <x-link
+        <devtools-link
             href="https://goo.gle/devtools-override"
             class="link"
-            jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
+            jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -42,7 +42,7 @@ function isShowPostMessageEventsEnabled(): boolean {
   // cache is updated automatically.
   if (showPostMessageEvents === undefined) {
     showPostMessageEvents =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
   }
   return showPostMessageEvents;
 }
@@ -327,7 +327,8 @@ export class CompatibilityTracksAppender {
       }
     };
     const threads = Trace.Handlers.Threads.threadsInTrace(this.#parsedTrace.data);
-    const showAllEvents = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    const showAllEvents =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
 
     for (const {pid, tid, name, type, entries, tree} of threads) {
       if (this.#parsedTrace.data.Meta.traceIsGeneric) {

package/front_end/panels/timeline/ThreadAppender.ts

@@ -151,7 +151,8 @@ export class ThreadAppender implements TrackAppender {
   #headerAppended = false;
   readonly threadType: Trace.Handlers.Threads.ThreadType = Trace.Handlers.Threads.ThreadType.MAIN_THREAD;
   readonly isOnMainFrame: boolean;
-  #showAllEventsEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+  #showAllEventsEnabled =
+      Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
   #url = '';
   #headerNestingLevel: number|null = null;
   constructor(

package/front_end/panels/timeline/TimelineController.ts

@@ -229,7 +229,7 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     // 'disabled-by-default-v8.cpu_profiler'
     //   └ default: on, option: enableJSSampling
     const categoriesArray = [
-      Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS) ? '*' : '-*',
+      Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS) ? '*' : '-*',
       Trace.Types.Events.Categories.Console,
       Trace.Types.Events.Categories.Loading,
       Trace.Types.Events.Categories.UserTiming,
@@ -251,14 +251,14 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       'navigation,rail',
     ];
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS) &&
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS) &&
         options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
     }
     if (options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
     if (options.capturePictures) {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -732,10 +732,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #instantiateNewModel(): Trace.TraceModel.Model {
     const config = Trace.Types.Configuration.defaults();
-    config.showAllEvents = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    config.showAllEvents =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
     config.includeRuntimeCallStats =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS);
-    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS);
+    config.debugMode = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE);
 
     const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
 
@@ -2090,7 +2091,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #applyActiveFilters(traceIsGeneric: boolean, exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null):
       void {
-    if (traceIsGeneric || Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS)) {
+    if (traceIsGeneric ||
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS)) {
       return;
     }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -505,7 +505,7 @@ export class TimelineUIUtils {
   static getGetDebugModeEnabled(): boolean {
     if (TimelineUIUtils.debugModeEnabled === undefined) {
       TimelineUIUtils.debugModeEnabled =
-          Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
+          Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE);
     }
     return TimelineUIUtils.debugModeEnabled;
   }
@@ -1527,7 +1527,7 @@ export class TimelineUIUtils {
       await TimelineUIUtils.generateCauses(event, contentHelper, parsedTrace);
     }
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE)) {
       TimelineUIUtils.renderEventJson(event, contentHelper);
     }
 

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/tooltips/tooltips.js';
 import '../../../ui/components/buttons/buttons.js';
 
@@ -14,7 +15,6 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import exportTraceOptionsStyles from './exportTraceOptions.css.js';
 
@@ -299,12 +299,12 @@ export class ExportTraceOptions extends HTMLElement {
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
           <div class='export-trace-options-row export-trace-options-row-last'>
             <div class="export-trace-explanation">
-              <x-link
+              <devtools-link
                 href="https://developer.chrome.com/docs/devtools/performance/save-trace"
                 class=devtools-link
-                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('save-trace-explanation')}>
+                .jslogContext=${'save-trace-explanation'}>
                   ${i18nString(UIStrings.explanation)}
-              </x-link>
+              </devtools-link>
             </div>
             <devtools-button
                   class="setup-button"

package/front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import './OriginMap.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -12,7 +13,6 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
-import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -332,10 +332,6 @@ export class FieldSettingsDialog extends HTMLElement {
   }
 
   #render = (): void => {
-    const linkEl =
-        UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const descriptionEl = uiI18n.getFormatLocalizedString(str_, UIStrings.fetchAggregated, {PH1: linkEl});
-
     // clang-format off
     const output = html`
       <style>${fieldSettingsDialogStyles}</style>
@@ -356,7 +352,18 @@ export class FieldSettingsDialog extends HTMLElement {
         })}
       >
         <div class="content">
-          <div>${descriptionEl}</div>
+          <div>
+            ${uiI18n.getFormatLocalizedStringTemplate(
+              str_,
+              UIStrings.fetchAggregated,
+              {
+                PH1: html`<devtools-link
+                  href="https://developer.chrome.com/docs/crux"
+                  >${i18n.i18n.lockedString('Chrome UX Report')}</devtools-link
+                >`,
+              },
+            )}
+          </div>
           <div class="privacy-disclosure">
             <h3 class="section-title">${i18nString(UIStrings.privacyDisclosure)}</h3>
             <div>${i18nString(UIStrings.whenPerformanceIsShown)}</div>

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -867,10 +867,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     tmp.searchParams.set('device', device);
     const cruxVis = `${tmp.origin}/#/${tmp.search}`;
     return html`
-        (<x-link href=${cruxVis}
+        (<devtools-link href=${cruxVis}
                  class="local-field-link"
                  title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
-        >${i18nString(UIStrings.fieldDataHistoryLink)}</x-link>)
+        >${i18nString(UIStrings.fieldDataHistoryLink)}</devtools-link>)
       `;
   }
 
@@ -904,13 +904,17 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return this.#renderCollectionPeriod();
     }
 
-    const linkEl =
-        UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const messageEl = uiI18n.getFormatLocalizedString(str_, UIStrings.seeHowYourLocalMetricsCompare, {PH1: linkEl});
-
+    // clang-format off
     return html`
-      <div class="field-data-message">${messageEl}</div>
+      <div class="field-data-message">
+        ${uiI18n.getFormatLocalizedStringTemplate(
+          str_,
+          UIStrings.seeHowYourLocalMetricsCompare,
+          { PH1: html`<devtools-link href="https://developer.chrome.com/docs/crux">${i18n.i18n.lockedString('Chrome UX Report')}</devtools-link>` },
+        )}
+      </div>
     `;
+    // clang-format on
   }
 
   #renderLogSection(): Lit.LitTemplate {
@@ -1174,11 +1178,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                 ${this.#renderInpCard()}
               </div>
             </div>
-            <x-link
+            <devtools-link
               href=${helpLink}
               class="local-field-link"
               title=${i18nString(UIStrings.localFieldLearnMoreTooltip)}
-            >${i18nString(UIStrings.localFieldLearnMoreLink)}</x-link>
+            >${i18nString(UIStrings.localFieldLearnMoreLink)}</devtools-link>
             ${this.#renderLogSection()}
           </main>
           <aside class="next-steps" aria-labelledby="next-steps-section-title">

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -34,7 +34,7 @@
   white-space: normal;
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }

package/front_end/panels/timeline/components/fieldSettingsDialog.css

@@ -104,7 +104,7 @@ input[type="text"][disabled] {
   color: var(--color-error-text);
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -69,7 +69,6 @@ interface ViewInput {
   internalName: string;
   model: InsightModel;
   selected: boolean;
-  isAIAssistanceContext: boolean;
   showAskAI: boolean;
   estimatedSavingsString: string|null;
   estimatedSavingsAriaLabel: string|null;
@@ -88,7 +87,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     selected,
     estimatedSavingsString,
     estimatedSavingsAriaLabel,
-    isAIAssistanceContext,
     showAskAI,
     dispatchInsightToggle,
     renderContent,
@@ -98,8 +96,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
 
   const containerClasses = Lit.Directives.classMap({
     insight: true,
-    closed: !selected || isAIAssistanceContext,
-    'ai-assistance-context': isAIAssistanceContext,
+    closed: !selected,
   });
 
   let ariaLabel = `${i18nString(UIStrings.viewDetails, {PH1: model.title})}`;
@@ -139,10 +136,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   }
 
   function renderHoverIcon(): Lit.LitTemplate {
-    if (isAIAssistanceContext) {
-      return Lit.nothing;
-    }
-
     const containerClasses = Lit.Directives.classMap({
       'insight-hover-icon': true,
       active: selected,
@@ -205,10 +198,6 @@ export interface BaseInsightData {
 export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Widget.Widget {
   #view: View;
   abstract internalName: string;
-
-  // Tracks if this component is rendered withing the AI assistance panel.
-  // Currently only relevant to GreenDev.
-  #isAIAssistanceContext = false;
   #selected = false;
   #model: T|null = null;
   #agentFocus: AIAssistance.AIContext.AgentFocus|null = null;
@@ -243,11 +232,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
     return false;
   }
 
-  set isAIAssistanceContext(isAIAssistanceContext: boolean) {
-    this.#isAIAssistanceContext = isAIAssistanceContext;
-    this.requestUpdate();
-  }
-
   set selected(selected: boolean) {
     if (!this.#selected && selected) {
       const options = this.getOverlayOptionsForInitialOverlays();
@@ -408,7 +392,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
       selected: this.#selected,
       estimatedSavingsString: this.getEstimatedSavingsString(),
       estimatedSavingsAriaLabel: this.#getEstimatedSavingsAriaLabel(),
-      isAIAssistanceContext: this.#isAIAssistanceContext,
       showAskAI: this.#canShowAskAI(),
       dispatchInsightToggle: () => this.#dispatchInsightToggle(),
       renderContent: () => this.renderContent(),
@@ -514,7 +497,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Wi
   }
 
   #canShowAskAI(): boolean {
-    if (this.#isAIAssistanceContext || !this.hasAskAiSupport()) {
+    if (!this.hasAskAiSupport()) {
       return false;
     }
 

package/front_end/panels/timeline/components/insights/InsightRenderer.ts

@@ -61,9 +61,9 @@ export class InsightRenderer {
   renderInsightToWidgetElement(
       parsedTrace: Trace.TraceModel.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet,
       model: Trace.Insights.Types.InsightModel, insightName: string,
-      options: Partial<Pick<
-          BaseInsightComponent<Trace.Insights.Types.InsightModel>,
-          'selected'|'agentFocus'|'fieldMetrics'|'isAIAssistanceContext'>>): InsightWidgetElement {
+      options: Partial<
+          Pick<BaseInsightComponent<Trace.Insights.Types.InsightModel>, 'selected'|'agentFocus'|'fieldMetrics'>>):
+      InsightWidgetElement {
     let widgetElement = this.#insightWidgetCache.get(model);
     if (!widgetElement) {
       widgetElement = document.createElement('devtools-widget') as InsightWidgetElement;
@@ -85,7 +85,6 @@ export class InsightRenderer {
       insightSetKey: insightSet.id,
       agentFocus: options.agentFocus ?? null,
       fieldMetrics: options.fieldMetrics ?? null,
-      isAIAssistanceContext: options.isAIAssistanceContext ?? false,
     });
 
     return widgetElement;

package/front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -60,11 +60,6 @@
   }
 }
 
-.insight.ai-assistance-context {
-  display: block;
-  min-width: 200px;
-}
-
 .insight-hover-icon {
   position: absolute;
   top: var(--sys-size-5);

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -300,7 +300,7 @@
   font-weight: var(--ref-typeface-weight-medium);
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }

package/front_end/third_party/chromium/README.chromium

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

package/front_end/ui/components/buttons/button.css

@@ -83,6 +83,10 @@ button {
     border: none;
     overflow: hidden;
 
+    devtools-icon {
+      color: var(--override-button-icon-color, var(--icon-default));
+    }
+
     &.small {
       --button-height: var(--sys-size-9);
       --button-width: var(--sys-size-9);