chrome-devtools-frontend 1.0.1622369 → 1.0.1624409

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/front_end/Images/src/expand.svg +1 -0
  2. package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts +72 -8
  3. package/front_end/entrypoints/greendev_floaty/floaty.html +1 -1
  4. package/front_end/generated/Deprecation.ts +7 -0
  5. package/front_end/generated/InspectorBackendCommands.ts +1 -1
  6. package/front_end/generated/SupportedCSSProperties.js +6 -6
  7. package/front_end/generated/protocol.ts +1 -0
  8. package/front_end/models/ai_assistance/agents/GreenDevAgent.ts +373 -112
  9. package/front_end/models/ai_assistance/agents/NetworkAgent.snapshot.txt +57 -0
  10. package/front_end/models/ai_assistance/agents/NetworkAgent.ts +2 -1
  11. package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +3 -10
  12. package/front_end/models/javascript_metadata/NativeFunctions.js +9 -4
  13. package/front_end/panels/ai_assistance/components/ChatMessage.ts +212 -3
  14. package/front_end/panels/console/ConsoleView.ts +86 -7
  15. package/front_end/panels/console/ConsoleViewMessage.ts +23 -1
  16. package/front_end/panels/elements/StylePropertiesSection.ts +1 -2
  17. package/front_end/panels/elements/StylePropertyTreeElement.ts +1 -1
  18. package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts +6 -2
  19. package/front_end/panels/elements/StylesSidebarPane.ts +17 -4
  20. package/front_end/panels/emulation/DeviceModeToolbar.ts +37 -13
  21. package/front_end/panels/emulation/deviceModeView.css +25 -0
  22. package/front_end/panels/greendev/GreenDevPanel.ts +30 -3
  23. package/front_end/panels/media/EventDisplayTable.ts +1 -1
  24. package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts +48 -27
  25. package/front_end/panels/mobile_throttling/ThrottlingManager.ts +67 -38
  26. package/front_end/panels/network/NetworkConfigView.ts +1 -1
  27. package/front_end/panels/profiler/HeapSnapshotView.ts +1 -22
  28. package/front_end/third_party/chromium/README.chromium +1 -1
  29. package/front_end/ui/legacy/UIUtils.ts +26 -4
  30. package/front_end/ui/visual_logging/KnownContextValues.ts +17 -0
  31. package/package.json +1 -1
  32. package/front_end/panels/emulation/components/DeviceSizeInputElement.ts +0 -134
  33. package/front_end/panels/emulation/components/components.ts +0 -9
@@ -25,6 +25,31 @@
25
25
  font-size: 16px;
26
26
  }
27
27
 
28
+ .device-mode-size-input {
29
+ /*
30
+ * 4 characters for the maximum size of the value,
31
+ * 2 characters for the width of the step-buttons,
32
+ * 2 pixels padding between the characters and the
33
+ * step-buttons.
34
+ */
35
+ width: calc(4ch + 2ch + 2px);
36
+ max-height: 18px;
37
+ border: var(--sys-color-neutral-outline);
38
+ border-radius: 4px;
39
+ margin: 0 2px;
40
+ text-align: center;
41
+ font-size: inherit;
42
+ font-family: inherit;
43
+ }
44
+
45
+ .device-mode-size-input:disabled {
46
+ user-select: none;
47
+ }
48
+
49
+ .device-mode-size-input:focus::-webkit-input-placeholder {
50
+ color: transparent;
51
+ }
52
+
28
53
  .device-mode-empty-toolbar-element {
29
54
  width: 0;
30
55
  }
@@ -8,6 +8,8 @@ import * as Host from '../../core/host/host.js';
8
8
  import type * as Platform from '../../core/platform/platform.js';
9
9
  import * as SDK from '../../core/sdk/sdk.js';
10
10
  import type * as Protocol from '../../generated/protocol.js';
11
+ import * as Marked from '../../third_party/marked/marked.js';
12
+ import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
11
13
  import * as UI from '../../ui/legacy/legacy.js';
12
14
 
