chrome-devtools-frontend 1.0.1582745 → 1.0.1585538

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -13,7 +13,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
-import * as GreenDev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -518,7 +517,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   };
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
   #runAbortController = new AbortController();
-  #additionalContextItemsFromFloaty: UI.Floaty.FloatyContextSelection[] = [];
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -571,7 +569,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return {
         state: ViewState.CHAT_VIEW,
         props: {
-          additionalFloatyContext: this.#additionalContextItemsFromFloaty,
           blockedByCrossOrigin: this.#conversation.isBlockedByOrigin,
           isLoading: this.#isLoading,
           messages: this.#messages,
@@ -665,15 +662,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  #bindFloatyListener(): void {
-    const additionalContexts = UI.Context.Context.instance().flavor(UI.Floaty.FloatyFlavor);
-    if (!additionalContexts) {
-      return;
-    }
-    this.#additionalContextItemsFromFloaty = additionalContexts.selectedContexts;
-    this.requestUpdate();
-  }
-
   async #handlePerformanceRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
     return await TimelinePanel.TimelinePanel.TimelinePanel.executeRecordAndReload();
   }
@@ -707,12 +695,24 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // We select the default agent based on the open panels if
   // there isn't any active conversation.
   #selectDefaultAgentIfNeeded(): void {
+    // We don't change the current agent when there is a message in flight.
+    if (this.#isLoading) {
+      return;
+    }
+
     // If there already is an agent and if it is not empty,
-    // we don't automatically change the agent. In addition to this,
-    // we don't change the current agent when there is a message in flight.
-    if ((this.#conversation && !this.#conversation.isEmpty) || this.#isLoading) {
+    // we don't automatically change the agent.
+    if (this.#conversation && !this.#conversation.isEmpty) {
+      // If the context selection agent is enabled,
+      // we update the context of the current agent.
+      const context = this.#getConversationContext(this.#getDefaultConversationType());
+      if (context && isAiAssistanceContextSelectionAgentEnabled()) {
+        this.#conversation?.setContext(context);
+        this.requestUpdate();
+      }
       return;
     }
+
     const targetConversationType = this.#getDefaultConversationType();
     if (this.#conversation?.type === targetConversationType) {
       // The above if makes sure even if we have an active agent it's empty
@@ -722,7 +722,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const conversation = targetConversationType ?
         new AiAssistanceModel.AiConversation.AiConversation(
             targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager, false,
-            this.#handlePerformanceRecordAndReload.bind(this), this.#handleInspectElement.bind(this)) :
+            this.#handlePerformanceRecordAndReload.bind(this), this.#handleInspectElement.bind(this),
+            NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator()) :
         undefined;
 
     this.#updateConversationState(conversation);
@@ -751,6 +752,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               false,
               this.#handlePerformanceRecordAndReload.bind(this),
               this.#handleInspectElement.bind(this),
+              NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
           );
         }
       }
@@ -812,11 +814,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectDefaultAgentIfNeeded();
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
-
-    if (GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
-      UI.Context.Context.instance().addFlavorChangeListener(UI.Floaty.FloatyFlavor, this.#bindFloatyListener, this);
-      this.#bindFloatyListener();
-    }
   }
 
   override willHide(): void {
@@ -1218,6 +1215,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           false,
           this.#handlePerformanceRecordAndReload.bind(this),
           this.#handleInspectElement.bind(this),
+          NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
       );
     }
     this.#updateConversationState(conversation);
@@ -1346,23 +1344,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #handleConversationContextChange = (data: unknown): void => {
-    if (data instanceof Workspace.UISourceCode.UISourceCode) {
-      const context = new AiAssistanceModel.FileAgent.FileContext(data);
-      this.#selectedFile = context;
-      this.#conversation?.setContext(context);
-    } else if (data instanceof SDK.DOMModel.DOMNode) {
-      const context = new AiAssistanceModel.StylingAgent.NodeContext(data);
-      this.#selectedElement = context;
-      this.#conversation?.setContext(context);
-    } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
-      const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-      const context = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
-      this.#selectedRequest = context;
-      this.#conversation?.setContext(context);
-    } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
-      const context = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
-      this.#selectedPerformanceTrace = context;
-      this.#conversation?.setContext(context);
+    if (data instanceof AiAssistanceModel.FileAgent.FileContext) {
+      this.#selectedFile = data;
+    } else if (data instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+      this.#selectedElement = data;
+    } else if (data instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+      this.#selectedRequest = data;
+    } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+      this.#selectedPerformanceTrace = data;
     }
 
     this.#isContextAutoSelectionSuspended = false;
