chrome-devtools-frontend 1.0.981004 → 1.0.995227

package/front_end/panels/sources/SourcesPanel.ts

@@ -276,7 +276,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     this.editorView.setMainWidget(this.sourcesViewInternal);
 
     this.threadsSidebarPane = null;
-    this.watchSidebarPane = (UI.ViewManager.ViewManager.instance().view('sources.watch') as UI.View.View);
+    this.watchSidebarPane = UI.ViewManager.ViewManager.instance().view('sources.watch');
     this.callstackPane = CallStackSidebarPane.instance();
 
     Common.Settings.Settings.instance()
@@ -354,7 +354,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
 
   private showThreadsIfNeeded(): void {
     if (ThreadsSidebarPane.shouldBeShown() && !this.threadsSidebarPane) {
-      this.threadsSidebarPane = (UI.ViewManager.ViewManager.instance().view('sources.threads') as UI.View.View);
+      this.threadsSidebarPane = UI.ViewManager.ViewManager.instance().view('sources.threads');
       if (this.sidebarPaneStack && this.threadsSidebarPane) {
         void this.sidebarPaneStack.showView(
             this.threadsSidebarPane, this.splitWidget.isVertical() ? this.watchSidebarPane : this.callstackPane);
@@ -1058,8 +1058,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
       void this.sidebarPaneStack.showView(this.threadsSidebarPane);
     }
 
-    const jsBreakpoints = (UI.ViewManager.ViewManager.instance().view('sources.jsBreakpoints') as UI.View.View);
-    const scopeChainView = (UI.ViewManager.ViewManager.instance().view('sources.scopeChain') as UI.View.View);
+    const jsBreakpoints = UI.ViewManager.ViewManager.instance().view('sources.jsBreakpoints');
+    const scopeChainView = UI.ViewManager.ViewManager.instance().view('sources.scopeChain');
 
     if (this.tabbedLocationHeader) {
       this.splitWidget.uninstallResizer(this.tabbedLocationHeader);

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): Casts to Branded Types will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -126,12 +128,12 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
     for (const project of this.projects()) {
       const weight = project.uiSourceCodes().length;
       const findMatchingFilesInProjectProgress = findMatchingFilesProgress.createSubProgress(weight);
-      const filesMathingFileQuery = this.projectFilesMatchingFileQuery(project, searchConfig);
+      const filesMatchingFileQuery = this.projectFilesMatchingFileQuery(project, searchConfig);
       const promise =
           project
-              .findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, findMatchingFilesInProjectProgress)
+              .findFilesMatchingSearchRequest(searchConfig, filesMatchingFileQuery, findMatchingFilesInProjectProgress)
               .then(this.processMatchingFilesForProject.bind(
-                  this, this.searchId, project, searchConfig, filesMathingFileQuery));
+                  this, this.searchId, project, searchConfig, filesMatchingFileQuery));
       promises.push(promise);
     }
 