13
15
  import greenDevPanelStyles from './GreenDevPanel.css.js';
@@ -265,9 +267,11 @@ export class GreenDevPanel extends UI.Panel.Panel {
265
267
  if (data.type === 'new-message' && data.text) {
266
268
  this.#appendMessageToContainer(session.container, data.text, data.isUser ?? false);
267
269
  } else if (data.type === 'update-last-message') {
268
- const lastMsg = session.container.lastElementChild?.querySelector('.message-content');
270
+ const lastMsg = session.container.lastElementChild?.querySelector('.message-content devtools-markdown-view');
269
271
  if (lastMsg) {
270
- lastMsg.textContent = data.text ?? null;
272
+ (lastMsg as MarkdownView.MarkdownView.MarkdownView).data = {
273
+ tokens: Marked.Marked.lexer(data.text ?? ''),
274
+ };
271
275
  }
272
276
  } else if (data.type === 'full-state') {
273
277
  session.container.innerHTML = '';
@@ -306,7 +310,30 @@ export class GreenDevPanel extends UI.Panel.Panel {
306
310
 
307
311
  const content = document.createElement('div');
308
312
  content.className = 'message-content';
309
- content.textContent = text;
313
+ if (isUser) {
314
+ content.textContent = text;
315
+ } else {
316
+ const markdown = new MarkdownView.MarkdownView.MarkdownView();
317
+ markdown.data = {
318
+ tokens: Marked.Marked.lexer(text),
319
+ };
320
+ content.append(markdown);
321
+ const style = document.createElement('style');
322
+ style.textContent = `
323
+ .message { font-size: 1.0rem; }
324
+ .message code { font-size: 1.0rem; font-family: 'Roboto Mono', monospace; color: green; }
325
+ devtools-code-block {
326
+ white-space: pre-wrap;
327
+ }
328
+ `;
329
+ markdown.shadowRoot?.appendChild(style);
330
+
331
+ const codeBlocks = markdown.shadowRoot?.querySelectorAll('devtools-code-block');
332
+ for (const block of codeBlocks ?? []) {
333
+ // We need to rerender the component for the styles to be applied.
334
+ block.connectedCallback();
335
+ }
336
+ }
310
337
  content.style.flexGrow = '1';
311
338
  messageElement.appendChild(content);
312
339
 
@@ -42,7 +42,7 @@ export interface EventDisplayColumnConfig {
42
42
  }
43
43
 
44
44
  export const enum MediaEventColumnKeys {
45
- TIMESTAMP = 'display-timestamp',
45
+ TIMESTAMP = 'displayTimestamp',
46
46
  EVENT = 'event',
47
47
  VALUE = 'value',
48
48
  }
@@ -176,35 +176,11 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
176
176
  #disabled = false;
177
177
 
178
178
  static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
179
- ThrottlingManager.instance(); // Instantiate the throttling manager to connect network manager with the setting
180
179
  const selectElement = element.createChild('select');
181
- const select = new NetworkThrottlingSelect(selectElement, {
182
- title,
183
- jslogContext: SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
184
- currentConditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()
185
- });
180
+ const select = new NetworkThrottlingSelect(selectElement, {title});
181
+ select.bindToGlobalConditions = true;
186
182
  select.show(element, undefined, /* suppressOrphanWidgetError= */ true);
187
- select.addEventListener(Events.CONDITIONS_CHANGED, event => {
188
- const conditions = event.data;
189
- if (!('block' in conditions)) {
190
- SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
191
- }
192
- });
193
- SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
194
- SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
195
- select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
196
- });
197
-
198
- // Subscribe to CrUX field data changes to show recommended throttling
199
- // presets based on real-user RTT data.
200
- const cruxManager = CrUXManager.CrUXManager.instance();
201
- const updateRecommendation = (): void => {
202
- const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
203
- select.recommendedConditions =
204
- PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
205
- };
206
- cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, updateRecommendation);
207
- updateRecommendation();
183
+ select.performUpdate();
208
184
 
209
185
  return select;
210
186
  }
@@ -259,6 +235,51 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
259
235
  this.requestUpdate();
