chrome-devtools-frontend 1.0.951864 → 1.0.952784

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -89,8 +89,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     this.scaleHeight = 16;
     /** @const */
     this.graphHeight = 90;
-    this.gridColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.08)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    this.gridColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--divider-line');
     this.controlPane = new ControlPane(this.contentElement);
     const chartContainer = this.contentElement.createChild('div', 'perfmon-chart-container');
     this.canvas = chartContainer.createChild('canvas') as HTMLCanvasElement;
@@ -116,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();
@@ -220,11 +220,9 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
 
   private drawHorizontalGrid(ctx: CanvasRenderingContext2D): void {
     const labelDistanceSeconds = 10;
-    const lightGray = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.02)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    const lightGray = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-inverted-opacity-2');
     ctx.font = '10px ' + Host.Platform.fontFamily();
-    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.55)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-inverted-opacity-50');
     const currentTime = Date.now() / 1000;
     for (let sec = Math.ceil(currentTime);; --sec) {
       const x = this.width - ((currentTime - sec) * 1000 - this.pollIntervalMs) * this.pixelsPerMs;
@@ -277,8 +275,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
         ctx.restore();
       }
     }
-    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.55)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-inverted-opacity-50');
     ctx.font = `10px  ${Host.Platform.fontFamily()}`;
     ctx.fillText(chartInfo.title, 8, 10);
     this.drawVerticalGrid(ctx, height - bottomPadding, max, chartInfo);
@@ -327,8 +324,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     const span = max;
     const topPadding = 18;
     const visibleHeight = height - topPadding;
-    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.55)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    ctx.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-inverted-opacity-50');
     ctx.strokeStyle = this.gridColor;
     ctx.beginPath();
     for (let i = 0; i < 2; ++i) {
@@ -345,8 +341,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     ctx.beginPath();
     ctx.moveTo(0, height + 0.5);
     ctx.lineTo(this.width, height + 0.5);
-    ctx.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgba(0, 0, 0, 0.2)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    ctx.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-inverted-opacity-2');
     ctx.stroke();
     function calcY(value: number): number {
       return Math.round(height - visibleHeight * value / span) + 0.5;
@@ -443,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();
@@ -453,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,
@@ -463,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/settings/components/SyncSection.ts

@@ -44,40 +44,40 @@ export interface SyncSectionData {
 
 export class SyncSection extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sync-section`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private syncInfo: Host.InspectorFrontendHostAPI.SyncInformation = {isSyncActive: false};
-  private syncSetting?: Common.Settings.Setting<boolean>;
+  #syncInfo: Host.InspectorFrontendHostAPI.SyncInformation = {isSyncActive: false};
+  #syncSetting?: Common.Settings.Setting<boolean>;
 
-  private boundRender = this.render.bind(this);
+  #boundRender = this.#render.bind(this);
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [syncSectionStyles];
+    this.#shadow.adoptedStyleSheets = [syncSectionStyles];
   }
 
   set data(data: SyncSectionData) {
-    this.syncInfo = data.syncInfo;
-    this.syncSetting = data.syncSetting;
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#syncInfo = data.syncInfo;
+    this.#syncSetting = data.syncSetting;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  private render(): void {
-    if (!this.syncSetting) {
+  #render(): void {
+    if (!this.#syncSetting) {
       throw new Error('SyncSection not properly initialized');
     }
 
-    const checkboxDisabled = !this.syncInfo.isSyncActive || !this.syncInfo.arePreferencesSynced;
+    const checkboxDisabled = !this.#syncInfo.isSyncActive || !this.#syncInfo.arePreferencesSynced;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
       <fieldset>
         <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
-        ${renderAccountInfoOrWarning(this.syncInfo)}
+        ${renderAccountInfoOrWarning(this.#syncInfo)}
         <${Settings.SettingCheckbox.SettingCheckbox.litTagName} .data=${
-            {setting: this.syncSetting, disabled: checkboxDisabled} as Settings.SettingCheckbox.SettingCheckboxData}>
+            {setting: this.#syncSetting, disabled: checkboxDisabled} as Settings.SettingCheckbox.SettingCheckboxData}>
         </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
       </fieldset>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }