Implement the "Relevant data" rich tooltip in Settings page

According to the design, we're going to have a "Relevant data"
tooltip in the settings section

Bug: 442032513
Change-Id: I2a5930339baa49b3566aca881c7fb2b2c37835d4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6945496
Auto-Submit: Natallia Harshunova <[email protected]>
Commit-Queue: Natallia Harshunova <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Natallia Harshunova

front_end/entrypoints/main/main-meta.ts

@@ -195,7 +195,7 @@ const UIStrings = {
    * @description Label for a checkbox in the settings UI. Allows developers to opt-in/opt-out
    * of receiving Google Developer Program (GDP) badges based on their activity in Chrome DevTools.
    */
-  receiveBadges: 'Receive badges',
+  earnBadges: 'Earn badges',
   /**
    * @description A command available in the command menu to perform searches, for example in the
    * elements panel, as user types, rather than only when they press Enter.
@@ -799,7 +799,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'receive-gdp-badges',
   settingType: Common.Settings.SettingType.BOOLEAN,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.receiveBadges),
+  title: i18nLazyString(UIStrings.earnBadges),
   defaultValue: false,
   reloadRequired: true,
 });

front_end/panels/common/BadgeNotification.test.ts

@@ -105,9 +105,9 @@ describeWithEnvironment('BadgeNotification', () => {
 
     assert.strictEqual(input.imageUri, badge.imageUri);
     assert.lengthOf(input.actions, 2);
-    assert.strictEqual(input.actions[0].label, 'Badge settings');
+    assert.strictEqual(input.actions[0].label, 'Manage settings');
     assert.strictEqual(input.actions[1].label, 'View profile');
-    assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+    assertMessageIncludes(input.message, 'It’s been added to your Developer Profile.');
 
     widget.detach();
   });
@@ -126,9 +126,9 @@ describeWithEnvironment('BadgeNotification', () => {
        // Should fall back to the activity-based badge flow.
        assert.strictEqual(input.imageUri, 'starter-badge-image-uri');
        assert.lengthOf(input.actions, 2);
-       assert.strictEqual(input.actions[0].label, 'Badge settings');
+       assert.strictEqual(input.actions[0].label, 'Manage settings');
        assert.strictEqual(input.actions[1].label, 'View profile');
-       assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+       assertMessageIncludes(input.message, 'It’s been added to your Developer Profile.');
 
        widget.detach();
      });
@@ -146,7 +146,7 @@ describeWithEnvironment('BadgeNotification', () => {
     assert.strictEqual(input.imageUri, badge.imageUri);
     assert.lengthOf(input.actions, 2);
     assert.strictEqual(input.actions[0].label, 'Remind me later');
-    assert.strictEqual(input.actions[1].label, 'Receive badges');
+    assert.strictEqual(input.actions[1].label, 'Turn on badges');
     assertMessageIncludes(input.message, 'Turn on badges to claim it.');
 
     widget.detach();

front_end/panels/common/BadgeNotification.ts

@@ -26,11 +26,11 @@ const UIStrings = {
    * @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.',
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It’s been added to your Developer Profile.',
   /**
    * @description Action title for navigating to the badge settings in Google Developer Profile section
    */
-  badgeSettings: 'Badge settings',
+  manageSettings: 'Manage settings',
   /**
    * @description Action title for opening the Google Developer Program profile page of the user in a new tab
    */
@@ -55,7 +55,7 @@ const UIStrings = {
   /**
    * @description Action title for enabling the "Receive badges" setting
    */
-  receiveBadges: 'Receive badges',
+  receiveBadges: 'Turn on badges',
   /**
    * @description Action title for creating a Google Developer Program profle
    */
@@ -240,7 +240,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
       actions: [
         {
-          label: i18nString(UIStrings.badgeSettings),
+          label: i18nString(UIStrings.manageSettings),
           onClick: () => {
             this.#close();
             revealBadgeSettings();

front_end/panels/common/GdpSignUpDialog.ts

@@ -39,28 +39,32 @@ const UIStrings = {
   /**
    * @description Body for the first section of the GDP sign up dialog.
    */
-  designedForSuccessBody:
-      'Grow your skills, build with AI, and receive badges you can showcase in your developer profile',
+  designedForSuccessBody: 'Grow your skills, build with AI, and earn badges you can showcase in your developer profile',
   /**
    * @description Title for the second section of the GDP sign up dialog.
    */
   keepUpdated: 'Keep me updated',
   /**
    * @description Body for the second section of the GDP sign up dialog.
    */
-  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights directly in your inbox',
+  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights land directly in your inbox',
   /**
    * @description Title for the third section of the GDP sign up dialog.
    */
-  thingsToConsider: 'Things to consider',
+  tailorProfile: 'Tailor your profile',
+  /**
+   * @description Body for the third section of the GDP sign up dialog.
+   */
+  tailorProfileBody:
+      'The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
   /**
    * @description Body for the third section of the GDP sign up dialog.
    * @example {Content Policy} PH1
    * @example {Terms of Service} PH2
    * @example {Privacy Policy} PH3
    */
-  thingsToConsiderBody:
-      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service. The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
+  tailorProfileBodyDisclaimer:
+      'By creating a Developer Profile, you agree to the {PH1}. Google’s {PH2} and {PH3} apply to your use of this service.',
   /**
    * @description Button text for learning more about the Google Developer Program.
    */
@@ -140,14 +144,17 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-icon name="google"></devtools-icon>
           </div>
           <div class="text-container">
-            <h3 class="section-title">${i18nString(UIStrings.thingsToConsider)}</h3>
-            <div class="section-text">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.thingsToConsiderBody, {
+            <h3 class="section-title">${i18nString(UIStrings.tailorProfile)}</h3>
+            <div class="section-text">
+              <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
+              <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
       PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'gdp.content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
         undefined, 'gdp.terms-of-service'),
       PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
         undefined, 'gdp.privacy-policy'),
     })}</div>
+            </div>
           </div>
         </div>
       </div>

front_end/panels/settings/components/SyncSection.ts

@@ -77,20 +77,55 @@ const UIStrings = {
    * @description Label for Sign-Up button for the Google Developer Program profiles.
    */
   signUp: 'Sign up',
+  /**
+   * @description Link text for opening the Google Developer Program profile page.
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
+   */
+  tooltipDisclaimerText:
+      'When you qualify for a badge, the badge’s identifier and the type of activity you did to earn it are sent to Google',
   /**
    * @description Text for the data notice right after the settings checkbox.
    */
-  relevantDataDisclaimer: '(Relevant data is sent to Google)',
+  relevantData: 'Relevant data',
   /**
-   * @description Link text for opening the Google Developer Program profile page.
+   * @description Text for the data notice right after the settings checkbox.
+   * @example {Relevant data} PH1
    */
-  viewProfile: 'View profile',
+  dataDisclaimer: '({PH1} is sent to Google)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html, Directives: {ref, createRef}} = Lit;
 
+let cachedTooltipElement: HTMLElement|undefined;
+
+function renderDataDisclaimer(): HTMLElement {
+  if (cachedTooltipElement) {
+    return cachedTooltipElement;
+  }
+
+  const relevantDataTooltipTemplate = html`
+    <span
+      tabIndex="0"
+      class="link"
+      aria-details="gdp-profile-tooltip"
+      >${i18nString(UIStrings.relevantData)}</span>
+    <devtools-tooltip id="gdp-profile-tooltip" variant=${'rich'}>
+      <div class="tooltip-content">${i18nString(UIStrings.tooltipDisclaimerText)}</div>
+    </devtools-tooltip>`;
+
+  const container = document.createElement('span');
+  Lit.render(relevantDataTooltipTemplate, container);
+  cachedTooltipElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
+    PH1: container,
+  });
+  return cachedTooltipElement;
+}
+
 function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIString.LocalizedString {
   if (!profile.activeSubscription ||
       profile.activeSubscription.subscriptionStatus !== Host.GdpClient.SubscriptionStatus.ENABLED) {
@@ -289,7 +324,7 @@ function renderGdpSectionIfNeeded({
                     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECEIVE_BADGES_SETTING_ENABLED);
                   });
                 }}></setting-checkbox>
-                <span>${i18nString(UIStrings.relevantDataDisclaimer)}</span>
+                ${renderDataDisclaimer()}
               </div>` : Lit.nothing}
         </div>
       ` : html`

front_end/panels/settings/components/syncSection.css

@@ -114,5 +114,11 @@ fieldset {
       align-items: center;
       gap: var(--sys-size-2);
     }
+
+    & .tooltip-content {
+      max-width: 278px;
+      padding: var(--sys-size-2) var(--sys-size-3);
+      font: var(--sys-typescale-body5-regular);
+    }
   }
 }