@@ -1463,7 +1452,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             text,
             {
               signal,
-              extraContext: this.#additionalContextItemsFromFloaty,
               multimodalInput,
             },
             ),
@@ -1574,6 +1562,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             commitStep();
             break;
           }
+
           case AiAssistanceModel.AiAgent.ResponseType.ANSWER: {
             systemMessage.rpcId = data.rpcId;
             const lastPart = systemMessage.parts.at(-1);

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -10,9 +10,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 AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
-import * as GreenDev from '../../../models/greendev/greendev.js';
-import * as Trace from '../../../models/trace/trace.js';
-import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -39,14 +36,6 @@ const UIStrings = {
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
-  /**
-   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
-   */
-  removeContext: 'Remove from context',
-  /**
-   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
-   */
-  addContext: 'Add selected item as context',
 } as const;
 
 /*
@@ -93,6 +82,30 @@ const UIStringsNotTranslate = {
    * @description Message displayed in toast in case of any failures while uploading an image file as input.
    */
   uploadImageFailureMessage: 'Failed to upload image. Please try again.',
+  /**
+   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
+   */
+  addContext: 'Add item for context',
+  /**
+   * @description Label added to the button that remove the currently selected element in AI Assistance panel.
+   */
+  removeContextElement: 'Remove element from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextRequest: 'Remove request from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextFile: 'Remove file from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextPerfInsight: 'Remove performance insight from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContext: 'Remove from context',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatInput.ts', UIStrings);
@@ -123,7 +136,6 @@ export interface ViewInput {
   inputPlaceholder: Platform.UIString.LocalizedString;
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   inspectElementToggled: boolean;
-  additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
   disclaimerText: string;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   multimodalInputEnabled: boolean;
@@ -151,22 +163,36 @@ export interface ViewInput {
 
 export type ViewOutput = undefined;
 
-export const
-    DEFAULT_VIEW =
-        (input: ViewInput, output: ViewOutput, target: HTMLElement):
-            void => {
-              const chatInputContainerCls = Lit.Directives.classMap({
-                'chat-input-container': true,
-                'single-line-layout': !input.selectedContext && !input.onContextAdd,
-                disabled: input.isTextInputDisabled,
-              });
-
-              const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
-                const classes = Lit.Directives.classMap({
-                  'chat-input-disclaimer': true,
-                  'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
-                });
-                // clang-format off
+function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationContext<unknown>):
+    Platform.UIString.LocalizedString {
+  if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+    return lockedString(UIStringsNotTranslate.removeContextFile);
+  }
+  if (context instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+    return lockedString(UIStringsNotTranslate.removeContextElement);
+  }
+  if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    return lockedString(UIStringsNotTranslate.removeContextRequest);
+  }
+  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
+  }
+  return lockedString(UIStringsNotTranslate.removeContext);
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const chatInputContainerCls = Lit.Directives.classMap({
+    'chat-input-container': true,
+    'single-line-layout': !input.selectedContext && !input.onContextAdd,
+    disabled: input.isTextInputDisabled,
+  });
+
+  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+    const classes = Lit.Directives.classMap({
+      'chat-input-disclaimer': true,
+      'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
+    });
+    // clang-format off
     return html`
       <div class=${classes}>
         <button
@@ -198,10 +224,10 @@ export const
         </div></devtools-tooltip>
       </div>
     `;
-                // clang-format on
-              };
+    // clang-format on
+  };
 
