[GreenDevFloaty]: Add a popup AI disclaimer.

Bug: 466071312
Change-Id: I55589acb78c999ccd5db9473da744a100a200df5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7560699
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>

Author: finnurbreki

front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -72,6 +72,15 @@ class GreenDevFloaty {
       });
     }
 
+    const learnMoreLink = doc.querySelector('.learn-more-link');
+    if (learnMoreLink) {
+      learnMoreLink.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString);
+      });
+    }
+
     const nodeDescriptionElement = doc.querySelector('.green-dev-floaty-dialog-node-description') as HTMLDivElement;
     nodeDescriptionElement?.addEventListener('mousemove', () => {
       if (this.#node) {

front_end/entrypoints/greendev_floaty/floaty.css

@@ -251,8 +251,48 @@ html, body {
 }
 
 .green-dev-floaty-disclaimer {
-  font-size: 13px;
+  font-size: 16px;
   color: #666;
   text-align: center;
   margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
 }

front_end/entrypoints/greendev_floaty/floaty.html

@@ -23,7 +23,14 @@
           <input type="text" class="green-dev-floaty-dialog-text-field" placeholder="Why is this not centered?">
           <button class="green-dev-floaty-dialog-play-button"></button>
         </div>
-        <div class="green-dev-floaty-disclaimer">Relevant data is sent to Google</div>
+        <div class="green-dev-floaty-disclaimer">
+          <span class="disclaimer-link">Relevant data</span> is sent to Google
+          <div class="disclaimer-tooltip">
+            Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won't always get it right.
+            <br><br>
+            <a href="https://developer.chrome.com/docs/devtools/ai-assistance" class="learn-more-link">Learn about AI in DevTools</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>

front_end/panels/greendev/GreenDevPanel.css

@@ -234,8 +234,49 @@
 }
 
 .green-dev-floaty-disclaimer {
-  font-size: 14px;
+  font-size: 15px;
   color: #666;
   text-align: center;
   margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #333;
+  white-space: normal; /* Ensure text wraps */
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
 }

front_end/panels/greendev/GreenDevPanel.ts

@@ -4,6 +4,8 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -186,7 +188,34 @@ export class GreenDevPanel extends UI.Panel.Panel {
 
       const disclaimer = document.createElement('div');
       disclaimer.className = 'green-dev-floaty-disclaimer';
-      disclaimer.textContent = 'Relevant data is sent to Google';
+
+      const link = document.createElement('span');
+      link.className = 'disclaimer-link';
+      link.textContent = 'Relevant data';
+      disclaimer.appendChild(link);
+
+      disclaimer.appendChild(document.createTextNode(' is sent to Google'));
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'disclaimer-tooltip';
+
+      tooltip.appendChild(document.createTextNode(
+          'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.'));
+      tooltip.appendChild(document.createElement('br'));
+      tooltip.appendChild(document.createElement('br'));
+
+      const learnMore = document.createElement('a');
+      const href = 'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
+      learnMore.href = href;
+      learnMore.className = 'learn-more-link';
+      learnMore.textContent = 'Learn about AI in DevTools';
+      learnMore.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(href);
+      });
+      tooltip.appendChild(learnMore);
+
+      disclaimer.appendChild(tooltip);
       blueCard.appendChild(disclaimer);
 
       content.appendChild(blueCard);