chrome-devtools-frontend 1.0.945884 → 1.0.948295

package/front_end/panels/sources/CSSPlugin.ts

@@ -13,6 +13,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {Plugin} from './Plugin.js';
 
+// Plugin to add CSS completion, shortcuts, and color/curve swatches
+// to editors with CSS content.
+
 const UIStrings = {
   /**
   *@description Swatch icon element title in CSSPlugin of the Sources panel

package/front_end/panels/sources/CoveragePlugin.ts

@@ -14,6 +14,8 @@ import * as Coverage from '../coverage/coverage.js';
 
 import {Plugin} from './Plugin.js';
 
+// Plugin that shows a gutter with coverage information when available.
+
 const UIStrings = {
   /**
   *@description Text for Coverage Status Bar Item in Sources Panel

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -158,24 +158,37 @@ type BreakpointDescription = {
 
 export class DebuggerPlugin extends Plugin {
   private editor: TextEditor.TextEditor.TextEditor|undefined = undefined;
+  // Set if the debugger is stopped on a breakpoint in this file
   private executionLocation: Workspace.UISourceCode.UILocation|null = null;
+  // Track state of the control key because holding it makes debugger
+  // target locations show up in the editor
   private controlDown: boolean = false;
-  private sourceMapInfobar: UI.Infobar.Infobar|null = null;
   private controlTimeout: number|undefined = undefined;
+  private sourceMapInfobar: UI.Infobar.Infobar|null = null;
   private readonly scriptsPanel: SourcesPanel;
   private readonly breakpointManager: Bindings.BreakpointManager.BreakpointManager;
+  // Manages pop-overs shown when the debugger is active and the user
+  // hovers over an expression
   private readonly popoverHelper: UI.PopoverHelper.PopoverHelper;
   private scriptFileForDebuggerModel:
       Map<SDK.DebuggerModel.DebuggerModel, Bindings.ResourceScriptMapping.ResourceScriptFile>;
   // The current set of breakpoints for this file. The locations in
-  // here are only in sync with editor positions when `this.muted` is
-  // false.
+  // here are kept in sync with their editor position. When a file's
+  // content is edited and later saved, these are used as a source of
+  // truth for re-creating the breakpoints.
   private breakpoints: BreakpointDescription[] = [];
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private continueToLocations: {from: number, to: number, async: boolean, click: () => void}[]|null = null;
   private readonly liveLocationPool: Bindings.LiveLocation.LiveLocationPool;
+  // When the editor content is changed by the user, this becomes
+  // true. When the plugin is muted, breakpoints show up as disabled
+  // and can't be manipulated. It is cleared again when the content is
+  // saved.
   private muted: boolean;
+  // If the plugin is initialized in muted state, we cannot correlated
+  // breakpoint position in the breakpoint manager with editor
+  // locations, so breakpoint manipulation is permanently disabled.
   private initializedMuted: boolean;
   private ignoreListInfobar: UI.Infobar.Infobar|null;
   private prettyPrintInfobar!: UI.Infobar.Infobar|null;
@@ -236,6 +249,8 @@ export class DebuggerPlugin extends Plugin {
   }
 
   editorExtension(): CodeMirror.Extension {
+    // Kludge to hook editor keyboard events into the ShortcutRegistry
+    // system.
     const handlers = this.shortcutHandlers();
 
     return [
@@ -309,6 +324,8 @@ export class DebuggerPlugin extends Plugin {
   }
 
   editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
+    // Start asynchronous actions that require access to the editor
+    // instance
     this.editor = editor;
     computeNonBreakableLines(editor.state, this.uiSourceCode).then(linePositions => {
       if (linePositions.length) {
@@ -589,8 +606,12 @@ export class DebuggerPlugin extends Plugin {
       if (node.firstChild) {
         return null;
       }
-      while (node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
-             node.name !== 'MemberExpression') {
+      while (
+          node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+          node.name !== 'MemberExpression' &&
+          !(node.name === 'PropertyName' && node.parent?.name === 'PatternProperty' &&
+            node.nextSibling?.name !== ':') &&
+          !(node.name === 'PropertyDefinition' && node.parent?.name === 'Property' && node.nextSibling?.name !== ':')) {
         node = node.parent;
       }
       if (!node) {
@@ -681,6 +702,8 @@ export class DebuggerPlugin extends Plugin {
 
   private onEditorUpdate(update: CodeMirror.ViewUpdate): void {
     if (!update.changes.empty) {
+      // If the document changed, adjust known breakpoint positions
+      // for that change
       for (const breakpointDesc of this.breakpoints) {
         breakpointDesc.position = update.changes.mapPos(breakpointDesc.position);
       }
@@ -807,6 +830,7 @@ export class DebuggerPlugin extends Plugin {
     dialog.focusEditor();
   }
 
+  // Create decorations to indicate the current debugging position
   private computeExecutionDecorations(editorState: CodeMirror.EditorState, lineNumber: number, columnNumber: number):
       CodeMirror.DecorationSet {
     const {doc} = editorState;
@@ -953,6 +977,8 @@ export class DebuggerPlugin extends Plugin {
     return namesPerLine;
   }
 
+  // Highlight the locations the debugger can continue to (when
+  // Control is held)
   private async showContinueToLocations(): Promise<void> {
     this.popoverHelper.hidePopover();
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
@@ -1094,6 +1120,8 @@ export class DebuggerPlugin extends Plugin {
     return this.breakpoints.filter(b => b.position >= line.from && b.position <= line.to).map(b => b.breakpoint);
   }
 
+  // Compute the decorations for existing breakpoints (both on the
+  // gutter and inline in the code)
   private async computeBreakpointDecoration(state: CodeMirror.EditorState, breakpoints: BreakpointDescription[]):
       Promise<BreakpointDecoration> {
     const decorations: CodeMirror.Range<CodeMirror.Decoration>[] = [];
@@ -1298,7 +1326,7 @@ export class DebuggerPlugin extends Plugin {
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidMergeToVM, this.didMergeToVM, this);
       oldScriptFile.removeEventListener(
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidDivergeFromVM, this.didDivergeFromVM, this);
-      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts) {
+      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts()) {
         this.setMuted(false);
       }
     }
@@ -1516,7 +1544,7 @@ export class DebuggerPlugin extends Plugin {
   }
 }
 
-// Infobar panel state
+// Infobar panel state, used to show additional panels below the editor.
 
 const addInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
 const removeInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();

package/front_end/panels/sources/JavaScriptCompilerPlugin.ts

@@ -12,6 +12,9 @@ import * as Snippets from '../snippets/snippets.js';
 
 import {Plugin} from './Plugin.js';
 
+// Plugin that tries to compile the editor content and highlights
+// compilation errors.
+
 export class JavaScriptCompilerPlugin extends Plugin {
   private compiling: boolean = false;
   private recompileScheduled: boolean = false;

package/front_end/panels/sources/ProfilePlugin.ts

@@ -11,6 +11,9 @@ import type * as TextEditor from '../../ui/components/text_editor/text_editor.js
 
 import {Plugin} from './Plugin.js';
 
+// Defines plugins that show profiling information in the editor
+// gutter when available.
+
 const UIStrings = {
   /**
   *@description The milisecond unit

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -52,7 +52,8 @@ import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
 function sourceFramePlugins(): (typeof Plugin)[] {
-  // The order of these plugins matters for toolbar items
+  // The order of these plugins matters for toolbar items and editor
+  // extension precedence
   return [
     CSSPlugin,
     DebuggerPlugin,
@@ -74,6 +75,8 @@ export class UISourceCodeFrame extends
   private uiSourceCodeEventListeners: Common.EventTarget.EventDescriptor[];
   private messageAndDecorationListeners: Common.EventTarget.EventDescriptor[];
   private readonly boundOnBindingChanged: () => void;
+  // The active plugins. These are created in setContent, and
+  // recreated when the binding changes
   private plugins: Plugin[] = [];
   private readonly errorPopoverHelper: UI.PopoverHelper.PopoverHelper;
 
@@ -114,6 +117,7 @@ export class UISourceCodeFrame extends
     return [
       super.editorConfiguration(doc),
       rowMessages([...this.allMessages()]),
+      // Inject editor extensions from plugins
       pluginCompartment.of(this.plugins.map(plugin => plugin.editorExtension())),
     ];
   }
@@ -547,7 +551,11 @@ export type EventTypes = {
 
 const pluginCompartment = new CodeMirror.Compartment();
 
-// Row message management and display logic
+// Row message management and display logic. The frame manages a
+// collection of messages, organized by line (row), as a wavy
+// underline starting at the start of the first message, up to the end
+// of the line, with icons indicating the message severity and content
+// at the end of the line.
 
 function addMessage(rows: Workspace.UISourceCode.Message[][], message: Workspace.UISourceCode.Message):
     Workspace.UISourceCode.Message[][] {
@@ -608,6 +616,7 @@ const setRowMessages = CodeMirror.StateEffect.define<RowMessages>();
 
 const underlineMark = CodeMirror.Decoration.mark({class: 'cm-waveUnderline'});
 
+// The widget shown at the end of a message annotation.
 class MessageWidget extends CodeMirror.WidgetType {
   constructor(readonly messages: Workspace.UISourceCode.Message[]) {
     super();

package/front_end/panels/sources/sourcesView.css

@@ -58,133 +58,3 @@
 .-theme-with-dark-background .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(61 61 0 / 50%);
 }
-
-@keyframes source-frame-value-update-highlight-animation {
-  from {
-    background-color: inherit;
-    color: inherit;
-  }
-
-  10% {
-    background-color: var(--override-highlight-animation-10pc-background-color);
-    color: var(--override-highlight-animation-10pc-foreground-color);
-  }
-
-  to {
-    background-color: inherit;
-    color: inherit;
-  }
-}
-
-.source-frame-value-update-highlight {
-  animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 2px;
-}
-
-.diff-entry-insert {
-  --override-diff-line-number-background-color: hsl(144deg 55% 49% / 20%);
-}
-
-.-theme-with-dark-background .diff-entry-insert,
-:host-context(.-theme-with-dark-background) .diff-entry-insert {
-  --override-diff-line-number-background-color: rgb(61 199 116 / 20%);
-}
-
-.diff-entry-insert .diff-marker {
-  border-left: 4px solid var(--color-accent-green);
-}
-
-.diff-entry-insert .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(186 104 200 / 20%);
-  --override-diff-line-number-border-color: #9c27b0;
-}
-
-.-theme-with-dark-background .diff-entry-modify,
-:host-context(.-theme-with-dark-background) .diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(137 55 151 / 20%);
-  --override-diff-line-number-border-color: rgb(196 79 216);
-}
-
-.diff-entry-modify .diff-marker {
-  border-left: 4px solid var(--override-diff-line-number-border-color);
-}
-
-.diff-entry-modify .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-delete {
-  --override-diff-deletion-color: #d32f2f;
-}
-
-.-theme-with-dark-background .diff-entry-delete,
-:host-context(.-theme-with-dark-background) .diff-entry-delete {
-  --override-diff-deletion-color: rgb(208 44 44);
-}
-
-.diff-entry-delete .diff-marker {
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--override-diff-deletion-color);
-  position: relative;
-  top: 6px;
-  cursor: pointer;
-  left: 0;
-}
-
-.diff-entry-delete .CodeMirror-gutter-background {
-  border-bottom: 2px solid var(--override-diff-deletion-color);
-}
-
-.CodeMirror-gutter-diff {
-  width: 4px;
-}
-
-.highlight-line-modification {
-  --override-modification-background-fadeout-from: rgb(158 54 153 / 50%);
-  --override-modification-background-fadeout-90pc: rgb(158 54 153 / 0%);
-  --override-modification-foreground-fadeout-from: #fff;
-
-  animation: source-line-modification-background-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.highlight-line-modification span {
-  animation: source-line-modification-foreground-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-@keyframes source-line-modification-background-fadeout {
-  from {
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  90% {
-    background-color: var(--override-modification-background-fadeout-90pc);
-  }
-  to { background-color: transparent; }
-}
-
-@keyframes source-line-modification-foreground-fadeout {
-  from {
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-  90% { color: initial; }
-  to { color: initial; }
-}

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -284,7 +284,8 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
         new UI.Toolbar.ToolbarInput(i18nString(UIStrings.filter), this.getToolbarInputAccessiblePlaceHolder());
     textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged, () => {
       const searchQuery = textFilterUI.value();
-      this.textFilterInternal.setRegExp(searchQuery ? createPlainTextSearchRegex(searchQuery, 'i') : null);
+      this.textFilterInternal.setRegExp(
+          searchQuery ? Platform.StringUtilities.createPlainTextSearchRegex(searchQuery, 'i') : null);
       this.refreshTree();
     }, this);
     this.textFilterUI = textFilterUI;
@@ -651,6 +652,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     }
     const cell = this.createTD(columnId);
     cell.className = 'numeric-column';
+    cell.setAttribute('title', i18nString(UIStrings.fms, {PH1: value.toFixed(4)}));
     const textDiv = cell.createChild('div');
     textDiv.createChild('span').textContent = i18nString(UIStrings.fms, {PH1: value.toFixed(1)});
 

package/front_end/third_party/codemirror/codemirror-tsconfig.json

@@ -3,33 +3,9 @@
     "composite": true
   },
   "files": [
-    "package/addon/comment/comment.js",
-    "package/addon/edit/closebrackets.js",
-    "package/addon/edit/matchbrackets.js",
-    "package/addon/fold/brace-fold.js",
-    "package/addon/fold/foldcode.js",
-    "package/addon/fold/foldgutter.js",
-    "package/addon/mode/multiplex.js",
-    "package/addon/mode/overlay.js",
-    "package/addon/mode/simple.js",
     "package/addon/runmode/runmode-standalone.js",
-    "package/addon/selection/active-line.js",
-    "package/addon/selection/mark-selection.js",
-    "package/lib/codemirror.js",
-    "package/mode/clike/clike.js",
-    "package/mode/clojure/clojure.js",
-    "package/mode/coffeescript/coffeescript.js",
     "package/mode/css/css.js",
-    "package/mode/htmlembedded/htmlembedded.js",
-    "package/mode/htmlmixed/htmlmixed.js",
     "package/mode/javascript/javascript.js",
-    "package/mode/jsx/jsx.js",
-    "package/mode/livescript/livescript.js",
-    "package/mode/markdown/markdown.js",
-    "package/mode/php/php.js",
-    "package/mode/python/python.js",
-    "package/mode/shell/shell.js",
-    "package/mode/wast/wast.js",
     "package/mode/xml/xml.js"
   ]
-}
+}