@@ -141,7 +143,7 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
   private projectFilesMatchingFileQuery(
       project: Workspace.Workspace.Project, searchConfig: Workspace.Workspace.ProjectSearchConfig,
-      dirtyOnly?: boolean): string[] {
+      dirtyOnly?: boolean): Platform.DevToolsPath.UrlString[] {
     const result = [];
     const uiSourceCodes = project.uiSourceCodes();
     for (let i = 0; i < uiSourceCodes.length; ++i) {
@@ -156,7 +158,9 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
       if (dirtyOnly && !uiSourceCode.isDirty()) {
         continue;
       }
-      if (searchConfig.filePathMatchesFileQuery(uiSourceCode.fullDisplayName())) {
+      if (searchConfig.filePathMatchesFileQuery(
+              uiSourceCode.fullDisplayName() as Platform.DevToolsPath.UrlString |
+              Platform.DevToolsPath.EncodedPathString)) {
         result.push(uiSourceCode.url());
       }
     }
@@ -166,7 +170,7 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
   private processMatchingFilesForProject(
       searchId: number, project: Workspace.Workspace.Project, searchConfig: Workspace.Workspace.ProjectSearchConfig,
-      filesMathingFileQuery: string[], files: string[]): void {
+      filesMatchingFileQuery: string[], files: string[]): void {
     if (searchId !== this.searchId && this.searchFinishedCallback) {
       this.searchFinishedCallback(false);
       return;
@@ -174,13 +178,13 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
     files.sort(Platform.StringUtilities.naturalOrderComparator);
     files = Platform.ArrayUtilities.intersectOrdered(
-        files, filesMathingFileQuery, Platform.StringUtilities.naturalOrderComparator);
+        files, filesMatchingFileQuery, Platform.StringUtilities.naturalOrderComparator);
     const dirtyFiles = this.projectFilesMatchingFileQuery(project, searchConfig, true);
     files = Platform.ArrayUtilities.mergeOrdered(files, dirtyFiles, Platform.StringUtilities.naturalOrderComparator);
 
     const uiSourceCodes = [];
     for (const file of files) {
-      const uiSourceCode = project.uiSourceCodeForURL(file);
+      const uiSourceCode = project.uiSourceCodeForURL(file as Platform.DevToolsPath.UrlString);
       if (!uiSourceCode) {
         continue;
       }

package/front_end/panels/sources/SourcesView.ts

@@ -702,7 +702,9 @@ export class SwitchFileActionDelegate implements UI.ActionRegistration.ActionDel
     }
     candidates.sort(Platform.StringUtilities.naturalOrderComparator);
     const index = Platform.NumberUtilities.mod(candidates.indexOf(name) + 1, candidates.length);
-    const fullURL = (url ? url + '/' : '') + candidates[index];
+    const fullURL = Common.ParsedURL.ParsedURL.concatenate(
+        (url ? Common.ParsedURL.ParsedURL.concatenate(url, '/') : '' as Platform.DevToolsPath.UrlString),
+        candidates[index]);
     const nextUISourceCode = currentUISourceCode.project().uiSourceCodeForURL(fullURL);
     return nextUISourceCode !== currentUISourceCode ? nextUISourceCode : null;
   }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -238,7 +238,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.scrollTimer = window.setTimeout(() => this.history.save(this.previouslyViewedFilesSetting), 100);
       if (this.currentFileInternal) {
         const {editor} = this.currentView.textEditor;
-        const topBlock = editor.blockAtHeight(editor.scrollDOM.getBoundingClientRect().top);
+        const topBlock = editor.lineBlockAtHeight(editor.scrollDOM.getBoundingClientRect().top - editor.documentTop);
         const topLine = editor.state.doc.lineAt(topBlock.from).number - 1;
         this.history.updateScrollLineNumber(this.currentFileInternal.url(), topLine);
       }

package/front_end/panels/sources/components/HeadersView.css

@@ -16,8 +16,7 @@
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
   align-items: center;
-  line-height: 18px;
-  margin-top: 3px;
+  line-height: 24px;
 }
 
 .row devtools-button {
@@ -57,6 +56,18 @@
   border-radius: 2px;
 }
 
+.row .inline-button {
+  opacity: 0%;
+  visibility: hidden;
+  transition: opacity 200ms;
+}
+
+.row:focus-within .inline-button,
+.row:hover .inline-button {
+  opacity: 100%;
+  visibility: visible;
+}
+
 .center-wrapper {
   height: 100%;
   display: flex;
@@ -79,3 +90,7 @@
   line-height: 1.5em;
   color: var(--color-text-secondary);
 }
+
+.add-block {
+  margin-top: 3px;
+}

package/front_end/panels/sources/components/HeadersView.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Persistence from '../../../models/persistence/persistence.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -12,6 +13,18 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import HeadersViewStyles from './HeadersView.css.js';
 
 const UIStrings = {
+  /**
+  *@description The title of a button that adds a field to input a header in the editor form.
+  */
+  addHeader: 'Add a header',
+  /**
+  *@description The title of a button that removes a field to input a header in the editor form.
+  */
+  removeHeader: 'Remove this header',
+  /**
+  *@description The title of a button that removes a section for defining header overrides in the editor form.
+  */
+  removeBlock: 'Remove this \'`ApplyTo`\'-section',
   /**
   *@description Error message for files which cannot not be parsed.
   *@example {.headers} PH1
@@ -23,16 +36,23 @@ const UIStrings = {
   */
   parsingErrorExplainer:
       'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+  /**
+  *@description Button text for a button which adds an additional header override.
+  */
+  addHeaderOverride: 'Add header override',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const plusIconUrl = new URL('../../../Images/plus_icon.svg', import.meta.url).toString();
+const minusIconUrl = new URL('../../../Images/minus_icon.svg', import.meta.url).toString();
+
 export class HeadersView extends UI.View.SimpleView {
   readonly #headersViewComponent = new HeadersViewComponent();
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super('HeadersView');
+    super(i18n.i18n.lockedString('HeadersView'));
     this.#uiSourceCode = uiSourceCode;
     this.#uiSourceCode.addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
@@ -96,6 +116,10 @@ export class HeadersView extends UI.View.SimpleView {
     this.#setComponentData(this.#uiSourceCode.workingCopy());
   }
 
+  getComponent(): HeadersViewComponent {
+    return this.#headersViewComponent;
+  }
+
   dispose(): void {
     this.#uiSourceCode.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
@@ -127,11 +151,13 @@ export class HeadersViewComponent extends HTMLElement {
   #headerOverrides: HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   #parsingError = false;
+  #focusElement: {blockIndex: number, headerIndex?: number}|null = null;
 
   constructor() {
     super();
     this.#shadow.addEventListener('focusin', this.#onFocusIn.bind(this));
     this.#shadow.addEventListener('focusout', this.#onFocusOut.bind(this));
+    this.#shadow.addEventListener('click', this.#onClick.bind(this));
     this.#shadow.addEventListener('input', this.#onInput.bind(this));
     this.#shadow.addEventListener('keydown', this.#onKeyDown.bind(this));
   }
@@ -187,6 +213,43 @@ export class HeadersViewComponent extends HTMLElement {
     selection?.removeAllRanges();
   }
 
+  #generateNextHeaderName(headers: Header[]): string {
+    const takenNames = new Set<string>(headers.map(header => header.name));
+    let idx = 1;
+    while (takenNames.has('headerName' + idx)) {
+      idx++;
+    }
+    return 'headerName' + idx;
+  }
+
+  #onClick(e: Event): void {
+    const target = e.target as HTMLButtonElement;
+    const rowElement = target.closest('.row') as HTMLElement | null;
+    const blockIndex = Number(rowElement?.dataset.blockIndex || 0);
+    const headerIndex = Number(rowElement?.dataset.headerIndex || 0);
+    if (target.matches('.add-header')) {
+      this.#headerOverrides[blockIndex].headers.splice(
+          headerIndex + 1, 0,
+          {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+      this.#focusElement = {blockIndex, headerIndex: headerIndex + 1};
+      this.#onHeadersChanged();
+    } else if (target.matches('.remove-header')) {
+      this.#headerOverrides[blockIndex].headers.splice(headerIndex, 1);
+      if (this.#headerOverrides[blockIndex].headers.length === 0) {
+        this.#headerOverrides[blockIndex].headers.push(
+            {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+      }
+      this.#onHeadersChanged();
+    } else if (target.matches('.add-block')) {
+      this.#headerOverrides.push({applyTo: '*', headers: [{name: 'headerName', value: 'headerValue'}]});
+      this.#focusElement = {blockIndex: this.#headerOverrides.length - 1};
+      this.#onHeadersChanged();
+    } else if (target.matches('.remove-block')) {
+      this.#headerOverrides.splice(blockIndex, 1);
+      this.#onHeadersChanged();
+    }
+  }
+
   #onInput(e: Event): void {
     const target = e.target as HTMLButtonElement;
     const rowElement = target.closest('.row') as HTMLElement;
@@ -252,8 +315,25 @@ export class HeadersViewComponent extends HTMLElement {
           )}
         `,
       )}
+      <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.SECONDARY} class="add-block">
+        ${i18nString(UIStrings.addHeaderOverride)}
+      </${Buttons.Button.Button.litTagName}>
     `, this.#shadow, {host: this});
     // clang-format on
+
+    if (this.#focusElement) {
+      let focusElement: Element|null = null;
+      if (this.#focusElement.headerIndex) {
+        focusElement = this.#shadow.querySelector(`[data-block-index="${
+            this.#focusElement.blockIndex}"][data-header-index="${this.#focusElement.headerIndex}"] .header-name`);
+      } else {
+        focusElement = this.#shadow.querySelector(`[data-block-index="${this.#focusElement.blockIndex}"] .apply-to`);
+      }
+      if (focusElement) {
+        (focusElement as HTMLElement).focus();
+      }
+      this.#focusElement = null;
+    }
   }
 
   #renderApplyToRow(pattern: string, blockIndex: number): LitHtml.TemplateResult {
@@ -263,6 +343,13 @@ export class HeadersViewComponent extends HTMLElement {
         <div>${i18n.i18n.lockedString('Apply to')}</div>
         <div class="separator">:</div>
         ${this.#renderEditable(pattern, 'apply-to')}
+        <${Buttons.Button.Button.litTagName}
+        title=${i18nString(UIStrings.removeBlock)}
+        .size=${Buttons.Button.Size.SMALL}
+        .iconUrl=${minusIconUrl}
+        .variant=${Buttons.Button.Variant.ROUND}
+        class="remove-block inline-button"
+      ></${Buttons.Button.Button.litTagName}>
       </div>
     `;
     // clang-format on
@@ -275,6 +362,21 @@ export class HeadersViewComponent extends HTMLElement {
         ${this.#renderEditable(header.name, 'header-name red')}
         <div class="separator">:</div>
         ${this.#renderEditable(header.value, 'header-value')}
+        <${Buttons.Button.Button.litTagName}
+          title=${i18nString(UIStrings.addHeader)}
+          .size=${Buttons.Button.Size.SMALL}
+          .iconUrl=${plusIconUrl}
+          .variant=${Buttons.Button.Variant.ROUND}
+          class="add-header inline-button"
+        ></${Buttons.Button.Button.litTagName}>
+        <${Buttons.Button.Button.litTagName}
+          title=${i18nString(UIStrings.removeHeader)}
+          .size=${Buttons.Button.Size.SMALL}
+          .iconUrl=${minusIconUrl}
+          .variant=${Buttons.Button.Variant.ROUND}
+          class="remove-header inline-button"
+        ></${Buttons.Button.Button.litTagName}>
+      </div>
     `;
     // clang-format on
   }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -165,6 +165,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartDataProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+type TimelineFlameChartEntry = (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|
+                                TimelineModel.TimelineFrameModel.TimelineFrame|TimelineModel.TimelineIRModel.Phases);
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private readonly font: string;
@@ -190,8 +192,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private readonly interactionsHeaderLevel2: PerfUI.FlameChart.GroupStyle;
   private readonly experienceHeader: PerfUI.FlameChart.GroupStyle;
   private readonly flowEventIndexById: Map<string, number>;
-  private entryData!: (SDK.FilmStripModel.Frame|SDK.TracingModel.Event|
-                       TimelineModel.TimelineFrameModel.TimelineFrame|TimelineModel.TimelineIRModel.Phases)[];
+  private entryData!: TimelineFlameChartEntry[];
   private entryTypeByLevel!: EntryType[];
   private markers!: TimelineFlameChartMarker[];
   private asyncColorByInteractionPhase!: Map<TimelineModel.TimelineIRModel.Phases, string>;
@@ -721,11 +722,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame) {
       return false;
     }
-    const url = event.args['data']['url'];
+    const url = event.args['data']['url'] as Platform.DevToolsPath.UrlString;
     return url && this.isIgnoreListedURL(url);
   }
 
-  private isIgnoreListedURL(url: string): boolean {
+  private isIgnoreListedURL(url: Platform.DevToolsPath.UrlString): boolean {
     return Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedURL(url);
   }
 
@@ -1345,11 +1346,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private appendAsyncEvent(asyncEvent: SDK.TracingModel.AsyncEvent, level: number): void {
-    if (SDK.TracingModel.TracingModel.isNestableAsyncPhase(asyncEvent.phase)) {
-      // FIXME: also add steps once we support event nesting in the FlameChart.
-      this.appendEvent(asyncEvent, level);
-      return;
-    }
     const steps = asyncEvent.steps;
     // If we have past steps, put the end event for each range rather than start one.
     const eventOffset = steps.length > 1 && steps[1].phase === SDK.TracingModel.Phase.AsyncStepPast ? 1 : 0;
@@ -1467,6 +1463,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         null;
   }
 
+  entryDataByIndex(entryIndex: number): TimelineFlameChartEntry {
+    return this.entryData[entryIndex];
+  }
+
   setEventColorMapping(colorForEvent: (arg0: SDK.TracingModel.Event) => string): void {
     this.colorForEvent = colorForEvent;
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -636,7 +636,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     const now = new Date();
-    const fileName = 'Profile-' + Platform.DateUtilities.toISO8601Compact(now) + '.json';
+    const fileName =
+        'Profile-' + Platform.DateUtilities.toISO8601Compact(now) + '.json' as Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const accepted = await stream.open(fileName);
@@ -771,7 +772,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   private async getCoverageViewWidget(): Promise<Coverage.CoverageView.CoverageView> {
-    const view = (UI.ViewManager.ViewManager.instance().view('coverage') as UI.View.View);
+    const view = UI.ViewManager.ViewManager.instance().view('coverage');
     return await view.widget() as Coverage.CoverageView.CoverageView;
   }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -132,6 +132,12 @@ const UIStrings = {
   */
   paintImage: 'Paint Image',
   /**
+  *@description Noun for an event in the Performance panel. Pre-paint is a
+  *step before the 'Paint' event. A paint event is when the browser records the
+  *instructions for drawing the page. This step is the setup beforehand.
+  */
+  prePaint: 'Pre-Paint',
+  /**
   *@description Text in Timeline UIUtils of the Performance panel
   */
   updateLayer: 'Update Layer',
@@ -1283,6 +1289,7 @@ export class TimelineUIUtils {
     eventStyles[type.UpdateLayer] = new TimelineRecordStyle(i18nString(UIStrings.updateLayer), painting, true);
     eventStyles[type.UpdateLayerTree] = new TimelineRecordStyle(i18nString(UIStrings.updateLayerTree), rendering);
     eventStyles[type.Paint] = new TimelineRecordStyle(i18nString(UIStrings.paint), painting);
+    eventStyles[type.PrePaint] = new TimelineRecordStyle(i18nString(UIStrings.prePaint), rendering);
     eventStyles[type.RasterTask] = new TimelineRecordStyle(i18nString(UIStrings.rasterizePaint), painting);
     eventStyles[type.ScrollLayer] = new TimelineRecordStyle(i18nString(UIStrings.scroll), rendering);
     eventStyles[type.CompositeLayers] = new TimelineRecordStyle(i18nString(UIStrings.compositeLayers), painting);

package/front_end/panels/timeline/timelinePanel.css

@@ -406,7 +406,6 @@
 
 .timeline-tree-view .data-grid .data-container {
   overflow-y: scroll;
-  top: 21px;
 }
 
 .timeline-tree-view .data-grid.data-grid-fits-viewport .corner {
@@ -519,7 +518,7 @@
   width: 120px;
 }
 
-.timeline-tree-view .data-grid .header-container {
+.timeline-tree-view .data-grid thead {
   height: 21px;
 }
 

package/front_end/panels/utils/utils.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
+import * as Formatter from '../../models/formatter/formatter.js';
+import type * as Diff from '../../third_party/diff/diff.js';
+import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 
 export function imageNameForResourceType(resourceType: Common.ResourceType.ResourceType): string {
   if (resourceType.isDocument()) {
@@ -25,3 +28,97 @@ export function imageNameForResourceType(resourceType: Common.ResourceType.Resou
   }
   return 'ic_file_default';
 }
+
+export async function formatCSSChangesFromDiff(diff: Diff.Diff.DiffArray): Promise<string> {
+  const indent = '  ';
+  const {originalLines, currentLines, rows} = DiffView.DiffView.buildDiffRows(diff);
+  const originalRuleMaps = await buildStyleRuleMaps(originalLines.join('\n'));
+  const currentRuleMaps = await buildStyleRuleMaps(currentLines.join('\n'));
+
+  let changes = '';
+  let recordedOriginalSelector, recordedCurrentSelector;
+  let hasOpenDeclarationBlock = false;
+  for (const {currentLineNumber, originalLineNumber, type} of rows) {
+    if (type !== DiffView.DiffView.RowType.Deletion && type !== DiffView.DiffView.RowType.Addition) {
+      continue;
+    }
+
+    const isDeletion = type === DiffView.DiffView.RowType.Deletion;
+    const lines = isDeletion ? originalLines : currentLines;
+    // Diff line arrays starts at 0, but line numbers start at 1.
+    const lineIndex = isDeletion ? originalLineNumber - 1 : currentLineNumber - 1;
+    const line = lines[lineIndex].trim();
+    const {declarationIDToStyleRule, styleRuleIDToStyleRule} = isDeletion ? originalRuleMaps : currentRuleMaps;
+    let styleRule;
+    let prefix = '';
+    if (declarationIDToStyleRule.has(lineIndex)) {
+      styleRule = declarationIDToStyleRule.get(lineIndex) as FormattableStyleRule;
+      const selector = styleRule.selector;
+      // Use the equality of selector strings as a best-effort check for the equality of style rules.
+      if (selector !== recordedOriginalSelector && selector !== recordedCurrentSelector) {
+        prefix += `${selector} {\n`;
+      }
+      prefix += indent;
+      hasOpenDeclarationBlock = true;
+    } else {
+      if (hasOpenDeclarationBlock) {
+        prefix = '}\n\n';
+        hasOpenDeclarationBlock = false;
+      }
+      if (styleRuleIDToStyleRule.has(lineIndex)) {
+        styleRule = styleRuleIDToStyleRule.get(lineIndex);
+      }
+    }
+
+    const processedLine = isDeletion ? `/* ${line} */` : line;
+    changes += prefix + processedLine + '\n';
+    if (isDeletion) {
+      recordedOriginalSelector = styleRule?.selector;
+    } else {
+      recordedCurrentSelector = styleRule?.selector;
+    }
+  }
+
+  if (changes.length > 0) {
+    changes += '}';
+  }
+  return changes;
+}
+
+interface FormattableStyleRule {
+  rule: Formatter.FormatterWorkerPool.CSSRule;
+  selector: string;
+}
+
+async function buildStyleRuleMaps(content: string): Promise<{
+  declarationIDToStyleRule: Map<number, FormattableStyleRule>,
+  styleRuleIDToStyleRule: Map<number, FormattableStyleRule>,
+}> {
+  const rules = await new Promise<Formatter.FormatterWorkerPool.CSSRule[]>(res => {
+    const rules: Formatter.FormatterWorkerPool.CSSRule[] = [];
+    Formatter.FormatterWorkerPool.formatterWorkerPool().parseCSS(content, (isLastChunk, currentRules) => {
+      rules.push(...currentRules);
+      if (isLastChunk) {
+        res(rules);
+      }
+    });
+  });
+
+  // We use line numbers as unique IDs for rules and declarations
+  const declarationIDToStyleRule = new Map<number, FormattableStyleRule>();
+  const styleRuleIDToStyleRule = new Map<number, FormattableStyleRule>();
+  for (const rule of rules) {
+    if ('styleRange' in rule) {
+      const selector = rule.selectorText.split('\n').pop()?.trim();
+      if (!selector) {
+        continue;
+      }
+      const styleRule = {rule, selector};
+      styleRuleIDToStyleRule.set(rule.styleRange.startLine, styleRule);
+      for (const property of rule.properties) {
+        declarationIDToStyleRule.set(property.range.startLine, styleRule);
+      }
+    }
+  }
+  return {declarationIDToStyleRule, styleRuleIDToStyleRule};
+}

package/front_end/third_party/codemirror.next/bundle.ts

@@ -4,50 +4,49 @@
 // Note that this file is also used as a TypeScript source to bundle
 // the .d.ts files.
 
-import {StreamLanguage} from '@codemirror/stream-parser';
+import {StreamLanguage} from "@codemirror/language";
 
 export {
-  acceptCompletion, autocompletion, closeCompletion, completeAnyWord,
+  acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap
+, closeCompletion, completeAnyWord,
   Completion, CompletionContext, CompletionResult, CompletionSource, currentCompletions,
-  ifNotIn, selectedCompletion, startCompletion,
-} from '@codemirror/autocomplete';
-export {closeBrackets, closeBracketsKeymap} from '@codemirror/closebrackets';
+  ifNotIn, selectedCompletion, startCompletion} from '@codemirror/autocomplete';
 export {
   cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward,
-  indentLess, indentMore, insertNewlineAndIndent, selectMatchingBracket,
+  history, historyKeymap,
+  indentLess, indentMore, insertNewlineAndIndent, redo, redoSelection, selectMatchingBracket,
   selectSubwordBackward, selectSubwordForward,
-  standardKeymap
+  standardKeymap, toggleComment, undo, undoSelection
 } from '@codemirror/commands';
-export {toggleComment} from '@codemirror/comment';
-export {codeFolding, foldGutter, foldKeymap} from '@codemirror/fold';
-export {gutter, GutterMarker, gutters, lineNumberMarkers,lineNumbers} from '@codemirror/gutter';
-export {HighlightStyle, highlightTree, Tag, tags, TagStyle} from '@codemirror/highlight';
-export {history, historyKeymap, redo, redoSelection, undo, undoSelection} from '@codemirror/history';
 export * as css from '@codemirror/lang-css';
 export * as html from '@codemirror/lang-html';
 export * as javascript from '@codemirror/lang-javascript';
-export {ensureSyntaxTree, indentOnInput, indentUnit,Language, LanguageSupport, syntaxTree} from '@codemirror/language';
-export {bracketMatching} from '@codemirror/matchbrackets';
-export {Panel, showPanel} from '@codemirror/panel';
-export {Range, RangeSet, RangeSetBuilder} from '@codemirror/rangeset';
+export { bracketMatching,
+  codeFolding,
+  ensureSyntaxTree, foldGutter, foldKeymap, HighlightStyle, indentOnInput, indentUnit,Language, LanguageSupport,
+  StreamLanguage, StreamParser, StringStream
+, syntaxHighlighting, syntaxTree, TagStyle} from '@codemirror/language';
+export {} from '@codemirror/rangeset';
 export { highlightSelectionMatches,selectNextOccurrence} from '@codemirror/search';
 export {
   Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Compartment,
-  EditorSelection, EditorState, EditorStateConfig, Extension, Facet, MapMode
-, Prec,
-  SelectionRange, StateEffect, StateEffectType, StateField, Transaction,
+  EditorSelection, EditorState, EditorStateConfig, Extension, Facet,
+  Line, MapMode, Prec, Range, RangeSet, RangeSetBuilder,
+  SelectionRange, StateEffect, StateEffectType, StateField, Text, TextIterator
+, Transaction,
   TransactionSpec} from '@codemirror/state';
-export {StreamLanguage, StreamParser, StringStream} from '@codemirror/stream-parser';
-export {Line, Text, TextIterator} from '@codemirror/text';
-export { repositionTooltips,showTooltip, Tooltip, tooltips, TooltipView} from '@codemirror/tooltip';
+export {} from '@codemirror/stream-parser';
 export {
   Command, Decoration, DecorationSet, drawSelection, EditorView,
-  highlightSpecialChars, KeyBinding, keymap, MatchDecorator, placeholder,
-  scrollPastEnd, ViewPlugin, ViewUpdate, WidgetType,
-} from '@codemirror/view';
+  gutter, GutterMarker, gutters,
+  highlightSpecialChars, KeyBinding, keymap, lineNumberMarkers,lineNumbers, MatchDecorator, Panel, placeholder,
+  repositionTooltips,
+  scrollPastEnd, showPanel,showTooltip, Tooltip, tooltips, TooltipView
+, ViewPlugin, ViewUpdate, WidgetType} from '@codemirror/view';
 export {
   NodeProp, NodeSet, NodeType, Parser, SyntaxNode, Tree, TreeCursor
 } from '@lezer/common';
+export {highlightTree, Tag, tags} from '@lezer/highlight';
 export {LRParser} from '@lezer/lr';
 export {StyleModule} from 'style-mod';
 
@@ -78,6 +77,9 @@ export function python() {
 export async function shell() {
   return StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell);
 }
+export async function cssStreamParser() {
+  return (await import('@codemirror/legacy-modes/mode/css') as any).sCSS;
+}
 export function wast() {
   return import('@codemirror/lang-wast');
 }