chrome-devtools-frontend 1.0.1536371 → 1.0.1537268

package/front_end/core/sdk/RehydratingConnection.ts

@@ -32,8 +32,8 @@ import * as Root from '../root/root.js';
 
 import * as EnhancedTraces from './EnhancedTracesParser.js';
 import type {
-  ProtocolMessage, RehydratingExecutionContext, RehydratingScript, RehydratingTarget, ServerMessage} from
-  './RehydratingObject.js';
+  ProtocolMessage, RehydratingExecutionContext, RehydratingResource, RehydratingScript, RehydratingTarget,
+  ServerMessage} from './RehydratingObject.js';
 import {TraceObject} from './TraceObject.js';
 
 const UIStrings = {
@@ -157,6 +157,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
       const target = hydratingDataPerTarget.target;
       const executionContexts = hydratingDataPerTarget.executionContexts;
       const scripts = hydratingDataPerTarget.scripts;
+      const resources = hydratingDataPerTarget.resources;
       this.postToFrontend({
         method: 'Target.targetCreated',
         params: {
@@ -172,7 +173,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
       });
 
       sessionId += 1;
-      const session = new RehydratingSession(sessionId, target, executionContexts, scripts, this);
+      const session = new RehydratingSession(sessionId, target, executionContexts, scripts, resources, this);
       this.sessions.set(sessionId, session);
       session.declareSessionAttachedToTarget();
     }
@@ -267,15 +268,17 @@ export class RehydratingSession extends RehydratingSessionBase {
   target: RehydratingTarget;
   executionContexts: RehydratingExecutionContext[] = [];
   scripts: RehydratingScript[] = [];
+  resources: RehydratingResource[] = [];
 
   constructor(
       sessionId: number, target: RehydratingTarget, executionContexts: RehydratingExecutionContext[],
-      scripts: RehydratingScript[], connection: RehydratingConnectionInterface) {
+      scripts: RehydratingScript[], resources: RehydratingResource[], connection: RehydratingConnectionInterface) {
     super(connection);
     this.sessionId = sessionId;
     this.target = target;
     this.executionContexts = executionContexts;
     this.scripts = scripts;
+    this.resources = resources;
   }
 
   override sendMessageToFrontend(payload: ServerMessage, attachSessionId = true): void {
@@ -294,12 +297,31 @@ export class RehydratingSession extends RehydratingSessionBase {
       case 'Debugger.enable':
         this.handleDebuggerEnable(data.id);
         break;
+      case 'CSS.enable':
+        this.sendMessageToFrontend({
+          id: data.id,
+          result: {},
+        });
+        break;
       case 'Debugger.getScriptSource':
         if (data.params) {
           const params = data.params as Protocol.Debugger.GetScriptSourceRequest;
           this.handleDebuggerGetScriptSource(data.id, params.scriptId);
         }
         break;
+      case 'Page.getResourceTree':
+        this.handleGetResourceTree(data.id);
+        break;
+      case 'Page.getResourceContent': {
+        const request = data.params as unknown as Protocol.Page.GetResourceContentRequest;
+        this.handleGetResourceContent(request.frameId, request.url, data.id);
+        break;
+      }
+      case 'CSS.getStyleSheetText': {
+        const request = data.params as unknown as Protocol.CSS.GetStyleSheetTextRequest;
+        this.handleGetStyleSheetText(request.styleSheetId, data.id);
+        break;
+      }
       default:
         this.sendMessageToFrontend({
           id: data.id,
@@ -368,7 +390,22 @@ export class RehydratingSession extends RehydratingSessionBase {
   // script parsed event to communicate the current script state and respond with a mock
   // debugger id.
   private handleDebuggerEnable(id: number): void {
+    const htmlResourceUrls = new Set(this.resources.filter(r => r.mimeType === 'text/html').map(r => r.url));
+
     for (const script of this.scripts) {
+      // Handle inline scripts.
+      if (htmlResourceUrls.has(script.url)) {
+        script.embedderName = script.url;
+        // We don't have the actual embedded offset from this trace event. Non-zero
+        // values are important though: that is what `Script.isInlineScript()`
+        // checks. Otherwise these scripts would try to show individually within the
+        // Sources panel.
+        script.startColumn = 1;
+        script.startLine = 1;
+        script.endColumn = 1;
+        script.endLine = 1;
+      }
+
       this.sendMessageToFrontend({
         method: 'Debugger.scriptParsed',
         params: script,
@@ -383,4 +420,75 @@ export class RehydratingSession extends RehydratingSessionBase {
       },
     });
   }
+
+  private handleGetResourceTree(id: number): void {
+    const resources = this.resources.filter(r => r.mimeType === 'text/html' || r.mimeType === 'text/css');
+    if (!resources.length) {
+      return;
+    }
+
+    const frameTree = {
+      frame: {
+        id: this.target.targetId,
+        url: this.target.url,
+      },
+      childFrames: [],
+      resources: resources.map(r => ({
+                                 url: r.url,
+                                 type: r.mimeType === 'text/html' ? 'Document' : 'Stylesheet',
+                                 mimeType: r.mimeType,
+                                 contentSize: r.content.length,
+                               })),
+    };
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        frameTree,
+      },
+    });
+
+    const stylesheets = this.resources.filter(r => r.mimeType === 'text/css');
+    for (const stylesheet of stylesheets) {
+      this.sendMessageToFrontend({
+        method: 'CSS.styleSheetAdded',
+        params: {
+          header: {
+            styleSheetId: `sheet.${stylesheet.frame}.${stylesheet.url}`,
+            frameId: stylesheet.frame,
+            sourceURL: stylesheet.url,
+          },
+        },
+      });
+    }
+  }
+
+  private handleGetResourceContent(frame: string, url: string, id: number): void {
+    const resource = this.resources.find(r => r.frame === frame && r.url === url);
+    if (!resource) {
+      return;
+    }
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        content: resource.content,
+        base64Encoded: false,
+      },
+    });
+  }
+
+  private handleGetStyleSheetText(stylesheetId: string, id: number): void {
+    const resource = this.resources.find(r => `sheet.${r.frame}.${r.url}` === stylesheetId);
+    if (!resource) {
+      return;
+    }
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        text: resource.content,
+      },
+    });
+  }
 }