260
236
  }
261
237
 
238
+ #onConditionsChanged =
239
+ (event: Common.EventTarget.EventTargetEvent<SDK.NetworkManager.ThrottlingConditions>): void => {
240
+ const conditions = event.data;
241
+ if (!('block' in conditions)) {
242
+ SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
243
+ }
244
+ };
245
+
246
+ #onGlobalConditionsChanged = (): void => {
247
+ this.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
248
+ };
249
+
250
+ #updateRecommendation = (): void => {
251
+ const cruxManager = CrUXManager.CrUXManager.instance();
252
+ const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
253
+ this.recommendedConditions = PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
254
+ };
255
+
256
+ set bindToGlobalConditions(bind: boolean) {
257
+ const cruxManager = CrUXManager.CrUXManager.instance();
258
+ const multitargetNetworkManager = SDK.NetworkManager.MultitargetNetworkManager.instance();
259
+
260
+ if (bind) {
261
+ this.#jslogContext = SDK.NetworkManager.activeNetworkThrottlingKeySetting().name;
262
+ ThrottlingManager.instance(); // Instantiate the throttling manager to connect network manager with the setting
263
+ this.#currentConditions = multitargetNetworkManager.networkConditions();
264
+
265
+ this.addEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
266
+ multitargetNetworkManager.addEventListener(
267
+ SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
268
+
269
+ // Subscribe to CrUX field data changes to show recommended throttling
270
+ // presets based on real-user RTT data.
271
+ cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
272
+ this.#updateRecommendation();
273
+ } else {
274
+ this.removeEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
275
+ multitargetNetworkManager.removeEventListener(
276
+ SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
277
+ cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
278
+ }
279
+
280
+ this.requestUpdate();
281
+ }
282
+
262
283
  get variant(): NetworkThrottlingSelect.Variant {
263
284
  return this.#variant;
264
285
  }
@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
9
9
  import * as SDK from '../../core/sdk/sdk.js';
10
10
  import {Icon} from '../../ui/kit/kit.js';
11
11
  import * as UI from '../../ui/legacy/legacy.js';
12
+ import {html, render} from '../../ui/lit/lit.js';
12
13
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
13
14
 
14
15
  import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
@@ -330,45 +331,27 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
330
331
  };
331
332
  }
332
333
 
333
- createSaveDataOverrideSelector(className?: string): UI.Toolbar.ToolbarComboBox {
334
- const reset = new Option(i18nString(UIStrings.noSaveDataOverride), undefined, true, true);
335
- const enable = new Option(i18nString(UIStrings.saveDataOn));
336
- const disable = new Option(i18nString(UIStrings.saveDataOff));
337
- const handler = (e: Event): void => {
338
- const select = e.target as HTMLSelectElement;
339
- switch (select.selectedOptions.item(0)) {
340
- case reset:
341
- for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
342
- SDK.EmulationModel.EmulationModel)) {
343
- void this.#emulationQueue.push(
344
- emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.UNSET));
345
- }
346
- break;
347
- case enable:
348
- for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
349
- SDK.EmulationModel.EmulationModel)) {
350
- void this.#emulationQueue.push(
351
- emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.ENABLED));
352
- }
353
- break;
354
- case disable:
355
- for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
356
- SDK.EmulationModel.EmulationModel)) {
357
- void this.#emulationQueue.push(
358
- emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.DISABLED));
359
- }
360
- break;
361
- }
362
- this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, select.selectedIndex);
363
- };
364
- const select = new UI.Toolbar.ToolbarComboBox(handler, i18nString(UIStrings.saveDataSettingTooltip), className);
365
- select.addOption(reset);
366
- select.addOption(enable);
367
- select.addOption(disable);
368
-
369
- this.addEventListener(
370
- ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => select.setSelectedIndex(data));
334
+ setSaveDataOverride(selectedIndex: number): void {
335
+ let override = SDK.EmulationModel.DataSaverOverride.UNSET;
336
+ if (selectedIndex === 1) {
337
+ override = SDK.EmulationModel.DataSaverOverride.ENABLED;
338
+ } else if (selectedIndex === 2) {
339
+ override = SDK.EmulationModel.DataSaverOverride.DISABLED;
340
+ }
341
+ for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
342
+ void this.#emulationQueue.push(emulationModel.setDataSaverOverride(override));
343
+ }
344
+ this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, selectedIndex);
345
+ }
371
346
 