-              // clang-format off
+  // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatInputStyles}</style>
@@ -226,52 +252,6 @@ export const
       :
       html`
         <form class="input-form" @submit=${input.onSubmit}>
-          ${GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty') ?
-            html`
-              <ul class="floaty">
-                ${input.additionalFloatyContext.map(c => {
-                  return html`
-                    <li>
-                      <span class="context-item">
-                        ${c instanceof SDK.NetworkRequest.NetworkRequest ? html`${c.url()}` :
-                          c instanceof SDK.DOMModel.DOMNode ? html`
-                            <devtools-widget .widgetConfig=${
-                              UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: c})}
-                            ></devtools-widget>` :
-                          'insight' in c ? html`${c.insight.title}` :
-                          'event' in c && 'traceStartTime' in c ? html`
-                            ${c.event.name} @ ${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(Trace.Types.Timing.Micro(c.event.ts - c.traceStartTime))}` :
-                          Lit.nothing}
-                      </span>
-                      <devtools-button
-                        class="floaty-delete-button"
-                        @click=${(e: MouseEvent) => {
-                          e.preventDefault();
-                          UI.Floaty.onFloatyContextDelete(c);
-                        }}
-                        .data=${{
-                          variant: Buttons.Button.Variant.ICON,
-                          iconName: 'cross',
-                          title: 'Delete',
-                          size: Buttons.Button.Size.SMALL,
-                        } as Buttons.Button.ButtonData}
-                      ></devtools-button>
-                    </li>`;
-                })}
-                <li class="open-floaty">
-                  <devtools-button
-                    class="floaty-add-button"
-                    @click=${UI.Floaty.onFloatyOpen}
-                    .data=${{
-                      variant: Buttons.Button.Variant.ICON,
-                      iconName: 'select-element',
-                      title: 'Open context picker',
-                      size: Buttons.Button.Size.SMALL,
-                    } as Buttons.Button.ButtonData}
-                  ></devtools-button>
-                </li>
-              </ul>`
-            : Lit.nothing}
           <div class=${chatInputContainerCls}>
             ${(input.multimodalInputEnabled && input.imageInput && !input.isTextInputDisabled) ?
               html`
@@ -355,20 +335,20 @@ export const
                         }}
                         aria-description=${i18nString(UIStrings.revealContextDescription)}
                       >
-                        ${input.selectedContext.getItem() instanceof SDK.NetworkRequest.NetworkRequest ?
-                          PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem() as SDK.NetworkRequest.NetworkRequest) :
-                          input.selectedContext.getItem() instanceof Workspace.UISourceCode.UISourceCode ?
-                          PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem() as Workspace.UISourceCode.UISourceCode) :
-                          input.selectedContext.getItem() instanceof AiAssistanceModel.AIContext.AgentFocus ?
+                        ${input.selectedContext instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                          PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem()) :
+                          input.selectedContext instanceof  AiAssistanceModel.FileAgent.FileContext ?
+                          PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem()) :
+                          input.selectedContext instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                           html`<devtools-icon name="performance" title="Performance"></devtools-icon>` :
                           Lit.nothing}
                         <span class="title">
