chrome-devtools-frontend 1.0.952284 → 1.0.952865

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -115,6 +115,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
       return;
     }
     this.registerCSSFiles([performanceMonitorStyles]);
+    this.controlPane.instantiateMetricData();
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SuspendStateChanged, this.suspendStateChanged, this);
     this.model.enable();
@@ -437,8 +438,9 @@ export class ControlPane extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   element: Element;
   private readonly enabledChartsSetting: Common.Settings.Setting<string[]>;
   private readonly enabledCharts: Set<string>;
-  private readonly chartsInfo: ChartInfo[];
-  private readonly indicators: Map<string, MetricIndicator>;
+
+  private chartsInfo: ChartInfo[] = [];
+  private indicators: Map<string, MetricIndicator> = new Map();
 
   constructor(parent: Element) {
     super();
@@ -447,7 +449,9 @@ export class ControlPane extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.enabledChartsSetting = Common.Settings.Settings.instance().createSetting(
         'perfmonActiveIndicators2', ['TaskDuration', 'JSHeapTotalSize', 'Nodes']);
     this.enabledCharts = new Set(this.enabledChartsSetting.get());
+  }
 
+  instantiateMetricData(): void {
     const defaults = {
       color: undefined,
       format: undefined,
@@ -457,55 +461,112 @@ export class ControlPane extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       stacked: undefined,
     };
 
+    // Get ThemeSupport instance here just to make things a little less verbose.
+    const themeSupport = ThemeSupport.ThemeSupport.instance();
     this.chartsInfo = [
       {
         ...defaults,
         title: i18nString(UIStrings.cpuUsage),
         metrics: [
-          {name: 'TaskDuration', color: '#999'},
-          {name: 'ScriptDuration', color: 'orange'},
-          {name: 'LayoutDuration', color: 'blueviolet'},
-          {name: 'RecalcStyleDuration', color: 'violet'},
+          {
+            name: 'TaskDuration',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-cpu-task-duration', this.element),
+          },
+          {
+            name: 'ScriptDuration',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-cpu-script-duration', this.element),
+          },
+          {
+            name: 'LayoutDuration',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-cpu-layout-duration', this.element),
+          },
+          {
+            name: 'RecalcStyleDuration',
+            color:
+                themeSupport.getComputedValue('--override-color-perf-monitor-cpu-recalc-style-duration', this.element),
+          },
         ],
         format: Format.Percent,
         smooth: true,
         stacked: true,
-        color: 'red',
+        color: themeSupport.getComputedValue('--override-color-perf-monitor-cpu', this.element),
         max: 1,
         currentMax: undefined,
       },
       {
         ...defaults,
         title: i18nString(UIStrings.jsHeapSize),
-        metrics: [{name: 'JSHeapTotalSize', color: '#99f'}, {name: 'JSHeapUsedSize', color: 'blue'}],
+        metrics: [
+          {
+            name: 'JSHeapTotalSize',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-jsheap-total-size', this.element),
+          },
+          {
+            name: 'JSHeapUsedSize',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-jsheap-used-size', this.element),
+          },
+        ],
         format: Format.Bytes,
-        color: 'blue',
+        color: themeSupport.getComputedValue('--override-color-perf-monitor-jsheap'),
+      },
+      {
+        ...defaults,
+        title: i18nString(UIStrings.domNodes),
+        metrics: [
+          {
+            name: 'Nodes',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-dom-nodes', this.element),
+          },
+        ],
       },
-      {...defaults, title: i18nString(UIStrings.domNodes), metrics: [{name: 'Nodes', color: 'green'}]},
       {
         ...defaults,
         title: i18nString(UIStrings.jsEventListeners),
-        metrics: [{name: 'JSEventListeners', color: 'yellowgreen'}],
+        metrics: [
+          {
+            name: 'JSEventListeners',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-js-event-listeners', this.element),
+          },
+        ],
+      },
+      {
+        ...defaults,
+        title: i18nString(UIStrings.documents),
+        metrics: [{
+          name: 'Documents',
+          color: themeSupport.getComputedValue('--override-color-perf-monitor-documents', this.element),
+        }],
+      },
+      {
+        ...defaults,
+        title: i18nString(UIStrings.documentFrames),
+        metrics: [{
+          name: 'Frames',
+          color: themeSupport.getComputedValue('--override-color-perf-monitor-document-frames', this.element),
+        }],
+      },
+      {
+        ...defaults,
+        title: i18nString(UIStrings.layoutsSec),
+        metrics: [{
+          name: 'LayoutCount',
+          color: themeSupport.getComputedValue('--override-color-perf-monitor-layout-count', this.element),
+        }],
       },
-      {...defaults, title: i18nString(UIStrings.documents), metrics: [{name: 'Documents', color: 'darkblue'}]},
-      {...defaults, title: i18nString(UIStrings.documentFrames), metrics: [{name: 'Frames', color: 'darkcyan'}]},
-      {...defaults, title: i18nString(UIStrings.layoutsSec), metrics: [{name: 'LayoutCount', color: 'hotpink'}]},
       {
         ...defaults,
         title: i18nString(UIStrings.styleRecalcsSec),
-        metrics: [{name: 'RecalcStyleCount', color: 'deeppink'}],
+        metrics: [
+          {
+            name: 'RecalcStyleCount',
+            color: themeSupport.getComputedValue('--override-color-perf-monitor-recalc-style-count', this.element),
+          },
+        ],
       },
     ];
-    for (const info of this.chartsInfo) {
-      if (info.color) {
-        info.color = ThemeSupport.ThemeSupport.instance().patchColorText(
-            info.color, ThemeSupport.ThemeSupport.ColorUsage.Foreground);
-      }
-      for (const metric of info.metrics) {
-        metric.color = ThemeSupport.ThemeSupport.instance().patchColorText(
-            metric.color, ThemeSupport.ThemeSupport.ColorUsage.Foreground);
-      }
-    }
+
+    // Clear any existing child elements.
+    this.element.removeChildren();
 
     this.indicators = new Map();
     for (const chartInfo of this.chartsInfo) {

package/front_end/panels/performance_monitor/performanceMonitor.css

@@ -6,6 +6,38 @@
 
 .perfmon-pane {
   overflow: hidden;
+
+  --override-color-perf-monitor-cpu: rgb(227 33 33);
+  --override-color-perf-monitor-cpu-task-duration: rgb(154 154 154);
+  --override-color-perf-monitor-cpu-script-duration: rgb(255 165 0);
+  --override-color-perf-monitor-cpu-layout-duration: rgb(138 43 226);
+  --override-color-perf-monitor-cpu-recalc-style-duration: rgb(238 130 238);
+  --override-color-perf-monitor-jsheap: rgb(0 0 255);
+  --override-color-perf-monitor-jsheap-total-size: rgb(153 153 255);
+  --override-color-perf-monitor-jsheap-used-size: rgb(0 0 255);
+  --override-color-perf-monitor-dom-nodes: rgb(11 154 11);
+  --override-color-perf-monitor-js-event-listeners: rgb(154 205 50);
+  --override-color-perf-monitor-documents: rgb(0 0 139);
+  --override-color-perf-monitor-document-frames: rgb(0 139 139);
+  --override-color-perf-monitor-layout-count: rgb(255 105 180);
+  --override-color-perf-monitor-recalc-style-count: rgb(255 20 147);
+}
+
+:host-context(.-theme-with-dark-background) .perfmon-pane {
+  --override-color-perf-monitor-cpu: rgb(242 113 113);
+  --override-color-perf-monitor-cpu-task-duration: rgb(201 201 201);
+  --override-color-perf-monitor-cpu-script-duration: rgb(255 165 0);
+  --override-color-perf-monitor-cpu-layout-duration: rgb(124 29 212);
+  --override-color-perf-monitor-cpu-recalc-style-duration: rgb(179 49 179);
+  --override-color-perf-monitor-jsheap: rgb(153 153 255);
+  --override-color-perf-monitor-jsheap-total-size: rgb(153 153 255);
+  --override-color-perf-monitor-jsheap-used-size: rgb(0 0 255);
+  --override-color-perf-monitor-dom-nodes: rgb(127 255 127);
+  --override-color-perf-monitor-js-event-listeners: rgb(154 205 50);
+  --override-color-perf-monitor-documents: rgb(116 116 255);
+  --override-color-perf-monitor-document-frames: rgb(116 255 255);
+  --override-color-perf-monitor-layout-count: rgb(255 105 180);
+  --override-color-perf-monitor-recalc-style-count: rgb(235 0 127);
 }
 
 .perfmon-pane.suspended {

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -398,7 +398,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     responseIcon.data = {iconName: 'ic_response', color: 'var(--color-text-disabled)', width: '16px', height: '16px'};
     const newRow: DataGrid.DataGridUtils.Row = {
       cells: [
-        {columnId: 'method', value: message.method},
+        {columnId: 'method', value: message.method, title: message.method},
         {columnId: 'request', value: '', renderer: DataGrid.DataGridRenderers.codeBlockRenderer},
         {
           columnId: 'response',
@@ -439,7 +439,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
         '--override-data-grid-row-background-color': 'var(--override-data-grid-sent-message-row-background-color)',
       },
       cells: [
-        {columnId: 'method', value: message.method},
+        {columnId: 'method', value: message.method, title: message.method},
         {
           columnId: 'request',
           value: JSON.stringify(message.params),

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -518,7 +518,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
-    this.searchRegex = searchConfig.toSearchRegex();
+    this.searchRegex = searchConfig.toSearchRegex().regex;
     this.updateSearchResults(shouldJump, jumpBackwards);
   }
 }

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -525,7 +525,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
       return;
     }
     const searchRegex = searchConfig.toSearchRegex();
-    this.searchResults = this.root.searchTree(event => TimelineUIUtils.testContentMatching(event, searchRegex));
+    this.searchResults = this.root.searchTree(event => TimelineUIUtils.testContentMatching(event, searchRegex.regex));
     this.searchableView.updateSearchMatchesCount(this.searchResults.length);
   }
 

package/front_end/third_party/diff/DiffWrapper.ts

@@ -4,6 +4,13 @@
 
 import * as Common from '../../core/common/common.js';
 
+declare global {
+  class diff_match_patch {
+    diff_main(text1: string, text2: string): Array<{0: number, 1: string}>;
+    diff_cleanupSemantic(diff: Array<{0: number, 1: string}>): void;
+  }
+}
+
 export const DiffWrapper = {
   charDiff: function(text1: string, text2: string, cleanup?: boolean): {0: number, 1: string}[] {
     const differ = new diff_match_patch();

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -16,7 +16,7 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 import {addColumnVisibilityCheckboxes, addSortableColumnItems} from './DataGridContextMenuUtils.js';
 import type {CellPosition, Column, Row, SortState} from './DataGridUtils.js';
-import {calculateColumnWidthPercentageFromWeighting, calculateFirstFocusableCell, getRowEntryForColumnId, handleArrowKeyNavigation, renderCellValue, SortDirection} from './DataGridUtils.js';
+import {calculateColumnWidthPercentageFromWeighting, calculateFirstFocusableCell, getCellTitleFromCellContent, getRowEntryForColumnId, handleArrowKeyNavigation, renderCellValue, SortDirection} from './DataGridUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
@@ -794,7 +794,7 @@ export class DataGrid extends HTMLElement {
                     style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
                     tabindex=${cellIsFocusableCell ? '0' : '-1'}
                     aria-colindex=${columnIndex + 1}
-                    title=${cell.title || String(cell.value).substr(0, 20)}
+                    title=${cell.title || getCellTitleFromCellContent(String(cell.value))}
                     data-row-index=${tableRowIndex}
                     data-col-index=${columnIndex}
                     data-grid-value-cell-for-column=${col.id}

package/front_end/ui/components/data_grid/DataGridUtils.ts

@@ -256,3 +256,6 @@ export const calculateFirstFocusableCell =
 
       return [focusableColIndex, focusableRowIndex];
     };
+
+export const getCellTitleFromCellContent = (text: string): string =>
+    text.length < 25 ? text : text.substr(0, 20) + '\u2026';

package/front_end/ui/legacy/SearchableView.ts

@@ -597,6 +597,11 @@ export interface Replaceable {
   replaceAllWith(searchConfig: SearchConfig, replacement: string): void;
 }
 
+export interface SearchRegexResult {
+  regex: RegExp;
+  fromQuery: boolean;
+}
+
 export class SearchConfig {
   query: string;
   caseSensitive: boolean;
@@ -608,20 +613,21 @@ export class SearchConfig {
     this.isRegex = isRegex;
   }
 
-  toSearchRegex(global?: boolean): RegExp {
+  toSearchRegex(global?: boolean): SearchRegexResult {
     let modifiers = this.caseSensitive ? '' : 'i';
     if (global) {
       modifiers += 'g';
     }
     const query = this.isRegex ? '/' + this.query + '/' : this.query;
 
-    let regex;
+    let regex: RegExp|undefined;
+    let fromQuery = false;
 
     // First try creating regex if user knows the / / hint.
     try {
       if (/^\/.+\/$/.test(query)) {
         regex = new RegExp(query.substring(1, query.length - 1), modifiers);
-        regex.__fromRegExpQuery = true;
+        fromQuery = true;
       }
     } catch (e) {
       // Silent catch.
@@ -632,6 +638,9 @@ export class SearchConfig {
       regex = Platform.StringUtilities.createPlainTextSearchRegex(query, modifiers);
     }
 
-    return regex;
+    return {
+      regex,
+      fromQuery,
+    };
   }
 }

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

@@ -231,7 +231,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     let newIndex: number = this.currentSearchFocusIndex;
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.searchCanceled();
-    this.searchRegex = searchConfig.toSearchRegex(true);
+    this.searchRegex = searchConfig.toSearchRegex(true).regex;
 
     let element: UI.TreeOutline.TreeElement|null;
     for (element = this.treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {

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

@@ -120,7 +120,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   private delayedFindSearchMatches: (() => void)|null;
   private currentSearchResultIndex: number;
   private searchResults: SearchMatch[];
-  private searchRegex: RegExp|null;
+  private searchRegex: UI.SearchableView.SearchRegexResult|null;
   private loadError: boolean;
   private muteChangeEventsForSetContent: boolean;
   private readonly sourcePosition: UI.Toolbar.ToolbarText;
@@ -830,7 +830,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   jumpToSearchResult(index: number): void {
-    if (!this.loaded || !this.searchResults.length) {
+    if (!this.loaded || !this.searchResults.length || !this.searchRegex) {
       return;
     }
     this.currentSearchResultIndex = (index + this.searchResults.length) % this.searchResults.length;
@@ -840,7 +840,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     const editor = this.textEditor;
     const range = this.searchResults[this.currentSearchResultIndex];
     editor.dispatch({
-      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex as RegExp, range)),
+      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex, range)),
       selection: {anchor: range.from, head: range.to},
       scrollIntoView: true,
       userEvent: 'select.search',
@@ -853,7 +853,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const insert = (this.searchRegex as RegExp).__fromRegExpQuery ? range.insertPlaceholders(replacement) : replacement;
+    const insert = this.searchRegex?.fromQuery ? range.insertPlaceholders(replacement) : replacement;
     const editor = this.textEditor;
     const changes = editor.state.changes({from: range.from, to: range.to, insert});
     editor.dispatch(
@@ -869,7 +869,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const isRegExp = regex.__fromRegExpQuery;
+    const isRegExp = regex.fromQuery;
     const changes = ranges.map(
         match =>
             ({from: match.from, to: match.to, insert: isRegExp ? match.insertPlaceholders(replacement) : replacement}));
@@ -877,13 +877,13 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditor.dispatch({changes, scrollIntoView: true, userEvent: 'input.replace.all'});
   }
 
-  private collectRegexMatches(regexObject: RegExp): SearchMatch[] {
+  private collectRegexMatches({regex}: UI.SearchableView.SearchRegexResult): SearchMatch[] {
     const ranges = [];
     let pos = 0;
     for (const line of this.textEditor.state.doc.iterLines()) {
-      regexObject.lastIndex = 0;
+      regex.lastIndex = 0;
       for (;;) {
-        const match = regexObject.exec(line);
+        const match = regex.exec(line);
         if (!match) {
           break;
         }
@@ -1022,7 +1022,8 @@ const config = {
 };
 
 class ActiveSearch {
-  constructor(readonly regexp: RegExp, readonly currentRange: {from: number, to: number}|null) {
+  constructor(
+      readonly regexp: UI.SearchableView.SearchRegexResult, readonly currentRange: {from: number, to: number}|null) {
   }
 
   map(change: CodeMirror.ChangeDesc): ActiveSearch {
@@ -1036,7 +1037,7 @@ class ActiveSearch {
     return Boolean(
         a === b ||
         a && b && a.currentRange?.from === b.currentRange?.from && a.currentRange?.to === b.currentRange?.to &&
-            a.regexp.source === b.regexp.source && a.regexp.flags === b.regexp.flags);
+            a.regexp.regex.source === b.regexp.regex.source && a.regexp.regex.flags === b.regexp.regex.flags);
   }
 }
 
@@ -1084,9 +1085,9 @@ const searchHighlighter = CodeMirror.ViewPlugin.fromClass(class {
       let pos = from;
       for (const part of doc.iterRange(from, to)) {
         if (part !== '\n') {
-          active.regexp.lastIndex = 0;
+          active.regexp.regex.lastIndex = 0;
           for (;;) {
-            const match = active.regexp.exec(part);
+            const match = active.regexp.regex.exec(part);
             if (!match) {
               break;
             }

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

@@ -78,7 +78,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     if (!this.searchConfig) {
       return;
     }
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
     const previousFocusElement = this.currentSearchTreeElements[this.currentSearchFocusIndex];
     if (previousFocusElement) {
       previousFocusElement.setSearchRegex(regex);
@@ -119,7 +119,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.innerSearchCanceled();
     this.currentSearchTreeElements = [];
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
 
     for (let element: (UI.TreeOutline.TreeElement|null) =
              (this.treeOutline.rootElement() as UI.TreeOutline.TreeElement | null);

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -41,7 +41,7 @@ import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.
 
 let themeSupportInstance: ThemeSupport;
 
-const themeValuesCache = new Map<string, string>();
+const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
 export class ThemeSupport {
   private readonly themeNameInternal: string;
@@ -96,20 +96,35 @@ export class ThemeSupport {
     return themeSupportInstance;
   }
 
-  getComputedValue(variableName: string): string {
-    const computedRoot = this.computedRoot();
-
+  getComputedValue(variableName: string, target: Element|null = null): string {
+    const computedRoot = target ? window.getComputedStyle(target) : this.computedRoot();
     if (typeof computedRoot === 'symbol') {
       throw new Error(`Computed value for property (${variableName}) could not be found on :root.`);
     }
 
+    // Since we might query the same variable name from various targets we need to support
+    // per-target caching of computed values. Here we attempt to locate the particular computed
+    // value cache for the target. If no target was specified we use the default computed root,
+    // which belongs to the document element.
+    let computedRootCache = themeValuesCache.get(computedRoot);
+    if (!computedRootCache) {
+      computedRootCache = new Map<string, string>();
+      themeValuesCache.set(computedRoot, computedRootCache);
+    }
+
     // Since theme changes trigger a reload, we can avoid repeatedly looking up color values
     // dynamically. Instead we can look up the first time and cache them for future use,
     // knowing that the cache will be invalidated by virtue of a reload when the theme changes.
-    let cachedValue = themeValuesCache.get(variableName);
+    let cachedValue = computedRootCache.get(variableName);
     if (!cachedValue) {
-      cachedValue = computedRoot.getPropertyValue(variableName);
-      themeValuesCache.set(variableName, cachedValue);
+      cachedValue = computedRoot.getPropertyValue(variableName).trim();
+
+      // If we receive back an empty value (nothing has been set) we don't store it for the future.
+      // This means that subsequent requests will continue to query the styles in case the value
+      // has been set.
+      if (cachedValue) {
+        computedRootCache.set(variableName, cachedValue);
+      }
     }
 
     return cachedValue;

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.952284"
+  "version": "1.0.952865"
 }