chrome-devtools-frontend 1.0.941208 → 1.0.943182

package/front_end/ui/legacy/RootView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import rootViewStyles from './rootView.css.legacy.js';
 import {VBox} from './Widget.js';
 import {ZoomManager} from './ZoomManager.js';
 
@@ -11,7 +12,7 @@ export class RootView extends VBox {
     super();
     this.markAsRoot();
     this.element.classList.add('root-view');
-    this.registerRequiredCSS('ui/legacy/rootView.css');
+    this.registerRequiredCSS(rootViewStyles);
     this.element.setAttribute('spellcheck', 'false');
   }
 

package/front_end/ui/legacy/SearchableView.ts

@@ -39,6 +39,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {HistoryInput} from './HistoryInput.js';
 import {InspectorView} from './InspectorView.js';
+import searchableViewStyles from './searchableView.css.legacy.js';
 import {Toolbar, ToolbarButton, ToolbarToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {createTextButton} from './UIUtils.js';
@@ -123,7 +124,7 @@ export class SearchableView extends VBox {
 
   constructor(searchable: Searchable, replaceable: Replaceable|null, settingName?: string) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/searchableView.css');
+    this.registerRequiredCSS(searchableViewStyles);
     searchableViewsByElement.set(this.element, this);
 
     this.searchProvider = searchable;

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/SoftContextMenu.ts

@@ -35,8 +35,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
+import softContextMenuStyles from './softContextMenu.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -101,7 +102,7 @@ export class SoftContextMenu {
     this.glassPane = new GlassPane();
     this.glassPane.setPointerEventsBehavior(
         this.parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
-    this.glassPane.registerRequiredCSS('ui/legacy/softContextMenu.css');
+    this.glassPane.registerRequiredCSS(softContextMenuStyles);
     this.glassPane.setContentAnchorBox(anchorBox);
     this.glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
     this.glassPane.setMarginBehavior(MarginBehavior.NoMargin);

package/front_end/ui/legacy/SoftDropDown.ts

@@ -14,6 +14,8 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import type {ItemsReplacedEvent, ListModel} from './ListModel.js';
 import {Events as ListModelEvents} from './ListModel.js';
+import softDropDownStyles from './softDropDown.css.legacy.js';
+import softDropDownButtonStyles from './softDropDownButton.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -46,7 +48,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
 
     this.element = document.createElement('button');
     this.element.classList.add('soft-dropdown');
-    Utils.appendStyle(this.element, 'ui/legacy/softDropDownButton.css');
+    Utils.appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
     this.element.appendChild(dropdownArrowIcon);
@@ -63,7 +65,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.width = 315;
     Utils
         .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-          cssFile: 'ui/legacy/softDropDown.css',
+          cssFile: softDropDownStyles,
           delegatesFocus: undefined,
         })
         .appendChild(this.list.element);

package/front_end/ui/legacy/SplitWidget.ts

@@ -37,6 +37,7 @@ import {Events as ResizerWidgetEvents, SimpleResizerWidget} from './ResizerWidge
 import {ToolbarButton} from './Toolbar.js';
 import {Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import splitWidgetStyles from './splitWidget.css.legacy.js';
 
 export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
   private sidebarElementInternal: HTMLElement;
@@ -77,7 +78,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       defaultSidebarHeight?: number, constraintsInDip?: boolean) {
     super(true);
     this.element.classList.add('split-widget');
-    this.registerRequiredCSS('ui/legacy/splitWidget.css');
+    this.registerRequiredCSS(splitWidgetStyles);
 
     this.contentElement.classList.add('shadow-split-widget');
     this.sidebarElementInternal =

package/front_end/ui/legacy/SuggestBox.ts

@@ -41,6 +41,7 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import {ListModel} from './ListModel.js';
 import {measurePreferredSize} from './UIUtils.js';
+import suggestBoxStyles from './suggestBox.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -107,7 +108,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.glassPane.contentElement, {cssFile: 'ui/legacy/suggestBox.css', delegatesFocus: undefined});
+        this.glassPane.contentElement, {cssFile: suggestBoxStyles, delegatesFocus: undefined});
     shadowRoot.appendChild(this.element);
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -43,6 +43,7 @@ import {installDragHandle, invokeOnceAfterBatchUpdate} from './UIUtils.js';
 import type {Widget} from './Widget.js';
 import {VBox} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import tabbedPaneStyles from './tabbedPane.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -110,7 +111,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/tabbedPane.css');