package/front_end/core/sdk/RehydratingObject.ts

@@ -14,6 +14,13 @@ export interface RehydratingScript extends Protocol.Debugger.ScriptParsedEvent {
   pid: number;
 }
 
+export interface RehydratingResource {
+  url: string;
+  content: string;
+  frame: string;
+  mimeType: string;
+}
+
 export interface RehydratingExecutionContextAuxData {
   frameId?: Protocol.Page.FrameId;
   isDefault?: boolean;
@@ -39,6 +46,7 @@ export interface HydratingDataPerTarget {
   target: RehydratingTarget;
   executionContexts: RehydratingExecutionContext[];
   scripts: RehydratingScript[];
+  resources: RehydratingResource[];
 }
 
 export interface ProtocolMessage {

package/front_end/core/sdk/TraceObject.ts

@@ -7,13 +7,17 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {NetworkRequest} from './NetworkRequest.js';
+import type {RehydratingResource} from './RehydratingObject.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
 import type {SourceMapV3} from './SourceMap.js';
 
 /** A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline. **/
 export class TraceObject {
   readonly traceEvents: Protocol.Tracing.DataCollectedEvent['value'];
-  readonly metadata: {sourceMaps?: Array<{sourceMapUrl: string, sourceMap: SourceMapV3, url: string}>};
+  readonly metadata: {
+    sourceMaps?: Array<{sourceMapUrl: string, sourceMap: SourceMapV3, url: string}>,
+    resources?: RehydratingResource[],
+  };
   constructor(payload: Protocol.Tracing.DataCollectedEvent['value']|TraceObject, meta?: Object) {
     if (Array.isArray(payload)) {
       this.traceEvents = payload;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7971,7 +7971,7 @@ export const NativeFunctions = [
   },
   {
     name: "createContext",
-    signatures: [["?options"],["gpuDevice"]]
+    signatures: [["?options"]]
   },
   {
     name: "MLGraphBuilder",

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

@@ -219,6 +219,8 @@ export interface MetaData {
   cruxFieldData?: CrUXManager.PageResult[];
   /** Currently only stores JS maps, not CSS. This never stores data url source maps. */
   sourceMaps?: MetadataSourceMap[];
+  /** Currently only stores HTML and CSS resources. */
+  resources?: MetadataResource[];
   visualTrackConfig?: PersistedTraceVisualConfig;
   hostDPR?: number;
 }
@@ -230,6 +232,13 @@ export interface MetadataSourceMap {
   sourceMap: SDK.SourceMap.SourceMapV3;
 }
 
+export interface MetadataResource {
+  url: string;
+  frame: string;
+  content: string;
+  mimeType: string;
+}
+
 export type Contents = TraceFile|Event[];
 
 export function traceEventKeyToValues(key: SerializableKey): SerializableKeyValues {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -531,13 +531,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #getChatUiState(): ChatViewState {
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
 
-    // Special case due to the way its handled downstream quirks
-    if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-      return ChatViewState.CHAT_VIEW;
-    }
-
-    if (!this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
-      return ChatViewState.CONSENT_VIEW;
+    if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE ||
+        !this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
+      return ChatViewState.DISABLED_VIEW;
     }
 
     if (this.#conversation?.type) {
@@ -986,7 +982,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getChatInputPlaceholder(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.CONSENT_VIEW || !this.#conversation) {
+    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation) {
       return i18nString(UIStrings.followTheSteps);
     }
 
@@ -1019,7 +1015,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getDisclaimerText(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.CONSENT_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
+    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
 

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

@@ -204,10 +204,6 @@ const UIStringsNotTranslate = {
    * @description Title for the add image button.
    */
   addImageButtonTitle: 'Add image',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForEmptyState: 'This is an experimental AI feature and won\'t always get it right.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -264,7 +260,7 @@ export interface ModelChatMessage {
 export type ChatMessage = UserChatMessage|ModelChatMessage;
 
 export const enum State {
-  CONSENT_VIEW = 'consent-view',
+  DISABLED_VIEW = 'disabled-view',
   CHAT_VIEW = 'chat-view',
   EXPLORE_VIEW = 'explore-view'
 }
@@ -517,6 +513,10 @@ 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,
@@ -524,35 +524,58 @@ export class ChatView extends HTMLElement {
       });
 
       // clang-format off
-      const footerContents = this.#props.conversationType
-        ? renderRelevantDataDisclaimer({
-          isLoading: this.#props.isLoading,
-          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
-          disclaimerText: this.#props.disclaimerText,
-        })
-        : html`<p>
-            ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
-            <button
-              class="link"
-              role="link"
-              jslog=${VisualLogging.link('open-ai-settings').track({
-                click: true,
-              })}
-              @click=${() => {
-                void UI.ViewManager.ViewManager.instance().showView(
-                  'chrome-ai',
-                );
-              }}
-            >${i18nString(UIStrings.learnAbout)}</button>
-          </p>`;
-
       return html`
         <footer class=${classes} jslog=${VisualLogging.section('footer')}>
-          ${footerContents}
+          ${renderRelevantDataDisclaimer({
+            isLoading: this.#props.isLoading,
+            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+            tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
+            disclaimerText: this.#props.disclaimerText
+          })}
         </footer>
       `;
+      // clang-format on
     };
+
+    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,
+          onNewConversation: this.#props.onNewConversation,
+        });
+      }
+
+      return renderChatInput({
+        isLoading: this.#props.isLoading,
+        blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+        isTextInputDisabled: this.#props.isTextInputDisabled,
+        inputPlaceholder: this.#props.inputPlaceholder,
+        disclaimerText: this.#props.disclaimerText,
+        selectedContext: this.#props.selectedContext,
+        inspectElementToggled: this.#props.inspectElementToggled,
+        multimodalInputEnabled: this.#props.multimodalInputEnabled,
+        conversationType: this.#props.conversationType,
+        imageInput: this.#props.imageInput,
+        aidaAvailability: this.#props.aidaAvailability,
+        isTextInputEmpty: this.#props.isTextInputEmpty,
+        uploadImageInputEnabled: this.#props.uploadImageInputEnabled,
+        onContextClick: this.#props.onContextClick,
+        onInspectElementClick: this.#props.onInspectElementClick,
+        onSubmit: this.#handleSubmit,
+        onTextAreaKeyDown: this.#handleTextAreaKeyDown,
+        onCancel: this.#handleCancel,
+        onNewConversation: this.#props.onNewConversation,
+        onTakeScreenshot: this.#props.onTakeScreenshot,
+        onRemoveImageInput: this.#props.onRemoveImageInput,
+        onTextInputChange: this.#props.onTextInputChange,
+        onImageUpload: this.#handleImageUpload
+      });
+    };
+
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
@@ -577,38 +600,7 @@ export class ChatView extends HTMLElement {
             onMessageContainerRef: this.#handleMessageContainerRef,
             onCopyResponseClick: this.#props.onCopyResponseClick,
           })}
-          ${this.#props.isReadOnly
-            ? renderReadOnlySection({
-                conversationType: this.#props.conversationType,
-                onNewConversation: this.#props.onNewConversation,
-              })
-            : renderChatInput({
-                isLoading: this.#props.isLoading,
-                blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-                isTextInputDisabled: this.#props.isTextInputDisabled,
-                inputPlaceholder: this.#props.inputPlaceholder,
-                state: this.#props.state,
-                disclaimerText: this.#props.disclaimerText,
-                selectedContext: this.#props.selectedContext,
-                inspectElementToggled: this.#props.inspectElementToggled,
-                multimodalInputEnabled: this.#props.multimodalInputEnabled,
-                conversationType: this.#props.conversationType,
-                imageInput: this.#props.imageInput,
-                isTextInputEmpty: this.#props.isTextInputEmpty,
-                aidaAvailability: this.#props.aidaAvailability,
-                uploadImageInputEnabled: this.#props.uploadImageInputEnabled,
-                onContextClick: this.#props.onContextClick,
-                onInspectElementClick: this.#props.onInspectElementClick,
-                onSubmit: this.#handleSubmit,
-                onTextAreaKeyDown: this.#handleTextAreaKeyDown,
-                onCancel: this.#handleCancel,
-                onNewConversation: this.#props.onNewConversation,
-                onTakeScreenshot: this.#props.onTakeScreenshot,
-                onRemoveImageInput: this.#props.onRemoveImageInput,
-                onTextInputChange: this.#props.onTextInputChange,
-                onImageUpload: this.#handleImageUpload,
-              })
-          }
+          ${renderInputOrReadOnlySection()}
         </main>
        ${renderFooter()}
       </div>
@@ -1412,7 +1404,6 @@ function renderChatInput({
   blockedByCrossOrigin,
   isTextInputDisabled,
   inputPlaceholder,
-  state,
   selectedContext,
   inspectElementToggled,
   multimodalInputEnabled,
@@ -1437,7 +1428,6 @@ function renderChatInput({
   blockedByCrossOrigin: boolean,
   isTextInputDisabled: boolean,
   inputPlaceholder: Platform.UIString.LocalizedString,
-  state: State,
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null,
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
@@ -1462,8 +1452,7 @@ function renderChatInput({
     return Lit.nothing;
   }
 
-  const shouldShowMultiLine = state !== State.CONSENT_VIEW &&
-      aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE && selectedContext;
+  const shouldShowMultiLine = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE && selectedContext;
   const chatInputContainerCls = Lit.Directives.classMap({
     'chat-input-container': true,
     'single-line-layout': !shouldShowMultiLine,
@@ -1618,11 +1607,10 @@ function renderMainContents({
   conversationType?: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
-  if (state === State.CONSENT_VIEW) {
-    return renderDisabledState(renderConsentViewContents());
-  }
-
-  if (aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+  if (state === State.DISABLED_VIEW) {
+    if (aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return renderDisabledState(renderConsentViewContents());
+    }
     return renderDisabledState(renderAidaUnavailableContents(aidaAvailability));
   }
 

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -6,8 +6,6 @@ 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 IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -23,8 +21,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheTre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.BackForwardCacheView.BackForwardCacheView>;
+  private view?: ApplicationComponents.BackForwardCacheView.BackForwardCacheView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.backForwardCache), false, 'bfcache');
@@ -39,8 +36,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BackForwardCacheView.BackForwardCacheView());
+      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('back-forward-cache');