chrome-devtools-frontend 1.0.1536371 → 1.0.1537268

package/front_end/panels/settings/aiSettingsTab.css

@@ -4,185 +4,188 @@
  * found in the LICENSE file.
  */
 
-* {
-  box-sizing: border-box;
-}
-
-:host {
-  container-type: inline-size;
-  container-name: ai-settings;
-}
+@scope to (devtools-widget > *){
+  .ai-settings-container {
+    container-type: inline-size;
+    container-name: ai-settings;
+
+    @container ai-settings (min-width: 480px) {
+      .settings-container-wrapper {
+        align-items: center;
+      }
+    }
+  }
 
-.shared-disclaimer {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-5);
-  padding: var(--sys-size-9) var(--sys-size-11);
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
+  * {
+    box-sizing: border-box;
+    min-height: auto;
+  }
 
-  h2 {
-    font: var(--sys-typescale-headline5);
-    margin: 0 0 var(--sys-size-6);
+  .shared-disclaimer {
+    background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
+    border-radius: var(--sys-size-5);
+    padding: var(--sys-size-9) var(--sys-size-11);
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+
+    h2 {
+      font: var(--sys-typescale-headline5);
+      margin: 0 0 var(--sys-size-6);
+    }
   }
-}
 
-.disclaimer-list-header {
-  font: var(--sys-typescale-body5-medium);
-  margin: 0;
-}
+  .disclaimer-list-header {
+    font: var(--sys-typescale-body5-medium);
+    margin: 0;
+  }
 
-.disclaimer-list {
-  padding: var(--sys-size-6) 0 0;
-  display: grid;
-  grid-template-columns: var(--sys-size-12) auto;
-  gap: var(--sys-size-6) 0;
-  line-height: var(--sys-typescale-body5-line-height);
-}
+  .disclaimer-list {
+    padding: var(--sys-size-6) 0 0;
+    display: grid;
+    grid-template-columns: var(--sys-size-12) auto;
+    gap: var(--sys-size-6) 0;
+    line-height: var(--sys-typescale-body5-line-height);
+  }
 
-.settings-container {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level2);
-  margin: var(--sys-size-11) 0 var(--sys-size-4);
-  line-height: var(--sys-typescale-body5-line-height);
-  min-width: var(--sys-size-28);
-  max-width: var(--sys-size-35);
-  background-color: var(--app-color-card-background);
-}
+  .settings-container {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    border-radius: var(--sys-size-5);
+    box-shadow: var(--sys-elevation-level2);
+    margin: var(--sys-size-11) 0 var(--sys-size-4);
+    line-height: var(--sys-typescale-body5-line-height);
+    min-width: var(--sys-size-28);
+    max-width: var(--sys-size-35);
+    background-color: var(--app-color-card-background);
+  }
 
-.accordion-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  .accordion-header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.icon-container,
-.dropdown {
-  padding: 0 var(--sys-size-8);
-}
+  .icon-container,
+  .dropdown {
+    padding: 0 var(--sys-size-8);
+  }
 