+    this.registerRequiredCSS(tabbedPaneStyles);
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
     this.contentElement.tabIndex = -1;

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import targetCrashedScreenStyles from './targetCrashedScreen.css.legacy.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
@@ -22,7 +23,7 @@ export class TargetCrashedScreen extends VBox {
   private readonly hideCallback: () => void;
   constructor(hideCallback: () => void) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/targetCrashedScreen.css');
+    this.registerRequiredCSS(targetCrashedScreenStyles);
     this.contentElement.createChild('div', 'message').textContent =
         i18nString(UIStrings.devtoolsWasDisconnectedFromThe);
     this.contentElement.createChild('div', 'message').textContent =

package/front_end/ui/legacy/TextPrompt.ts

@@ -43,6 +43,7 @@ import type {SuggestBoxDelegate, Suggestion} from './SuggestBox.js';
 import {SuggestBox} from './SuggestBox.js';
 import {Tooltip} from './Tooltip.js';
 import {ElementFocusRestorer} from './UIUtils.js';
+import textPromptStyles from './textPrompt.css.legacy.js';
 
 export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SuggestBoxDelegate {
   private proxyElement!: HTMLElement|undefined;
@@ -135,7 +136,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.boundOnMouseWheel = this.onMouseWheel.bind(this);
     this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
     this.proxyElement = element.ownerDocument.createElement('span');
-    Utils.appendStyle(this.proxyElement, 'ui/legacy/textPrompt.css');
+    Utils.appendStyle(this.proxyElement, textPromptStyles);
     this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
     this.proxyElement.style.display = this.proxyElementDisplay;
     if (element.parentElement) {

package/front_end/ui/legacy/Toolbar.ts

@@ -46,6 +46,7 @@ import type {Suggestion} from './SuggestBox.js';
 import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, LongClickController} from './UIUtils.js';
+import toolbarStyles from './toolbar.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -75,8 +76,8 @@ export class Toolbar {
     this.element.className = className;
     this.element.classList.add('toolbar');
     this.enabled = true;
-    this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/toolbar.css', delegatesFocus: undefined});
+    this.shadowRoot =
+        Utils.createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles, delegatesFocus: undefined});
     this.contentElement = this.shadowRoot.createChild('div', 'toolbar-shadow');
     this.insertionPoint = this.contentElement.createChild('slot');
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -45,6 +45,7 @@ import {InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
 import {Tooltip} from './Tooltip.js';
 import {deepElementFromPoint, enclosingNodeOrSelfWithNodeNameInArray, isEditing} from './UIUtils.js';
+import treeoutlineStyles from './treeoutline.css.legacy.js';
 
 const nodeToParentTreeElementMap = new WeakMap<Node, TreeElement>();
 
@@ -391,14 +392,14 @@ export class TreeOutlineInShadow extends TreeOutline {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = document.createElement('div');
-    this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/treeoutline.css', delegatesFocus: undefined});
+    this.shadowRoot =
+        Utils.createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles, delegatesFocus: undefined});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
     Utils.appendStyle(this.shadowRoot, cssFile);
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -46,13 +46,20 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {ToolbarButton} from './Toolbar.js';
 import {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import type {TreeOutline} from './Treeoutline.js';
+import checkboxTextLabelStyles from './checkboxTextLabel.css.legacy.js';
+import closeButtonStyles from './closeButton.css.legacy.js';
+import confirmDialogStyles from './confirmDialog.css.legacy.js';
+import inlineButtonStyles from './inlineButton.css.legacy.js';
+import radioButtonStyles from './radioButton.css.legacy.js';
+import sliderStyles from './slider.css.legacy.js';
+import smallBubbleStyles from './smallBubble.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -1186,8 +1193,8 @@ export class CheckboxLabel extends HTMLSpanElement {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal = Utils.createShadowRootWithCoreStyles(
-        this, {cssFile: 'ui/legacy/checkboxTextLabel.css', delegatesFocus: undefined});
+    this.shadowRootInternal =
+        Utils.createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles, delegatesFocus: undefined});
     this.checkboxElement = (this.shadowRootInternal.createChild('input') as HTMLInputElement);
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
@@ -1268,8 +1275,7 @@ export class DevToolsRadioButton extends HTMLSpanElement {
     this.radioElement.id = id;
     this.radioElement.type = 'radio';
     this.labelElement.htmlFor = id;
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/radioButton.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: radioButtonStyles, delegatesFocus: undefined});
     root.createChild('slot');
     this.addEventListener('click', this.radioClickHandler.bind(this), false);
   }
@@ -1291,8 +1297,7 @@ export class DevToolsSlider extends HTMLSpanElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/slider.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: sliderStyles, delegatesFocus: undefined});
     this.sliderElement = document.createElement('input');
     this.sliderElement.classList.add('dt-range-input');
     this.sliderElement.type = 'range';
