chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

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

@@ -2,6 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// This file supports the gutter decorations visible in the Sources panel when a
+// performance trace is active, showing either the runtime sample measures or the
+// memory sampling (memory is behind the LiveHeapProfile experiment).
+//
+// When profiles are added, the associated UISourceCodes are given the profile data
+// as decorations. The raw profile locations are mapped to original source files in
+// this way.
+//
+// Note, while this is called "LineLevel", it's the profile data is actually granular
+// to the column.
+
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -29,8 +40,12 @@ export class Performance {
     return performanceInstance;
   }
 
-  reset(): void {
+  initialize(profiles: CPUProfile.CPUProfileDataModel.CPUProfileDataModel[], target: SDK.Target.Target|null): void {
     this.helper.reset();
+    for (const profile of profiles) {
+      this.appendCPUProfile(profile, target);
+    }
+    void this.helper.update();
   }
 
   private appendLegacyCPUProfile(
@@ -56,12 +71,13 @@ export class Performance {
     }
   }
 
-  appendCPUProfile(profile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel, target: SDK.Target.Target|null): void {
+  private appendCPUProfile(profile: CPUProfile.CPUProfileDataModel.CPUProfileDataModel, target: SDK.Target.Target|null):
+      void {
     if (!profile.lines) {
       this.appendLegacyCPUProfile(profile, target);
-      this.helper.scheduleUpdate();
       return;
     }
+
     if (!profile.samples || !profile.columns) {
       return;
     }
@@ -83,12 +99,12 @@ export class Performance {
       const time = profile.timestamps[i] - profile.timestamps[i - 1];
       this.helper.addLocationData(target, scriptIdOrUrl, {line, column}, time);
     }
-    this.helper.scheduleUpdate();
   }
 }
 
 let memoryInstance: Memory;
 
+// Note: this is used only by LiveHeapProfile (a drawer panel) if the experiment is enabled.
 export class Memory {
   private readonly helper: Helper;
   private constructor() {
@@ -108,12 +124,23 @@ export class Memory {
 
   reset(): void {
     this.helper.reset();
+    void this.helper.update();
+  }
+
+  initialize(profilesAndTargets: Array<{
+    profile: Protocol.HeapProfiler.SamplingHeapProfile,
+    target: SDK.Target.Target,
+  }>): void {
+    this.helper.reset();
+    for (const {profile, target} of profilesAndTargets) {
+      this.appendHeapProfile(profile, target);
+    }
+    void this.helper.update();
   }
 
-  appendHeapProfile(profile: Protocol.HeapProfiler.SamplingHeapProfile, target: SDK.Target.Target|null): void {
+  private appendHeapProfile(profile: Protocol.HeapProfiler.SamplingHeapProfile, target: SDK.Target.Target|null): void {
     const helper = this.helper;
     processNode(profile.head);
-    helper.scheduleUpdate();
 
     function processNode(node: Protocol.HeapProfiler.SamplingHeapProfileNode): void {
       node.children.forEach(processNode);
@@ -125,8 +152,8 @@ export class Memory {
         return;
       }
       const line = node.callFrame.lineNumber + 1;
-      // Since no column number is provided by the heap profile, default to 1 (beginning of line).
-      helper.addLocationData(target, script, {line, column: 1}, node.selfSize);
+      const column = node.callFrame.columnNumber + 1;
+      helper.addLocationData(target, script, {line, column}, node.selfSize);
     }
   }
 }
@@ -134,13 +161,14 @@ export class Memory {
 export class Helper {
   private readonly type: Workspace.UISourceCode.DecoratorType;
   private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
-  private updateTimer: number|null = null;
+
   /**
    * Given a location in a script (with line and column numbers being 1-based) stores
    * the time spent at that location in a performance profile.
    */
-  private locationData =
-      new Map<SDK.Target.Target|null, Map<Platform.DevToolsPath.UrlString|number, Map<number, Map<number, number>>>>();
+  private locationData = new Map<
+      SDK.Target.Target|null,
+      Map<Platform.DevToolsPath.UrlString|number, Workspace.UISourceCode.LineColumnProfileMap>>();
   constructor(type: Workspace.UISourceCode.DecoratorType) {
     this.type = type;
     this.reset();
@@ -149,7 +177,6 @@ export class Helper {
   reset(): void {
     // The second map uses string keys for script URLs and numbers for scriptId.
     this.locationData = new Map();
-    this.scheduleUpdate();
   }
 
   /**
@@ -176,20 +203,10 @@ export class Helper {
     lineData.set(column, (lineData.get(column) || 0) + data);
   }
 
-  scheduleUpdate(): void {
-    if (this.updateTimer) {
-      return;
-    }
-    this.updateTimer = window.setTimeout(() => {
-      this.updateTimer = null;
-      void this.doUpdate();
-    }, 0);
-  }
-
-  private async doUpdate(): Promise<void> {
+  async update(): Promise<void> {
     this.locationPool.disposeAll();
     // Map from sources to line->value profile maps.
-    const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, Map<number, number>>>();
+    const decorationsBySource: Workspace.UISourceCode.ProfileDataMap = new Map();
     const pending: Array<Promise<void>> = [];
     for (const [target, scriptToLineMap] of this.locationData) {
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
@@ -211,18 +228,21 @@ export class Helper {
                         String(scriptIdOrUrl) as Protocol.Runtime.ScriptId, zeroBasedLine, zeroBasedColumn || 0);
                 if (rawLocation) {
                   pending.push(workspaceBinding.rawLocationToUILocation(rawLocation).then(uiLocation => {
-                    if (uiLocation) {
-                      let lineMap = decorationsBySource.get(uiLocation.uiSourceCode);
-                      if (!lineMap) {
-                        lineMap = new Map<number, Map<number, number>>();
-                        decorationsBySource.set(uiLocation.uiSourceCode, lineMap);
-                      }
-                      let columnMap = lineMap.get(lineNumber);
-                      if (!columnMap) {
-                        columnMap = new Map<number, number>();
-                        lineMap.set(lineNumber, columnMap);
+                    if (!uiLocation) {
+                      return;
+                    }
+
+                    this.addLineColumnData(
+                        decorationsBySource, uiLocation.uiSourceCode, uiLocation.lineNumber + 1,
+                        (uiLocation.columnNumber ?? 0) + 1, data);
+
+                    // If the above was a source mapped UILocation, then we also need to add it to the generated UILocation.
+                    if (uiLocation.uiSourceCode.contentType().isFromSourceMap()) {
+                      const script = rawLocation.script();
+                      const uiSourceCode = script ? workspaceBinding.uiSourceCodeForScript(script) : null;
+                      if (uiSourceCode) {
+                        this.addLineColumnData(decorationsBySource, uiSourceCode, lineNumber, columnNumber, data);
                       }
-                      columnMap.set((zeroBasedColumn || 0) + 1, data);
                     }
                   }));
                 }
@@ -247,4 +267,22 @@ export class Helper {
       }
     }
   }
+
+  private addLineColumnData(
+      decorationsBySource: Workspace.UISourceCode.ProfileDataMap, uiSourceCode: Workspace.UISourceCode.UISourceCode,
+      lineOneIndexed: number, columnOneIndexed: number, data: number): void {
+    let lineMap = decorationsBySource.get(uiSourceCode);
+    if (!lineMap) {
+      lineMap = new Map();
+      decorationsBySource.set(uiSourceCode, lineMap);
+    }
+
+    let columnMap = lineMap.get(lineOneIndexed);
+    if (!columnMap) {
+      columnMap = new Map();
+      lineMap.set(lineOneIndexed, columnMap);
+    }
+
+    columnMap.set(columnOneIndexed, (columnMap.get(columnOneIndexed) ?? 0) + data);
+  }
 }

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

@@ -5,6 +5,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../../generated/protocol.js';
 
 import {Memory} from './LineLevelProfile.js';
 
@@ -64,15 +65,23 @@ export class LiveHeapProfile implements Common.Runnable.Runnable,
       if (sessionId !== this.sessionId) {
         break;
       }
-      Memory.instance().reset();
+
+      const profilesAndTargets: Array<{
+        profile: Protocol.HeapProfiler.SamplingHeapProfile,
+        target: SDK.Target.Target,
+      }> = [];
       for (let i = 0; i < profiles.length; ++i) {
         const profile = profiles[i];
         if (!profile) {
           continue;
         }
 
-        Memory.instance().appendHeapProfile(profile, models[i].target());
+        const target = models[i].target();
+        profilesAndTargets.push({profile, target});
       }
+
+      Memory.instance().initialize(profilesAndTargets);
+
       await Promise.race([
         new Promise(r => window.setTimeout(r, Host.InspectorFrontendHost.isUnderTest() ? 10 : 5000)),
         new Promise(r => {

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -201,7 +201,7 @@ export class CommandMenu {
         locations.set(name, category);
       }
     }
-    const views = UI.ViewManager.getRegisteredViewExtensions();
+    const views = UI.ViewManager.ViewManager.instance().getRegisteredViewExtensions();
     for (const view of views) {
       const viewLocation = view.location();
       const category = viewLocation && locations.get(viewLocation);
@@ -340,19 +340,23 @@ export class CommandMenuProvider extends Provider {
     return score;
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
+  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
     const command = this.commands[itemIndex];
 
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
+
     titleElement.removeChildren();
     const icon = IconButton.Icon.create(categoryIcons[command.category]);
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
+    wrapperElement.insertBefore(icon, itemElement);
     UI.UIUtils.createTextChild(titleElement, command.title);
     FilteredListWidget.highlightRanges(titleElement, query, true);
 
+    const subtitleElement = itemElement.createChild('div');
     if (command.featurePromotionId) {
       const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
       if (badge) {
-        titleElement.parentElement?.insertBefore(badge, subtitleElement);
+        itemElement.insertBefore(badge, subtitleElement);
       }
     }
 
@@ -360,16 +364,11 @@ export class CommandMenuProvider extends Provider {
 
     const deprecationWarning = command.deprecationWarning;
     if (deprecationWarning) {
-      const deprecatedTagElement = titleElement.parentElement?.createChild('span', 'deprecated-tag');
-      if (deprecatedTagElement) {
-        deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
-        deprecatedTagElement.title = deprecationWarning;
-      }
-    }
-    const tagElement = titleElement.parentElement?.parentElement?.createChild('span', 'tag');
-    if (!tagElement) {
-      return;
+      const deprecatedTagElement = itemElement.createChild('span', 'deprecated-tag');
+      deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
+      deprecatedTagElement.title = deprecationWarning;
     }
+    const tagElement = wrapperElement.createChild('span', 'tag');
     tagElement.textContent = command.category;
   }
 

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -9,6 +9,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
+import * as Highlighting from '../../../../ui/components/highlighting/highlighting.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -147,7 +148,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       ranges = rangesForMatch(text.toUpperCase(), query.toUpperCase());
     }
     if (ranges) {
-      UI.UIUtils.highlightRangesWithStyleClass(element, ranges, 'highlight');
+      Highlighting.highlightRangesWithStyleClass(element, ranges, 'highlight');
       return true;
     }
     return false;
@@ -282,20 +283,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
 
   createElementForItem(item: number): Element {
     const wrapperElement = document.createElement('div');
-    wrapperElement.className = 'filtered-list-widget-item-wrapper';
-
-    const itemElement = wrapperElement.createChild('div');
-    const renderAsTwoRows = this.provider?.renderAsTwoRows();
-    itemElement.className = 'filtered-list-widget-item ' + (renderAsTwoRows ? 'two-rows' : 'one-row');
-    const titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
-    const subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
-    subtitleElement.textContent = '\u200B';
+    wrapperElement.className = 'filtered-list-widget-item';
+
     if (this.provider) {
-      this.provider.renderItem(item, this.cleanValue(), titleElement, subtitleElement);
+      this.provider.renderItem(item, this.cleanValue(), wrapperElement);
       wrapperElement.setAttribute(
           'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true})}`);
     }
-    UI.ARIAUtils.markAsOption(itemElement);
+    UI.ARIAUtils.markAsOption(wrapperElement);
     return wrapperElement;
   }
 
@@ -627,17 +622,13 @@ export class Provider {
     return 1;
   }
 
-  renderItem(_itemIndex: number, _query: string, _titleElement: Element, _subtitleElement: Element): void {
+  renderItem(_itemIndex: number, _query: string, _wrapperElement: Element): void {
   }
 
   jslogContextAt(_itemIndex: number): string {
     return this.jslogContext;
   }
 
-  renderAsTwoRows(): boolean {
-    return false;
-  }
-
   selectItem(_itemIndex: number|null, _promptValue: string): void {
   }
 

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -44,13 +44,16 @@ export class HelpQuickOpen extends Provider {
     return -this.providers[itemIndex].prefix.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
     const provider = this.providers[itemIndex];
 
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
+
     const iconElement = new IconButton.Icon.Icon();
     iconElement.name = provider.iconName;
     iconElement.classList.add('large');
-    titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
+    wrapperElement.insertBefore(iconElement, itemElement);
 
     UI.UIUtils.createTextChild(titleElement, provider.title);
   }
@@ -64,10 +67,6 @@ export class HelpQuickOpen extends Provider {
       QuickOpenImpl.show(this.providers[itemIndex].prefix);
     }
   }
-
-  override renderAsTwoRows(): boolean {
-    return false;
-  }
 }
 
 registerProvider({

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -58,16 +58,20 @@ devtools-text-prompt {
   overflow: hidden auto;
 }
 
-.filtered-list-widget-item-wrapper {
+.filtered-list-widget-item {
   color: var(--sys-color-on-surface);
   display: flex;
   font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
   padding: 0 var(--sys-size-7);
   gap: var(--sys-size-7);
   height: var(--sys-size-14);
+  white-space: break-spaces;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--sys-typescale-body4-size);
 }
 
-.filtered-list-widget-item-wrapper devtools-icon {
+.filtered-list-widget-item devtools-icon {
   align-self: center;
   flex: none;
   width: 18px;
@@ -78,84 +82,38 @@ devtools-text-prompt {
   }
 }
 
-.filtered-list-widget-item-wrapper.selected {
+.filtered-list-widget-item.selected {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
-.filtered-list-widget-item {
-  white-space: break-spaces;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  align-self: center;
-  font-size: var(--sys-typescale-body4-size);
+.filtered-list-widget-item > div {
   flex: auto;
-}
-
-.filtered-list-widget-item.is-ignore-listed * {
-  color: var(--sys-color-state-disabled);
-}
-
-.filtered-list-widget-item span.highlight {
-  font-weight: var(--ref-typeface-weight-bold);
-}
-
-.filtered-list-widget-item .filtered-list-widget-title {
   white-space: nowrap;
-  flex: initial;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-.filtered-list-widget-item .filtered-list-widget-subtitle {
-  flex: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--sys-color-on-surface-subtle);
-  padding-left: var(--sys-size-3);
+  line-height: var(--sys-typescale-body3-line-height);
+  align-items: center;
+  align-content: center;
   display: flex;
-  white-space: pre;
+  gap: var(--sys-size-4);
 }
 
-.filtered-list-widget-item .filtered-list-widget-subtitle .first-part {
-  flex-shrink: 1000;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.filtered-list-widget-item span.highlight {
+  font-weight: var(--ref-typeface-weight-bold);
 }
 
-.filtered-list-widget-item-wrapper .tag {
+.filtered-list-widget-item .tag {
   font-size: var(--sys-typescale-body5-size);
   line-height: var(--sys-typescale-headline5-line-height);
   align-self: center;
   flex-shrink: 0;
 }
 
-.filtered-list-widget-item-wrapper .deprecated-tag {
+.filtered-list-widget-item .deprecated-tag {
   font-size: 11px;
   color: var(--sys-color-token-subtle);
 }
 
-.filtered-list-widget-item.one-row {
-  line-height: var(--sys-typescale-body3-line-height);
-  align-items: center;
-  align-content: center;
-  display: flex;
-  gap: var(--sys-size-4);
-}
-
-.filtered-list-widget-item.one-row .filtered-list-widget-title {
-  display: inline;
-}
-
-.filtered-list-widget-item.two-rows {
-  display: grid;
-  align-content: center;
-  gap: var(--sys-size-2);
-}
-
-.filtered-list-widget-item-wrapper:not(.search-mode) .filtered-list-widget-item.two-rows .filtered-list-widget-title {
-  font-weight: var(--ref-typeface-weight-bold);
-}
-
 .not-found-text {
   height: 34px;
   line-height: 34px;
@@ -179,18 +137,13 @@ devtools-text-prompt {
     border-color: ButtonText;
   }
 
-  .filtered-list-widget-item-wrapper .filtered-list-widget-title,
-  .filtered-list-widget-item-wrapper .filtered-list-widget-subtitle,
+  .filtered-list-widget-item,
   .quickpick-description {
     color: ButtonText;
   }
 
-  .filtered-list-widget-item-wrapper.selected {
+  .filtered-list-widget-item.selected {
     background-color: Highlight;
-  }
-
-  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-title,
-  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-subtitle {
     color: HighlightText;
   }
 

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

@@ -6,6 +6,7 @@
 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 Highlighting from '../../../components/highlighting/highlighting.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import * as ObjectUI from '../object_ui/object_ui.js';
@@ -172,7 +173,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     const newFocusElement = this.currentSearchTreeElements[index];
     if (newFocusElement) {
       this.updateSearchIndex(index);
-      newFocusElement.setSearchRegex(this.searchRegex, UI.UIUtils.highlightedCurrentSearchResultClassName);
+      newFocusElement.setSearchRegex(this.searchRegex, Highlighting.highlightedCurrentSearchResultClassName);
       newFocusElement.reveal();
     } else {
       this.updateSearchIndex(0);

package/front_end/ui/legacy/tabbedPane.css

@@ -520,3 +520,13 @@
     --tabbed-pane-close-icon-color: HighlightText;
   }
 }
+
+.tabbed-pane-header-tab.ai .ai-icon {
+  background-color: var(--sys-color-primary);
+  border-radius: 50%;
+  margin-left: 4px;
+}
+
+.tabbed-pane-header-tab.ai .ai-icon devtools-icon {
+  color: var(--sys-color-on-primary);
+}

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1754,6 +1754,9 @@ export const knownContextValues = new Set([
   'grid-gap',
   'grid-how',
   'grid-lanes',
+  'grid-lanes-direction',
+  'grid-lanes-fill',
+  'grid-lanes-flow',
   'grid-overlays',
   'grid-row',
   'grid-row-end',

package/inspector_overlay/README.md

@@ -5,7 +5,7 @@ Inspector Overlay provides JS/CSS modules which are responsible for rendering th
 ## How build works
 
 - Overlay modules are built using rollup and copied to $root_gen_dir.
-- CSS files are imported using a custom rollup plugin that transforms CSS into a CSSStyleSheet. *Only use CSS imports in the bundle entrypoint*.
+- CSS files are imported using a custom rollup plugin that transforms CSS into a CSSStyleSheet. _Only use CSS imports in the bundle entrypoint_.
 - `inspector_overlay_resources.grd` file is copied as well and it defines how modules are packaged in a `.pak` file.
 - The Chromium build uses `inspector_overlay_resources.grd` and produces a `.pak` file.
 - `inspector_overlay_agent.cc` extracts the modules and inlines them onto the overlay page.
@@ -41,7 +41,7 @@ generated modules and notify you if they are too big.
 
 ## Tests
 
-Overlay modules can be unit tested like other parts of DevTools. For an example, see `test/unittests/front_end/inspector_overlay/common_test.ts`.
+Overlay modules can be unit tested like other parts of DevTools. For an example, see `test/unittests/front_end/inspector_overlay/common.test.ts`.
 
 ## Lifecycle of the overlay
 
@@ -56,4 +56,4 @@ Then when the overlay is being painted, the following calls are made by the back
 - `reset(params)` to notify the overlay about actual params of the page such as viewport size, device scale factor and others.
 - Invokes tool-specific methods such as `drawHighlight`.
 
-In the overlay code, these calls are received through a global `dispatch(methodName, ...args)` function.
+In the overlay code, these calls are received through a global `dispatch(methodName, ...args)` function.