chrome-devtools-frontend 1.0.1528866 → 1.0.1529186

package/front_end/{models/persistence → panels/common}/PersistenceUtils.ts

@@ -6,16 +6,11 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Workspace from '../workspace/workspace.js';
-
-import {FileSystemWorkspaceBinding} from './FileSystemWorkspaceBinding.js';
-import {NetworkPersistenceManager} from './NetworkPersistenceManager.js';
-import {Events, type PersistenceBinding, PersistenceImpl} from './PersistenceImpl.js';
 
 const UIStrings = {
   /**
@@ -29,16 +24,17 @@ const UIStrings = {
    */
   linkedToS: 'Linked to {PH1}',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('models/persistence/PersistenceUtils.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/PersistenceUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class PersistenceUtils {
   static tooltipForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): string {
-    const binding = PersistenceImpl.instance().binding(uiSourceCode);
+    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (!binding) {
       return '';
     }
     if (uiSourceCode === binding.network) {
-      return FileSystemWorkspaceBinding.tooltipForUISourceCode(binding.fileSystem);
+      return Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.tooltipForUISourceCode(
+          binding.fileSystem);
     }
     if (binding.network.contentType().isFromSourceMap()) {
       return i18nString(
@@ -48,7 +44,7 @@ export class PersistenceUtils {
   }
 
   static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
-    const binding = PersistenceImpl.instance().binding(uiSourceCode);
+    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
@@ -57,7 +53,8 @@ export class PersistenceUtils {
       icon.name = 'document';
       icon.classList.add('small');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
+      if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
+          binding.fileSystem.project()) {
         icon.classList.add('dot', 'purple');
       } else {
         icon.classList.add('dot', 'green');
@@ -70,7 +67,8 @@ export class PersistenceUtils {
       return null;
     }
 
-    if (NetworkPersistenceManager.instance().isActiveHeaderOverrides(uiSourceCode)) {
+    if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
+            uiSourceCode)) {
       const icon = new IconButton.Icon.Icon();
       icon.name = 'document';
       icon.classList.add('small');
@@ -88,13 +86,13 @@ export class PersistenceUtils {
 
 export class LinkDecorator extends Common.ObjectWrapper.ObjectWrapper<Components.Linkifier.LinkDecorator.EventTypes>
     implements Components.Linkifier.LinkDecorator {
-  constructor(persistence: PersistenceImpl) {
+  constructor(persistence: Persistence.Persistence.PersistenceImpl) {
     super();
-    persistence.addEventListener(Events.BindingCreated, this.bindingChanged, this);
-    persistence.addEventListener(Events.BindingRemoved, this.bindingChanged, this);
+    persistence.addEventListener(Persistence.Persistence.Events.BindingCreated, this.bindingChanged, this);
+    persistence.addEventListener(Persistence.Persistence.Events.BindingRemoved, this.bindingChanged, this);
   }
 
-  private bindingChanged(event: Common.EventTarget.EventTargetEvent<PersistenceBinding>): void {
+  private bindingChanged(event: Common.EventTarget.EventTargetEvent<Persistence.Persistence.PersistenceBinding>): void {
     const binding = event.data;
     this.dispatchEventToListeners(Components.Linkifier.LinkDecorator.Events.LINK_ICON_CHANGED, binding.network);
   }

package/front_end/panels/common/common.ts

@@ -100,3 +100,4 @@ export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 export {AiCodeCompletionSummaryToolbar} from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
+export * as PersistenceUtils from './PersistenceUtils.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -4,16 +4,55 @@
 
 import '../../ui/components/tooltips/tooltips.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';
+import * as Root from '../../core/root/root.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Buttons from '../../ui/components/buttons/buttons.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 * as PanelCommon from '../common/common.js';
 
 import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js';
-import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
+import {ConsoleViewMessage} from './ConsoleViewMessage.js';
+import {PromptBuilder} from './PromptBuilder.js';
 
 const {render, html} = Lit;
 
 const UIStringsNotTranslate = {
+  /**
+   * @description Link text in the disclaimer dialog, linking to a settings page containing more information
+   */
+  learnMore: 'Learn more about AI summaries',
+  /**
+   * @description Description of the console insights feature
+   */
+  freDisclaimerHeader: 'Get explanations for console warnings and errors',
+  /**
+   * @description First item in the first-run experience dialog
+   */
+  freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
+  /**
+   * @description Explainer for which data is being sent by the console insights feature
+   */
+  consoleInsightsSendsData:
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Explainer for which data is being sent by the console insights feature
+   */
+  consoleInsightsSendsDataNoLogging:
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Third item in the first-run experience dialog
+   */
+  freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution',
+  /**
+   * @description Tooltip text for the console insights teaser
+   */
+  infoTooltipText:
+      'The text above has been generated with AI on your local device. Clicking the button will send the console message, stack trace, related source code, and the associated network headers to Google to generate a more detailed explanation.',
   /**
    * @description Header text during loading state while an AI summary is being generated
    */
@@ -22,15 +61,32 @@ const UIStringsNotTranslate = {
    * @description Label for an animation shown while an AI response is being generated
    */
   loading: 'Loading',
+  /**
+   * @description Label for a button which generates a more detailed explanation
+   */
+  tellMeMore: 'Tell me more',
+  /**
+   * @description Label for a checkbox which turns off the teaser explanation feature
+   */
+  dontShow: 'Don’t show',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
 
+const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
+const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance/get-started#data-use';
+const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
+
 interface ViewInput {
+  onTellMeMoreClick: (event: Event) => void;
   // If multiple ConsoleInsightTeasers exist, each one needs a unique id. Otherwise showing and
   // hiding of the tooltip, and rendering the loading animation, does not work correctly.
-  uuid: String;
+  uuid: string;
+  headerText: string;
+  mainText: string;
   isInactive: boolean;
+  dontShowChanged: (e: Event) => void;
+  hasTellMeMoreButton: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -39,6 +95,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     return;
   }
 
+  const showPlaceholder = !Boolean(input.mainText);
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -50,23 +107,62 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
     >
       <div class="teaser-tooltip-container">
-        <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
-        <div
-          role="presentation"
-          aria-label=${lockedString(UIStringsNotTranslate.loading)}
-          class="loader"
-          style="clip-path: url(${'#clipPath-' + input.uuid});"
-        >
-          <svg width="100%" height="52">
-            <defs>
-            <clipPath id=${'clipPath-' + input.uuid}>
-              <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
-              <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
-              <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
-            </clipPath>
-          </defs>
-          </svg>
-        </div>
+        ${showPlaceholder ? html`
+          <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
+          <div
+            role="presentation"
+            aria-label=${lockedString(UIStringsNotTranslate.loading)}
+            class="loader"
+            style="clip-path: url(${'#clipPath-' + input.uuid});"
+          >
+            <svg width="100%" height="52">
+              <defs>
+              <clipPath id=${'clipPath-' + input.uuid}>
+                <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
+                <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
+                <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
+              </clipPath>
+            </defs>
+            </svg>
+          </div>
+        ` : html`
+          <h2 tabindex="-1">${input.headerText}</h2>
+          <div>${input.mainText}</div>
+          <div class="tooltip-footer">
+            ${input.hasTellMeMoreButton ? html`
+              <devtools-button
+                title=${lockedString(UIStringsNotTranslate.tellMeMore)}
+                .jslogContext=${'insights-teaser-tell-me-more'},
+                .variant=${Buttons.Button.Variant.PRIMARY}
+                @click=${input.onTellMeMoreClick}
+              >
+                <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
+                ${lockedString(UIStringsNotTranslate.tellMeMore)}
+              </devtools-button>
+            ` : Lit.nothing}
+            <devtools-icon
+              name="info"
+              class="info-icon"
+              aria-details=${'teaser-info-tooltip-' + input.uuid}
+            ></devtools-icon>
+            <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+              <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+              <div class="learn-more">
+                <x-link
+                  class="devtools-link"
+                  title=${lockedString(UIStringsNotTranslate.learnMore)}
+                  href=${DATA_USAGE_URL}
+                  jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+                >${lockedString(UIStringsNotTranslate.learnMore)}</x-link>
+              </div>
+            </devtools-tooltip>
+            <devtools-checkbox
+              @change=${input.dontShowChanged}
+              jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+              ${lockedString(UIStringsNotTranslate.dontShow)}
+            </devtools-checkbox>
+          </div>
+        `}
       </div>
     </devtools-tooltip>
   `, target);
@@ -77,16 +173,110 @@ export type View = typeof DEFAULT_VIEW;
 
 export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #view: View;
-  #uuid: String;
+  #uuid: string;
+  #isGenerating = false;
+  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi|undefined;
+  #promptBuilder: PromptBuilder;
+  #headerText = '';
+  #mainText = '';
+  #consoleViewMessage: ConsoleViewMessage;
   #isInactive = false;
+  #abortController: null|AbortController = null;
 
-  constructor(uuid: String, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
+  constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
     this.#uuid = uuid;
+    this.#promptBuilder = new PromptBuilder(consoleViewMessage);
+    this.#consoleViewMessage = consoleViewMessage;
     this.requestUpdate();
   }
 
+  #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
+    try {
+      return Common.Settings.moduleSetting('console-insights-enabled') as Common.Settings.Setting<boolean>;
+    } catch {
+      return;
+    }
+  }
+
+  #getOnboardingCompletedSetting(): Common.Settings.Setting<boolean> {
+    return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', true);
+  }
+
+  #executeConsoleInsightAction(): void {
+    UI.Context.Context.instance().setFlavor(ConsoleViewMessage, this.#consoleViewMessage);
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(EXPLAIN_TEASER_ACTION_ID);
+    void action.execute();
+  }
+
+  #onTellMeMoreClick(event: Event): void {
+    event.stopPropagation();
+    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() &&
+        this.#getOnboardingCompletedSetting()?.getIfNotDisabled()) {
+      this.#executeConsoleInsightAction();
+      return;
+    }
+    void this.#showFreDialog();
+  }
+
+  async #showFreDialog(): Promise<void> {
+    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    const result = await PanelCommon.FreDialog.show({
+      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: [
+        {
+          iconName: 'psychiatry',
+          content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
+        },
+        {
+          iconName: 'google',
+          content: noLogging ? lockedString(UIStringsNotTranslate.consoleInsightsSendsDataNoLogging) :
+                               lockedString(UIStringsNotTranslate.consoleInsightsSendsData),
+        },
+        {
+          iconName: 'warning',
+          // clang-format off
+          content: html`<x-link
+            href=${CODE_SNIPPET_WARNING_URL}
+            class="link devtools-link"
+            jslog=${VisualLogging.link('explain.teaser.code-snippets-explainer').track({
+              click: true
+            })}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+          // clang-format on
+        }
+      ],
+      onLearnMoreClick: () => {
+        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+      },
+      ariaLabel: lockedString(UIStringsNotTranslate.freDisclaimerHeader),
+      learnMoreButtonText: lockedString(UIStringsNotTranslate.learnMore),
+    });
+
+    if (result) {
+      this.#getConsoleInsightsEnabledSetting()?.set(true);
+      this.#getOnboardingCompletedSetting()?.set(true);
+      this.#executeConsoleInsightAction();
+    }
+  }
+
+  maybeGenerateTeaser(): void {
+    this.requestUpdate();
+    if (!this.#isInactive && !this.#isGenerating && !Boolean(this.#mainText) &&
+        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
+      void this.#generateTeaserText();
+    }
+  }
+
+  abortTeaserGeneration(): void {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#isGenerating = false;
+  }
+
   setInactive(isInactive: boolean): void {
     if (this.#isInactive === isInactive) {
       return;
@@ -95,11 +285,84 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  async #generateTeaserText(): Promise<void> {
+    this.#isGenerating = true;
+    let teaserText = '';
+    try {
+      for await (const chunk of this.#getOnDeviceInsight()) {
+        teaserText += chunk;
+      }
+    } catch (err) {
+      // Ignore `AbortError` errors, which are thrown on mouse leave.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+      }
+      this.#isGenerating = false;
+      return;
+    }
+
+    // TODO(crbug.com/443618746): Add user-facing error message instead of staying in loading state
+    let responseObject = {
+      header: null,
+      explanation: null,
+    };
+    try {
+      responseObject = JSON.parse(teaserText);
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+    this.#headerText = responseObject.header || '';
+    this.#mainText = responseObject.explanation || '';
+    this.#isGenerating = false;
+    this.requestUpdate();
+  }
+
+  async * #getOnDeviceInsight(): AsyncGenerator<string> {
+    const {prompt} = await this.#promptBuilder.buildPrompt();
+    if (!this.#builtInAi) {
+      this.#builtInAi = await AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+      if (!this.#builtInAi) {
+        this.#isInactive = true;
+        throw new Error('Cannot instantiate BuiltInAi');
+      }
+    }
+    this.#abortController = new AbortController();
+    const stream = this.#builtInAi.getConsoleInsight(prompt, this.#abortController);
+    for await (const chunk of stream) {
+      yield chunk;
+    }
+    this.#abortController = null;
+  }
+
+  #dontShowChanged(e: Event): void {
+    const showTeasers = !(e.target as HTMLInputElement).checked;
+    Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').set(showTeasers);
+  }
+
+  #hasTellMeMoreButton(): boolean {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(EXPLAIN_TEASER_ACTION_ID)) {
+      return false;
+    }
+    if (Root.Runtime.hostConfig.aidaAvailability?.blockedByAge || Root.Runtime.hostConfig.isOffTheRecord) {
+      return false;
+    }
+    if (!Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return false;
+    }
+    return true;
+  }
+
   override performUpdate(): Promise<void>|void {
     this.#view(
         {
+          onTellMeMoreClick: this.#onTellMeMoreClick.bind(this),
           uuid: this.#uuid,
-          isInactive: this.#isInactive,
+          headerText: this.#headerText,
+          mainText: this.#mainText,
+          isInactive: this.#isInactive ||
+              !Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get(),
+          dontShowChanged: this.#dontShowChanged.bind(this),
+          hasTellMeMoreButton: this.#hasTellMeMoreButton(),
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1343,6 +1343,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.contentElementInternal;
   }
 
+  #onMouseEnter(_event: MouseEvent): void {
+    if (this.#teaser &&
+        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
+      this.#teaser.maybeGenerateTeaser();
+    }
+  }
+
+  #onMouseLeave(): void {
+    this.#teaser?.abortTeaserGeneration();
+  }
+
   toMessageElement(): HTMLElement {
     if (this.elementInternal) {
       return this.elementInternal;
@@ -1350,6 +1361,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal = document.createElement('div');
     this.elementInternal.tabIndex = -1;
     this.elementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener));
+    this.elementInternal.addEventListener('mouseenter', this.#onMouseEnter.bind(this));
+    this.elementInternal.addEventListener('mouseleave', this.#onMouseLeave.bind(this));
     this.updateMessageElement();
     this.elementInternal.classList.toggle('console-adjacent-user-command-result', this.#adjacentUserCommandResult);
     return this.elementInternal;
@@ -1447,7 +1460,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   shouldShowTeaser(): boolean {
-    if (!this.shouldShowInsights() || !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+    if (!this.shouldShowInsights()) {
+      return false;
+    }
+    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
       return false;
     }
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();

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

@@ -133,6 +133,11 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether `console.trace()` messages appear collapsed by default.
    */
   collapseConsoleTraceMessagesByDefault: 'Do not automatically expand `console.trace()` messages',
+  /**
+   * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
+   * be shown for console warnings/errors.
+   */
+  showConsoleInsightTeasers: 'Show AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -437,6 +442,15 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  settingName: 'console-insight-teasers-enabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/console/consoleInsightTeaser.css

@@ -52,4 +52,32 @@
     font: var(--sys-typescale-body4-bold);
     margin: 0 0 var(--sys-size-3);
   }
+
+  .lightbulb-icon {
+    color: var(--sys-color-on-primary);
+    height: var(--sys-size-7);
+    margin-left: calc(-1 * var(--sys-size-4));
+  }
+
+  .learn-more {
+    padding-top: 7px;
+  }
+
+  .info-tooltip-text {
+    max-width: var(--sys-size-26);
+  }
+
+  .tooltip-footer {
+    padding: var(--sys-size-5) 0 0;
+    display: flex;
+    align-items: center;
+
+    .info-icon {
+      margin-left: var(--sys-size-4);
+    }
+
+    devtools-checkbox {
+      margin-left: auto;
+    }
+  }
 }

package/front_end/panels/explain/ActionDelegate.ts

@@ -15,11 +15,14 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'explain.console-message.context.error':
       case 'explain.console-message.context.warning':
       case 'explain.console-message.context.other':
+      case 'explain.console-message.teaser':
       case 'explain.console-message.hover': {
         const consoleViewMessage = context.flavor(Console.ConsoleViewMessage.ConsoleViewMessage);
         if (consoleViewMessage) {
           if (actionId.startsWith('explain.console-message.context')) {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaContextMenu);
+          } else if (actionId === 'explain.console-message.teaser') {
+            Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaTeaser);
           } else if (actionId === 'explain.console-message.hover') {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaHoverButton);
           }

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

@@ -57,6 +57,13 @@ const actions = [
       return [Console.ConsoleViewMessage.ConsoleViewMessage];
     },
   },
+  {
+    actionId: 'explain.console-message.teaser',
+    title: i18nLazyString(UIStrings.explainThisMessage),
+    contextTypes(): [] {
+      return [];
+    },
+  },
   {
     actionId: 'explain.console-message.context.error',
     title: i18nLazyString(UIStrings.explainThisError),