-                          ${input.selectedContext.getItem() instanceof SDK.DOMModel.DOMNode ?
+                          ${input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
                               <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                node: input.selectedContext.getItem() as SDK.DOMModel.DOMNode,
+                                node: input.selectedContext.getItem(),
                                 options: {
-                                  hiddenClassList: (input.selectedContext.getItem() as SDK.DOMModel.DOMNode).classNames().filter(
+                                  hiddenClassList: input.selectedContext.getItem().classNames().filter(
                                     className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
                                   disabled: input.isTextInputDisabled,
                                 },
@@ -378,8 +358,8 @@ export const
                         </span>
                         ${input.onContextRemoved ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.removeContext)}
-                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    title=${getContextRemoveLabel(input.selectedContext)}
+                                    aria-label=${getContextRemoveLabel(input.selectedContext)}
                                     class="remove-context"
                                     .iconName=${'cross'}
                                     .size=${Buttons.Button.Size.MICRO}
@@ -391,8 +371,8 @@ export const
                   :
                     input.onContextAdd ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.addContext)}
-                                    aria-label=${i18nString(UIStrings.addContext)}
+                                    title=${lockedString(UIStringsNotTranslate.addContext)}
+                                    aria-label=${lockedString(UIStringsNotTranslate.addContext)}
                                     class="add-context"
                                     .iconName=${'plus'}
                                     .size=${Buttons.Button.Size.SMALL}
@@ -494,9 +474,9 @@ export const
     >
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
-  `, target);
-              // clang-format on
-            };
+  `, target,);
+  // clang-format on
+};
 
 /**
  * ChatInput is a presenter for the input area in the AI Assistance panel.
@@ -506,9 +486,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   blockedByCrossOrigin = false;
   isTextInputDisabled = false;
   inputPlaceholder = '' as Platform.UIString.LocalizedString;
-  selectedContext = null as AiAssistanceModel.AiAgent.ConversationContext<unknown>| null;
+  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
   inspectElementToggled = false;
-  additionalFloatyContext = [] as UI.Floaty.FloatyContextSelection[];
   disclaimerText = '';
   conversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
   multimodalInputEnabled = false;
@@ -697,7 +676,6 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           selectedContext: this.selectedContext,
           inspectElementToggled: this.inspectElementToggled,
           isTextInputEmpty: this.#isTextInputEmpty(),
-          additionalFloatyContext: this.additionalFloatyContext,
           disclaimerText: this.disclaimerText,
           conversationType: this.conversationType,
           multimodalInputEnabled: this.multimodalInputEnabled,

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -221,6 +221,7 @@ export interface RatingViewInput {
 export interface ActionViewInput {
   onReportClick: () => void;
   onCopyResponseClick: () => void;
+  showActions: boolean;
 }
 
 export interface SuggestionViewInput {
@@ -330,7 +331,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
         },
       )}
       ${renderError(message)}
-      ${input.isLastMessage && !input.isLoading ? renderActions(input, output) : Lit.nothing}
+      ${input.showActions ? renderActions(input, output) : Lit.nothing}
     </section>
   `, target);
   // clang-format on
@@ -812,8 +813,9 @@ export class ChatMessage extends UI.Widget.Widget {
           onInputChange: this.#handleInputChange.bind(this),
           isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
           // Props for actions logic
+          showActions: !(this.isLastMessage && this.isLoading),
           showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
-          suggestions: (this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
+          suggestions: (this.isLastMessage && this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
                         this.message.parts.at(-1)?.type === 'answer') ?
               (this.message.parts.at(-1) as AnswerPart).suggestions :
               undefined,

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -76,7 +76,6 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
-  additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
 interface ChatWidgetInput extends Props {
@@ -171,7 +170,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             conversationType: input.conversationType,
             uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
             isReadOnly: input.isReadOnly,
-            additionalFloatyContext: input.additionalFloatyContext,
             onContextClick: input.onContextClick,
             onInspectElementClick: input.onInspectElementClick,
             onTextSubmit: input.onTextSubmit,

package/front_end/panels/autofill/AutofillView.ts

@@ -228,14 +228,12 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           <div class="top-left-corner">
             <devtools-checkbox
                 ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
-                title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
-                jslog=${VisualLogging.toggle(input.showTestAddressesInAutofillMenuSetting.name).track({ change: true })}>
+                title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
               ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
             </devtools-checkbox>
             <devtools-checkbox
                 ${bindToSetting(input.autoOpenViewSetting)}
-                title=${i18nString(UIStrings.autoShowTooltip)}
-                jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
+                title=${i18nString(UIStrings.autoShowTooltip)}>
               ${i18nString(UIStrings.autoShow)}
             </devtools-checkbox>
             <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
@@ -267,16 +265,14 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
               <div class="label-container">
                 <devtools-checkbox
                     ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
-                    title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
-                    jslog=${VisualLogging.toggle(input.showTestAddressesInAutofillMenuSetting.name).track({ change: true })}>
+                    title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
                   ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
                 </devtools-checkbox>
               </div>
               <div class="label-container">
                 <devtools-checkbox
                     ${bindToSetting(input.autoOpenViewSetting)}
-                    title=${i18nString(UIStrings.autoShowTooltip)}
-                    jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
+                    title=${i18nString(UIStrings.autoShowTooltip)}>
                   ${i18nString(UIStrings.autoShow)}
                 </devtools-checkbox>
               </div>

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -23,6 +23,14 @@ const UIStringsNotTranslate = {
    * @description Text for teaser to generate code in Mac.
    */
   cmdItoGenerateCode: 'cmd+i to generate code',
+  /**
+   * @description Text for teaser to learn how data is being used.
+   */
+  ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'ctrl+. to learn how your data is being used.',
+  /**
+   * @description Text for teaser to learn how data is being used in Mac.
+   */
+  cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'cmd+. to learn how your data is being used.',
   /**
    * @description Aria label for teaser to generate code.
    */
