chrome-devtools-frontend 1.0.1576287 → 1.0.1576915

package/front_end/core/sdk/DebuggerModel.ts

@@ -1186,11 +1186,21 @@ export interface MissingDebugFiles {
   initiator: PageResourceLoadInitiator;
 }
 
-export interface MissingDebugInfoDetails {
-  details: string;
-  resources: MissingDebugFiles[];
+export const enum MissingDebugInfoType {
+  /** No debug information at all for the call frame */
+  NO_INFO = 'NO_INFO',
+
+  /** Some debug information available, but it references files with debug information we were not able to retrieve */
+  PARTIAL_INFO = 'PARTIAL_INFO',
 }
 
+export type MissingDebugInfo = {
+  type: MissingDebugInfoType.NO_INFO,
+}|{
+  type: MissingDebugInfoType.PARTIAL_INFO,
+  missingDebugFiles: MissingDebugFiles[],
+};
+
 export class CallFrame {
   debuggerModel: DebuggerModel;
   readonly script: Script;
@@ -1202,7 +1212,7 @@ export class CallFrame {
   readonly functionName: string;
   readonly #functionLocation: Location|undefined;
   #returnValue: RemoteObject|null;
-  missingDebugInfoDetails: MissingDebugInfoDetails|null;
+  missingDebugInfoDetails: MissingDebugInfo|null;
   readonly exception: RemoteObject|null;
 
   readonly canBeRestarted: boolean;

package/front_end/generated/SupportedCSSProperties.js

@@ -499,6 +499,7 @@ export const generatedProperties = [
    "font-variation-settings",
    "font-weight",
    "forced-color-adjust",
+   "frame-sizing",
    "gap-rule-overlap",
    "grid-auto-columns",
    "grid-auto-flow",
@@ -518,6 +519,7 @@ export const generatedProperties = [
    "hyphenate-character",
    "hyphenate-limit-chars",
    "hyphens",
+   "image-animation",
    "image-orientation",
    "image-rendering",
    "inherits",
@@ -2597,6 +2599,16 @@ export const generatedProperties = [
   ],
   "name": "forced-color-adjust"
  },
+ {
+  "keywords": [
+   "auto",
+   "content-width",
+   "content-height",
+   "content-block-size",
+   "content-inline-size"
+  ],
+  "name": "frame-sizing"
+ },
  {
   "longhands": [
    "row-gap",
@@ -2779,6 +2791,15 @@ export const generatedProperties = [
   ],
   "name": "hyphens"
  },
+ {
+  "inherited": true,
+  "keywords": [
+   "normal",
+   "running",
+   "paused"
+  ],
+  "name": "image-animation"
+ },
  {
   "inherited": true,
   "name": "image-orientation"
@@ -6034,6 +6055,15 @@ export const generatedPropertyValues = {
    "preserve-parent-color"
   ]
  },
+ "frame-sizing": {
+  "values": [
+   "auto",
+   "content-width",
+   "content-height",
+   "content-block-size",
+   "content-inline-size"
+  ]
+ },
  "gap-rule-overlap": {
   "values": [
    "row-over-column",
@@ -6130,6 +6160,13 @@ export const generatedPropertyValues = {
    "auto"
   ]
  },
+ "image-animation": {
+  "values": [
+   "normal",
+   "running",
+   "paused"
+  ]
+ },
  "image-rendering": {
   "values": [
    "auto",

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -58,16 +58,6 @@ const UIStrings = {
    * @example {File not found} PH3
    */
   failedToLoadDebugSymbolsFor: '[{PH1}] Failed to load debug symbols for {PH2} ({PH3})',
-  /**
-   * @description Error message that is displayed in UI debugging information cannot be found for a call frame
-   * @example {main} PH1
-   */
-  failedToLoadDebugSymbolsForFunction: 'No debug information for function "{PH1}"',
-  /**
-   * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
-   * @example {mainp.debug.wasm.dwp} PH1
-   */
-  debugSymbolsIncomplete: 'The debug information for function {PH1} is incomplete',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('models/bindings/DebuggerLanguagePlugins.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -508,14 +498,12 @@ export class DebuggerLanguagePluginManager implements
               return functionInfo.frames.map(({name}, index) => callFrame.createVirtualCallFrame(index, name));
             }
             if ('missingSymbolFiles' in functionInfo && functionInfo.missingSymbolFiles.length) {
-              const resources = functionInfo.missingSymbolFiles;
-              const details = i18nString(UIStrings.debugSymbolsIncomplete, {PH1: callFrame.functionName});
-              callFrame.missingDebugInfoDetails = {details, resources};
-            } else {
               callFrame.missingDebugInfoDetails = {
-                details: i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: callFrame.functionName}),
-                resources: [],
+                type: SDK.DebuggerModel.MissingDebugInfoType.PARTIAL_INFO,
+                missingDebugFiles: functionInfo.missingSymbolFiles,
               };
+            } else {
+              callFrame.missingDebugInfoDetails = {type: SDK.DebuggerModel.MissingDebugInfoType.NO_INFO};
             }
           }
           return callFrame;
@@ -792,26 +780,18 @@ export class DebuggerLanguagePluginManager implements
         const rawLocation = new SDK.DebuggerModel.Location(
             script.debuggerModel, script.scriptId, frame.lineNumber, frame.columnNumber, index);
         const uiLocation = await this.rawLocationToUILocation(rawLocation);
-        return {
-          uiSourceCode: uiLocation?.uiSourceCode,
-          url: uiLocation ? undefined : frame.url,
-          name,
-          line: uiLocation?.lineNumber ?? frame.lineNumber,
-          column: uiLocation?.columnNumber ?? frame.columnNumber,
-        };
+        return translatedFromUILocation(uiLocation, name, frame);
       });
 
       translatedFrames.push(await Promise.all(framePromises));
       return true;
     }
 
-    // Identity map the frame, then add the missing debug info details.
-    const mappedFrame: (typeof translatedFrames)[number][number] = {
-      url: frame.url,
-      name: frame.functionName,
-      line: frame.lineNumber,
-      column: frame.columnNumber,
-    };
+    // Translate the location only. We go through via "DebuggerWorkspaceBinding". It'll still try the plugin
+    // first, but this way, we'll get a UISourceCode for the raw script if the plugin fails to translate.
+    const uiLocation = await this.#debuggerWorkspaceBinding.rawLocationToUILocation(
+        new SDK.DebuggerModel.Location(script.debuggerModel, script.scriptId, frame.lineNumber, frame.columnNumber));
+    const mappedFrame = translatedFromUILocation(uiLocation, frame.functionName, frame);
 
     if ('missingSymbolFiles' in functionInfo && functionInfo.missingSymbolFiles.length) {
       translatedFrames.push([{
@@ -831,6 +811,27 @@ export class DebuggerLanguagePluginManager implements
     }
 
     return true;
+
+    function translatedFromUILocation(
+        uiLocation: Workspace.UISourceCode.UILocation|null, name: string|undefined,
+        fallback: StackTraceImpl.Trie.RawFrame): (typeof translatedFrames)[number][number] {
+      if (uiLocation) {
+        return {
+          uiSourceCode: uiLocation.uiSourceCode,
+          url: undefined,
+          name,
+          line: uiLocation.lineNumber,
+          column: uiLocation.columnNumber ?? -1,
+        };
+      }
+      return {
+        uiSourceCode: undefined,
+        url: fallback.url,
+        name: fallback.functionName,
+        line: fallback.lineNumber,
+        column: fallback.columnNumber,
+      };
+    }
   }
 
   scriptsForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SDK.Script.Script[] {
@@ -920,15 +921,13 @@ export class DebuggerLanguagePluginManager implements
       // for the DebuggerModel again, which may disappear
       // in the meantime...
       void rawModuleHandle.addRawModulePromise.then(sourceFileURLs => {
-        if (!('missingSymbolFiles' in sourceFileURLs)) {
-          // The script might have disappeared meanwhile...
-          if (script.debuggerModel.scriptForId(script.scriptId) === script) {
-            const modelData = this.#debuggerModelToData.get(script.debuggerModel);
-            if (modelData) {  // The DebuggerModel could have disappeared meanwhile...
-              modelData.addSourceFiles(script, sourceFileURLs);
-              void this.#debuggerWorkspaceBinding.updateLocations(script);
-            }
+        // The script might have disappeared meanwhile...
+        if (script.debuggerModel.scriptForId(script.scriptId) === script) {
+          const modelData = this.#debuggerModelToData.get(script.debuggerModel);
+          if (modelData && Array.isArray(sourceFileURLs)) {  // The DebuggerModel could have disappeared meanwhile...
+            modelData.addSourceFiles(script, sourceFileURLs);
           }
+          void this.#debuggerWorkspaceBinding.updateLocations(script);
         }
       });
       return;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7137,10 +7137,18 @@ export const NativeFunctions = [
     name: "intercept",
     signatures: [["?options"]]
   },
+  {
+    name: "deferPageSwap",
+    signatures: [["options"]]
+  },
   {
     name: "NavigationCurrentEntryChangeEvent",
     signatures: [["type","eventInit"]]
   },
+  {
+    name: "addRestoreCallback",
+    signatures: [["callback"]]
+  },
   {
     name: "addHandler",
     signatures: [["handler"]]

package/front_end/models/stack_trace/StackTrace.ts

@@ -65,29 +65,29 @@ export interface EventTypes {
 
 /**
  * A small wrapper around a DebuggableFrame usable as a UI.Context flavor.
- * This is necessary as Frame and DebuggableFrame are updated in place, but
- * for UI.Context we need a new instance.
+ * This is necessary as DebuggableFrame are just interfaces and the impl classes are hidden.
+ *
+ * Moreover, re-translation creates a new DebuggableFrame instance even though the
+ * translation result stays the same, in which case we don't need a new instance for the flavor.
  */
-export class DebuggableFrameFlavor implements DebuggableFrame {
+export class DebuggableFrameFlavor {
   static #last?: DebuggableFrameFlavor;
 
-  readonly url?: string;
-  readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
-  readonly name?: string;
-  readonly line: number;
-  readonly column: number;
-  readonly missingDebugInfo?: MissingDebugInfo;
-  readonly sdkFrame: SDK.DebuggerModel.CallFrame;
+  readonly frame: DebuggableFrame;
+
+  // TODO(crbug.com/465879478): Remove once this is no longer part of SDK.CallFrame.
+  //     We need to stash this separately because DebuggerModel sets this on CallFrame after the
+  //     fact so we can't just check it in the `equals` below.
+  readonly #missingDebugInfo: SDK.DebuggerModel.MissingDebugInfo|null;
 
   /** Use the static {@link for}. Only public to satisfy the `setFlavor` Ctor type  */
   constructor(frame: DebuggableFrame) {
-    this.url = frame.url;
-    this.uiSourceCode = frame.uiSourceCode;
-    this.name = frame.name;
-    this.line = frame.line;
-    this.column = frame.column;
-    this.missingDebugInfo = frame.missingDebugInfo;
-    this.sdkFrame = frame.sdkFrame;
+    this.frame = frame;
+    this.#missingDebugInfo = frame.sdkFrame.missingDebugInfoDetails;
+  }
+
+  get sdkFrame(): SDK.DebuggerModel.CallFrame {
+    return this.frame.sdkFrame;
   }
 
   /** @returns the same instance of DebuggableFrameFlavor for repeated calls with the same (i.e. deep equal) DebuggableFrame */
@@ -97,7 +97,8 @@ export class DebuggableFrameFlavor implements DebuggableFrame {
           a.column === b.column && a.sdkFrame === b.sdkFrame;
     }
 
-    if (!DebuggableFrameFlavor.#last || !equals(DebuggableFrameFlavor.#last, frame)) {
+    if (!DebuggableFrameFlavor.#last || !equals(DebuggableFrameFlavor.#last.frame, frame) ||
+        DebuggableFrameFlavor.#last.#missingDebugInfo !== frame.sdkFrame.missingDebugInfoDetails) {
       DebuggableFrameFlavor.#last = new DebuggableFrameFlavor(frame);
     }
     return DebuggableFrameFlavor.#last;

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -452,9 +452,11 @@ export class AXBreadcrumb {
 
     this.#element = document.createElement('div');
     this.#element.classList.add('ax-breadcrumb');
-    this.#element.setAttribute(
-        'jslog',
-        `${VisualLogging.treeItem().track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'})}`);
+    this.#element.setAttribute('jslog', `${VisualLogging.treeItem().track({
+                                 click: true,
+                                 resize: true,
+                                 keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'
+                               })}`);
     elementsToAXBreadcrumb.set(this.#element, this);
 
     this.#nodeElement = document.createElement('div');

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

@@ -110,6 +110,10 @@ const UIStringsNotTranslate = {
    * @description The generic name of the AI agent (do not translate)
    */
   ai: 'AI',
+  /**
+   * @description Gemini (do not translate)
+   */
+  gemini: 'Gemini',
   /**
    * @description The fallback text when we can't find the user full name
    */
@@ -306,7 +310,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       <div class="message-info">
         <devtools-icon name=${icon}></devtools-icon>
         <div class="message-name">
-          <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
+          <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
         </div>
       </div>
       ${Lit.Directives.repeat(

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -98,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <div class="animation-group-preview-ui">
       <button
-        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true})}
+        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true, resize: true})}
         class=${classes}
         role="option"
         aria-label=${input.label}

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,6 +180,7 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
+                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem()}>${url}</div>`));
+    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,7 +361,9 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem().track({
+    resize: true
+  })}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,6 +238,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
+                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1457,6 +1457,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
+                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -680,6 +680,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+          resize: true,
           drag: true,
           click: true,
         })}`);

package/front_end/panels/elements/LayoutPane.ts

@@ -228,26 +228,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
+  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item()}>
+          jslog=${VisualLogging.item().track({resize: true})}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({
-    click: true
-  })}>
+          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
-  }
-  }></devtools-node-text>
+                nodeId: element.domId,
+                nodeTitle: element.name,
+                nodeClasses: element.domClasses
+              }}>
+            </devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true})}
+                    jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -194,7 +194,8 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${
+        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -73,7 +73,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           })}
                @click=${() => input.onPlayerClick(player.playerID)}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
-               jslog=${VisualLogging.item('player').track({click: true})}>
+               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -409,7 +409,8 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
+    this.waterfallHeaderElement.setAttribute(
+        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);