-.toggle-container {
-  padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
+  .toggle-container {
+    padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.expansion-grid {
-  padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
-  display: grid;
-  grid-template-columns: var(--sys-size-9) auto;
-  gap: var(--sys-size-6) var(--sys-size-8);
-  line-height: var(--sys-typescale-body5-line-height);
-  color: var(--sys-color-on-surface-subtle);
-}
+  .expansion-grid {
+    padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
+    display: grid;
+    grid-template-columns: var(--sys-size-9) auto;
+    gap: var(--sys-size-6) var(--sys-size-8);
+    line-height: var(--sys-typescale-body5-line-height);
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.expansion-grid-whole-row {
-  grid-column: span 2;
-  font-weight: var(--ref-typeface-weight-medium);
-  color: var(--sys-color-on-surface);
-  padding-top: var(--sys-size-4);
-  margin: 0;
-  font-size: inherit;
-}
+  .expansion-grid-whole-row {
+    grid-column: span 2;
+    font-weight: var(--ref-typeface-weight-medium);
+    color: var(--sys-color-on-surface);
+    padding-top: var(--sys-size-4);
+    margin: 0;
+    font-size: inherit;
+  }
 
-.setting-description {
-  color: var(--sys-color-on-surface-subtle);
-}
+  .setting-description {
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.centered {
-  display: grid;
-  place-content: center;
-}
+  .centered {
+    display: grid;
+    place-content: center;
+  }
 
-.setting-card {
-  padding: var(--sys-size-6) 0;
+  .setting-card {
+    padding: var(--sys-size-6) 0;
 
-  h2 {
-    margin: 0;
-    font: inherit;
+    h2 {
+      margin: 0;
+      font: inherit;
+    }
   }
-}
 
-.divider {
-  margin: var(--sys-size-5) 0;
-  border-left: var(--sys-size-1) solid var(--sys-color-divider);
-}
-
-.accordion-header ~ .accordion-header,
-.divider ~ .divider,
-.toggle-container ~ .toggle-container {
-  border-top: var(--sys-size-1) solid var(--sys-color-divider);
-}
+  .divider {
+    margin: var(--sys-size-5) 0;
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row {
-  grid-column: span 5;
-  overflow: hidden;
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
-}
+  .accordion-header ~ .accordion-header,
+  .divider ~ .divider,
+  .toggle-container ~ .toggle-container {
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row.open {
-  grid-template-rows: 1fr;
-}
+  .whole-row {
+    grid-column: span 5;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
+  }
 
-.overflow-hidden {
-  overflow: hidden;
-}
+  .whole-row.open {
+    grid-template-rows: 1fr;
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: var(--sys-size-2);
-  padding: 0;
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  .overflow-hidden {
+    overflow: hidden;
+  }
 
-.padded {
-  padding: var(--sys-size-2) 0;
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: var(--sys-size-2);
+    padding: 0;
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.settings-container-wrapper {
-  position: absolute;
-  inset: var(--sys-size-8) 0 0;
-  overflow: auto;
-  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
-  display: flex;
-  flex-direction: column;
-}
+  .padded {
+    padding: var(--sys-size-2) 0;
+  }
 
-@container ai-settings (min-width: 480px) {
   .settings-container-wrapper {
-    align-items: center;
+    position: absolute;
+    inset: var(--sys-size-8) 0 0;
+    overflow: auto;
+    padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
+    display: flex;
+    flex-direction: column;
   }
-}
 
-header {
-  font-size: var(--sys-typescale-headline3-size);
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  header {
+    font-size: var(--sys-typescale-headline3-size);
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.disabled-explainer {
-  background-color: var(--sys-color-surface-yellow);
-  border-radius: var(--sys-shape-corner-medium-small);
-  margin-top: var(--sys-size-11);
-  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
-  width: 100%;
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
-  color: var(--sys-color-yellow);
-}
+  .disabled-explainer {
+    background-color: var(--sys-color-surface-yellow);
+    border-radius: var(--sys-shape-corner-medium-small);
+    margin-top: var(--sys-size-11);
+    padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
+    width: 100%;
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+    color: var(--sys-color-yellow);
+  }
 
-.disabled-explainer-row {
-  display: flex;
-  gap: var(--sys-size-6);
-  margin-top: var(--sys-size-4);
+  .disabled-explainer-row {
+    display: flex;
+    gap: var(--sys-size-6);
+    margin-top: var(--sys-size-4);
+  }
 }

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

@@ -7,7 +7,6 @@ import './emulation/emulation-meta.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Settings from './settings.js';
@@ -117,7 +116,7 @@ UI.ViewManager.registerViewExtension({
   order: 2,
   async loadView() {
     const Settings = await loadSettingsModule();
-    return LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, new Settings.AISettingsTab.AISettingsTab());
+    return new Settings.AISettingsTab.AISettingsTab();
   },
   iconName: 'button-magic',
   settings: ['console-insights-enabled'],

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, render} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import dialogStyles from './dialog.css.js';
@@ -27,28 +27,29 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/AddSourceMapURLDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
 
 interface ViewInput {
   label: Platform.UIString.LocalizedString;
-  onKeyDown: (event: KeyboardEvent) => void;
+  onEnter: (value: string) => void;
+  onInputChange: (value: string) => void;
   apply: () => void;
 }
 
-interface ViewOutput {
-  input: HTMLInputElement;
-}
-
-type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${dialogStyles}</style>
     <label>${input.label}</label>
     <input class="harmony-input add-source-map" spellcheck="false" type="text"
         jslog=${VisualLogging.textField('url').track({keydown: 'Enter', change: true})}
-        @keydown=${input.onKeyDown} ${ref(e => { output.input = e as HTMLInputElement; })}>
+        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') {
+          e.consume(true);
+          input.onEnter((e.target as HTMLInputElement).value); }
+        }}
+        @change=${(e: Event) => input.onInputChange((e.target as HTMLInputElement).value)}
+        autofocus>
     <devtools-button @click=${input.apply} .jslogContext=${'add'}
         .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.add)}</devtools-button>`,
     target);
@@ -56,7 +57,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class AddDebugInfoURLDialog extends UI.Widget.HBox {
-  private input!: HTMLInputElement;
+  private url = '';
   private readonly dialog: UI.Dialog.Dialog;
   private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
   private constructor(
@@ -66,20 +67,14 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
 
     const viewInput = {
       label,
-      onKeyDown: this.onKeyDown.bind(this),
+      onEnter: this.onEnter.bind(this),
+      onInputChange: this.onInputChange.bind(this),
       apply: this.apply.bind(this),
     };
-    const that = this;
-    const viewOutput = {
-      set input(input: HTMLInputElement) {
-        that.input = input;
-      },
-    };
-    view(viewInput, viewOutput, this.contentElement);
+    view(viewInput, undefined, this.contentElement);
 
     this.dialog = new UI.Dialog.Dialog(jslogContext);
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-    this.dialog.setDefaultFocusedElement(this.input);
 
     this.callback = callback;
   }
@@ -103,14 +98,16 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
     this.callback(value);
   }
 
+  private onInputChange(value: string): void {
+    this.url = value;
+  }
+
   private apply(): void {
-    this.done(this.input.value as Platform.DevToolsPath.UrlString);
+    this.done(this.url as Platform.DevToolsPath.UrlString);
   }
 
-  private onKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      event.consume(true);
-      this.apply();
-    }
+  private onEnter(value: string): void {
+    this.url = value;
+    this.apply();
   }
 }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -42,7 +42,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
@@ -1364,7 +1364,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   async saveToFile(config: {
-    includeScriptContent: boolean,
+    includeResourceContent: boolean,
     includeSourceMaps: boolean,
     /**
      * Includes many things:
@@ -1399,9 +1399,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       if (Trace.Types.Events.isAnyScriptSourceEvent(event) && event.name !== 'StubScriptCatchup') {
         const mappedScript = scriptByIdMap.get(`${event.args.data.isolate}.${event.args.data.scriptId}`);
 
-        // If the checkbox to include script content is not checked or if it comes from and
-        // extension we dont include the script content.
-        if (!config.includeScriptContent ||
+        if (!config.includeResourceContent ||
             (mappedScript?.url && Trace.Helpers.Trace.isExtensionUrl(mappedScript.url))) {
           return {
             cat: event.cat,
@@ -1434,7 +1432,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     try {
       await this.innerSaveToFile(traceEvents, metadata, {
-        includeScriptContent: config.includeScriptContent,
+        includeResourceContent: config.includeResourceContent,
         includeSourceMaps: config.includeSourceMaps,
         addModifications: config.addModifications,
         shouldCompress: config.shouldCompress,
@@ -1454,7 +1452,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   async innerSaveToFile(traceEvents: readonly Trace.Types.Events.Event[], metadata: Trace.Types.File.MetaData, config: {
-    includeScriptContent: boolean,
+    includeResourceContent: boolean,
     includeSourceMaps: boolean,
     addModifications: boolean,
     shouldCompress: boolean,
@@ -1464,9 +1462,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         Platform.DateUtilities.toISO8601Compact(metadata.startTime ? new Date(metadata.startTime) : new Date());
 
     const isCpuProfile = metadata.dataOrigin === Trace.Types.File.DataOrigin.CPU_PROFILE;
-    const {includeScriptContent, includeSourceMaps} = config;
+    const {includeResourceContent, includeSourceMaps} = config;
     metadata.enhancedTraceVersion =
-        includeScriptContent ? SDK.EnhancedTracesParser.EnhancedTracesParser.enhancedTraceVersion : undefined;
+        includeResourceContent ? SDK.EnhancedTracesParser.EnhancedTracesParser.enhancedTraceVersion : undefined;
 
     let fileName =
         (isCpuProfile ? `CPU-${isoDate}.cpuprofile` : `Trace-${isoDate}.json`) as Platform.DevToolsPath.RawPathString;
@@ -1477,10 +1475,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       blobParts = [JSON.stringify(profile)];
     } else {
       const filteredMetadataSourceMaps =
-          includeScriptContent && includeSourceMaps ? this.#filterMetadataSourceMaps(metadata) : undefined;
+          includeResourceContent && includeSourceMaps ? this.#filterMetadataSourceMaps(metadata) : undefined;
+      const filteredResources = includeResourceContent ? this.#filterMetadataResoures(metadata) : undefined;
       const formattedTraceIter = traceJsonGenerator(traceEvents, {
         ...metadata,
         sourceMaps: filteredMetadataSourceMaps,
+        resources: filteredResources,
       });
       blobParts = Array.from(formattedTraceIter);
     }
@@ -1531,7 +1531,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions;
     const state = exportTraceOptionsElement.state;
     await this.saveToFile({
-      includeScriptContent: state.includeScriptContent,
+      includeResourceContent: state.includeResourceContent,
       includeSourceMaps: state.includeSourceMaps,
       addModifications: state.includeAnnotations,
       shouldCompress: state.shouldCompress,
@@ -1550,6 +1550,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     });
   }
 
+  #filterMetadataResoures(metadata: Trace.Types.File.MetaData): Trace.Types.File.MetadataResource[]|undefined {
+    if (!metadata.resources) {
+      return undefined;
+    }
+
+    return metadata.resources;
+  }
+
   #showExportTraceErrorDialog(error: Error): void {
     if (this.statusDialog) {
       this.statusDialog.remove();
@@ -2744,6 +2752,45 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     };
   }
 
+  async #retainResourceContentsForEnhancedTrace(
+      parsedTrace: Trace.TraceModel.ParsedTrace, metadata: Trace.Types.File.MetaData): Promise<void> {
+    // Scripts are already stored as trace events.
+    const resourceTypesToRetain =
+        new Set([Protocol.Network.ResourceType.Document, Protocol.Network.ResourceType.Stylesheet]);
+
+    for (const request of parsedTrace.data.NetworkRequests.byId.values()) {
+      if (!resourceTypesToRetain.has(request.args.data.resourceType)) {
+        continue;
+      }
+
+      const url = request.args.data.url as Platform.DevToolsPath.UrlString;
+      const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(url);
+      if (!resource) {
+        continue;
+      }
+
+      const content = await resource.requestContentData();
+      if ('error' in content) {
+        continue;
+      }
+
+      if (!content.isTextContent) {
+        continue;
+      }
+
+      if (!metadata.resources) {
+        metadata.resources = [];
+      }
+
+      metadata.resources.push({
+        url,
+        frame: resource.frameId ?? '',
+        content: content.text,
+        mimeType: content.mimeType,
+      });
+    }
+  }
+
   async #executeNewTrace(
       collectedEvents: Trace.Types.Events.Event[], isFreshRecording: boolean,
       metadata: Trace.Types.File.MetaData|null): Promise<void> {
@@ -2772,11 +2819,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Store all source maps on the trace metadata.
     // If not fresh, we can't validate the maps are still accurate.
+    // Also handle HTML content.
     if (isFreshRecording && metadata) {
       const traceIndex = this.#traceEngineModel.lastTraceIndex();
       const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
       if (parsedTrace) {
         await this.#retainSourceMapsForEnhancedTrace(parsedTrace, metadata);
+        await this.#retainResourceContentsForEnhancedTrace(parsedTrace, metadata);
       }
     }
   }