347
+ createSaveDataOverrideSelector(className?: string): HTMLSelectElement {
348
+ const select = document.createElement('select');
349
+ select.title = i18nString(UIStrings.saveDataSettingTooltip);
350
+ UI.ARIAUtils.setLabel(select, i18nString(UIStrings.saveDataSettingTooltip));
351
+ if (className) {
352
+ select.className = className;
353
+ }
354
+ UI.Widget.registerWidgetConfig(select, UI.Widget.widgetConfig(SaveDataOverrideSelect));
372
355
  return select;
373
356
  }
374
357
 
@@ -453,6 +436,52 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
453
436
  }
454
437
  }
455
438
 
439
+ export interface SaveDataOverrideViewInput {
440
+ selectedIndex: number;
441
+ onSelect: (index: number) => void;
442
+ }
443
+
444
+ export type SaveDataOverrideViewFunction =
445
+ (input: SaveDataOverrideViewInput, output: undefined, target: HTMLSelectElement) => void;
446
+
447
+ export const DEFAULT_SAVE_DATA_VIEW: SaveDataOverrideViewFunction = (input, _output, target) => {
448
+ // clang-format off
449
+ render(html`
450
+ <option value="unset" ?selected=${input.selectedIndex === 0}>${i18nString(UIStrings.noSaveDataOverride)}</option>
451
+ <option value="enabled" ?selected=${input.selectedIndex === 1}>${i18nString(UIStrings.saveDataOn)}</option>
452
+ <option value="disabled" ?selected=${input.selectedIndex === 2}>${i18nString(UIStrings.saveDataOff)}</option>
453
+ `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).selectedIndex)}}});
454
+ // clang-format on
455
+ };
456
+
457
+ export class SaveDataOverrideSelect extends
458
+ Common.ObjectWrapper.eventMixin<ThrottlingManager.EventTypes, typeof UI.Widget.Widget<HTMLSelectElement>>(
459
+ UI.Widget.Widget) {
460
+ #selectedIndex = 0;
461
+ readonly #view: SaveDataOverrideViewFunction;
462
+
463
+ constructor(element: HTMLElement, view = DEFAULT_SAVE_DATA_VIEW) {
464
+ super(element);
465
+ this.#view = view;
466
+ ThrottlingManager.instance().addEventListener(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => {
467
+ this.#selectedIndex = data;
468
+ this.requestUpdate();
469
+ });
470
+ this.performUpdate();
471
+ }
472
+
473
+ override performUpdate(): void {
474
+ this.#view(
475
+ {
476
+ selectedIndex: this.#selectedIndex,
477
+ onSelect: index => {
478
+ ThrottlingManager.instance().setSaveDataOverride(index);
479
+ },
480
+ },
481
+ undefined, this.contentElement);
482
+ }
483
+ }
484
+
456
485
  export namespace ThrottlingManager {
457
486
  export const enum Events {
458
487
  SAVE_DATA_OVERRIDE_CHANGED = 'SaveDataOverrideChanged',
@@ -218,7 +218,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
218
218
  const section = this.createSection(title, 'network-config-throttling');
219
219
  MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(section, title);
220
220
  const saveDataSelect =
221
- MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select').element;
221
+ MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select');
222
222
  section.appendChild(saveDataSelect);
223
223
  }
224
224
 
@@ -182,12 +182,6 @@ const UIStrings = {
182
182
  * @description Text in Heap Snapshot View of a profiler tool
183
183
  */
184
184
  heapSnapshotProfilesShowMemory: 'See the memory distribution of JavaScript objects and related DOM nodes',
185
- /**
186
- * @description Label for a checkbox in the heap snapshot view of the profiler tool. The "heap snapshot" contains the
187
- * current state of JavaScript memory. With this checkbox enabled, the snapshot also includes internal data that is
188
- * specific to Chrome (hence implementation-specific).
189
- */
190
- exposeInternals: 'Internals with implementation details',
191
185
  /**
192
186
  * @description Progress update that the profiler is capturing a snapshot of the heap
193
187
  */
@@ -1282,7 +1276,6 @@ export class StatisticsPerspective extends Perspective {
1282
1276
  export class HeapSnapshotProfileType extends
1283
1277
  Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
1284
1278
  implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
1285
- readonly exposeInternals: Common.Settings.Setting<boolean>;
1286
1279
  customContentInternal: UI.UIUtils.CheckboxLabel|null;
1287
1280
  constructor(id?: string, title?: string) {
1288
1281
  super(id || HeapSnapshotProfileType.TypeId, title || i18nString(UIStrings.heapSnapshot));
@@ -1295,7 +1288,6 @@ export class HeapSnapshotProfileType extends
1295
1288
  SDK.TargetManager.TargetManager.instance().addModelListener(
1296
1289
  SDK.HeapProfilerModel.HeapProfilerModel, SDK.HeapProfilerModel.Events.REPORT_HEAP_SNAPSHOT_PROGRESS,
1297
1290
  this.reportHeapSnapshotProgress, this);
1298
- this.exposeInternals = Common.Settings.Settings.instance().createSetting('expose-internals', false);
1299
1291
  this.customContentInternal = null;
1300
1292
  }
1301
1293
 
@@ -1336,19 +1328,6 @@ export class HeapSnapshotProfileType extends
1336
1328
  return i18nString(UIStrings.heapSnapshotProfilesShowMemory);
1337
1329
  }
1338
1330
 
1339
- override customContent(): Element|null {
1340
- const exposeInternalsInHeapSnapshotCheckbox =
1341
- SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
1342
- this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
1343
- return exposeInternalsInHeapSnapshotCheckbox;
1344
- }
1345
-
1346
- override setCustomContentEnabled(enable: boolean): void {
1347
- if (this.customContentInternal) {
1348
- this.customContentInternal.disabled = !enable;
1349
- }
1350
- }
1351
-
1352
1331
  override createProfileLoadedFromFile(title: string): ProfileHeader {
1353
1332
  return new HeapProfileHeader(null, this, title);
1354
1333
  }
@@ -1370,7 +1349,7 @@ export class HeapSnapshotProfileType extends
1370
1349
  await heapProfilerModel.takeHeapSnapshot({
1371
1350
  reportProgress: true,
1372
1351
  captureNumericValue: true,
1373
- exposeInternals: this.exposeInternals.get(),
1352
+ exposeInternals: true,
1374
1353
  });
1375
1354
  profile = this.profileBeingRecorded() as HeapProfileHeader;
1376
1355
  if (!profile) {
@@ -1,7 +1,7 @@
1
1
  Name: Dependencies sourced from the upstream `chromium` repository
2
2
  URL: Internal
3
3
  Version: N/A
4
- Revision: 1f344c5922432c73b3db8100c1f15163fdf8b530
4
+ Revision: e388465394450fcfccc5529cf634c8561999f3b8
5
5
  Update Mechanism: Manual (https://crbug.com/428069060)
6
6
  License: BSD-3-Clause
7
7
  License File: LICENSE
@@ -2285,7 +2285,6 @@ export const bindToSetting =
2285
2285
  }
2286
2286
  }
2287
2287
 
2288
- const jslogBuilder = jslog ? VisualLogging.toggle(setting.name).track({change: true}) : null;
2289
2288
  // We can't use `setValue` as the change listener directly, otherwise we won't
2290
2289
  // be able to remove it again.
2291
2290
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2295,22 +2294,45 @@ export const bindToSetting =
2295
2294
  }
2296
2295
 
2297
2296
  if (setting.type() === Common.Settings.SettingType.BOOLEAN || typeof setting.defaultValue === 'boolean') {
2297
+ let attachedButton: Buttons.Button.Button|undefined;
2298
+ let clickListener: (() => void)|undefined;
2299
+
2298
2300
  return Directives.ref(e => {
2299
2301
  if (e === undefined) {
2300
2302
  setting.removeChangeListener(settingChanged);
2303
+ if (attachedButton && clickListener) {
2304
+ attachedButton.removeEventListener('click', clickListener);
2305
+ attachedButton = undefined;
2306
+ }
2301
2307
  return;
2302
2308
  }
2303
- if (jslogBuilder) {
2309
+ if (jslog) {
2310
+ const isButton = e instanceof Buttons.Button.Button;
2311
+ const jslogBuilder = VisualLogging.toggle(setting.name).track(isButton ? {click: true} : {change: true});
2304
2312
  e.setAttribute('jslog', jslogBuilder.toString());
2305
2313
  }
2306
2314
 
2307
2315
  setting.addChangeListener(settingChanged);
2308
- setValue =
2309
- bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
2316
+
2317
+ if (e instanceof Buttons.Button.Button) {
2318
+ attachedButton = e;
2319
+ clickListener = (): void => {
2320
+ (setting as Common.Settings.Setting<boolean>).set(!setting.get());
2321
+ };
2322
+ e.addEventListener('click', clickListener);
2323
+ setValue = (value: boolean): void => {
2324
+ e.toggled = value;
2325
+ };
2326
+ } else {
2327
+ setValue =
2328
+ bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
2329
+ }
2310
2330
  setValue(setting.get());
2311
2331
  });
2312
2332
  }
2313
2333
 
2334
+ const jslogBuilder = jslog ? VisualLogging.toggle(setting.name).track({change: true}) : null;
2335
+
2314
2336
  if (setting.type() === Common.Settings.SettingType.REGEX || setting instanceof Common.Settings.RegExpSetting) {
2315
2337
  return Directives.ref(e => {
2316
2338
  if (e === undefined) {
@@ -722,6 +722,7 @@ export const knownContextValues = new Set([
722
722
  'cache-storage-view-tab',
723
723
  'cache-storage.delete-selected',
724
724
  'cache-storage.refresh',
725
+ 'cache-widget',
725
726
  'calibrated-cpu-throttling',
726
727
  'call-tree',
727
728
  'cancel',
@@ -744,6 +745,7 @@ export const knownContextValues = new Set([
744
745
  'changes',
745
746
  'changes.changes',
746
747
  'changes.reveal-source',
748
+ 'character-set-widget',
747
749
  'checkbox-item',
748
750
  'checked',
749
751
  'chevron-left',
@@ -935,6 +937,7 @@ export const knownContextValues = new Set([
935
937
  'console-view',
936
938
  'console.clear',
937
939
  'console.clear.history',
940
+ 'console.collapse-all',
938
941
  'console.create-pin',
939
942
  'console.sidebar-selected-filter',
940
943
  'console.text-filter',
@@ -1369,6 +1372,7 @@ export const knownContextValues = new Set([
1369
1372
  'distance',
1370
1373
  'dock-side',
1371
1374
  'document',
1375
+ 'document-latency-widget',
1372
1376
  'document.write',
1373
1377
  'documentation',
1374
1378
  'documents',
@@ -1384,6 +1388,7 @@ export const knownContextValues = new Set([
1384
1388
  'dom-node-inserted-into-document',
1385
1389
  'dom-node-removed',
1386
1390
  'dom-node-removed-from-document',
1391
+ 'dom-size-widget',
1387
1392
  'dom-snapshot',
1388
1393
  'dom-subtree-modified',
1389
1394
  'dom-window.close',
@@ -1422,6 +1427,7 @@ export const knownContextValues = new Set([
1422
1427
  'drjones.sources-panel-context.performance',
1423
1428
  'drjones.sources-panel-context.script',
1424
1429
  'drop',
1430
+ 'duplicate-javascript-widget',
1425
1431
  'durable-messages',
1426
1432
  'duration',
1427
1433
  'durationchange',
@@ -1705,6 +1711,7 @@ export const knownContextValues = new Set([
1705
1711
  'folder',
1706
1712
  'font',
1707
1713
  'font-display',
1714
+ 'font-display-widget',
1708
1715
  'font-editor',
1709
1716
  'font-editor-documentation',
1710
1717
  'font-family',
@@ -1744,6 +1751,7 @@ export const knownContextValues = new Set([
1744
1751
  'force-state',
1745
1752
  'forced-color-adjust',
1746
1753
  'forced-reflow',
1754
+ 'forced-reflow-widget',
1747
1755
  'form-data',
1748
1756
  'form-factors',
1749
1757
  'fourth',
@@ -1973,6 +1981,7 @@ export const knownContextValues = new Set([
1973
1981
  'ignore-this-retainer',
1974
1982
  'image',
1975
1983
  'image-animation',
1984
+ 'image-delivery-widget',
1976
1985
  'image-orientation',
1977
1986
  'image-rendering',
1978
1987
  'image-url',
@@ -2011,6 +2020,7 @@ export const knownContextValues = new Set([
2011
2020
  'inline-size',
2012
2021
  'inline-variable-values',
2013
2022
  'inline-variable-values-false',
2023
+ 'inp-breakdown-widget',
2014
2024
  'input',
2015
2025
  'insertCompositionText',
2016
2026
  'insertFromDrop',
@@ -2275,6 +2285,7 @@ export const knownContextValues = new Set([
2275
2285
  'layout-count',
2276
2286
  'layout-shifts',
2277
2287
  'lcp-breakdown',
2288
+ 'lcp-breakdown-widget',
2278
2289
  'lcp-discovery-widget',
2279
2290
  'learn-more',
2280
2291
  'learn-more.ai-annotations',
@@ -2290,6 +2301,7 @@ export const knownContextValues = new Set([
2290
2301
  'learn-more.origin-trials',
2291
2302
  'leavepictureinpicture',
2292
2303
  'left',
2304
+ 'legacy-javascript-widget',
2293
2305
  'legend',
2294
2306
  'length',
2295
2307
  'length-popover',
@@ -2700,6 +2712,7 @@ export const knownContextValues = new Set([
2700
2712
  'mobile-throttling',
2701
2713
  'model',
2702
2714
  'modern',
2715
+ 'modern-http-widget',
2703
2716
  'monitoring-xhr-enabled',
2704
2717
  'monspace',
2705
2718
  'more',
@@ -2758,6 +2771,7 @@ export const knownContextValues = new Set([
2758
2771
  'network-conditions.network-offline',
2759
2772
  'network-conditions.network-online',
2760
2773
  'network-default',
2774
+ 'network-dependency-tree-widget',
2761
2775
  'network-direct-socket-message-filter',
2762
2776
  'network-event-source-message-filter',
2763
2777
  'network-film-strip',
@@ -3715,6 +3729,7 @@ export const knownContextValues = new Set([
3715
3729
  'slot',
3716
3730
  'slow',
3717
3731
  'slow-4g',
3732
+ 'slow-css-selector-widget',
3718
3733
  'sm-script',
3719
3734
  'sm-stylesheet',
3720
3735
  'small',
@@ -3965,6 +3980,7 @@ export const knownContextValues = new Set([
3965
3980
  'th',
3966
3981
  'third',
3967
3982
  'third-parties',
3983
+ 'third-parties-widget',
3968
3984
  'third-party-tree',
3969
3985
  'third-property',
3970
3986
  'this-origin',
@@ -4345,6 +4361,7 @@ export const knownContextValues = new Set([
4345
4361
  'view-transition-group',
4346
4362
  'view-transition-name',
4347
4363
  'view-transition-scope',
4364
+ 'viewport-widget',
4348
4365
  'views-location-override',
4349
4366
  'virtual-authenticators',
4350
4367
  'visibility',
package/package.json CHANGED
@@ -104,5 +104,5 @@
104
104
  "flat-cache": "6.1.12"
105
105
  }
106
106
  },
107
- "version": "1.0.1622369"
107
+ "version": "1.0.1624409"
108
108
  }