Change PopoverHelper for devtools-tooltip

Bug: 441236757
Change-Id: Ifce767d64df8094ccdf6410e0eb4498657f36ef6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6964999
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Nicholas Roscino <nroscino@chromium.org>

Author: Nicholas Roscino

front_end/panels/ai_assistance/PatchWidget.ts

@@ -182,7 +182,6 @@ export interface ViewInput {
 }
 
 export interface ViewOutput {
-  tooltipRef?: Directives.Ref<HTMLElement>;
   changeRef?: Directives.Ref<HTMLElement>;
   summaryRef?: Directives.Ref<HTMLElement>;
 }
@@ -211,7 +210,6 @@ export class PatchWidget extends UI.Widget.Widget {
   #automaticFileSystem =
       Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
   #applyToDisconnectedAutomaticWorkspace = false;
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   // `rpcId` from the `applyPatch` request
   #rpcId: Host.AidaClient.RpcGlobalId|null = null;
 
@@ -228,7 +226,7 @@ export class PatchWidget extends UI.Widget.Widget {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
-      output.tooltipRef = output.tooltipRef ?? Directives.createRef<HTMLElement>();
+
       output.changeRef = output.changeRef ?? Directives.createRef<HTMLElement>();
       output.summaryRef = output.summaryRef ?? Directives.createRef<HTMLElement>();
 
@@ -390,8 +388,23 @@ export class PatchWidget extends UI.Widget.Widget {
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
-              .title=${input.applyToWorkspaceTooltipText}
             ></devtools-button>
+            <devtools-tooltip
+                id="info-tooltip"
+                variant=${'rich'}
+              >
+             <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>`;
       }
@@ -417,62 +430,11 @@ 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();
   }
 
   #onLearnMoreTooltipClick(): void {
-    this.#viewOutput.tooltipRef?.value?.hidePopover();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   }
 

front_end/panels/ai_assistance/components/ChatView.ts

@@ -214,8 +214,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
-const TOOLTIP_POPOVER_OFFSET = 4;
-const RELEVANT_DATA_LINK_ID = 'relevant-data-link';
+const RELEVANT_DATA_LINK_FOOTER_ID = 'relevant-data-link-footer';
+const RELEVANT_DATA_LINK_CHAT_ID = 'relevant-data-link-chat';
 
 export interface Step {
   isLoading: boolean;
@@ -313,7 +313,6 @@ export class ChatView extends HTMLElement {
   #messagesContainerElement?: Element;
   #mainElementRef?: Lit.Directives.Ref<Element> = Lit.Directives.createRef();
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
    *
@@ -391,63 +390,6 @@ export class ChatView extends HTMLElement {
     this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
   }
 
-  #handleChatUiRef(el: Element|undefined): void {
-    if (!el || this.#popoverHelper) {
-      return;
-    }
-
-    // TODO: Update here when b/409965560 is fixed.
-    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper((el as HTMLElement), event => {
-      const popoverShownNode =
-          event.target instanceof HTMLElement && event.target.id === RELEVANT_DATA_LINK_ID ? event.target : null;
-      if (!popoverShownNode) {
-        return null;
-      }
-
-      // We move the glass pane to be a bit lower so
-      // that it does not disappear when moving the cursor
-      // over to link.
-      const nodeBox = popoverShownNode.boxInWindow();
-      nodeBox.y = nodeBox.y + TOOLTIP_POPOVER_OFFSET;
-      return {
-        box: nodeBox,
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          // clang-format off
-          Lit.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">
-              ${this.#props.disclaimerText}
-              <button
-                class="link tooltip-link"
-                role="link"
-                jslog=${VisualLogging.link('open-ai-settings').track({
-                  click: true,
-                })}
-                @click=${() => {
-                  void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-                }}
-              >${i18nString(UIStrings.learnAbout)}</button>
-            </div>`, popover.contentElement, {host: this});
-          // clang-format on
-          return true;
-        },
-      };
-    });
-    this.#popoverHelper.setTimeout(0);
-  }
-
   #handleMessagesContainerResize(): void {
     if (!this.#pinScrollToBottom) {
       return;
@@ -583,9 +525,11 @@ export class ChatView extends HTMLElement {
       // clang-format off
       const footerContents = this.#props.conversationType
         ? renderRelevantDataDisclaimer({
-            isLoading: this.#props.isLoading,
-            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          })
+          isLoading: this.#props.isLoading,
+          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+          tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
+          disclaimerText: this.#props.disclaimerText,
+        })
         : html`<p>
             ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
             <button
@@ -611,7 +555,7 @@ export class ChatView extends HTMLElement {
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
-      <div class="chat-ui" ${Lit.Directives.ref(this.#handleChatUiRef)}>
+      <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${renderMainContents({
             state: this.#props.state,
@@ -643,6 +587,7 @@ export class ChatView extends HTMLElement {
                 isTextInputDisabled: this.#props.isTextInputDisabled,
                 inputPlaceholder: this.#props.inputPlaceholder,
                 state: this.#props.state,
+                disclaimerText: this.#props.disclaimerText,
                 selectedContext: this.#props.selectedContext,
                 inspectElementToggled: this.#props.inspectElementToggled,
                 multimodalInputEnabled: this.#props.multimodalInputEnabled,
@@ -1433,8 +1378,12 @@ function renderImageInput({
   // clang-format on
 }
 
-function renderRelevantDataDisclaimer(
-    {isLoading, blockedByCrossOrigin}: {isLoading: boolean, blockedByCrossOrigin: boolean}): Lit.LitTemplate {
+function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipId, disclaimerText}: {
+  isLoading: boolean,
+  blockedByCrossOrigin: boolean,
+  tooltipId: string,
+  disclaimerText: string,
+}): Lit.LitTemplate {
   const classes =
       Lit.Directives.classMap({'chat-input-disclaimer': true, 'hide-divider': !isLoading && blockedByCrossOrigin});
   // clang-format off
@@ -1443,14 +1392,15 @@ function renderRelevantDataDisclaimer(
       <button
         class="link"
         role="link"
-        id=${RELEVANT_DATA_LINK_ID}
+        aria-details=${tooltipId}
         jslog=${VisualLogging.link('open-ai-settings').track({
           click: true,
         })}
         @click=${() => {
           void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
         }}
       >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
+      ${renderDisclamerTooltip(tooltipId, disclaimerText)}
     </p>
   `;
   // clang-format on
