chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/panels/common/BadgeNotification.ts

@@ -2,13 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 Badges from '../../models/badges/badges.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 badgeNotificationStyles from './badgeNotification.css.js';
+import * as GdpSignUpDialog from './GdpSignUpDialog.js';
 
 const {html, render} = Lit;
 
@@ -17,10 +21,50 @@ const UIStrings = {
    * @description Title for close button
    */
   dismiss: 'Dismiss',
+  /**
+   * @description Activity based badge award notification text
+   * @example {Badge Title} PH1
+   */
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It has been added to your Developer Profile.',
+  /**
+   * @description Action title for navigating to the badge settings in Google Developer Profile section
+   */
+  badgeSettings: 'Badge settings',
+  /**
+   * @description Action title for opening the Google Developer Program profile page of the user in a new tab
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Starter badge award notification text when the user has a Google Developer Program profile but did not enable receiving badges in DevTools yet
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageSettingDisabled: 'You earned the {PH1} badge for the {PH2}! Turn on badges to claim it.',
+  /**
+   * @description Starter badge award notification text when the user does not have a Google Developer Program profile.
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageNoGdpProfile:
+      'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.',
+  /**
+   * @description Action title for snoozing the starter badge.
+   */
+  remindMeLater: 'Remind me later',
+  /**
+   * @description Action title for enabling the "Receive badges" setting
+   */
+  receiveBadges: 'Receive badges',
+  /**
+   * @description Action title for creating a Google Developer Program profle
+   */
+  createProfile: 'Create profile',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
 
 export interface BadgeNotificationAction {
   label: string;
@@ -30,7 +74,7 @@ export interface BadgeNotificationAction {
 }
 
 export interface BadgeNotificationProperties {
-  message: Lit.LitTemplate;
+  message: HTMLElement|string;
   imageUri: string;
   actions: BadgeNotificationAction[];
 }
@@ -66,12 +110,16 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
   render(html`
     <style>${badgeNotificationStyles}</style>
     <div class="container">
+      <div class="badge-container">
+        <img class="badge-image" src=${input.imageUri}>
+      </div>
+      <div class="action-and-text-container">
         <div class="label-container">
-            <img class="badge-image" src=${input.imageUri}>
             <div class="message">${input.message}</div>
             ${crossButton}
         </div>
         <div class="long-action-container">${actionButtons}</div>
+      </div>
     </div>
   `, target);
 };
@@ -80,7 +128,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 type View = typeof DEFAULT_VIEW;
 
 export class BadgeNotification extends UI.Widget.Widget {
-  message: Lit.LitTemplate = html``;
+  message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
 
@@ -91,13 +139,95 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#view = view;
   }
 
-  static show(properties: BadgeNotificationProperties): BadgeNotification {
-    const widget = new BadgeNotification();
-    widget.message = properties.message;
-    widget.imageUri = properties.imageUri;
-    widget.actions = properties.actions;
-    widget.show(UI.InspectorView.InspectorView.instance().element);
-    return widget;
+  async present(badge: Badges.Badge): Promise<void> {
+    if (badge.isStarterBadge) {
+      await this.#presentStarterBadge(badge);
+    } else {
+      this.#presentActivityBasedBadge(badge);
+    }
+  }
+
+  #show(properties: BadgeNotificationProperties): void {
+    this.message = properties.message;
+    this.imageUri = properties.imageUri;
+    this.actions = properties.actions;
+    this.requestUpdate();
+    this.show(UI.InspectorView.InspectorView.instance().element);
+  }
+
+  async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
+    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
+    const googleDeveloperProgramLink = UI.XLink.XLink.create(
+        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
+        'gdp.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 (gdpProfile && 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 (gdpProfile && !receiveBadgesSettingEnabled) {
+      this.#show({
+        message: i18nFormatString(
+            UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        actions: [
+          {
+            label: i18nString(UIStrings.remindMeLater),
+            onClick: () => {/* To implement */},
+          },
+          {label: i18nString(UIStrings.receiveBadges), onClick: () => { /* To implement */ }}
+        ],
+        imageUri: badge.imageUri,
+      });
+      return;
+    }
+
+    // The user does not have a GDP profile, starter badge acts as a nudge for creating a GDP profile.
+    this.#show({
+      message: i18nFormatString(
+          UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      actions: [
+        {
+          label: i18nString(UIStrings.remindMeLater),
+          onClick: () => {/* TODO(ergunsh): Implement */},
+        },
+        {
+          label: i18nString(UIStrings.createProfile),
+          onClick: () => {
+            this.#close();
+            GdpSignUpDialog.GdpSignUpDialog.show();
+          }
+        }
+      ],
+      imageUri: badge.imageUri,
+    });
+  }
+
+  #presentActivityBasedBadge(badge: Badges.Badge): void {
+    this.#show({
+      message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      actions: [
+        {
+          label: i18nString(UIStrings.badgeSettings),
+          onClick: () => {
+            this.#close();
+            void Common.Revealer.reveal(Common.Settings.moduleSetting('receive-gdp-badges'));
+          },
+        },
+        {
+          label: i18nString(UIStrings.viewProfile),
+          onClick: () => {
+            UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
+          }
+        }
+      ],
+      imageUri: badge.imageUri,
+    });
   }
 
   #close = (): void => {

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 import '../../ui/components/switch/switch.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 type * as Platform from '../../core/platform/platform.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
@@ -200,6 +202,9 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
         this.#keepMeUpdated ? Host.GdpClient.EmailPreference.ENABLED : Host.GdpClient.EmailPreference.DISABLED;
     const result = await Host.GdpClient.GdpClient.instance().createProfile({user, emailPreference});
     if (result) {
+      Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges').set(true);
+      await Badges.UserBadges.instance().initialize();
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.GDP_SIGN_UP_COMPLETE);
       this.#dialog.hide();
     } else {
       Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.signUpFailed)}, this.#dialog.contentElement);

