chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/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,15 +99,51 @@ 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) {
+      this.#currentRating = undefined;
+      this.#isShowingFeedbackForm = false;
+      // This effectively reset the user rating
+      this.#props.onFeedbackSubmit(Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
+      this.#render();
       return;
     }
 
@@ -115,6 +166,7 @@ export class UserActionRow extends HTMLElement {
     }
     this.#props.onFeedbackSubmit(this.#currentRating, input.value);
     this.#isShowingFeedbackForm = false;
+    this.#isSubmitButtonDisabled = true;
     this.#render();
   };
 
@@ -122,36 +174,42 @@ export class UserActionRow extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(REPORT_URL);
   };
 
-  #renderButtons(): LitHtml.TemplateResult {
+  #renderButtons(): LitHtml.LitTemplate {
     // clang-format off
-    return html`
+    const rateButtons = html`
       <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          size: Buttons.Button.Size.SMALL,
-          iconName: 'thumb-up',
-          toggledIconName: 'thumb-up-filled',
-          toggled: this.#currentRating === Host.AidaClient.Rating.POSITIVE,
-          toggleType: Buttons.Button.ToggleType.PRIMARY,
-          title: lockedString(UIStringsNotTranslate.thumbsUp),
-          jslogContext: 'thumbs-up',
-        } as Buttons.Button.ButtonData}
-        @click=${() => this.#handleRateClick(Host.AidaClient.Rating.POSITIVE)}
-      ></devtools-button>
-      <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          size: Buttons.Button.Size.SMALL,
-          iconName: 'thumb-down',
-          toggledIconName: 'thumb-down-filled',
-          toggled: this.#currentRating === Host.AidaClient.Rating.NEGATIVE,
-          toggleType: Buttons.Button.ToggleType.PRIMARY,
-          title: lockedString(UIStringsNotTranslate.thumbsDown),
-          jslogContext: 'thumbs-down',
-        } as Buttons.Button.ButtonData}
-        @click=${() => this.#handleRateClick(Host.AidaClient.Rating.NEGATIVE)}
-      ></devtools-button>
-      <div class="vertical-separator"></div>
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'thumb-up',
+            toggledIconName: 'thumb-up-filled',
+            toggled: this.#currentRating === Host.AidaClient.Rating.POSITIVE,
+            toggleType: Buttons.Button.ToggleType.PRIMARY,
+            title: lockedString(UIStringsNotTranslate.thumbsUp),
+            jslogContext: 'thumbs-up',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#handleRateClick(Host.AidaClient.Rating.POSITIVE)}
+        ></devtools-button>
+        <devtools-button
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.SMALL,
+            iconName: 'thumb-down',
+            toggledIconName: 'thumb-down-filled',
+            toggled: this.#currentRating === Host.AidaClient.Rating.NEGATIVE,
+            toggleType: Buttons.Button.ToggleType.PRIMARY,
+            title: lockedString(UIStringsNotTranslate.thumbsDown),
+            jslogContext: 'thumbs-down',
+          } as Buttons.Button.ButtonData}
+          @click=${() => this.#handleRateClick(Host.AidaClient.Rating.NEGATIVE)}
+        ></devtools-button>
+        <div class="vertical-separator"></div>`;
+    // clang-format off
+
+    // clang-format off
+    return html`
+    <div class="rate-buttons">
+      ${this.#props.showRateButtons ? rateButtons : LitHtml.nothing}
       <devtools-button
         .data=${
           {
@@ -164,7 +222,7 @@ export class UserActionRow extends HTMLElement {
         }
         @click=${this.#handleReportClick}
       ></devtools-button>
-    `;
+    </div>`;
     // clang-format on
   }
 
@@ -177,7 +235,27 @@ 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 {
+    if (!this.#isShowingFeedbackForm) {
+      return LitHtml.nothing;
+    }
+
     // clang-format off
     return html`
       <form class="feedback-form" @submit=${this.#handleSubmit}>
@@ -232,30 +310,62 @@ export class UserActionRow extends HTMLElement {
     // clang-format on
   }
 
+  #renderSuggestions(): LitHtml.LitTemplate {
+    if (!this.#props.suggestions) {
+      return LitHtml.nothing;
+    }
+    // clang-format off
+    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(
       html`
         <div class="feedback">
-          <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.#renderButtons()}
+          ${this.#renderSuggestions()}
         </div>
-        ${this.#isShowingFeedbackForm
-          ? this.#renderFeedbackForm()
-          : LitHtml.nothing
-        }
+        ${this.#renderFeedbackForm()}
       `,
       this.#shadow,
       {host: this},

package/front_end/panels/freestyler/components/freestylerChatUi.css

@@ -47,7 +47,8 @@
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));
@@ -62,6 +63,20 @@
   }
 }
 
+.chat-readonly-container {
+  display: flex;
+  width: 100%;
+  max-width: var(--sys-size-36);
+  justify-content: center;
+  align-items: center;
+  background-color: var(--sys-color-surface3);
+  font: var(--sys-typescale-body4-regular);
+  padding: var(--sys-size-5) 0;
+  border-radius: var(--sys-shape-corner-medium-small);
+  margin-bottom: var(--sys-size-5);
+  color: var(--sys-color-on-surface-subtle);
+}
+
 .chat-input-container {
   margin: var(--sys-size-4) 0;
   width: 100%;
@@ -104,13 +119,38 @@
     color: var(--sys-color-state-disabled);
     background-color: var(--sys-color-state-disabled-container);
     border-color: transparent;
+
+    &::placeholder {
+      color: var(--sys-color-on-surface-subtle);
+      opacity: 100%;
+    }
+  }
+
+  &.one-big-button {
+    /* start new chat button */
+    --right-padding: 100px;
+  }
+
+  &.two-big-buttons {
+    /* cancel + start new chat button */
+    --right-padding: 172px;
   }
 }
 
-.chat-input-button {
+.chat-input-buttons {
   position: absolute;
   right: 0;
   bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+.chat-input-button {
+  padding-bottom: 3px;
+  padding-right: var(--sys-size-3);
+}
+
+.chat-cancel-context-button {
   padding-bottom: 3px;
   padding-right: var(--sys-size-3);
 }
@@ -138,7 +178,8 @@
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));
@@ -264,35 +305,6 @@
   }
 }
 
-.no-agent-message {
-  user-select: text;
-  cursor: initial;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-size-5);
-  width: 100%;
-  padding: var(--sys-size-7) var(--sys-size-5);
-  height: 100%;
-
-  .header {
-    display: flex;
-    align-items: center;
-    height: var(--sys-size-11);
-    gap: var(--sys-size-4);
-
-    h2 {
-      font: var(--sys-typescale-body4-bold);
-    }
-  }
-
-  .instructions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sys-size-6);
-    line-height: 18px;
-  }
-}
-
 .indicator {
   color: var(--sys-color-green-bright);
 }
@@ -488,14 +500,16 @@ main {
   align-items: center;
   justify-content: center;
   font: var(--sys-typescale-headline4);
-  gap: var(--sys-size-11);
+  gap: var(--sys-size-8);
   padding: var(--sys-size-3);
+  max-width: var(--sys-size-33);
 
   /* Prevents the container from jumping when the scrollbar is shown */
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));
@@ -528,9 +542,14 @@ main {
     h1 {
       font: var(--sys-typescale-headline4);
     }
+
+    p {
+      text-align: center;
+      font: var(--sys-typescale-body4-regular);
+    }
   }
 
-  .suggestions {
+  .empty-state-content {
     display: flex;
     flex-direction: column;
     gap: var(--sys-size-5);
@@ -540,6 +559,42 @@ main {
   }
 }
 
+.feature-card {
+  display: flex;
+  padding: var(--sys-size-4) var(--sys-size-6);
+  gap: 10px;
+  background-color: var(--sys-color-surface2);
+  border-radius: var(--sys-shape-corner-medium-small);
+  width: 100%;
+  align-items: center;
+
+  .feature-card-icon {
+    min-width: var(--sys-size-12);
+    min-height: var(--sys-size-12);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--sys-color-tonal-container);
+    border-radius: var(--sys-shape-corner-full);
+
+    devtools-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .feature-card-content {
+    h3 {
+      font: var(--sys-typescale-body3-medium);
+    }
+
+    p {
+      font: var(--sys-typescale-body4-regular);
+      line-height: 18px;
+    }
+  }
+}
+
 .disabled-view {
   display: flex;
   max-width: var(--sys-size-34);

package/front_end/panels/freestyler/components/userActionRow.css

@@ -16,7 +16,8 @@
   display: flex;
   gap: var(--sys-size-8);
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
+  margin-block: calc(-1 * var(--sys-size-3));
 }
 
 .rate-buttons {
@@ -71,79 +72,52 @@
   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: var(--sys-size-3);
+  }
 
-.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;
   }
 }

package/front_end/panels/freestyler/freestyler-meta.ts

@@ -82,21 +82,15 @@ function isFreestylerFeatureAvailable(config?: Root.Runtime.HostConfig): boolean
 }
 
 function isDrJonesNetworkFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled &&
-          (config?.devToolsExplainThisResourceDogfood?.enabled ||
-           config?.devToolsAiAssistanceNetworkAgent?.enabled)) === true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceNetworkAgent?.enabled)) === true;
 }
 
 function isDrJonesPerformanceFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled &&
-          (config?.devToolsAiAssistancePerformanceAgentDogfood?.enabled ||
-           config?.devToolsAiAssistancePerformanceAgent?.enabled)) === true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistancePerformanceAgent?.enabled)) === true;
 }
 
 function isDrJonesFileFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
-  return (config?.aidaAvailability?.enabled &&
-          (config?.devToolsAiAssistanceFileAgentDogfood?.enabled || config?.devToolsAiAssistanceFileAgent?.enabled)) ===
-      true;
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceFileAgent?.enabled)) === true;
 }
 
 function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
@@ -206,7 +200,6 @@ UI.ActionRegistration.registerActionExtension({
   contextTypes(): [] {
     return [];
   },
-  setting,
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.askAi),
   async loadActionDelegate() {
@@ -236,7 +229,6 @@ UI.ActionRegistration.registerActionExtension({
   contextTypes() {
     return [];
   },
-  setting,
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.askAi),
   async loadActionDelegate() {

package/front_end/panels/freestyler/freestyler.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 export * from './AiAgent.js';
+export * from './AiHistoryStorage.js';
 export * from './ChangeManager.js';
 export * from './DrJonesFileAgent.js';
 export * from './DrJonesNetworkAgent.js';