chrome-devtools-frontend 1.0.941208 → 1.0.942095

package/front_end/ui/components/text_editor/text_editor.ts

@@ -4,4 +4,5 @@
 
 export * as Config from './config.js';
 export * as JavaScript from './javascript.js';
+export * as Position from './position.js';
 export * as TextEditor from './TextEditor.js';

package/front_end/ui/components/text_editor/theme.ts

@@ -52,6 +52,10 @@ export const editorTheme = CM.EditorView.theme({
     backgroundColor: 'var(--color-background)',
   },
 
+  '.cm-lineNumbers': {
+    overflow: 'visible',
+    minWidth: '40px',
+  },
   '.cm-lineNumbers .cm-gutterElement': {
     color: 'var(--color-line-number)',
     padding: '0 3px 0 9px',
@@ -74,7 +78,7 @@ export const editorTheme = CM.EditorView.theme({
   },
 
   '.cm-trailingWhitespace': {
-    backgroundColor: 'var(--color-error-text)',
+    backgroundColor: 'var(--color-trailing-whitespace)',
   },
 
   '.cm-highlightedTab': {

package/front_end/ui/legacy/Infobar.ts

@@ -46,9 +46,7 @@ export class Infobar {
   private readonly closeContainer: HTMLElement;
   private readonly toggleElement: HTMLButtonElement;
   private readonly closeButton: HTMLElement;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private closeCallback: (() => any)|null;
+  private closeCallback: (() => void)|null;
   private parentView?: Widget;
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -160,9 +158,7 @@ export class Infobar {
     this.onResize();
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setCloseCallback(callback: (() => any)|null): void {
+  setCloseCallback(callback: (() => void)|null): void {
     this.closeCallback = callback;
   }
 

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -144,27 +144,31 @@ export class ShortcutRegistry {
     return this.devToolsDefaultShortcutActions.has(actionId);
   }
 
-  addShortcutListener(element: Element, handlers: {
-    [x: string]: () => Promise<boolean>,
-  }): (arg0: Event) => void {
+  getShortcutListener(handlers: {[x: string]: () => Promise<boolean>}): (event: KeyboardEvent) => void {
+    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     // We only want keys for these specific actions to get handled this
     // way; all others should be allowed to bubble up.
     const allowlistKeyMap = new ShortcutTreeNode(0, 0);
-    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     shortcuts.forEach(shortcut => {
       allowlistKeyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
     });
 
-    const listener = (event: Event): void => {
-      const key = KeyboardShortcut.makeKeyFromEvent((event as KeyboardEvent));
+    return (event: KeyboardEvent): void => {
+      const key = KeyboardShortcut.makeKeyFromEvent(event);
       const keyMap = this.activePrefixKey ? allowlistKeyMap.getNode(this.activePrefixKey.key()) : allowlistKeyMap;
       if (!keyMap) {
         return;
       }
       if (keyMap.getNode(key)) {
-        this.handleShortcut((event as KeyboardEvent), handlers);
+        this.handleShortcut(event, handlers);
       }
     };
+  }
+
+  addShortcutListener(element: Element, handlers: {
+    [x: string]: () => Promise<boolean>,
+  }): (arg0: Event) => void {
+    const listener = this.getShortcutListener(handlers) as (event: Event) => void;
     element.addEventListener('keydown', listener);
     return listener;
   }

package/front_end/ui/legacy/components/perf_ui/LineLevelProfile.ts

@@ -2,37 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as SourceFrame from '../source_frame/source_frame.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 
-const UIStrings = {
-  /**
-  *@description The milisecond unit
-  */
-  ms: 'ms',
-  /**
-  *@description Unit for data size in DevTools
-  */
-  mb: 'MB',
-  /**
-  *@description A unit
-  */
-  kb: 'kB',
-};
-const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/LineLevelProfile.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let performanceInstance: Performance;
 
 export class Performance {
   private readonly helper: Helper;
 
   private constructor() {
-    this.helper = new Helper('performance');
+    this.helper = new Helper(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
   }
 
   static instance(opts: {
@@ -112,7 +94,7 @@ let memoryInstance: Memory;
 export class Memory {
   private readonly helper: Helper;
   private constructor() {
-    this.helper = new Helper('memory');
+    this.helper = new Helper(SourceFrame.SourceFrame.DecoratorType.MEMORY);
   }
 
   static instance(opts: {
@@ -193,10 +175,12 @@ export class Helper {
     }, 0);
   }
 
-  private doUpdate(): void {
+  private async doUpdate(): Promise<void> {
     this.locationPool.disposeAll();
-    Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodes().forEach(
-        uiSourceCode => uiSourceCode.removeDecorationsForType(this.type));
+    // Map from sources to line->value profile maps.
+    const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, number>>();
+    const pending: Promise<void>[] = [];
+
     for (const targetToScript of this.lineData) {
       const target = (targetToScript[0] as SDK.Target.Target | null);
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
@@ -206,124 +190,44 @@ export class Helper {
         const lineToDataMap = (scriptToLine[1] as Map<number, number>);
         // debuggerModel is null when the profile is loaded from file.
         // Try to get UISourceCode by the URL in this case.
-        const uiSourceCode = !debuggerModel && typeof scriptIdOrUrl === 'string' ?
-            Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(scriptIdOrUrl) :
-            null;
-        if (!debuggerModel && !uiSourceCode) {
-          continue;
-        }
-        for (const lineToData of lineToDataMap) {
-          const line = (lineToData[0] as number) - 1;
-          const data = (lineToData[1] as number);
-          if (uiSourceCode) {
-            uiSourceCode.addLineDecoration(line, this.type, data);
-            continue;
-          }
-          if (debuggerModel) {
+        const workspace = Workspace.Workspace.WorkspaceImpl.instance();
+        if (debuggerModel) {
+          const workspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+          for (const lineToData of lineToDataMap) {
+            const line = lineToData[0] - 1;
+            const data = lineToData[1];
             const rawLocation = typeof scriptIdOrUrl === 'string' ?
                 debuggerModel.createRawLocationByURL(scriptIdOrUrl, line, 0) :
                 debuggerModel.createRawLocationByScriptId(String(scriptIdOrUrl) as Protocol.Runtime.ScriptId, line, 0);
             if (rawLocation) {
-              new Presentation(rawLocation, this.type, data, this.locationPool);
+              pending.push(workspaceBinding.rawLocationToUILocation(rawLocation).then((uiLocation): void => {
+                if (uiLocation) {
+                  let lineMap = decorationsBySource.get(uiLocation.uiSourceCode);
+                  if (!lineMap) {
+                    lineMap = new Map<number, number>();
+                    decorationsBySource.set(uiLocation.uiSourceCode, lineMap);
+                  }
+                  lineMap.set(uiLocation.lineNumber + 1, data);
+                }
+              }));
             }
           }
+        } else if (typeof scriptIdOrUrl === 'string') {
+          const uiSourceCode = workspace.uiSourceCodeForURL(scriptIdOrUrl);
+          if (uiSourceCode) {
+            decorationsBySource.set(uiSourceCode, lineToDataMap);
+          }
         }
       }
+      await Promise.all(pending);
+      for (const [uiSourceCode, lineMap] of decorationsBySource) {
+        uiSourceCode.setDecorationData(this.type, lineMap);
+      }
     }
-  }
-}
-
-export class Presentation {
-  private readonly type: string;
-  private readonly time: number;
-  private uiLocation: Workspace.UISourceCode.UILocation|null;
-
-  constructor(
-      rawLocation: SDK.DebuggerModel.Location, type: string, time: number,
-      locationPool: Bindings.LiveLocation.LiveLocationPool) {
-    this.type = type;
-    this.time = time;
-    this.uiLocation = null;
-    Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createLiveLocation(
-        rawLocation, this.updateLocation.bind(this), locationPool);
-  }
-
-  async updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    if (this.uiLocation) {
-      this.uiLocation.uiSourceCode.removeDecorationsForType(this.type);
-    }
-    this.uiLocation = await liveLocation.uiLocation();
-    if (this.uiLocation) {
-      this.uiLocation.uiSourceCode.addLineDecoration(this.uiLocation.lineNumber, this.type, this.time);
-    }
-  }
-}
-
-let lineDecoratorInstance: LineDecorator;
-
-export class LineDecorator implements SourceFrame.SourceFrame.LineDecorator {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): LineDecorator {
-    const {forceNew} = opts;
-    if (!lineDecoratorInstance || forceNew) {
-      lineDecoratorInstance = new LineDecorator();
-    }
-
-    return lineDecoratorInstance;
-  }
-  decorate(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor,
-      type: string): void {
-    const gutterType = `CodeMirror-gutter-${type}`;
-    const decorations = uiSourceCode.decorationsForType(type);
-    textEditor.uninstallGutter(gutterType);
-    if (!decorations || !decorations.size) {
-      return;
-    }
-    textEditor.installGutter(gutterType, false);
-    for (const decoration of decorations) {
-      const value = (decoration.data() as number);
-      const element = this.createElement(type, value);
-      textEditor.setGutterDecoration(decoration.range().startLine, gutterType, element);
-    }
-  }
-
-  private createElement(type: string, value: number): Element {
-    const element = document.createElement('div');
-    element.classList.add('text-editor-line-marker-text');
-    if (type === 'performance') {
-      const intensity = Platform.NumberUtilities.clamp(Math.log10(1 + 10 * value) / 5, 0.02, 1);
-      element.textContent = value.toFixed(1);
-      element.style.backgroundColor = `hsla(44, 100%, 50%, ${intensity.toFixed(3)})`;
-      element.createChild('span', 'line-marker-units').textContent = i18nString(UIStrings.ms);
-    } else {
-      const intensity = Platform.NumberUtilities.clamp(Math.log10(1 + 2e-3 * value) / 5, 0.02, 1);
-      element.style.backgroundColor = `hsla(217, 100%, 70%, ${intensity.toFixed(3)})`;
-      value /= 1e3;
-      let units;
-      let fractionDigits;
-      if (value >= 1e3) {
-        units = i18nString(UIStrings.mb);
-        value /= 1e3;
-        fractionDigits = value >= 20 ? 0 : 1;
-      } else {
-        units = i18nString(UIStrings.kb);
-        fractionDigits = 0;
+    for (const uiSourceCode of Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodes()) {
+      if (!decorationsBySource.has(uiSourceCode)) {
+        uiSourceCode.setDecorationData(this.type, undefined);
       }
-      element.textContent = value.toFixed(fractionDigits);
-      element.createChild('span', 'line-marker-units').textContent = units;
     }
-    return element;
   }
 }
-
-SourceFrame.SourceFrame.registerLineDecorator({
-  lineDecorator: LineDecorator.instance,
-  decoratorType: SourceFrame.SourceFrame.DecoratorType.MEMORY,
-});
-
-SourceFrame.SourceFrame.registerLineDecorator({
-  lineDecorator: LineDecorator.instance,
-  decoratorType: SourceFrame.SourceFrame.DecoratorType.PERFORMANCE,
-});

package/front_end/ui/legacy/components/source_frame/BinaryResourceViewFactory.ts

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../../../core/common/common.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
-import type * as UI from '../../legacy.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
 
@@ -64,7 +63,7 @@ export class BinaryResourceViewFactory {
     return new ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
             this.contentUrl, this.resourceType, this.base64content),
-        /* autoPrettyPrint */ false, ({lineNumbers: false, lineWrapping: true} as UI.TextEditor.Options));
+        this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: true});
   }
 
   createHexView(): ResourceSourceFrame {
@@ -75,8 +74,7 @@ export class BinaryResourceViewFactory {
           return {content, isEncoded: false};
         });
     return new ResourceSourceFrame(
-        hexViewerContentProvider,
-        /* autoPrettyPrint */ false, ({lineNumbers: false, lineWrapping: false} as UI.TextEditor.Options));
+        hexViewerContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: false});
   }
 
   createUtf8View(): ResourceSourceFrame {
@@ -84,8 +82,7 @@ export class BinaryResourceViewFactory {
     const utf8ContentProvider =
         new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, utf8fn);
     return new ResourceSourceFrame(
-        utf8ContentProvider,
-        /* autoPrettyPrint */ false, ({lineNumbers: true, lineWrapping: true} as UI.TextEditor.Options));
+        utf8ContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
   }
 
   static uint8ArrayToHexString(uint8Array: Uint8Array): string {

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -35,6 +35,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import type {SourceFrameOptions} from './SourceFrame.js';
 import {SourceFrameImpl} from './SourceFrame.js';
 
 const UIStrings = {
@@ -50,40 +51,43 @@ export class ResourceSourceFrame extends SourceFrameImpl {
   private readonly resourceInternal: TextUtils.ContentProvider.ContentProvider;
 
   constructor(
-      resource: TextUtils.ContentProvider.ContentProvider, autoPrettyPrint?: boolean,
-      codeMirrorOptions?: UI.TextEditor.Options) {
-    super(() => resource.requestContent(), codeMirrorOptions);
+      resource: TextUtils.ContentProvider.ContentProvider, private readonly givenContentType: string,
+      options?: SourceFrameOptions) {
+    super(() => resource.requestContent(), options);
     this.resourceInternal = resource;
   }
 
   static createSearchableView(
-      resource: TextUtils.ContentProvider.ContentProvider, highlighterType: string,
+      resource: TextUtils.ContentProvider.ContentProvider, contentType: string,
       autoPrettyPrint?: boolean): UI.Widget.Widget {
-    return new SearchableContainer(resource, highlighterType, autoPrettyPrint);
+    return new SearchableContainer(resource, contentType, autoPrettyPrint);
+  }
+
+  protected getContentType(): string {
+    return this.givenContentType;
   }
 
   get resource(): TextUtils.ContentProvider.ContentProvider {
     return this.resourceInternal;
   }
 
-  populateTextAreaContextMenu(contextMenu: UI.ContextMenu.ContextMenu, _lineNumber: number, _columnNumber: number):
-      Promise<void> {
+  protected populateTextAreaContextMenu(
+      contextMenu: UI.ContextMenu.ContextMenu, lineNumber: number, columnNumber: number): void {
+    super.populateTextAreaContextMenu(contextMenu, lineNumber, columnNumber);
     contextMenu.appendApplicableItems(this.resourceInternal);
-    return Promise.resolve();
   }
 }
 
 export class SearchableContainer extends UI.Widget.VBox {
   private readonly sourceFrame: ResourceSourceFrame;
 
-  constructor(resource: TextUtils.ContentProvider.ContentProvider, highlighterType: string, autoPrettyPrint?: boolean) {
+  constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
     this.registerRequiredCSS('ui/legacy/components/source_frame/resourceSourceFrame.css');
-    const sourceFrame = new ResourceSourceFrame(resource, autoPrettyPrint);
+    const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;
-    sourceFrame.setHighlighterType(highlighterType);
-    const canPrettyPrint = sourceFrame.resource.contentType().isDocumentOrScriptOrStyleSheet() ||
-        sourceFrame.highlighterType() === 'application/json';
+    const canPrettyPrint =
+        sourceFrame.resource.contentType().isDocumentOrScriptOrStyleSheet() || contentType === 'application/json';
     sourceFrame.setCanPrettyPrint(canPrettyPrint, autoPrettyPrint);
     const searchableView = new UI.SearchableView.SearchableView(sourceFrame, sourceFrame);
     searchableView.element.classList.add('searchable-view');
@@ -99,6 +103,6 @@ export class SearchableContainer extends UI.Widget.VBox {
   }
 
   async revealPosition(lineNumber: number, columnNumber?: number): Promise<void> {
-    this.sourceFrame.revealPosition(lineNumber, columnNumber, true);
+    this.sourceFrame.revealPosition({lineNumber, columnNumber}, true);
   }
 }