[PatchWidget] Use PopoverHelper for rendering info tooltip

This is a workaround until b/409965560 is fixed

Bug: 405913892
Change-Id: I5d9335f90c12845639ee8e189cee29daabee9f56
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6450698
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Nikolay Vitkov <nvitkov@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>

Author: ergunsh

front_end/panels/ai_assistance/BUILD.gn

@@ -47,7 +47,6 @@ 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

@@ -6,7 +6,6 @@
 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 Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -211,6 +210,7 @@ export class PatchWidget extends UI.Widget.Widget {
   #automaticFileSystem =
       Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
   #applyToDisconnectedAutomaticWorkspace = false;
+  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
 
   constructor(element?: HTMLElement, view?: View, opts?: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -388,19 +388,6 @@ export class PatchWidget extends UI.Widget.Widget {
               .variant=${Buttons.Button.Variant.ICON}
               .title=${input.applyToWorkspaceTooltipText}
             ></devtools-button>
-            <devtools-tooltip variant="rich" id="info-tooltip" ${Directives.ref(output.tooltipRef)}>
-              <div class="info-tooltip-container">
-                ${input.applyToWorkspaceTooltipText}
-                <button
-                  class="link tooltip-link"
-                  role="link"
-                  jslog=${VisualLogging.link('open-ai-settings').track({
-                    click: true,
-                  })}
-                  @click=${input.onLearnMoreTooltipClick}
-                >${lockedString(UIStringsNotTranslate.learnMore)}</button>
-              </div>
-            </devtools-tooltip>
           </div>
         </div>`;
       }
@@ -426,6 +413,56 @@ export class PatchWidget extends UI.Widget.Widget {
 
       render(template, target, {host: target});
     });
+    // We're using PopoverHelper as a workaround instead of using <devtools-tooltip>. See the bug for more details.
+    // TODO: Update here when b/409965560 is fixed.
+    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper(this.contentElement, event => {
+      // There are two ways this event is received for showing a popover case:
+      // * The latest element on the composed path is `<devtools-button>`
+      // * The 2nd element on the composed path is `<devtools-button>` (the last element is the `<button>` inside it.)
+      const hoveredNode = event.composedPath()[0];
+      const maybeDevToolsButton = event.composedPath()[2];
+
+      const popoverShownNode = hoveredNode instanceof HTMLElement && hoveredNode.getAttribute('aria-details') === 'info-tooltip' ? hoveredNode
+        : maybeDevToolsButton instanceof HTMLElement && maybeDevToolsButton.getAttribute('aria-details') === 'info-tooltip' ? maybeDevToolsButton
+        : null;
+      if (!popoverShownNode) {
+        return null;
+      }
+      return {
+        box: popoverShownNode.boxInWindow(),
+        show: async (popover: UI.GlassPane.GlassPane) => {
+          // clang-format off
+          render(html`
+            <style>
+              .info-tooltip-container {
+                max-width: var(--sys-size-28);
+                padding: var(--sys-size-4) var(--sys-size-5);
+
+                .tooltip-link {
+                  display: block;
+                  margin-top: var(--sys-size-4);
+                  color: var(--sys-color-primary);
+                  padding-left: 0;
+                }
+              }
+            </style>
+            <div class="info-tooltip-container">
+              ${UIStringsNotTranslate.applyToWorkspaceTooltip}
+              <button
+                class="link tooltip-link"
+                role="link"
+                jslog=${VisualLogging.link('open-ai-settings').track({
+                  click: true,
+                })}
+                @click=${this.#onLearnMoreTooltipClick}
+              >${lockedString(UIStringsNotTranslate.learnMore)}</button>
+            </div>`, popover.contentElement, {host: this});
+          // clang-forat on
+          return true;
+        },
+      };
+    }, 'patch-widget.info-tooltip');
+    this.#popoverHelper.setTimeout(0);
     // clang-format on
     this.requestUpdate();
   }

front_end/panels/ai_assistance/components/chatView.css

@@ -887,16 +887,6 @@ main {
       }
     }
 
-    .info-tooltip-container {
-      max-width: var(--sys-size-28);
-
-      .tooltip-link {
-        display: block;
-        margin-top: var(--sys-size-4);
-        color: var(--sys-color-primary);
-      }
-    }
-
     .loading-text-container {
       margin-right: var(--sys-size-3);
       display: flex;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2641,6 +2641,7 @@ export const knownContextValues = new Set([
   'patch-widget.discard',
   'patch-widget.save-all',
   'patch-widget.save-to-workspace',
+  'patch-widget.info-tooltip',
   'path',
   'pattern',
   'pause',