@@ -1315,8 +1320,7 @@ export class DevToolsSmallBubble extends HTMLSpanElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/smallBubble.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles, delegatesFocus: undefined});
     this.textElement = root.createChild('div');
     this.textElement.className = 'info';
     this.textElement.createChild('slot');
@@ -1336,8 +1340,7 @@ export class DevToolsCloseButton extends HTMLDivElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/closeButton.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: closeButtonStyles, delegatesFocus: undefined});
     this.buttonElement = (root.createChild('div', 'close-button') as HTMLElement);
     Tooltip.install(this.buttonElement, i18nString(UIStrings.close));
     ARIAUtils.setAccessibleName(this.buttonElement, i18nString(UIStrings.close));
@@ -1566,7 +1569,7 @@ export class MessageDialog {
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
     dialog.setDimmed(true);
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: 'ui/legacy/confirmDialog.css', delegatesFocus: undefined});
+        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
     const content = shadowRoot.createChild('div', 'widget');
     await new Promise(resolve => {
       const okButton = createTextButton(i18nString(UIStrings.ok), resolve, '', true);
@@ -1590,7 +1593,7 @@ export class ConfirmDialog {
     dialog.setDimmed(true);
     ARIAUtils.setAccessibleName(dialog.contentElement, message);
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: 'ui/legacy/confirmDialog.css', delegatesFocus: undefined});
+        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
     const content = shadowRoot.createChild('div', 'widget');
     content.createChild('div', 'message').createChild('span').textContent = message;
     const buttonsBar = content.createChild('div', 'button');
@@ -1615,7 +1618,7 @@ export class ConfirmDialog {
 export function createInlineButton(toolbarButton: ToolbarButton): Element {
   const element = document.createElement('span');
   const shadowRoot =
-      Utils.createShadowRootWithCoreStyles(element, {cssFile: 'ui/legacy/inlineButton.css', delegatesFocus: undefined});
+      Utils.createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles, delegatesFocus: undefined});
   element.classList.add('inline-button');
   const toolbar = new Toolbar('');
   toolbar.appendToolbarItem(toolbarButton);

package/front_end/ui/legacy/ViewManager.ts

@@ -18,6 +18,7 @@ import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from
 import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, ViewRegistration} from './ViewRegistration.js';
 import type {Widget, WidgetElement} from './Widget.js';
 import {VBox} from './Widget.js';
+import viewContainersStyles from './viewContainers.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -418,7 +419,7 @@ export class _ExpandableContainerWidget extends VBox {
   constructor(view: View) {
     super(true);
     this.element.classList.add('flex-none');
-    this.registerRequiredCSS('ui/legacy/viewContainers.css');
+    this.registerRequiredCSS(viewContainersStyles);
 
     this.titleElement = document.createElement('div');
     this.titleElement.classList.add('expandable-view-title');

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -222,8 +222,7 @@ export class CSSAngle extends HTMLElement {
             .data=${{
               angle: this.angle,
             } as CSSAngleSwatchData}>
-          </${CSSAngleSwatch.litTagName}><slot></slot>
-        </div>
+          </${CSSAngleSwatch.litTagName}><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
     `, this.shadow, {

package/front_end/ui/legacy/components/inline_editor/cssAngle.css

@@ -22,3 +22,7 @@ devtools-css-angle-editor {
   position: fixed;
   z-index: 2;
 }
+
+.preview {
+  display: inline-block;
+}

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -36,7 +36,7 @@ export class JavaScriptREPL {
 
   static async evaluateAndBuildPreview(
       text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
-      objectGroup?: string): Promise<{
+      objectGroup?: string, awaitPromise: boolean = false): Promise<{
     preview: DocumentFragment,
     result: SDK.RuntimeModel.EvaluationResult|null,
   }> {
@@ -60,7 +60,7 @@ export class JavaScriptREPL {
       returnByValue: undefined,
       allowUnsafeEvalBlockedByCSP: undefined,
     };
-    const result = await executionContext.evaluate(options, false /* userGesture */, false /* awaitPromise */);
+    const result = await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
     const preview = JavaScriptREPL.buildEvaluationPreview(result, allowErrors);
     return {preview, result};
   }

package/front_end/ui/legacy/components/object_ui/object_ui-meta.ts

@@ -2,19 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ObjectUI from './object_ui.js';
 
 let loadedObjectUIModule: (typeof ObjectUI|undefined);
 
 async function loadObjectUIModule(): Promise<typeof ObjectUI> {
   if (!loadedObjectUIModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('ui/legacy/components/object_ui');
     loadedObjectUIModule = await import('./object_ui.js');
   }
   return loadedObjectUIModule;

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