package/front_end/panels/common/badgeNotification.css

@@ -16,37 +16,58 @@
 
   .container {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     overflow: hidden;
-    width: var(--sys-size-33);
+    width: 485px;
     background: var(--sys-color-inverse-surface);
     box-shadow: var(--sys-elevation-level3);
     border-radius: var(--sys-shape-corner-small);
-    font: var(--sys-typescale-body4-medium);
+    font: var(--sys-typescale-body4-regular);
     animation: slideIn 100ms cubic-bezier(0, 0, 0.3, 1);
     box-sizing: border-box;
     max-width: 100%;
     padding: var(--sys-size-5) var(--sys-size-6) var(--sys-size-6) var(--sys-size-6);
   }
 
+  .action-and-text-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-3);
+  }
+
   .long-action-container {
     margin-left: auto;
+    /*
+    * Buttons have a 24px total height, which includes padding for the hover area.
+    * We apply a -3px vertical margin to compensate for this extra space.
+    * This ensures the component aligns based on the visual text height,
+    * not the full clickable bounding box.
+    */
+    margin-block: -3px;
   }
 
   .label-container {
     display: flex;
     width: 100%;
     align-items: center;
-    gap: var(--sys-size-5);
+    padding-block: var(--sys-size-3);
+    line-height: 18px;
+  }
+
+  .badge-container {
+    margin-right: 10px;
+    min-width: 64px;
+    height: 64px;
   }
 
   .badge-image {
-    margin-right: var(--sys-size-6);
-    width: 42px;
-    height: 42px;
+    width: 100%;
+    height: 100%;
     border-radius: var(--sys-shape-corner-full);
-    background: var(--sys-color-surface);
+  }
+
+  .badge-link {
+    color: var(--sys-color-inverse-primary);
   }
 
   .message {

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -32,19 +32,19 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
                                                UI.SoftDropDown.Delegate<SDK.RuntimeModel.ExecutionContext> {
   readonly items: UI.ListModel.ListModel<SDK.RuntimeModel.ExecutionContext>;
   private readonly dropDown: UI.SoftDropDown.SoftDropDown<SDK.RuntimeModel.ExecutionContext>;
-  private readonly toolbarItemInternal: UI.Toolbar.ToolbarItem;
+  readonly #toolbarItem: UI.Toolbar.ToolbarItem;
 
   constructor() {
     this.items = new UI.ListModel.ListModel();
     this.dropDown = new UI.SoftDropDown.SoftDropDown(this.items, this, 'javascript-context');
     this.dropDown.setRowHeight(36);
-    this.toolbarItemInternal = new UI.Toolbar.ToolbarItem(this.dropDown.element);
-    this.toolbarItemInternal.setEnabled(false);
-    this.toolbarItemInternal.setTitle(i18nString(UIStrings.javascriptContextNotSelected));
+    this.#toolbarItem = new UI.Toolbar.ToolbarItem(this.dropDown.element);
+    this.#toolbarItem.setEnabled(false);
+    this.#toolbarItem.setTitle(i18nString(UIStrings.javascriptContextNotSelected));
     this.items.addEventListener(
-        UI.ListModel.Events.ITEMS_REPLACED, () => this.toolbarItemInternal.setEnabled(Boolean(this.items.length)));
+        UI.ListModel.Events.ITEMS_REPLACED, () => this.#toolbarItem.setEnabled(Boolean(this.items.length)));
 
-    this.toolbarItemInternal.element.classList.add('toolbar-has-dropdown');
+    this.#toolbarItem.element.classList.add('toolbar-has-dropdown');
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextCreated, this.onExecutionContextCreated,
@@ -70,7 +70,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   }
 
   toolbarItem(): UI.Toolbar.ToolbarItem {
-    return this.toolbarItemInternal;
+    return this.#toolbarItem;
   }
 
   highlightedItemChanged(
@@ -256,10 +256,10 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   }
 
   itemSelected(item: SDK.RuntimeModel.ExecutionContext|null): void {
-    this.toolbarItemInternal.element.classList.toggle('highlight', !this.isTopContext(item) && this.hasTopContext());
+    this.#toolbarItem.element.classList.toggle('highlight', !this.isTopContext(item) && this.hasTopContext());
     const title = item ? i18nString(UIStrings.javascriptContextS, {PH1: this.titleFor(item)}) :
                          i18nString(UIStrings.javascriptContextNotSelected);
-    this.toolbarItemInternal.setTitle(title);
+    this.#toolbarItem.setTitle(title);
     UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, item);
   }
 

package/front_end/panels/console/ConsolePrompt.ts

@@ -48,7 +48,7 @@ const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
 export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
   private addCompletionsFromHistory: boolean;
-  private historyInternal: TextEditor.AutocompleteHistory.AutocompleteHistory;
+  #history: TextEditor.AutocompleteHistory.AutocompleteHistory;
   private initialText: string;
   private editor: TextEditor.TextEditor.TextEditor;
   private readonly eagerPreviewElement: HTMLDivElement;
@@ -109,7 +109,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     });
     this.registerRequiredCSS(consolePromptStyles);
     this.addCompletionsFromHistory = true;
