[PatchWidget] Add info tooltip near to "Apply to workspace" button

Bug: none
Change-Id: I77cdb03e629da6e8747e5475ec1cffd54362bfdf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6318339
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/panels/ai_assistance/BUILD.gn

@@ -62,6 +62,7 @@ devtools_module("ai_assistance") {
     "../../third_party/marked:bundle",
     "../../ui/components/markdown_view:bundle",
     "../../ui/components/spinners:bundle",
+    "../../ui/components/tooltips:bundle",
     "../../ui/legacy:bundle",
     "../../ui/lit:bundle",
   ]

front_end/panels/ai_assistance/PatchWidget.ts

@@ -5,6 +5,7 @@
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
 import '../../ui/components/spinners/spinners.js';
+import '../../ui/components/tooltips/tooltips.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -45,7 +46,11 @@ const UIStringsNotTranslate = {
   /**
    *@description Label for the selected workspace/folder
    */
-  selectedFolder: 'Selected folder:'
+  selectedFolder: 'Selected folder:',
+  /**
+   *@description Tooltip text for the info icon beside the "Apply to workspace" button
+   */
+  applyToWorkspaceTooltip: 'Source code from the selected folder is sent to Google to generate code suggestions'
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -117,13 +122,17 @@ export class PatchWidget extends UI.Widget.Widget {
                     ${lockedString(UIStringsNotTranslate.change)}
                 </devtools-button>
               </div>
-              <devtools-button
-                class='apply-to-workspace'
-                @click=${input.onApplyToWorkspace}
-                .jslogContext=${'stage-to-workspace'}
-                .variant=${Buttons.Button.Variant.OUTLINED}>
-                ${lockedString(UIStringsNotTranslate.applyToWorkspace)}
-              </devtools-button>
+              <div class="apply-to-workspace-container">
+                <devtools-button
+                  class="apply-to-workspace"
+                  @click=${input.onApplyToWorkspace}
+                  .jslogContext=${'stage-to-workspace'}
+                  .variant=${Buttons.Button.Variant.OUTLINED}>
+                  ${lockedString(UIStringsNotTranslate.applyToWorkspace)}
+                </devtools-button>
+                <devtools-icon aria-describedby="info-tooltip" .name=${'info'}></devtools-icon>
+                <devtools-tooltip id="info-tooltip">${lockedString(UIStringsNotTranslate.applyToWorkspaceTooltip)}</devtools-tooltip>
+              </div>
             </div>` : nothing}
             ${input.patchSuggestion ? html`<div class="patch-tmp-message">
               ${input.patchSuggestion}

front_end/panels/ai_assistance/components/chatView.css

@@ -831,6 +831,19 @@ main {
     flex-direction: row;
   }
 
+  .apply-to-workspace-container {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+
+    devtools-icon {
+      /* var(--sys-size-8) is too small and var(--sys-size-9) is too big. */
+      width: 18px;
+      height: 18px;
+      margin-left: var(--sys-size-2);
+    }
+  }
+
   .patch-tmp-message {
     padding: var(--sys-size-4);
   }