chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

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('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('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,13 +251,14 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       'navigation,rail',
     ];
 
-    if (Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats') && options.enableJSSampling) {
+    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('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,9 +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('timeline-show-all-events');
-    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
-    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
+    config.showAllEvents =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_ALL_EVENTS);
+    config.includeRuntimeCallStats =
+        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);
 
@@ -2089,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('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/panels/whats_new/ReleaseNoteView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/components/markdown_view/markdown_view.js';
+import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
@@ -87,14 +88,14 @@ export class ReleaseNoteView extends UI.Panel.Panel {
             <div class="video-container">
               ${releaseNote.videoLinks.map((value: {description: string, link: Platform.DevToolsPath.UrlString, type?: VideoType}) => {
                 return html`
-                  <x-link
+                  <devtools-link
                   href=${value.link}
-                  jslog=${VisualLogging.link().track({click: true}).context('learn-more')}>
+                  .jslogContext=${'learn-more'}>
                     <div class="video">
                       <img class="thumbnail" src=${input.getThumbnailPath(value.type ?? VideoType.WHATS_NEW)}>
                       <div class="thumbnail-description"><span>${value.description}</span></div>
                     </div>
-                </x-link>
+                </devtools-link>
                 `;
               })}
             </div>

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: 45ca275b4749431e27f80dc5defcf893accdf583
+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);

package/front_end/ui/components/markdown_view/CodeBlock.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/legacy/legacy.js'; // for x-link
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
@@ -204,12 +204,9 @@ export class CodeBlock extends HTMLElement {
   #renderNotice(): Lit.TemplateResult {
     // clang-format off
     return html`<p class="notice">
-      <x-link class="link" href="https://support.google.com/legal/answer/13505487" jslog=${
-        VisualLogging.link('code-disclaimer').track({
-          click: true,
-        })}>
+      <devtools-link class="link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${'code-disclaimer'}>
         ${i18nString(UIStrings.disclaimer)}
-      </x-link>
+      </devtools-link>
     </p>`;
     // clang-format on
   }

package/front_end/ui/components/markdown_view/MarkdownLink.ts

@@ -3,10 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../legacy/legacy.js'; // Required for <x-link>.
+import '../../kit/kit.js';
 
 import {html, render} from '../../lit/lit.js';
-import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import markdownLinkStyles from './markdownLink.css.js';
 import {getMarkdownLink} from './MarkdownLinksMap.js';
@@ -38,8 +37,8 @@ export class MarkdownLink extends HTMLElement {
     // clang-format off
     const output = html`
       <style>${markdownLinkStyles}</style>
-      <x-link class="devtools-link" href=${this.#linkUrl} jslog=${VisualLogging.link().track({click: true})}
-      >${this.#linkText}</x-link>`;
+      <devtools-link class="devtools-link" href=${this.#linkUrl}
+      >${this.#linkText}</devtools-link>`;
     render(output, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -3,13 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../legacy/legacy.js';
+import '../../kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import {html, render} from '../../lit/lit.js';
-import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import panelFeedbackStyles from './panelFeedback.css.js';
 
@@ -68,14 +67,14 @@ export class PanelFeedback extends HTMLElement {
         <h2 class="flex">
           <devtools-icon name="experiment" class="extra-large" style="color: var(--icon-primary);"></devtools-icon> ${i18nString(UIStrings.previewFeature)}
         </h2>
-        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl} jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <p>${i18nString(UIStrings.previewText)} <devtools-link href=${this.#props.feedbackUrl} .jslogContext=${'feedback'}>${i18nString(UIStrings.previewTextFeedbackLink)}</devtools-link></p>
         <div class="video">
           <div class="thumbnail">
             <img src=${videoThumbnailUrl} role="presentation" />
           </div>
           <div class="video-description">
             <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
-            <x-link class="quick-start-link" href=${this.#props.quickStartUrl} jslog=${VisualLogging.link('css-overview.quick-start').track({click: true})}>${this.#props.quickStartLinkText}</x-link>
+            <devtools-link class="quick-start-link" href=${this.#props.quickStartUrl} .jslogContext=${'css-overview.quick-start'}>${this.#props.quickStartLinkText}</devtools-link>
           </div>
         </div>
       </div>

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -15,7 +16,7 @@ export interface PreviewToggleData {
   name: string;
   helperText: string|null;
   feedbackURL: string|null;
-  experiment: Root.Runtime.ExperimentName;
+  experiment: Root.ExperimentNames.ExperimentName;
   learnMoreURL?: string;
   onChangeCallback?: (checked: boolean) => void;
 }
@@ -45,7 +46,7 @@ export class PreviewToggle extends HTMLElement {
   #helperText: string|null = null;
   #feedbackURL: string|null = null;
   #learnMoreURL: string|undefined;
-  #experiment = '';
+  #experiment: Root.ExperimentNames.ExperimentName|'' = '';
   #onChangeCallback?: (checked: boolean) => void;
 
   set data(data: PreviewToggleData) {
@@ -59,7 +60,7 @@ export class PreviewToggle extends HTMLElement {
   }
 
   #render(): void {
-    const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
+    const checked = this.#experiment && Root.Runtime.experiments.isEnabled(this.#experiment);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
@@ -75,14 +76,14 @@ export class PreviewToggle extends HTMLElement {
           </devtools-checkbox>
         <div class="spacer"></div>
         ${this.#feedbackURL && !this.#helperText
-          ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+          ? html`<div class="feedback"><devtools-link class="devtools-link" href=${this.#feedbackURL} jslogContext=${'feedback'}>${i18nString(UIStrings.shortFeedbackLink)}</devtools-link></div>`
           : nothing}
         ${this.#learnMoreURL
-          ? html`<div class="learn-more"><x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>`
+          ? html`<div class="learn-more"><devtools-link class="devtools-link" href=${this.#learnMoreURL} jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMoreLink)}</devtools-link></div>`
           : nothing}
         <div class="helper">
           ${this.#helperText && this.#feedbackURL
-            ? html`<p>${this.#helperText} <x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+            ? html`<p>${this.#helperText} <devtools-link class="devtools-link" href=${this.#feedbackURL} jslogContext=${'feedback'}>${i18nString(UIStrings.previewTextFeedbackLink)}</devtools-link></p>`
             : nothing}
         </div>
       </div>`,
@@ -95,7 +96,9 @@ export class PreviewToggle extends HTMLElement {
 
   #checkboxChanged(event: Event): void {
     const checked = (event.target as HTMLInputElement).checked;
-    Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    if (this.#experiment) {
+      Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    }
     this.#onChangeCallback?.(checked);
   }
 }

package/front_end/ui/components/panel_feedback/panelFeedback.css

@@ -54,7 +54,7 @@ h3 {
   gap: 20px;
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }
@@ -72,7 +72,7 @@ x-link.quick-start-link {
 }
 
 @media (forced-colors: active) {
-  x-link {
+  devtools-link {
     color: linktext;
   }
 }

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -30,12 +30,12 @@
   flex: 1;
 }
 
-.x-link {
+.devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
   margin: 0 4px;
 }
 
-.feedback .x-link {
+.feedback .devtools-link {
   color: var(--sys-color-token-subtle);
 }

package/front_end/ui/components/text_editor/AiCodeGenerationParser.ts

@@ -9,6 +9,11 @@ const BLOCK_COMMENT_START_PATTERN = /^\/\*+\s*/;
 const BLOCK_COMMENT_END_PATTERN = /\s*\*+\/$/;
 const BLOCK_COMMENT_LINE_PREFIX_PATTERN = /^\s*\*\s?/;
 
+export interface CommentNodeInfo {
+  text: string;
+  to: number;
+}
+
 function findLastNonWhitespacePos(state: CodeMirror.EditorState, cursorPosition: number): number {
   const line = state.doc.lineAt(cursorPosition);
   const textBefore = line.text.substring(0, cursorPosition - line.from);
@@ -23,8 +28,8 @@ function resolveCommentNode(state: CodeMirror.EditorState, cursorPosition: numbe
   // The bias of -1 makes it check the character to the left of the position.
   const node = tree.resolveInner(lookupPos, -1);
   const nodeType = node.type.name;
-  // Check if the node type is a comment AND the cursor is within the node's range.
-  if (nodeType.includes('Comment') && cursorPosition >= node.to) {
+  // Check if the node type is a comment
+  if (nodeType.includes('Comment')) {
     if (!nodeType.includes('BlockComment')) {
       return node;
     }
@@ -48,7 +53,14 @@ function resolveCommentNode(state: CodeMirror.EditorState, cursorPosition: numbe
 
 function extractBlockComment(rawText: string): string|undefined {
   // Remove /* and */, whitespace, and common leading asterisks on new lines
-  let cleaned = rawText.replace(BLOCK_COMMENT_START_PATTERN, '').replace(BLOCK_COMMENT_END_PATTERN, '');
+  if (!rawText.match(BLOCK_COMMENT_START_PATTERN)) {
+    return;
+  }
+  let cleaned = rawText.replace(BLOCK_COMMENT_START_PATTERN, '');
+  if (!cleaned.match(BLOCK_COMMENT_END_PATTERN)) {
+    return;
+  }
+  cleaned = cleaned.replace(BLOCK_COMMENT_END_PATTERN, '');
   // Remove leading " * " from multi-line block comments
   cleaned = cleaned.split('\n').map(line => line.replace(BLOCK_COMMENT_LINE_PREFIX_PATTERN, '')).join('\n').trim();
   return cleaned;
@@ -59,19 +71,26 @@ function extractLineComment(rawText: string): string {
 }
 
 export class AiCodeGenerationParser {
-  static extractCommentText(state: CodeMirror.EditorState, cursorPosition: number): string|undefined {
+  static extractCommentNodeInfo(state: CodeMirror.EditorState, cursorPosition: number): CommentNodeInfo|undefined {
     const node = resolveCommentNode(state, cursorPosition);
     if (!node) {
       return;
     }
     const nodeType = node.type.name;
     const rawText = state.doc.sliceString(node.from, node.to);
+    let text = '';
     if (nodeType.includes('LineComment')) {
-      return extractLineComment(rawText);
+      text = extractLineComment(rawText);
+    } else if (nodeType.includes('BlockComment')) {
+      text = extractBlockComment(rawText) ?? '';
+    } else {
+      text = rawText;
     }
-    if (nodeType.includes('BlockComment')) {
-      return extractBlockComment(rawText);
+
+    if (!Boolean(text)) {
+      return;
     }
-    return rawText;
+
+    return {text, to: node.to};
   }
 }