explain: add ability to rate

Bug: b/295119680
Change-Id: Idbb9aa793f38fb7b08d498e2a6b09ff007234f30
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4822465
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>

config/gni/devtools_grd_files.gni

@@ -215,6 +215,8 @@ grd_files_release_sources = [
   "front_end/Images/symbol.svg",
   "front_end/Images/sync.svg",
   "front_end/Images/table.svg",
+  "front_end/Images/thumb-down.svg",
+  "front_end/Images/thumb-up.svg",
   "front_end/Images/toolbarResizerVertical.png",
   "front_end/Images/top-panel-close.svg",
   "front_end/Images/top-panel-open.svg",

config/gni/devtools_image_files.gni

@@ -214,6 +214,8 @@ devtools_svg_sources = [
   "symbol.svg",
   "sync.svg",
   "table.svg",
+  "thumb-down.svg",
+  "thumb-up.svg",
   "top-panel-close.svg",
   "top-panel-open.svg",
   "triangle-bottom-right.svg",

front_end/Images/src/thumb-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3H14.5V13L8.5 19L7.83333 18.5417C7.59722 18.375 7.41667 18.1632 7.29167 17.9063C7.16667 17.6493 7.13194 17.3819 7.1875 17.1042L7.20833 17L8 13H2.5C2.08333 13 1.72917 12.8542 1.4375 12.5625C1.14583 12.2708 1 11.9167 1 11.5V10.3125C1 10.2014 1.01042 10.1007 1.03125 10.0104C1.05208 9.92014 1.08333 9.82639 1.125 9.72917L3.60417 3.91667C3.71528 3.63889 3.89931 3.41667 4.15625 3.25C4.41319 3.08333 4.69444 3 5 3ZM13 4.5H5L2.5 10.3125V11.5H9.83333L8.8125 16.5625L13 12.375V4.5ZM14.5 13V11.5H17.5V4.5H14.5V3H19V13H14.5Z" fill="black"/>
+</svg>

front_end/Images/src/thumb-up.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 17H5.5V7L11.5 1L12.1667 1.45833C12.4028 1.625 12.5833 1.83681 12.7083 2.09375C12.8333 2.35069 12.8681 2.61806 12.8125 2.89583L12.7917 3L12 7H17.5C17.9167 7 18.2708 7.14583 18.5625 7.4375C18.8542 7.72917 19 8.08333 19 8.5V9.6875C19 9.79861 18.9896 9.89931 18.9688 9.98958C18.9479 10.0799 18.9167 10.1736 18.875 10.2708L16.3944 16.0875C16.2703 16.3625 16.0833 16.5833 15.8333 16.75C15.5833 16.9167 15.3056 17 15 17ZM7 15.5H15L17.5 9.6875V8.5H10.1667L11.1875 3.4375L7 7.625V15.5ZM5.5 7V8.5H2.5V15.5H5.5V17H1V7H5.5Z" fill="black"/>
+</svg>

front_end/panels/explain/ExplainPopover.ts

@@ -3,13 +3,21 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Marked from '../../third_party/marked/marked.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+const surveyLink =
+    'https://docs.google.com/forms/d/e/1FAIpQLSfKm4UX5PvTkM-N6aZ2UcaNyRhoP075Hr-lOmRaJv_4zN4kkQ/viewform';
+
 export class ExplainPopover {
   #source: Source;
   #contentElement = document.createElement('div');
+  #markdownElement: Element;
+  #answer = '';
+
   #detectOutsideInteraction = (event: Event): void => {
     const el = event?.composedPath()[0] as Node;
     if (!el.isDescendant(this.#contentElement) && this.#contentElement !== el) {
@@ -22,15 +30,60 @@ export class ExplainPopover {
     this.#source = source;
     this.#contentElement.style.padding = '16px';
     this.#contentElement.style.maxWidth = '500px';
+    this.#contentElement.innerHTML = `
+      <div class="markdown">
+      </div>
+      <div class="rating">
+        <span>Rate this response:</span>
+      </div>
+    `;
     this.#popover.contentElement.classList.toggle('has-padding', false);
     this.#popover.contentElement.appendChild(this.#contentElement);
+    this.#markdownElement = this.#contentElement.querySelector('.markdown') as HTMLDivElement;
+    const ratingContainer = this.#contentElement.querySelector('.rating') as HTMLDivElement;
+    ratingContainer.style.display = 'none';
+    ratingContainer.style.flexDirection = 'row';
+    ratingContainer.style.alignItems = 'center';
+    const plusButton = new Buttons.Button.Button();
+    plusButton.data = {
+      variant: Buttons.Button.Variant.TOOLBAR,
+      size: Buttons.Button.Size.TINY,
+      iconName: 'thumb-up',
+    };
+    plusButton.classList.add('plus');
+    plusButton.style.marginLeft = '1em';
+    plusButton.style.width = '20px';
+    plusButton.style.height = '20px';
+    const minusButton = new Buttons.Button.Button();
+    minusButton.data = {
+      variant: Buttons.Button.Variant.TOOLBAR,
+      size: Buttons.Button.Size.TINY,
+      iconName: 'thumb-down',
+    };
+    minusButton.classList.add('minus');
+    minusButton.style.width = '20px';
+    minusButton.style.height = '20px';
+    ratingContainer.append(plusButton);
+    ratingContainer.append(minusButton);
+
+    this.#contentElement.addEventListener('click', event => {
+      const isPlus = (event.target as HTMLElement).matches('.plus');
+      const isMinus = (event.target as HTMLElement).matches('.minus');
+      if (isMinus || isPlus) {
+        const rating = isMinus ? 'Bad' : 'Good';
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            `${surveyLink}?usp=pp_url&entry.1692896504=${encodeURIComponent(rating)}&entry.1188367343=${
+                encodeURIComponent(this.#source.getPrompt())}&entry.405375461=${encodeURIComponent(this.#answer)}` as
+            Platform.DevToolsPath.UrlString);
+      }
+    });
   }
 
   #renderMarkdown(content: string): void {
     const markdown = new MarkdownView.MarkdownView.MarkdownView();
     markdown.data = {tokens: Marked.Marked.lexer(content)};
-    this.#contentElement.removeChildren();
-    this.#contentElement.append(markdown);
+    this.#markdownElement.removeChildren();
+    this.#markdownElement.append(markdown);
   }
 
   #setupListeners(): void {
@@ -52,9 +105,13 @@ export class ExplainPopover {
     this.#renderMarkdown('loading...');
     this.#popover.setContentAnchorBox(this.#source.getAnchor());
     this.#popover.show(document);
+    this.#popover.positionContent();
     try {
       const result = await runPrompt(this.#source.getPrompt());
       this.#renderMarkdown(result);
+      this.#answer = result;
+      const ratingContainer = this.#contentElement.querySelector('.rating') as HTMLDivElement;
+      ratingContainer.style.display = 'flex';
     } catch (err) {
       this.#renderMarkdown(`loading failed: ${err.message}`);
     }