@@ -47,6 +55,14 @@ const UIStringsNotTranslate = {
    * @description Text for teaser when suggestion has been generated.
    */
   tab: 'tab',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  or: 'or',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  enter: 'enter',
   /**
    * @description Text for teaser when suggestion has been generated.
    */
@@ -109,6 +125,7 @@ export interface ViewInput {
   disclaimerTooltipId?: string;
   noLogging: boolean;
   onManageInSettingsTooltipClick: (event: Event) => void;
+  showDataUsageTeaser: boolean;
   // TODO(b/472268298): Remove ContextFlavor explicitly and pass required values
   panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
@@ -136,18 +153,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       }
       const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
                                                      lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-      const toLearnHowYourDataIsBeingUsed = Host.Platform.isMac() ?
+      const toLearnHowYourDataIsBeingUsedScreenReaderOnly = Host.Platform.isMac() ?
           lockedString(UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed) :
           lockedString(UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed);
+      const toLearnHowYourDataIsBeingUsedVisible = Host.Platform.isMac() ?
+          lockedString(UIStringsNotTranslate.cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed) :
+          lockedString(UIStringsNotTranslate.ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed);
       const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
-      // TODO(b/472291834): Disclaimer icon should match the placeholder's color
+
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-trigger">
-        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}&nbsp;</span>
-        <div class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
-          ${toLearnHowYourDataIsBeingUsed}
-        </div>
-        <devtools-button
+        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}</span>
+        ${input.showDataUsageTeaser ?
+            html`<span aria-hidden="true">${'. ' + toLearnHowYourDataIsBeingUsedVisible}</span>` : nothing}
+        <span class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
+          ${toLearnHowYourDataIsBeingUsedScreenReaderOnly}
+        </span>
+        &nbsp;<devtools-button
           .data=${{
               title: lockedString(UIStringsNotTranslate.learnMoreAboutHowYourDataIsBeingUsed),
               size: Buttons.Button.Size.MICRO,
@@ -220,6 +242,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-generated">
           <span>${lockedString(UIStringsNotTranslate.tab)}</span>
+          &nbsp;${lockedString(UIStringsNotTranslate.or)}&nbsp;
+          <span>${lockedString(UIStringsNotTranslate.enter)}</span>
           &nbsp;${lockedString(UIStringsNotTranslate.toAccept)}
         </div>`;
       // clang-format on
@@ -245,12 +269,13 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
   #viewOutput: ViewOutput = {};
 
-  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
+  #displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
   #timerIntervalId?: number;
   #loadStartTime?: number;
+  static #showDataUsageTeaser = true;
 
   constructor(view?: View) {
     super();
@@ -268,6 +293,7 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
           disclaimerTooltipId: this.#disclaimerTooltipId,
           noLogging: this.#noLogging,
+          showDataUsageTeaser: AiCodeGenerationTeaser.#showDataUsageTeaser,
           panel: this.#panel,
         },
         this.#viewOutput, this.contentElement);
@@ -286,6 +312,9 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     if (displayState === this.#displayState) {
       return;
     }
+    if (this.#displayState === AiCodeGenerationTeaserDisplayState.TRIGGER) {
+      AiCodeGenerationTeaser.#showDataUsageTeaser = false;
+    }
     this.#displayState = displayState;
     this.requestUpdate();
     if (this.#displayState === AiCodeGenerationTeaserDisplayState.LOADING) {

package/front_end/panels/console/ConsoleView.ts

@@ -72,7 +72,6 @@ import {
   ConsoleTableMessageView,
   ConsoleViewMessage,
   getMessageForElement,
-  MaxLengthForLinks,
 } from './ConsoleViewMessage.js';
 import {ConsoleViewport, type ConsoleViewportElement, type ConsoleViewportProvider} from './ConsoleViewport.js';
 
@@ -549,7 +548,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     // the linkifiers live location change event.
     const throttler = new Common.Throttler.Throttler(100);
     const refilterMessages = (): Promise<void> => throttler.schedule(async () => this.onFilterChanged());
-    this.linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
+    this.linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
     this.linkifier.addEventListener(Components.Linkifier.Events.LIVE_LOCATION_UPDATED, refilterMessages);
 
     this.consoleMessages = [];