chrome-devtools-frontend 1.0.946351 → 1.0.948359

package/front_end/panels/elements/ElementsPanel.ts

@@ -291,8 +291,16 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showDOMTree(): void {
-    // TODO(meredithl): Scroll to inspected DOM node.
     this.splitWidget.setMainWidget(this.searchableViewInternal);
+    const selectedNode = this.selectedDOMNode();
+    if (!selectedNode) {
+      return;
+    }
+    const treeElement = this.treeElementForNode(selectedNode);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.select();
   }
 
   static instance(opts: {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1899,7 +1899,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.hideSearchHighlight();
 
     const text = this.listItemElement.textContent || '';
-    const regexObject = createPlainTextSearchRegex(this.searchQuery, 'gi');
+    const regexObject = Platform.StringUtilities.createPlainTextSearchRegex(this.searchQuery, 'gi');
 
     let match = regexObject.exec(text);
     const matchRanges = [];

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1616,7 +1616,6 @@ export class StylePropertiesSection {
 
   private onFontEditorButtonClicked(): void {
     if (this.fontEditorSectionManager && this.fontEditorButton) {
-      Host.userMetrics.cssEditorOpened('fontEditor');
       this.fontEditorSectionManager.showPopover(this.fontEditorButton.element, this.parentPane);
     }
   }

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/emulation/DeviceModeToolbar.ts

@@ -225,10 +225,6 @@ export class DeviceModeToolbar {
       showMediaInspectorSetting: Common.Settings.Setting<boolean>,
       showRulersSetting: Common.Settings.Setting<boolean>) {
     this.model = model;
-    const device = model.device();
-    if (device) {
-      this.recordDeviceChange(device, null);
-    }
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
 
@@ -302,16 +298,6 @@ export class DeviceModeToolbar {
     }
   }
 
-  private recordDeviceChange(
-      device: EmulationModel.EmulatedDevices.EmulatedDevice,
-      oldDevice: EmulationModel.EmulatedDevices.EmulatedDevice|null): void {
-    if (device !== oldDevice && device && device.isDualScreen) {
-      // When we start emulating a device, whether we start a new emulation session, or switch to
-      // a new device, if the device is dual screen, we count this once.
-      Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.DualScreenDeviceSelected);
-    }
-  }
-
   private createEmptyToolbarElement(): Element {
     const element = document.createElement('div');
     element.classList.add('device-mode-empty-toolbar-element');
@@ -527,7 +513,6 @@ export class DeviceModeToolbar {
 
   private emulateDevice(device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
-    this.recordDeviceChange(device, this.model.device());
     this.model.emulate(
         EmulationModel.DeviceModeModel.Type.Device, device, this.lastMode.get(device) || device.modes[0], scale);
   }
@@ -615,7 +600,6 @@ export class DeviceModeToolbar {
       return;
     }
 
-    Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.SpanButtonClicked);
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
     const mode = this.model.mode();
     if (!mode) {

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>[] = [];
@@ -1302,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);
       }
     }
@@ -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