chrome-devtools-frontend 1.0.1558690 → 1.0.1561080

package/front_end/panels/ai_assistance/components/userActionRow.css

@@ -118,4 +118,234 @@
       padding: 0 var(--sys-size-4);
     }
   }
+
+  .chat-message {
+    user-select: text;
+    cursor: initial;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+    width: 100%;
+    padding: var(--sys-size-7) var(--sys-size-5);
+    font-size: 12px;
+    word-break: normal;
+    overflow-wrap: anywhere;
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+
+    &.is-last-message {
+      border-bottom: 0;
+    }
+
+    .message-info {
+      display: flex;
+      align-items: center;
+      height: var(--sys-size-11);
+      gap: var(--sys-size-4);
+      font: var(--sys-typescale-body4-bold);
+
+      img {
+        border: 0;
+        border-radius: var(--sys-shape-corner-full);
+        display: block;
+        height: var(--sys-size-9);
+        width: var(--sys-size-9);
+      }
+
+      h2 {
+        font: var(--sys-typescale-body4-bold);
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sys-size-8);
+      max-width: 100%;
+    }
+
+    .aborted {
+      color: var(--sys-color-on-surface-subtle);
+    }
+
+    .image-link {
+      width: fit-content;
+      border-radius: var(--sys-shape-corner-small);
+      outline-offset: var(--sys-size-2);
+
+      img {
+        max-height: var(--sys-size-20);
+        max-width: 100%;
+        border-radius: var(--sys-shape-corner-small);
+        border: 1px solid var(--sys-color-neutral-outline);
+        width: fit-content;
+        vertical-align: bottom;
+      }
+    }
+
+    .unavailable-image {
+      margin: var(--sys-size-4) 0;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      height: var(--sys-size-17);
+      width: var(--sys-size-18);
+      background-color: var(--sys-color-surface3);
+      border-radius: var(--sys-shape-corner-small);
+      border: 1px solid var(--sys-color-neutral-outline);
+
+      devtools-icon {
+        color: var(--sys-color-state-disabled);
+      }
+    }
+  }
+
+  .indicator {
+    color: var(--sys-color-green-bright);
+  }
+
+  .summary {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    padding: var(--sys-size-3);
+    line-height: var(--sys-size-9);
+    cursor: default;
+    gap: var(--sys-size-3);
+    justify-content: center;
+    align-items: center;
+
+    .title {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      font: var(--sys-typescale-body4-regular);
+
+      .paused {
+        font: var(--sys-typescale-body4-bold);
+      }
+    }
+  }
+
+  .step-code {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-2);
+  }
+
+  .js-code-output {
+    devtools-code-block {
+      --code-block-max-code-height: 50px;
+    }
+  }
+
+  .context-details {
+    devtools-code-block {
+      --code-block-max-code-height: 80px;
+    }
+  }
+
+  .step {
+    width: fit-content;
+    background-color: var(--sys-color-surface3);
+    border-radius: var(--sys-size-6);
+    position: relative;
+
+    &.empty {
+      pointer-events: none;
+
+      .arrow {
+        display: none;
+      }
+    }
+
+    &:not(&[open]):hover::after {
+      content: '';
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
+
+    &.paused {
+      .indicator {
+        color: var(--sys-color-on-surface-subtle);
+      }
+    }
+
+    &.canceled {
+      .summary {
+        color: var(--sys-color-state-disabled);
+        text-decoration: line-through;
+      }
+
+      .indicator {
+        color: var(--sys-color-state-disabled);
+      }
+    }
+
+    devtools-markdown-view {
+      --code-background-color: var(--sys-color-surface1);
+    }
+
+    devtools-icon {
+      vertical-align: bottom;
+    }
+
+    devtools-spinner {
+      width: var(--sys-size-9);
+      height: var(--sys-size-9);
+      padding: var(--sys-size-2);
+    }
+
+    &[open] {
+      width: auto;
+
+      .summary .title {
+        white-space: normal;
+        overflow: unset;
+      }
+
+      .summary .arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    summary::marker {
+      content: '';
+    }
+
+    summary {
+      border-radius: var(--sys-size-6);
+    }
+
+    .step-details {
+      padding: 0 var(--sys-size-5) var(--sys-size-4) var(--sys-size-12);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sys-size-6);
+
+      devtools-code-block {
+        --code-block-background-color: var(--sys-color-surface1);
+      }
+    }
+  }
+
+  .error-step {
+    color: var(--sys-color-error);
+  }
+
+  .side-effect-confirmation {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+    padding-bottom: var(--sys-size-4);
+  }
+
+  .side-effect-buttons-container {
+    display: flex;
+    gap: var(--sys-size-4);
+  }
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -198,11 +198,11 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                   <td>
                       ${field.autofillType}
                       ${field.fillingStrategy === FillingStrategy.AutocompleteAttribute ?
-                            html`<devtools-adorner title=${i18nString(UIStrings.autocompleteAttribute)} .data=${{name: field.fillingStrategy}}>
+                            html`<devtools-adorner .name=${field.fillingStrategy} title=${i18nString(UIStrings.autocompleteAttribute)}>
                               <span>${i18nString(UIStrings.attr)}</span>
                             </devtools-adorner>` :
                         field.fillingStrategy === FillingStrategy.AutofillInferred ?
-                            html`<devtools-adorner title=${i18nString(UIStrings.inferredByHeuristics)} .data=${{name: field.fillingStrategy}}>
+                            html`<devtools-adorner .name=${field.fillingStrategy} title=${i18nString(UIStrings.inferredByHeuristics)}>
                               <span>${i18nString(UIStrings.heur)}</span>
                             </devtools-adorner>` :
                             Lit.nothing}

package/front_end/panels/changes/ChangesView.ts

@@ -6,11 +6,13 @@ import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as GreenDev from '../../models/greendev/greendev.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.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 PanelsCommon from '../common/common.js';
 
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
 import changesViewStyles from './changesView.css.js';
@@ -27,6 +29,7 @@ const UIStrings = {
    * @description Text in Changes View of the Changes tab to explain the Changes panel.
    */
   changesViewDescription: 'On this page you can track code changes made within DevTools.',
+
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,11 +40,14 @@ interface ViewInput {
   workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-export const DEFAULT_VIEW: View = (input, output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   const onSidebar = (sidebar: ChangesSidebar): void => {
     sidebar.addEventListener(
         Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
   };
+
+  const hasCopyToPrompt = GreenDev.Prototypes.instance().isEnabled('copyToGemini');
+
   render(
       // clang-format off
       html`
@@ -62,6 +68,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                               workspaceDiff: input.workspaceDiff
                                             })}></devtools-widget>
           </div>
+          ${hasCopyToPrompt ? html`
+            <devtools-widget class="copy-to-prompt"
+              .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.CopyChangesToPrompt, {
+                workspaceDiff: input.workspaceDiff,
+                patchAgentCSSChange: null,
+              })}
+            ></devtools-widget>
+          ` : Lit.nothing}
         </div>
         <devtools-widget
           slot="sidebar"

package/front_end/panels/changes/changesView.css

@@ -40,3 +40,9 @@
 [hidden] {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
+
+.copy-to-prompt {
+  margin: var(--sys-size-4);
+  /* Got to override the default flex properties for widgets */
+  flex-grow: 0 !important; /* stylelint-disable-line declaration-no-important */
+}

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -5,7 +5,9 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+
+import styles from './aiCodeGenerationTeaser.css.js';
 
 const UIStringsNotTranslate = {
   /**
@@ -20,23 +22,56 @@ const UIStringsNotTranslate = {
    * Text for teaser when generating suggestion.
    */
   generating: 'Generating... (esc to cancel)',
+  /**
+   * Text for teaser for discoverability.
+   */
+  writeACommentToGenerateCode: 'Write a comment to generate code',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
+const PROMOTION_ID = 'ai-code-generation';
+
+export enum AiCodeGenerationTeaserDisplayState {
+  TRIGGER = 'trigger',
+  DISCOVERY = 'discovery',
+  LOADING = 'loading',
+}
 
 export interface ViewInput {
-  loading: boolean;
+  displayState: AiCodeGenerationTeaserDisplayState;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
-                                                 lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-  const teaserLabel = input.loading ? lockedString(UIStringsNotTranslate.generating) : toGenerateCode;
+  let teaserLabel;
+  switch (input.displayState) {
+    case AiCodeGenerationTeaserDisplayState.DISCOVERY: {
+      const newBadge = UI.UIUtils.maybeCreateNewBadge(PROMOTION_ID);
+      teaserLabel = newBadge ?
+          html`${lockedString(UIStringsNotTranslate.writeACommentToGenerateCode)} ${newBadge}` :
+          nothing;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.LOADING: {
+      teaserLabel = html`${lockedString(UIStringsNotTranslate.generating)}`;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.TRIGGER: {
+      const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
+                                                     lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+      teaserLabel = html`${toGenerateCode}`;
+      break;
+    }
+  }
+
   // clang-format off
   render(
         html`
+          <style>${styles}</style>
+          <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
           <div class="ai-code-generation-teaser">
             &nbsp;${teaserLabel}
           </div>
@@ -45,10 +80,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
+// TODO(b/448063927): Add "Dont show again" for discovery teaser.
 export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
 
-  #loading = false;
+  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
 
   constructor(view?: View) {
     super();
@@ -61,20 +97,20 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     const output = {};
     this.#view(
         {
-          loading: this.#loading,
+          displayState: this.#displayState,
         },
         output, this.contentElement);
   }
 
-  get loading(): boolean {
-    return this.#loading;
+  get displayState(): AiCodeGenerationTeaserDisplayState {
+    return this.#displayState;
   }
 
-  set loading(loading: boolean) {
-    if (loading === this.#loading) {
+  set displayState(displayState: AiCodeGenerationTeaserDisplayState) {
+    if (displayState === this.#displayState) {
       return;
     }
-    this.#loading = loading;
+    this.#displayState = displayState;
     this.requestUpdate();
   }
 }

package/front_end/panels/common/BadgeNotification.ts

@@ -50,9 +50,9 @@ const UIStrings = {
   starterBadgeAwardMessageNoGdpProfile:
       'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.',
   /**
-   * @description Action title for snoozing the starter badge.
+   * @description Action title for dismissing the badge notification.
    */
-  remindMeLater: 'Remind me later',
+  noThanks: 'No thanks',
   /**
    * @description Action title for enabling the "Receive badges" setting
    */
@@ -157,11 +157,17 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.markAsRoot();
   }
 
-  async present(badge: Badges.Badge): Promise<void> {
-    if (badge.isStarterBadge) {
-      await this.#presentStarterBadge(badge);
-    } else {
-      this.#presentActivityBasedBadge(badge);
+  async present(badge: Badges.Badge, reason: Badges.BadgeTriggerReason): Promise<void> {
+    switch (reason) {
+      case Badges.BadgeTriggerReason.AWARD:
+        this.#presentActivityBasedBadge(badge);
+        return;
+      case Badges.BadgeTriggerReason.STARTER_BADGE_SETTINGS_NUDGE:
+        this.#presentStarterBadgeSettingsNudge(badge);
+        return;
+      case Badges.BadgeTriggerReason.STARTER_BADGE_PROFILE_NUDGE:
+        this.#presentStarterBadgeProfileNudge(badge);
+        return;
     }
   }
 
@@ -191,70 +197,50 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS);
   }
 
-  async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
-    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
-    // The `getProfile` call failed and returned a `null`.
-    // For that case, we don't show anything.
-    if (!getProfileResponse) {
-      return;
-    }
-
-    const hasGdpProfile = Boolean(getProfileResponse.profile);
-    const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
+  #presentStarterBadgeSettingsNudge(badge: Badges.Badge): void {
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
         'program-link');
-
-    // If the user already has a GDP profile and the receive badges setting enabled,
-    // starter badge behaves as if it's an activity based badge.
-    if (hasGdpProfile && receiveBadgesSettingEnabled) {
-      this.#presentActivityBasedBadge(badge);
-      return;
-    }
-
-    // If the user already has a GDP profile and the receive badges setting disabled,
-    // starter badge behaves as a nudge for opting into receiving badges.
-    if (hasGdpProfile && !receiveBadgesSettingEnabled) {
-      this.#show({
-        message: i18nFormatString(
-            UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-        jslogContext: badge.jslogContext,
-        actions: [
-          {
-            label: i18nString(UIStrings.remindMeLater),
-            jslogContext: 'remind-me-later',
-            onClick: () => {
-              this.detach();
-              Badges.UserBadges.instance().snoozeStarterBadge();
-            },
+    this.#show({
+      message: i18nFormatString(
+          UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      jslogContext: badge.jslogContext,
+      actions: [
+        {
+          label: i18nString(UIStrings.noThanks),
+          jslogContext: 'no-thanks',
+          onClick: () => {
+            this.#onDismissClick();
           },
-          {
-            label: i18nString(UIStrings.receiveBadges),
-            jslogContext: 'receive-badges',
-            onClick: () => {
-              this.detach();
-              revealBadgeSettings();
-            }
+        },
+        {
+          label: i18nString(UIStrings.receiveBadges),
+          jslogContext: 'receive-badges',
+          onClick: () => {
+            this.detach();
+            revealBadgeSettings();
           }
-        ],
-        imageUri: badge.imageUri,
-        isStarterBadge: true,
-      });
-      return;
-    }
+        }
+      ],
+      imageUri: badge.imageUri,
+      isStarterBadge: true,
+    });
+  }
 
-    // The user does not have a GDP profile, starter badge acts as a nudge for creating a GDP profile.
+  #presentStarterBadgeProfileNudge(badge: Badges.Badge): void {
+    const googleDeveloperProgramLink = UI.XLink.XLink.create(
+        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
+        'program-link');
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
       jslogContext: badge.jslogContext,
       actions: [
         {
-          label: i18nString(UIStrings.remindMeLater),
-          jslogContext: 'remind-me-later',
+          label: i18nString(UIStrings.noThanks),
+          jslogContext: 'no-thanks',
           onClick: () => {
-            this.detach();
-            Badges.UserBadges.instance().snoozeStarterBadge();
+            this.#onDismissClick();
           },
         },
         {