chrome-devtools-frontend 1.0.946920 → 1.0.948445

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

@@ -276,7 +276,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
-        <nav class="crumbs" aria-label="${i18nString(UIStrings.breadcrumbs)}">
+        <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
           ${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
 
           <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -174,11 +174,16 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError:
+        this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidValue));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
+        break;
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
         this.appendColumnTitle(header, i18nString(UIStrings.disallowedRequestMethod));
@@ -249,6 +254,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       case Protocol.Network.CorsError.InvalidAllowCredentials:
       case Protocol.Network.CorsError.PreflightInvalidAllowCredentials:
         return 'Access-Control-Allow-Credentials';
+      case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
+      case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
+        return 'Access-Control-Allow-Private-Network';
       case Protocol.Network.CorsError.RedirectContainsCredentials:
       case Protocol.Network.CorsError.PreflightDisallowedRedirect:
         return 'Location';
@@ -360,13 +368,21 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
         this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
         this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError: {
+        element.appendChild(this.createRequestCell(details.request, opts));
+        this.appendStatus(element, details.isWarning);
+        element.appendChild(this.createRequestCell(details.request, {...opts, linkToPreflight: true, highlightHeader}));
+        this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
+        this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
+        this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
+        break;
+      }
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Lighthouse from './lighthouse.js';
@@ -22,8 +21,6 @@ let loadedLighthouseModule: (typeof Lighthouse|undefined);
 
 async function loadLighthouseModule(): Promise<typeof Lighthouse> {
   if (!loadedLighthouseModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/lighthouse');
     loadedLighthouseModule = await import('./lighthouse.js');
   }
   return loadedLighthouseModule;

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -16,6 +16,7 @@ import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
 import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import type {RequestTimeRange} from './RequestTimingView.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
+import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const BAR_SPACING = 1;
 
@@ -271,6 +272,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
       show: (popover: UI.GlassPane.GlassPane): Promise<true> => {
         const content =
             RequestTimingView.createTimingTable((request as SDK.NetworkRequest.NetworkRequest), this.calculator);
+        popover.registerCSSFiles([networkingTimingTableStyles]);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -217,7 +218,8 @@ export class CPUProfileFlameChart extends
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, _shouldJump: boolean, jumpBackwards?: boolean): void {
-    const matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
+    const matcher =
+        Platform.StringUtilities.createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
 
     const selectedEntryIndex: number = this.searchResultIndex !== -1 ? this.searchResults[this.searchResultIndex] : -1;
     this.searchResults = [];

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -28,6 +28,7 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -528,7 +529,7 @@ export class ProfileDataGridTree implements UI.SearchableView.Searchable {
       equalTo = true;
     }
 
-    const matcher = createPlainTextSearchRegex(query, 'i');
+    const matcher = Platform.StringUtilities.createPlainTextSearchRegex(query, 'i');
 
     function matchesQuery(profileDataGridNode: ProfileDataGridNode): boolean {
       profileDataGridNode.searchMatchedSelfColumn = false;

package/front_end/panels/search/SearchView.ts

@@ -432,18 +432,38 @@ export class SearchView extends UI.Widget.VBox {
     }
   }
 
+  /**
+   * Handles keydown event on panel itself for handling expand/collapse all shortcut
+   *
+   * We use `event.code` instead of `event.key` here to check whether the shortcut is triggered.
+   * The reason is, `event.key` is dependent on the modification keys, locale and keyboard layout.
+   * Usually it is useful when we care about the character that needs to be printed.
+   *
+   * However, our aim in here is to assign a shortcut to the physical key combination on the keyboard
+   * not on the character that the key combination prints.
+   *
+   * For example, `Cmd + [` shortcut in global shortcuts map to focusing on previous panel.
+   * In Turkish - Q keyboard layout, the key combination that triggers the shortcut prints `ğ`
+   * character. Whereas in Turkish - Q Legacy keyboard layout, the shortcut that triggers focusing
+   * on previous panel prints `[` character. So, if we use `event.key` and check
+   * whether it is `[`, we break the shortcut in Turkish - Q keyboard layout.
+   *
+   * @param event KeyboardEvent
+   */
   private onKeyDownOnPanel(event: KeyboardEvent): void {
     const isMac = Host.Platform.isMac();
     // "Command + Alt + ]" for Mac
-    const shouldShowAllForMac = isMac && event.metaKey && !event.ctrlKey && event.altKey && event.key === ']';
+    const shouldShowAllForMac =
+        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketRight';
     // "Ctrl + Shift + }" for other platforms
     const shouldShowAllForOtherPlatforms =
-        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.key === '}';
+        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketRight';
     // "Command + Alt + [" for Mac
-    const shouldCollapseAllForMac = isMac && event.metaKey && !event.ctrlKey && event.altKey && event.key === '[';
+    const shouldCollapseAllForMac =
+        isMac && event.metaKey && !event.ctrlKey && event.altKey && event.code === 'BracketLeft';
     // "Command + Alt + {" for other platforms
     const shouldCollapseAllForOtherPlatforms =
-        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.key === '{';
+        !isMac && event.ctrlKey && !event.metaKey && event.shiftKey && event.code === 'BracketLeft';
 
     if (shouldShowAllForMac || shouldShowAllForOtherPlatforms) {
       this.searchResultsPane?.showAllMatches();

package/front_end/panels/settings/components/SyncSection.ts

@@ -92,7 +92,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
@@ -104,7 +104,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -356,9 +356,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <input
           class="input-field"
           type="text"
-          @input="${handleInputChange}"
-          .value="${value}"
-          placeholder="${placeholder}"
+          @input=${handleInputChange}
+          .value=${value}
+          placeholder=${placeholder}
         />
       </label>
     `;
@@ -376,22 +376,22 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.platformLabel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.platformProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.platformProperties)} role="group">
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformNameChange}"
-          .value="${platform}"
-          placeholder="${i18nString(UIStrings.platformPlaceholder)}"
-          aria-label="${i18nString(UIStrings.platformLabel)}"
+          @input=${handlePlatformNameChange}
+          .value=${platform}
+          placeholder=${i18nString(UIStrings.platformPlaceholder)}
+          aria-label=${i18nString(UIStrings.platformLabel)}
         />
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformVersionChange}"
-          .value="${platformVersion}"
-          placeholder="${i18nString(UIStrings.platformVersion)}"
-          aria-label="${i18nString(UIStrings.platformVersion)}"
+          @input=${handlePlatformVersionChange}
+          .value=${platformVersion}
+          placeholder=${i18nString(UIStrings.platformVersion)}
+          aria-label=${i18nString(UIStrings.platformVersion)}
         />
       </div>
     `;
@@ -409,20 +409,20 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     const mobileCheckboxInput = this.showMobileCheckbox ? LitHtml.html`
       <label class="mobile-checkbox-container">
-        <input type="checkbox" @input="${handleMobileChange}" .checked="${mobile}" />
+        <input type="checkbox" @input=${handleMobileChange} .checked=${mobile} />
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
                                                           LitHtml.html``;
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.deviceProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">
         <input
           class="input-field ${this.showMobileCheckbox ? 'device-model-input' : 'full-row'}"
           type="text"
-          @input="${handleDeviceModelChange}"
-          .value="${model}"
-          placeholder="${i18nString(UIStrings.deviceModel)}"
+          @input=${handleDeviceModelChange}
+          .value=${model}
+          placeholder=${i18nString(UIStrings.deviceModel)}
         />
         ${mobileCheckboxInput}
       </div>
@@ -459,41 +459,41 @@ export class UserAgentClientHintsForm extends HTMLElement {
         this.handleBrandInputChange(value, index, 'brandVersion');
       };
       return LitHtml.html`
-        <div class="full-row brand-row" aria-label="${i18nString(UIStrings.brandProperties)}" role="group">
+        <div class="full-row brand-row" aria-label=${i18nString(UIStrings.brandProperties)} role="group">
           <input
             class="input-field brand-name-input"
             type="text"
-            @input="${handleBrandBrowserChange}"
-            .value="${brand}"
+            @input=${handleBrandBrowserChange}
+            .value=${brand}
             id="brand-${index + 1}-input"
-            placeholder="${i18nString(UIStrings.brandName)}"
-            aria-label="${i18nString(UIStrings.brandNameAriaLabel, {
+            placeholder=${i18nString(UIStrings.brandName)}
+            aria-label=${i18nString(UIStrings.brandNameAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <input
             class="input-field"
             type="text"
-            @input="${handleBrandVersionChange}"
-            .value="${version}"
-            placeholder="${i18nString(UIStrings.version)}"
-            aria-label="${i18nString(UIStrings.brandVersionAriaLabel, {
+            @input=${handleBrandVersionChange}
+            .value=${version}
+            placeholder=${i18nString(UIStrings.version)}
+            aria-label=${i18nString(UIStrings.brandVersionAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <${IconButton.Icon.Icon.litTagName}
             .data=${
           {color: 'var(--client-hints-form-icon-color)', iconName: 'trash_bin_icon', width: '10px', height: '14px'} as
           IconButton.Icon.IconData}
-            title="${i18nString(UIStrings.deleteTooltip)}"
+            title=${i18nString(UIStrings.deleteTooltip)}
             class="delete-icon"
             tabindex="0"
             role="button"
-            @click="${handleDeleteClick}"
-            @keypress="${handleKeyPress}"
-            aria-label="${i18nString(UIStrings.brandDeleteAriaLabel, {
+            @click=${handleDeleteClick}
+            @keypress=${handleKeyPress}
+            aria-label=${i18nString(UIStrings.brandDeleteAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           >
           </${IconButton.Icon.Icon.litTagName}>
         </div>
@@ -507,9 +507,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         role="button"
         tabindex="0"
         id="add-brand-button"
-        aria-label="${i18nString(UIStrings.addBrand)}"
-        @click="${this.handleAddBrandClick}"
-        @keypress="${this.handleAddBrandKeyPress}"
+        aria-label=${i18nString(UIStrings.addBrand)}
+        @click=${this.handleAddBrandClick}
+        @keypress=${this.handleAddBrandKeyPress}
       >
         <${IconButton.Icon.Icon.litTagName}
           aria-hidden="true"
@@ -547,16 +547,16 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <div
           class="tree-title"
           role="button"
-          @click="${this.handleTreeClick}"
+          @click=${this.handleTreeClick}
           tabindex="0"
-          @keydown="${this.handleTreeExpand}"
-          aria-expanded="${this.isFormOpened}"
+          @keydown=${this.handleTreeExpand}
+          aria-expanded=${this.isFormOpened}
           aria-controls="form-container"
-          @disabled="${this.isFormDisabled}"
-          aria-disabled="${this.isFormDisabled}"
+          @disabled=${this.isFormDisabled}
+          aria-disabled=${this.isFormDisabled}
         >
           <${IconButton.Icon.Icon.litTagName}
-            class="${this.isFormOpened ? '' : 'rotate-icon'}"
+            class=${this.isFormOpened ? '' : 'rotate-icon'}
             .data=${
         {color: 'var(--client-hints-form-icon-color)', iconName: 'chromeSelect', width: '20px'} as
         IconButton.Icon.IconData}
@@ -568,8 +568,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="info-link"
-           @keypress="${this.handleLinkPress}"
-           aria-label="${i18nString(UIStrings.userAgentClientHintsInfo)}"
+           @keypress=${this.handleLinkPress}
+           aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)}
           >
             <${IconButton.Icon.Icon.litTagName}
               .data=${
@@ -582,7 +582,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <form
           id="form-container"
           class="form-container ${this.isFormOpened ? '' : 'hide-container'}"
-          @submit="${this.handleSubmit}"
+          @submit=${this.handleSubmit}
         >
           ${brandSection}
           ${fullBrowserInput}
@@ -591,7 +591,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
           ${deviceModelSection}
           ${submitButton}
         </form>
-        <div aria-live="polite" aria-label="${this.brandsModifiedAriaMessage}"></div>
+        <div aria-live="polite" aria-label=${this.brandsModifiedAriaMessage}></div>
       </section>
     `;
     // clang-format off

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) {
@@ -685,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);
       }
@@ -811,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;
@@ -957,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);
@@ -1098,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>[] = [];
@@ -1520,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/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;