-    this.historyInternal = new TextEditor.AutocompleteHistory.AutocompleteHistory(
+    this.#history = new TextEditor.AutocompleteHistory.AutocompleteHistory(
         Common.Settings.Settings.instance().createLocalSetting('console-history', []));
 
     this.initialText = '';
@@ -186,7 +186,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
     });
     editorContainerElement.appendChild(this.editor);
-    this.#editorHistory = new TextEditor.TextEditorHistory.TextEditorHistory(this.editor, this.historyInternal);
+    this.#editorHistory = new TextEditor.TextEditorHistory.TextEditorHistory(this.editor, this.#history);
 
     if (this.hasFocus()) {
       this.focus();
@@ -244,6 +244,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const cursor = selection.main.head;
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     let prefix = query.substring(0, cursor);
+    if (prefix.trim().length === 0) {
+      return;
+    }
     if (currentExecutionContext) {
       const consoleModel = currentExecutionContext.target().model(SDK.ConsoleModel.ConsoleModel);
       if (consoleModel) {
@@ -307,7 +310,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   history(): TextEditor.AutocompleteHistory.AutocompleteHistory {
-    return this.historyInternal;
+    return this.#history;
   }
 
   clearAutocomplete(): void {
@@ -526,7 +529,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.teaser = undefined;
     }
     this.aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.Panel.CONSOLE);
+        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.Panel.CONSOLE, ['\n\n']);
     this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, event => {
       this.aiCodeCompletionCitations = event.data.citations;
       this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED, event.data);

package/front_end/panels/console/ConsoleView.ts

@@ -275,7 +275,7 @@ const CITATIONS_TOOLTIP_ID = 'console-ai-code-completion-citations-tooltip';
 export class ConsoleView extends UI.Widget.VBox implements
     UI.SearchableView.Searchable, ConsoleViewportProvider,
     SDK.TargetManager.SDKModelObserver<SDK.ConsoleModel.ConsoleModel> {
-  private readonly searchableViewInternal: UI.SearchableView.SearchableView;
+  readonly #searchableView: UI.SearchableView.SearchableView;
   private readonly sidebar: ConsoleSidebar;
   private isSidebarOpen: boolean;
   private filter: ConsoleViewFilter;
@@ -343,10 +343,10 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.setMinimumSize(0, 35);
     this.registerRequiredCSS(consoleViewStyles, objectValueStyles, CodeHighlighter.codeHighlighterStyles);
 
-    this.searchableViewInternal = new UI.SearchableView.SearchableView(this, null);
-    this.searchableViewInternal.element.classList.add('console-searchable-view');
-    this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findStringInLogs));
-    this.searchableViewInternal.setMinimalSearchQuerySize(0);
+    this.#searchableView = new UI.SearchableView.SearchableView(this, null);
+    this.#searchableView.element.classList.add('console-searchable-view');
+    this.#searchableView.setPlaceholder(i18nString(UIStrings.findStringInLogs));
+    this.#searchableView.setMinimalSearchQuerySize(0);
     this.sidebar = new ConsoleSidebar();
     this.sidebar.addEventListener(Events.FILTER_SELECTED, this.onFilterChanged.bind(this));
     this.isSidebarOpen = false;
