chrome-devtools-frontend 1.0.971727 → 1.0.972361

package/front_end/entrypoints/lighthouse_worker/LighthouseService.ts

@@ -118,15 +118,13 @@ async function start(method: string, params: any): Promise<unknown> {
     if (method === 'snapshot') {
       // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
       return await self.runLighthouseSnapshot({
-        url,
         config,
         page: puppeteerConnection.page,
       });
     }
 
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-    return await self.runLighthouseNavigation({
-      url,
+    return await self.runLighthouseNavigation(url, {
       config,
       page: puppeteerConnection.page,
     });

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -123,24 +123,10 @@ export class CSSWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<S
 
   propertyUILocation(cssProperty: SDK.CSSProperty.CSSProperty, forName: boolean): Workspace.UISourceCode.UILocation
       |null {
-    const style = cssProperty.ownerStyle;
-    if (!style || style.type !== SDK.CSSStyleDeclaration.Type.Regular || !style.styleSheetId) {
-      return null;
-    }
-    const header = style.cssModel().styleSheetHeaderForId(style.styleSheetId);
-    if (!header) {
+    const rawLocation = this.propertyRawLocation(cssProperty, forName);
+    if (!rawLocation) {
       return null;
     }
-
-    const range = forName ? cssProperty.nameRange() : cssProperty.valueRange();
-    if (!range) {
-      return null;
-    }
-
-    const lineNumber = range.startLine;
-    const columnNumber = range.startColumn;
-    const rawLocation = new SDK.CSSModel.CSSLocation(
-        header, header.lineNumberInSource(lineNumber), header.columnNumberInSource(lineNumber, columnNumber));
     return this.rawLocationToUILocation(rawLocation);
   }
 

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -13,6 +13,11 @@ interface DiffRequestOptions {
   shouldFormatDiff: boolean;
 }
 
+interface DiffResponse {
+  diff: Diff.Diff.DiffArray;
+  formattedCurrentMapping?: FormatterModule.ScriptFormatter.FormatterSourceMapping;
+}
+
 export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly uiSourceCodeDiffs: WeakMap<Workspace.UISourceCode.UISourceCode, UISourceCodeDiff>;
   private readonly loadingUISourceCodes:
@@ -35,7 +40,7 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 
   requestDiff(uiSourceCode: Workspace.UISourceCode.UISourceCode, diffRequestOptions: DiffRequestOptions):
-      Promise<Diff.Diff.DiffArray|null> {
+      Promise<DiffResponse|null> {
     return this.uiSourceCodeDiff(uiSourceCode).requestDiff(diffRequestOptions);
   }
 
@@ -185,7 +190,7 @@ export type EventTypes = {
 
 export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourceCodeDiffEventTypes> {
   private uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private requestDiffPromise: Promise<Diff.Diff.DiffArray|null>|null;
+  private requestDiffPromise: Promise<DiffResponse|null>|null;
   private pendingChanges: number|null;
   dispose: boolean;
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
@@ -218,7 +223,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     }
   }
 
-  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<DiffResponse|null> {
     if (!this.requestDiffPromise) {
       this.requestDiffPromise = this.innerRequestDiff(diffRequestOptions);
     }
@@ -237,7 +242,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     return content.content || ('error' in content && content.error) || '';
   }
 
-  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<DiffResponse|null> {
     if (this.dispose) {
       return null;
     }
@@ -270,15 +275,22 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     if (current === null || baseline === null) {
       return null;
     }
+    let formattedCurrentMapping;
     if (shouldFormatDiff) {
       baseline = (await FormatterModule.ScriptFormatter.format(
                       this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), baseline))
                      .formattedContent;
-      current = (await FormatterModule.ScriptFormatter.format(
-                     this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current))
-                    .formattedContent;
+      const formatCurrentResult = await FormatterModule.ScriptFormatter.format(
+          this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current);
+      current = formatCurrentResult.formattedContent;
+      formattedCurrentMapping = formatCurrentResult.formattedMapping;
     }
-    return Diff.Diff.DiffWrapper.lineDiff(baseline.split(/\r\n|\n|\r/), current.split(/\r\n|\n|\r/));
+    const reNewline = /\r\n?|\n/;
+    const diff = Diff.Diff.DiffWrapper.lineDiff(baseline.split(reNewline), current.split(reNewline));
+    return {
+      diff,
+      formattedCurrentMapping,
+    };
   }
 }
 

package/front_end/panels/changes/ChangesView.ts

@@ -173,7 +173,7 @@ export class ChangesView extends UI.Widget.VBox {
     }
 
     if (!this.selectedUISourceCode) {
-      this.renderDiffRows(null);
+      this.renderDiffRows();
       return;
     }
     const uiSourceCode = this.selectedUISourceCode;
@@ -181,12 +181,12 @@ export class ChangesView extends UI.Widget.VBox {
       this.hideDiff(i18nString(UIStrings.binaryData));
       return;
     }
-    const diff = await this.workspaceDiff.requestDiff(
+    const diffResponse = await this.workspaceDiff.requestDiff(
         uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
     if (this.selectedUISourceCode !== uiSourceCode) {
       return;
     }
-    this.renderDiffRows(diff);
+    this.renderDiffRows(diffResponse?.diff);
   }
 
   private hideDiff(message: string): void {
@@ -197,7 +197,7 @@ export class ChangesView extends UI.Widget.VBox {
     this.emptyWidget.showWidget();
   }
 
-  private renderDiffRows(diff: Diff.Diff.DiffArray|null): void {
+  private renderDiffRows(diff?: Diff.Diff.DiffArray): void {
     if (!diff || (diff.length === 1 && diff[0][0] === Diff.Diff.Operation.Equal)) {
       this.hideDiff(i18nString(UIStrings.noChanges));
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1043,16 +1043,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!url) {
       return false;
     }
-    const changedLines = this.#urlToChangeTracker.get(url)?.changedLines;
-    if (!changedLines) {
+    const changeTracker = this.#urlToChangeTracker.get(url);
+    if (!changeTracker) {
       return false;
     }
+    const {changedLines, formattedCurrentMapping} = changeTracker;
     const uiLocation = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(property, true);
     if (!uiLocation) {
       return false;
     }
-    // UILocation's lineNumber starts at 0, but changedLines start at 1.
-    return changedLines.has(uiLocation.lineNumber + 1);
+    if (!formattedCurrentMapping) {
+      // UILocation's lineNumber starts at 0, but changedLines start at 1.
+      return changedLines.has(uiLocation.lineNumber + 1);
+    }
+    const formattedLineNumber =
+        formattedCurrentMapping.originalToFormatted(uiLocation.lineNumber, uiLocation.columnNumber)[0];
+    return changedLines.has(formattedLineNumber + 1);
   }
 
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
@@ -1060,28 +1066,33 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!changeTracker) {
       return;
     }
-    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    const diffResponse =
+        await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
     const changedLines = new Set<number>();
-    if (diff && diff.length > 0) {
-      const {rows} = DiffView.DiffView.buildDiffRows(diff);
-      for (const row of rows) {
-        if (row.type === DiffView.DiffView.RowType.Addition) {
-          changedLines.add(row.currentLineNumber);
-        }
+    changeTracker.changedLines = changedLines;
+    if (!diffResponse) {
+      return;
+    }
+    const {diff, formattedCurrentMapping} = diffResponse;
+    const {rows} = DiffView.DiffView.buildDiffRows(diff);
+    for (const row of rows) {
+      if (row.type === DiffView.DiffView.RowType.Addition) {
+        changedLines.add(row.currentLineNumber);
       }
     }
-    changeTracker.changedLines = changedLines;
+    changeTracker.formattedCurrentMapping = formattedCurrentMapping;
   }
 
   private async getFormattedChanges(): Promise<string> {
     let allChanges = '';
     for (const [url, {uiSourceCode}] of this.#urlToChangeTracker) {
-      const diff =
+      const diffResponse =
           await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
-      if (!diff || diff.length < 2) {
+      // Diff array with real diff will contain at least 2 lines.
+      if (!diffResponse || diffResponse?.diff.length < 2) {
         continue;
       }
-      const changes = await formatCSSChangesFromDiff(diff);
+      const changes = await formatCSSChangesFromDiff(diffResponse.diff);
       if (changes.length > 0) {
         allChanges += `/* ${escapeUrlAsCssComment(url)} */\n\n${changes}\n\n`;
       }
@@ -1231,6 +1242,7 @@ type ChangeTracker = {
   uiSourceCode: Workspace.UISourceCode.UISourceCode,
   changedLines: Set<number>,
   diffChangeCallback: () => Promise<void>,
+  formattedCurrentMapping?: Formatter.ScriptFormatter.FormatterSourceMapping,
 };
 
 export async function formatCSSChangesFromDiff(diff: Diff.Diff.DiffArray): Promise<string> {

package/front_end/panels/sources/NavigatorView.ts

@@ -400,7 +400,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
     const removedFrame = (event.data.frame as SDK.ResourceTreeModel.ResourceTreeFrame | null);
     const node = Array.from(this.uiSourceCodeNodes.get(uiSourceCode)).find(node => node.frame() === removedFrame);
-    this.removeUISourceCodeNode((node as NavigatorUISourceCodeTreeNode));
+    if (node) {
+      this.removeUISourceCodeNode(node);
+    }
   }
 
   private acceptsUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {