chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -32,6 +32,7 @@ export interface TraceEventsForNetworkRequest {
   resourceFinish?: Types.Events.ResourceFinish;
   receivedData?: Types.Events.ResourceReceivedData[];
   resourceMarkAsCached?: Types.Events.ResourceMarkAsCached;
+  preloadRenderBlockingStatusChange?: Types.Events.PreloadRenderBlockingStatusChangeEvent[];
 }
 
 export interface WebSocketTraceDataForFrame {
@@ -164,6 +165,10 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
+  if (Types.Events.isPreloadRenderBlockingStatusChangeEvent(event)) {
+    storeTraceEventWithRequestId(event.args.data.requestId, 'preloadRenderBlockingStatusChange', [event]);
+  }
+
   if (Types.Events.isWebSocketCreate(event) || Types.Events.isWebSocketInfo(event) ||
       Types.Events.isWebSocketTransfer(event)) {
     const identifier = event.args.data.identifier;
@@ -487,13 +492,24 @@ export async function finalize(): Promise<void> {
         Types.Timing.Micro(0);
 
     // Finally get some of the general data from the trace events.
-    const {frame, url, renderBlocking} = finalSendRequest.args.data;
+    const {frame, url, renderBlocking: sendRequestIsRenderBlocking} = finalSendRequest.args.data;
     const {encodedDataLength, decodedBodyLength} =
         request.resourceFinish ? request.resourceFinish.args.data : {encodedDataLength: 0, decodedBodyLength: 0};
     const parsedUrl = new URL(url);
     const isHttps = parsedUrl.protocol === 'https:';
     const requestingFrameUrl =
         Helpers.Trace.activeURLForFrameAtTime(frame, finalSendRequest.ts, rendererProcessesByFrame) || '';
+
+    // A resource that is preloaded (and not marked as render blocking) can
+    // become render blocked later via a PreloadRenderBlockingStatusChange. In
+    // this case, we take the render blocking value of the last
+    // PreloadRenderBlockingStatusChange for this request.
+    const preloadRenderBlockingStatusChange =
+        request.preloadRenderBlockingStatusChange?.at(-1)?.args.data.renderBlocking;
+
+    // In the event the property isn't set, assume non-blocking.
+    const isRenderBlocking = preloadRenderBlockingStatusChange ?? sendRequestIsRenderBlocking ?? 'non_blocking';
+
     // Construct a synthetic trace event for this network request.
     const networkEvent =
         Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticNetworkRequest>({
@@ -535,8 +551,7 @@ export async function finalize(): Promise<void> {
               initialPriority,
               protocol: request.receiveResponse?.args.data.protocol ?? 'unknown',
               redirects,
-              // In the event the property isn't set, assume non-blocking.
-              renderBlocking: renderBlocking ?? 'non_blocking',
+              renderBlocking: isRenderBlocking,
               requestId,
               requestingFrameUrl,
               requestMethod: finalSendRequest.args.data.requestMethod,

package/front_end/models/trace/types/TraceEvents.ts

@@ -3142,6 +3142,8 @@ export const enum Name {
   USER_TIMING_MEASURE = 'UserTiming::Measure',
 
   LINK_PRECONNECT = 'LinkPreconnect',
+
+  PRELOAD_RENDER_BLOCKING_STATUS_CHANGE = 'PreloadRenderBlockingStatusChange',
 }
 
 /**
@@ -3275,3 +3277,20 @@ export function isAnyScriptSourceEvent(event: Event): event is RundownScriptSour
     RundownScriptStub {
   return event.cat === 'disabled-by-default-devtools.v8-source-rundown-sources';
 }
+
+export interface PreloadRenderBlockingStatusChangeEvent extends Instant {
+  name: Name.PRELOAD_RENDER_BLOCKING_STATUS_CHANGE;
+  cat: 'devtools.timeline';
+  args: Args&{
+    data: {
+      requestId: string,
+      url: string,
+      renderBlocking?: RenderBlocking,
+    },
+  };
+}
+
+export function isPreloadRenderBlockingStatusChangeEvent(event: Event):
+    event is PreloadRenderBlockingStatusChangeEvent {
+  return event.name === Name.PRELOAD_RENDER_BLOCKING_STATUS_CHANGE;
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -32,9 +32,9 @@ import {
   type ImageInputData,
   type ModelChatMessage,
   type Props as ChatViewProps,
-  State as ChatViewState,
   type Step
 } from './components/ChatView.js';
+import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
@@ -296,7 +296,17 @@ interface ToolbarViewInput {
   showActiveConversationActions: boolean;
 }
 
-export type ViewInput = ChatViewProps&ToolbarViewInput;
+export const enum ViewState {
+  DISABLED_VIEW = 'disabled-view',
+  CHAT_VIEW = 'chat-view',
+  EXPLORE_VIEW = 'explore-view'
+}
+
+interface PanelViewProps {
+  state: ViewState;
+}
+
+export type ViewInput = ChatViewProps&ToolbarViewInput&PanelViewProps;
 export interface PanelViewOutput {
   chatView?: ChatView;
 }
@@ -375,28 +385,41 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
 
 function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElement): void {
   // clang-format off
+  function renderState(): Lit.TemplateResult {
+    switch (input.state) {
+      case ViewState.CHAT_VIEW:
+        return html`<devtools-ai-chat-view
+          .props=${input}
+          ${Lit.Directives.ref((el: Element | undefined) => {
+            if (!el || !(el instanceof ChatView)) {
+              return;
+            }
+
+            output.chatView = el;
+          })}
+        ></devtools-ai-chat-view>`;
+      case ViewState.EXPLORE_VIEW:
+        return html`<devtools-widget
+          class="fill-panel"
+          .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
+        ></devtools-widget>`;
+
+      case ViewState.DISABLED_VIEW:
+        return html`<devtools-widget
+          class="fill-panel"
+          .widgetConfig=${UI.Widget.widgetConfig(DisabledWidget, {
+            aidaAvailability: input.aidaAvailability,
+          })}
+        ></devtools-widget>`;
+    }
+  }
+
   Lit.render(
     html`
       ${toolbarView(input)}
-      <div class="ai-assistance-view-container">
-        ${input.state !== ChatViewState.EXPLORE_VIEW
-          ? html` <devtools-ai-chat-view
-              .props=${input}
-              ${Lit.Directives.ref((el: Element | undefined) => {
-                if (!el || !(el instanceof ChatView)) {
-                  return;
-                }
-
-                output.chatView = el;
-              })}
-            ></devtools-ai-chat-view>`
-          : html`<devtools-widget
-              class="explore"
-              .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
-            ></devtools-widget>`}
-      </div>
+      <div class="ai-assistance-view-container">${renderState()}</div>
     `,
-    target,
+    target
   );
   // clang-format on
 }
@@ -528,19 +551,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
   }
 
-  #getChatUiState(): ChatViewState {
+  #getChatUiState(): ViewState {
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
 
     if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE ||
         !this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
-      return ChatViewState.DISABLED_VIEW;
+      return ViewState.DISABLED_VIEW;
     }
 
     if (this.#conversation?.type) {
-      return ChatViewState.CHAT_VIEW;
+      return ViewState.CHAT_VIEW;
     }
 
-    return ChatViewState.EXPLORE_VIEW;
+    return ViewState.EXPLORE_VIEW;
   }
 
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
@@ -982,7 +1005,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getChatInputPlaceholder(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation) {
+    if (state === ViewState.DISABLED_VIEW || !this.#conversation) {
       return i18nString(UIStrings.followTheSteps);
     }
 
@@ -1015,7 +1038,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getDisclaimerText(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
+    if (state === ViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
 

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -310,11 +310,13 @@ const DEFAULT_VIEW: View =
         const iconName = input.projectType === SelectedProjectType.AUTOMATIC_DISCONNECTED ? 'folder-off' : input.projectType === SelectedProjectType.AUTOMATIC_CONNECTED ? 'folder-asterisk' : 'folder';
         return html`
         <div class="footer">
-          ${input.projectName ? html`
+          ${
+            input.projectName ? html`
             <div class="change-workspace" jslog=${VisualLogging.section('patch-widget.workspace')}>
                 <devtools-icon .name=${iconName}></devtools-icon>
                 <span class="folder-name" title=${input.projectPath}>${input.projectName}</span>
-              ${input.onChangeWorkspaceClick ? html`
+              ${
+                                    input.onChangeWorkspaceClick ? html`
                 <devtools-button
                   @click=${input.onChangeWorkspaceClick}
                   .jslogContext=${'change-workspace'}
@@ -323,18 +325,24 @@ const DEFAULT_VIEW: View =
                   .disabled=${input.patchSuggestionState === PatchSuggestionState.LOADING}
                   ${Directives.ref(output.changeRef)}
                 >${lockedString(UIStringsNotTranslate.change)}</devtools-button>
-              ` : nothing}
+              ` :
+                                                                   nothing}
             </div>
-          ` : nothing}
+          ` :
+                                nothing}
           <div class="apply-to-workspace-container" aria-live="polite">
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`
-              <div class="loading-text-container" jslog=${VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ?
+                html`
+              <div class="loading-text-container" jslog=${
+                    VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
                 <devtools-spinner></devtools-spinner>
                 <span>
                   ${lockedString(UIStringsNotTranslate.applyingToWorkspace)}
                 </span>
               </div>
-            ` : html`
+            ` :
+                html`
                 <devtools-button
                 @click=${input.onApplyToWorkspace}
                 .jslogContext=${'patch-widget.apply-to-workspace'}
@@ -342,12 +350,14 @@ const DEFAULT_VIEW: View =
                 ${lockedString(UIStringsNotTranslate.applyToWorkspace)}
               </devtools-button>
             `}
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
               @click=${input.onCancel}
               .jslogContext=${'cancel'}
               .variant=${Buttons.Button.Variant.OUTLINED}>
               ${lockedString(UIStringsNotTranslate.cancel)}
-            </devtools-button>` : nothing}
+            </devtools-button>` :
+                                                                          nothing}
             <devtools-button
               aria-details="info-tooltip"
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
@@ -356,7 +366,7 @@ const DEFAULT_VIEW: View =
             ></devtools-button>
             <devtools-tooltip
                 id="info-tooltip"
-                variant=${'rich'}
+                variant="rich"
               >
              <div class="info-tooltip-container">
                ${input.applyToWorkspaceTooltipText}
@@ -364,8 +374,8 @@ const DEFAULT_VIEW: View =
                  class="link tooltip-link"
                  role="link"
                  jslog=${VisualLogging.link('open-ai-settings').track({
-                   click: true,
-                 })}
+          click: true,
+        })}
                  @click=${input.onLearnMoreTooltipClick}
                >${lockedString(UIStringsNotTranslate.learnMore)}</button>
              </div>

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -20,7 +20,7 @@
   align-items: center;
   overflow: hidden;
 
-  & .explore {
+  & .fill-panel {
     width: 100%;
     height: 100%;
     display: flex;

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -9,3 +9,4 @@ export * from './SelectWorkspaceDialog.js';
 export * as UserActionRow from './components/UserActionRow.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as PatchWidget from './PatchWidget.js';
+export * as DisabledWidget from './components/DisabledWidget.js';

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/spinners/spinners.js';
@@ -9,7 +9,6 @@ import '../../../ui/components/spinners/spinners.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';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
@@ -19,7 +18,6 @@ import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
-import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -31,47 +29,10 @@ import {UserActionRow} from './UserActionRow.js';
 const {html, Directives: {ifDefined, ref}} = Lit;
 
 const UIStrings = {
-  /**
-   * @description The error message when the user is not logged in into Chrome.
-   */
-  notLoggedIn: 'This feature is only available when you are signed into Chrome with your Google account',
-  /**
-   * @description Message shown when the user is offline.
-   */
-  offline: 'Check your internet connection and try again',
-  /**
-   * @description Text for a link to Chrome DevTools Settings.
-   */
-  settingsLink: 'AI assistance in Settings',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStyles: 'Turn on {PH1} to get help with understanding CSS styles',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesRequestsPerformanceAndFiles:
-      'Turn on {PH1} to get help with styles, network requests, performance, and files',
   /**
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
-  /**
-   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
-   */
-  notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
 
   /**
    * @description Label added to the text input to describe the context for screen readers. Not shown visibly on screen.
@@ -259,12 +220,6 @@ export interface ModelChatMessage {
 
 export type ChatMessage = UserChatMessage|ModelChatMessage;
 
-export const enum State {
-  DISABLED_VIEW = 'disabled-view',
-  CHAT_VIEW = 'chat-view',
-  EXPLORE_VIEW = 'explore-view'
-}
-
 export interface Props {
   onTextSubmit:
       (text: string, imageInput?: Host.AidaClient.Part,
@@ -281,7 +236,6 @@ export interface Props {
   onLoadImage?: (file: File) => Promise<void>;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
-  state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
   messages: ChatMessage[];
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
@@ -513,10 +467,6 @@ export class ChatView extends HTMLElement {
 
   #render(): void {
     const renderFooter = (): Lit.LitTemplate => {
-      if (this.#props.state !== State.CHAT_VIEW) {
-        return Lit.nothing;
-      }
-
       const classes = Lit.Directives.classMap({
         'chat-view-footer': true,
         'has-conversation': !!this.#props.conversationType,
@@ -538,10 +488,6 @@ export class ChatView extends HTMLElement {
     };
 
     const renderInputOrReadOnlySection = (): Lit.LitTemplate => {
-      if (this.#props.state !== State.CHAT_VIEW) {
-        return Lit.nothing;
-      }
-
       if (this.#props.conversationType && this.#props.isReadOnly) {
         return renderReadOnlySection({
           conversationType: this.#props.conversationType,
@@ -582,8 +528,6 @@ export class ChatView extends HTMLElement {
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${renderMainContents({
-            state: this.#props.state,
-            aidaAvailability: this.#props.aidaAvailability,
             messages: this.#props.messages,
             isLoading: this.#props.isLoading,
             isReadOnly: this.#props.isReadOnly,
@@ -1504,75 +1448,7 @@ function renderChatInput({
   // clang-format on
 }
 
-function renderAidaUnavailableContents(
-    aidaAvailability:
-        Exclude<Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>):
-    Lit.TemplateResult {
-  switch (aidaAvailability) {
-    case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
-    case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED: {
-      return html`${i18nString(UIStrings.notLoggedIn)}`;
-    }
-    case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET: {
-      return html`${i18nString(UIStrings.offline)}`;
-    }
-  }
-}
-
-function renderConsentViewContents(): Lit.TemplateResult {
-  const settingsLink = document.createElement('span');
-  settingsLink.textContent = i18nString(UIStrings.settingsLink);
-  settingsLink.classList.add('link');
-  UI.ARIAUtils.markAsLink(settingsLink);
-  settingsLink.addEventListener('click', () => {
-    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-  });
-  settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
-
-  let consentViewContents: HTMLSpanElement;
-  // TODO(ergunsh): Should this `view` access `hostConfig` at all?
-  const config = Root.Runtime.hostConfig;
-  if (config.isOffTheRecord) {
-    return html`${i18nString(UIStrings.notAvailableInIncognitoMode)}`;
-  }
-  if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
-    consentViewContents = uiI18n.getFormatLocalizedString(
-        str_, UIStrings.turnOnForStylesRequestsPerformanceAndFiles, {PH1: settingsLink});
-  } else if (config.devToolsAiAssistanceFileAgent?.enabled) {
-    consentViewContents =
-        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
-  } else if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
-    consentViewContents =
-        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
-  } else {
-    consentViewContents = uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
-  }
-
-  return html`${consentViewContents}`;
-}
-
-function renderDisabledState(contents: Lit.TemplateResult): Lit.TemplateResult {
-  // clang-format off
-  return html`
-    <div class="empty-state-container">
-      <div class="disabled-view">
-        <div class="disabled-view-icon-container">
-          <devtools-icon
-            name="smart-assistant"
-          ></devtools-icon>
-        </div>
-        <div>
-          ${contents}
-        </div>
-      </div>
-    </div>
-  `;
-  // clang-format on
-}
-
 function renderMainContents({
-  state,
-  aidaAvailability,
   messages,
   isLoading,
   isReadOnly,
@@ -1589,8 +1465,6 @@ function renderMainContents({
   onCopyResponseClick,
   onMessageContainerRef,
 }: {
-  state: State,
-  aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
   messages: ChatMessage[],
   isLoading: boolean,
   isReadOnly: boolean,
@@ -1607,13 +1481,6 @@ function renderMainContents({
   conversationType?: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
-  if (state === State.DISABLED_VIEW) {
-    if (aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-      return renderDisabledState(renderConsentViewContents());
-    }
-    return renderDisabledState(renderAidaUnavailableContents(aidaAvailability));
-  }
-
   if (!conversationType) {
     return Lit.nothing;
   }
@@ -1643,7 +1510,7 @@ function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.Templat
   return html`
     <devtools-tooltip
       id=${id}
-      variant=${'rich'}
+      variant="rich"
     >
       <div class="info-tooltip-container">
         ${disclaimerText}