@@ -1470,6 +1420,7 @@ function renderChatInput({
   isTextInputEmpty,
   uploadImageInputEnabled,
   aidaAvailability,
+  disclaimerText,
   onContextClick,
   onInspectElementClick,
   onSubmit,
@@ -1490,6 +1441,7 @@ function renderChatInput({
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
+  disclaimerText: string,
   onContextClick: () => void,
   onInspectElementClick: () => void,
   onSubmit: (ev: SubmitEvent) => void,
@@ -1547,7 +1499,7 @@ function renderChatInput({
         </div>
         <div class="chat-input-actions-right">
           <div class="chat-input-disclaimer-container">
-            ${renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin})}
+            ${renderRelevantDataDisclaimer({ isLoading, blockedByCrossOrigin, tooltipId: RELEVANT_DATA_LINK_CHAT_ID, disclaimerText})}
           </div>
           ${renderMultimodalInputButtons({
             multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, imageInput, uploadImageInputEnabled, onTakeScreenshot, onImageUpload
@@ -1697,6 +1649,30 @@ function renderMainContents({
   return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
 }
 
+function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <devtools-tooltip
+      id=${id}
+      variant=${'rich'}
+    >
+      <div class="info-tooltip-container">
+        ${disclaimerText}
+        <button
+          class="link tooltip-link"
+          role="link"
+          jslog=${VisualLogging.link('open-ai-settings').track({
+            click: true,
+          })}
+          @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+          }}>${i18nString(UIStrings.learnAbout)}
+        </button>
+      </div>
+    </devtools-tooltip>`;
+  // clang-format on
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;

front_end/panels/ai_assistance/components/chatView.css

@@ -89,6 +89,18 @@
   color: var(--sys-color-on-surface-subtle);
 }
 
+.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;
+}
+
 .chat-input-container {
   width: 100%;
   display: flex;