@@ -356,7 +356,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.consoleToolbarContainer.role = 'toolbar';
     this.splitWidget = new UI.SplitWidget.SplitWidget(
         true /* isVertical */, false /* secondIsSidebar */, 'console.sidebar.width', 100);
-    this.splitWidget.setMainWidget(this.searchableViewInternal);
+    this.splitWidget.setMainWidget(this.#searchableView);
     this.splitWidget.setSidebarWidget(this.sidebar);
     this.splitWidget.show(this.element);
     this.splitWidget.hideSidebar();
@@ -387,7 +387,7 @@ export class ConsoleView extends UI.Widget.VBox implements
       this.filter.setLevelMenuOverridden(this.isSidebarOpen);
       this.onFilterChanged();
     });
-    this.contentsElement = this.searchableViewInternal.element;
+    this.contentsElement = this.#searchableView.element;
     this.element.classList.add('console-view');
 
     this.visibleViewMessages = [];
@@ -695,7 +695,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   searchableView(): UI.SearchableView.SearchableView {
-    return this.searchableViewInternal;
+    return this.#searchableView;
   }
 
   clearHistory(): void {
@@ -962,7 +962,7 @@ export class ConsoleView extends UI.Widget.VBox implements
           viewMessage,
           !shouldGroupSimilar /* crbug.com/1082963: prevent collapse of same messages when "Group similar" is false */);
       this.updateFilterStatus();
-      this.searchableViewInternal.updateSearchMatchesCount(this.regexMatchRanges.length);
+      this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     } else {
       this.needsFullUpdate = true;
     }
@@ -1318,7 +1318,7 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
     }
     this.updateFilterStatus();
-    this.searchableViewInternal.updateSearchMatchesCount(this.regexMatchRanges.length);
+    this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     this.jumpToMatch(this.currentMatchRangeIndex);  // Re-highlight current match.
     this.viewport.invalidate();
     this.messagesCountElement.setAttribute(
@@ -1507,7 +1507,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
     this.onSearchCanceled();
-    this.searchableViewInternal.updateSearchMatchesCount(0);
+    this.#searchableView.updateSearchMatchesCount(0);
 
     this.searchRegex = searchConfig.toSearchRegex(true).regex;
 
@@ -1554,7 +1554,7 @@ export class ConsoleView extends UI.Widget.VBox implements
       this.searchMessage(index);
     }
 
-    this.searchableViewInternal.updateSearchMatchesCount(this.regexMatchRanges.length);
+    this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     if (typeof this.searchShouldJumpBackwards !== 'undefined' && this.regexMatchRanges.length) {
       this.jumpToMatch(this.searchShouldJumpBackwards ? -1 : 0);
       delete this.searchShouldJumpBackwards;
@@ -1611,7 +1611,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     index = Platform.NumberUtilities.mod(index, this.regexMatchRanges.length);
     this.currentMatchRangeIndex = index;
-    this.searchableViewInternal.updateCurrentMatchIndex(index);
+    this.#searchableView.updateCurrentMatchIndex(index);
     matchRange = this.regexMatchRanges[index];
     const message = this.visibleViewMessages[matchRange.messageIndex];
     const highlightNode = message.searchHighlightNode(matchRange.matchIndex);