chrome-devtools-frontend 1.0.982087 → 1.0.995227

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');
 }