chrome-devtools-frontend 1.0.946920 → 1.0.947377

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -207,7 +207,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
+                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
+                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
     }
 
     this.affectedResources.appendChild(header);
@@ -433,7 +435,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
+                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
+                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
         break;
     }
 

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/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/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();