[Freestyler] Add chevron buttons for the suggestions UI

The behavior should be:
* When there are overflowing suggestions, we're
showing chevron buttons to scroll forward or backward to the
overflowing suggestions.

Fixed: 372319494
Change-Id: I065bc8e6e9f03fc8473d188f19f16f11c098dd70
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5979835
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/panels/freestyler/components/UserActionRow.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
@@ -55,12 +56,21 @@ const UIStringsNotTranslate = {
    * issue with the AI assistance message.
    */
   report: 'Report legal issue',
+  /**
+   * @description The title of the button for scrolling to see next suggestions
+   */
+  scrollToNext: 'Scroll to next suggestions',
+  /**
+   * @description The title of the button for scrolling to see previous suggestions
+   */
+  scrollToPrevious: 'Scroll to previous suggestions',
 };
 
 const lockedString = i18n.i18n.lockedString;
 
 const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504' as
     Platform.DevToolsPath.UrlString;
+const SCROLL_ROUNDING_OFFSET = 1;
 export interface UserActionRowProps {
   showRateButtons: boolean;
   onFeedbackSubmit: (rate: Host.AidaClient.Rating, feedback?: string) => void;
@@ -75,6 +85,11 @@ export class UserActionRow extends HTMLElement {
   #isShowingFeedbackForm = false;
   #currentRating?: Host.AidaClient.Rating;
   #isSubmitButtonDisabled = true;
+  #suggestionsScrollContainerRef = LitHtml.Directives.createRef<HTMLElement>();
+  #suggestionsLeftScrollButtonContainerRef = LitHtml.Directives.createRef<HTMLElement>();
+  #suggestionsRightScrollButtonContainerRef = LitHtml.Directives.createRef<HTMLElement>();
+  #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());
+  #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(50);
 
   constructor(props: UserActionRowProps) {
     super();
@@ -84,13 +99,44 @@ export class UserActionRow extends HTMLElement {
   set props(props: UserActionRowProps) {
     this.#props = props;
     this.#render();
+    this.#evaluateSuggestionsLayout();
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [userActionRowStyles, Input.textInputStyles];
     this.#render();
+    this.#evaluateSuggestionsLayout();
+
+    if (this.#suggestionsScrollContainerRef.value) {
+      this.#suggestionsResizeObserver.observe(this.#suggestionsScrollContainerRef.value);
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.#suggestionsResizeObserver.disconnect();
   }
 
+  #handleSuggestionsScrollOrResize = (): void => {
+    void this.#suggestionsEvaluateLayoutThrottler.schedule(() => {
+      this.#evaluateSuggestionsLayout();
+      return Promise.resolve();
+    });
+  };
+
+  #scrollSuggestionsScrollContainer = (direction: 'left'|'right'): void => {
+    const suggestionsScrollContainer = this.#suggestionsScrollContainerRef.value;
+    if (!suggestionsScrollContainer) {
+      return;
+    }
+
+    suggestionsScrollContainer.scroll({
+      top: 0,
+      left: direction === 'left' ? suggestionsScrollContainer.scrollLeft - suggestionsScrollContainer.clientWidth :
+                                   suggestionsScrollContainer.scrollLeft + suggestionsScrollContainer.clientWidth,
+      behavior: 'smooth',
+    });
+  };
+
   #handleRateClick(rating: Host.AidaClient.Rating): void {
     if (this.#currentRating === rating) {
       return;
@@ -177,6 +223,22 @@ export class UserActionRow extends HTMLElement {
     }
   };
 
+  #evaluateSuggestionsLayout = (): void => {
+    const suggestionsScrollContainer = this.#suggestionsScrollContainerRef.value;
+    const leftScrollButtonContainer = this.#suggestionsLeftScrollButtonContainerRef.value;
+    const rightScrollButtonContainer = this.#suggestionsRightScrollButtonContainerRef.value;
+    if (!suggestionsScrollContainer || !leftScrollButtonContainer || !rightScrollButtonContainer) {
+      return;
+    }
+
+    const shouldShowLeftButton = suggestionsScrollContainer.scrollLeft > SCROLL_ROUNDING_OFFSET;
+    const shouldShowRightButton =
+        suggestionsScrollContainer.scrollLeft + suggestionsScrollContainer.offsetWidth + SCROLL_ROUNDING_OFFSET <
+        suggestionsScrollContainer.scrollWidth;
+    leftScrollButtonContainer.classList.toggle('hidden', !shouldShowLeftButton);
+    rightScrollButtonContainer.classList.toggle('hidden', !shouldShowRightButton);
+  };
+
   #renderFeedbackForm(): LitHtml.LitTemplate {
     // clang-format off
     return html`
@@ -232,6 +294,54 @@ export class UserActionRow extends HTMLElement {
     // clang-format on
   }
 
+  #renderSuggestions(): LitHtml.LitTemplate {
+    // clang-format off
+    if (!this.#props.suggestions) {
+      return LitHtml.nothing;
+    }
+
+    return html`<div class="suggestions-container">
+      <div class="scroll-button-container left hidden" ${LitHtml.Directives.ref(this.#suggestionsLeftScrollButtonContainerRef)}>
+        <devtools-button
+          class='scroll-button'
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'chevron-left',
+            title: lockedString(UIStringsNotTranslate.scrollToPrevious),
+            jslogContext: 'chevron-left',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#scrollSuggestionsScrollContainer('left')}
+        ></devtools-button>
+      </div>
+      <div class="suggestions-scroll-container" @scroll=${this.#handleSuggestionsScrollOrResize} ${LitHtml.Directives.ref(this.#suggestionsScrollContainerRef)}>
+        ${this.#props.suggestions?.map(suggestion => html`<devtools-button
+          class='suggestion'
+          .data=${{
+            variant: Buttons.Button.Variant.OUTLINED,
+            title: suggestion,
+            jslogContext: 'suggestion',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#props.handleSuggestionClick(suggestion)}
+        >${suggestion}</devtools-button>`)}
+      </div>
+      <div class="scroll-button-container right hidden" ${LitHtml.Directives.ref(this.#suggestionsRightScrollButtonContainerRef)}>
+        <devtools-button
+          class='scroll-button'
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'chevron-right',
+            title: lockedString(UIStringsNotTranslate.scrollToNext),
+            jslogContext: 'chevron-right',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#scrollSuggestionsScrollContainer('right')}
+        ></devtools-button>
+      </div>
+    </div>`;
+    // clang-format on
+  }
+
   #render(): void {
     // clang-format off
     LitHtml.render(
@@ -240,17 +350,7 @@ export class UserActionRow extends HTMLElement {
           <div class="rate-buttons">
             ${this.#props.showRateButtons ? this.#renderButtons() : LitHtml.nothing}
           </div>
-          ${this.#props.suggestions ?
-            html`<div class="suggestions">
-              ${this.#props.suggestions?.map(suggestion => html`<devtools-button
-                .data=${{
-                  variant: Buttons.Button.Variant.OUTLINED,
-                  title: suggestion,
-                  jslogContext: 'suggestion',
-                } as Buttons.Button.ButtonData}
-                @click=${() => this.#props.handleSuggestionClick(suggestion)}
-              >${suggestion}</devtools-button>`)}
-            </div>` : LitHtml.nothing}
+          ${this.#props.suggestions ? this.#renderSuggestions() : LitHtml.nothing}
         </div>
         ${this.#isShowingFeedbackForm
           ? this.#renderFeedbackForm()

front_end/panels/freestyler/components/userActionRow.css

@@ -71,79 +71,41 @@
   display: inline-block;
 }
 
-/*
-  Scroll driven animation below is used for generating shadows
-  when the `.suggestions` area is scrollable.
-*/
-.suggestions {
-  display: flex;
-  overflow-y: hidden;
-  overflow-x: auto;
-  scrollbar-width: none;
-  gap: var(--sys-size-3);
-  scroll-timeline: --scroll-timeline x; /* stylelint-disable-line property-no-unknown */
-  animation: detect-scroll;
-  animation-timeline: --scroll-timeline; /* stylelint-disable-line property-no-unknown */
-  animation-fill-mode: none;
+.suggestions-container {
+  overflow: hidden;
   position: relative;
-}
-
-.suggestions::before,
-.suggestions::after {
-  content: "";
-  display: block;
-  position: sticky;
-  min-width: var(--sys-size-3);
-  height: var(--sys-size-11);
-  left: 0;
-  right: 0;
-  z-index: 999;
-  animation-name: reveal;
-  animation-timeline: --scroll-timeline; /* stylelint-disable-line property-no-unknown */
-  animation-fill-mode: both;
-}
+  display: flex;
 
-.suggestions::before {
-  top: 0;
-  visibility: var(--visibility-if-can-scroll, hidden);
-  animation-range: var(--sys-size-6) var(--sys-size-11); /* stylelint-disable-line property-no-unknown */
-  background:
-    radial-gradient(
-      farthest-side at 0 50%,
-      var(--app-color-scroll-area-shadow-start),
-      transparent
-    );
-}
+  .suggestions-scroll-container {
+    display: flex;
+    overflow: auto hidden;
+    scrollbar-width: none;
+    gap: var(--sys-size-3);
+    padding-right: var(--sys-size-1);
+  }
 
-.suggestions::after {
-  bottom: 0;
-  visibility: var(--visibility-if-can-scroll, hidden);
-  animation-direction: reverse;
-  /* stylelint-disable-next-line property-no-unknown */
-  animation-range:
-    calc(100% - var(--sys-size-11))
-    calc(100% - var(--sys-size-6));
-  background:
-    radial-gradient(
-      farthest-side at 100% 50%,
-      var(--app-color-scroll-area-shadow-start),
-      transparent
-    );
-}
+  .scroll-button-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: var(--sys-size-15);
+    z-index: 999;
+  }
 
-@keyframes reveal {
-  0% {
-    opacity: 0%;
+  .scroll-button-container.hidden {
+    display: none;
   }
 
-  100% {
-    opacity: 100%;
+  .scroll-button-container.left {
+    left: 0;
+    background: linear-gradient(90deg, var(--sys-color-cdt-base-container) 0%, var(--sys-color-cdt-base-container) 50%, transparent);
   }
-}
 
-@keyframes detect-scroll {
-  from,
-  to {
-    --visibility-if-can-scroll: visible;
+  .scroll-button-container.right {
+    right: 0;
+    background: linear-gradient(90deg, transparent, var(--sys-color-cdt-base-container) 50%);
+    justify-content: flex-end;
   }
 }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -618,6 +618,8 @@ export const knownContextValues = new Set([
   'changes.reveal-source',
   'changes.revert',
   'checked',
+  'chevron-left',
+  'chevron-right',
   'chrome-ai',
   'chrome-android-mobile',
   'chrome-android-mobile-high-end',