Add new badges to AI Assistance in Main and command menus

Screenshot: http://b/434870886#attachment68071724, http://b/434871110#attachment68111099

Bug: 434871110, 434870886
Change-Id: Ia087c4fbb0cdb88f9dbbb08d81026a64fb5a4a84
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6811473
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/entrypoints/main/MainImpl.ts

@@ -906,9 +906,11 @@ export class MainMenuItem implements UI.Toolbar.Provider {
 
     const aiPreregisteredView = UI.ViewManager.getRegisteredViewExtensionForID('freestyler');
     if (aiPreregisteredView) {
+      const additionalElement = UI.UIUtils.maybeCreateNewBadge('ai-asisstance');
       contextMenu.defaultSection().appendItem(aiPreregisteredView.title(), () => {
         void UI.ViewManager.ViewManager.instance().showView('freestyler', true, false);
-      }, {jslogContext: 'freestyler'});
+        UI.UIUtils.PromotionManager.instance().recordFeatureInteraction('ai-asisstance');
+      }, {additionalElement, jslogContext: 'freestyler'});
     }
 
     if (dockController.dockSide() === UI.DockController.DockState.UNDOCKED) {

front_end/ui/legacy/UIUtils.ts

@@ -115,6 +115,10 @@ const UIStrings = {
    *@description Text to cancel something
    */
   cancel: 'Cancel',
+  /**
+   *@description Text for the new badge appearing next to some menu items
+   */
+  new: 'NEW',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/UIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -2119,3 +2123,28 @@ export class PromotionManager {
     return false;
   }
 }
+
+/**
+ * Creates a `<div>` element with the localized text NEW.
+ *
+ * The element is automatically styled correctly, as long as the core styles (in particular
+ * `inspectorCommon.css` is injected into the current document / shadow root). The lit
+ * equivalent of calling this method is:
+ *
+ * ```js
+ * const jslog = VisualLogging.badge('new-badge');
+ * html`<div class='new-badge' jsog=${jslog}>i18nString(UIStrings.new)</div>`
+ *
+ * @returns the newly created `HTMLDivElement` for the new badge.
+ */
+export function maybeCreateNewBadge(promotionId: string): HTMLDivElement|undefined {
+  const promotionManager = PromotionManager.instance();
+  if (promotionManager.maybeShowPromotion(promotionId)) {
+    const badge = document.createElement('div');
+    badge.className = 'new-badge';
+    badge.textContent = i18nString(UIStrings.new);
+    badge.setAttribute('jslog', `${VisualLogging.badge('new-badge')}`);
+    return badge;
+  }
+  return undefined;
+}

front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -344,6 +344,13 @@ export class CommandMenuProvider extends Provider {
     UI.UIUtils.createTextChild(titleElement, command.title);
     FilteredListWidget.highlightRanges(titleElement, query, true);
 
+    if (command.promoteFeature) {
+      const badge = UI.UIUtils.maybeCreateNewBadge('ai-asisstance');
+      if (badge) {
+        titleElement.parentElement?.insertBefore(badge, subtitleElement);
+      }
+    }
+
     subtitleElement.textContent = command.shortcut;
 
     const deprecationWarning = command.deprecationWarning;

front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -136,8 +136,10 @@ devtools-text-prompt {
 
 .filtered-list-widget-item.one-row {
   line-height: var(--sys-typescale-body3-line-height);
+  align-items: center;
   align-content: center;
   display: flex;
+  gap: var(--sys-size-4);
 }
 
 .filtered-list-widget-item.one-row .filtered-list-widget-title {

front_end/ui/legacy/inspectorCommon.css

@@ -526,6 +526,19 @@ dt-icon-label {
   background-color: var(--sys-color-purple-bright);
 }
 
+.new-badge {
+  width: fit-content;
+  height: var(--sys-size-7);
+  line-height: var(--sys-size-7);
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-3);
+  background-color: var(--sys-color-primary);
+  color: var(--sys-color-on-primary);
+  font-weight: var(--ref-typeface-weight-bold);
+  font-size: 9px;
+  text-align: center;
+}
+
 .expandable-inline-button {
   background-color: var(--sys-color-cdt-base-container);
   color: var(--sys-color-on-surface);

front_end/ui/legacy/softContextMenu.css

@@ -40,6 +40,10 @@
     background-color: var(--sys-color-state-hover-on-subtle);
   }
 
+  & .new-badge {
+    margin-left: var(--sys-size-4);
+  }
+
   & devtools-icon {
     width: var(--sys-size-8);
     height: var(--sys-size-8);

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2570,6 +2570,7 @@ export const knownContextValues = new Set([
   'never-pause-here',
   'new-attribute',
   'new-authenticator',
+  'new-badge',
   'new-file',
   'next',
   'next-page',

front_end/ui/visual_logging/LoggingConfig.ts

@@ -61,7 +61,7 @@ export enum VisualElements {
   Gutter = 22,
   MetricsBox = 23,
   MetricsBoxPart = 24,
-  /* 25 used to be DOMBreakpointsPane, but free to grab now */
+  Badge = 25,
   DOMBreakpoint = 26,
   /* 27 used to be ElementPropertiesPane, but free to grab now */
   /* 28 used to be EventListenersPane, but free to grab now */

front_end/ui/visual_logging/visual_logging.ts

@@ -57,6 +57,7 @@ export function setHighlightedVe(veKey: string|null): void {
 export const action = LoggingConfig.makeConfigStringBuilder.bind(null, 'Action');
 export const adorner = LoggingConfig.makeConfigStringBuilder.bind(null, 'Adorner');
 export const animationClip = LoggingConfig.makeConfigStringBuilder.bind(null, 'AnimationClip');
+export const badge = LoggingConfig.makeConfigStringBuilder.bind(null, 'Badge');
 export const bezierCurveEditor = LoggingConfig.makeConfigStringBuilder.bind(null, 'BezierCurveEditor');
 export const bezierPresetCategory = LoggingConfig.makeConfigStringBuilder.bind(null, 'BezierPresetCategory');
 export const breakpointMarker = LoggingConfig.makeConfigStringBuilder.bind(null, 'BreakpointMarker');