chrome-devtools-frontend 1.0.940255 → 1.0.942095

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/perf_ui/OverviewGrid.ts

@@ -35,6 +35,7 @@ import * as UI from '../../legacy.js';
 
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
+import overviewGridStyles from './overviewGrid.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -161,7 +162,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
     this.parentElement.addEventListener('wheel', this.onMouseWheel.bind(this), true);
     this.parentElement.addEventListener('dblclick', this.resizeWindowMaximum.bind(this), true);
-    UI.Utils.appendStyle(this.parentElement, 'ui/legacy/components/perf_ui/overviewGrid.css');
+    UI.Utils.appendStyle(this.parentElement, overviewGridStyles);
 
     this.leftResizeElement = parentElement.createChild('div', 'overview-grid-window-resizer') as HTMLElement;
     UI.UIUtils.installDragHandle(

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

@@ -36,6 +36,8 @@ import * as Host from '../../../../core/host/host.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
+import timelineGridStyles from './timelineGrid.css.legacy.js';
+
 const labelMap = new Map<HTMLDivElement|HTMLElement, HTMLDivElement>();
 
 export class TimelineGrid {
@@ -47,7 +49,7 @@ export class TimelineGrid {
 
   constructor() {
     this.element = document.createElement('div');
-    UI.Utils.appendStyle(this.element, 'ui/legacy/components/perf_ui/timelineGrid.css');
+    UI.Utils.appendStyle(this.element, timelineGridStyles);
 
     this.dividersElementInternal = this.element.createChild('div', 'resources-dividers');
 

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

@@ -36,6 +36,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type {WindowChangedWithPositionEvent} from './OverviewGrid.js';
 import {Events as OverviewGridEvents, OverviewGrid} from './OverviewGrid.js';
 import type {Calculator} from './TimelineGrid.js';
+import timelineOverviewInfoStyles from './timelineOverviewInfo.css.js';
 
 export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
@@ -426,7 +427,7 @@ export class OverviewInfo {
     this.visible = false;
     this.element = UI.Utils
                        .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-                         cssFile: 'ui/legacy/components/perf_ui/timelineOverviewInfo.css',
+                         cssFile: [timelineOverviewInfoStyles],
                          delegatesFocus: undefined,
                        })
                        .createChild('div', 'overview-info');

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);
   }
 }