chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

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 (98) hide show
  1. package/.env.template +10 -0
  2. package/docs/get_the_code.md +27 -0
  3. package/eslint.config.mjs +151 -149
  4. package/front_end/core/common/SettingRegistration.ts +10 -7
  5. package/front_end/core/common/Settings.ts +3 -0
  6. package/front_end/core/host/AidaClient.ts +1 -0
  7. package/front_end/core/host/UserMetrics.ts +3 -1
  8. package/front_end/core/root/Runtime.ts +8 -0
  9. package/front_end/core/sdk/sdk-meta.ts +8 -2
  10. package/front_end/entrypoints/inspector_main/RenderingOptions.ts +4 -3
  11. package/front_end/generated/SupportedCSSProperties.js +1 -0
  12. package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +23 -7
  13. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt +110 -5
  14. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +50 -45
  15. package/front_end/models/ai_code_generation/AiCodeGeneration.ts +151 -0
  16. package/front_end/models/ai_code_generation/ai_code_generation.ts +6 -0
  17. package/front_end/models/ai_code_generation/debug.ts +30 -0
  18. package/front_end/models/cpu_profile/ProfileTreeModel.ts +7 -7
  19. package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts +1 -1
  20. package/front_end/panels/application/PreloadingTreeElement.ts +10 -2
  21. package/front_end/panels/application/StorageView.ts +3 -2
  22. package/front_end/panels/application/components/BackForwardCacheView.ts +34 -51
  23. package/front_end/panels/application/components/OriginTrialTreeView.ts +141 -170
  24. package/front_end/panels/application/components/backForwardCacheView.css +4 -0
  25. package/front_end/panels/application/components/originTrialTreeView.css +37 -7
  26. package/front_end/panels/application/preloading/components/PreloadingGrid.ts +2 -2
  27. package/front_end/panels/application/preloading/components/PreloadingString.ts +30 -1
  28. package/front_end/panels/autofill/AutofillView.ts +1 -1
  29. package/front_end/panels/console/ConsoleView.ts +11 -9
  30. package/front_end/panels/coverage/CoverageView.ts +1 -2
  31. package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts +1 -1
  32. package/front_end/panels/developer_resources/DeveloperResourcesView.ts +1 -1
  33. package/front_end/panels/elements/ElementStatePaneWidget.ts +1 -1
  34. package/front_end/panels/elements/EventListenersWidget.ts +1 -2
  35. package/front_end/panels/elements/PropertiesWidget.ts +1 -1
  36. package/front_end/panels/emulation/components/DeviceSizeInputElement.ts +1 -0
  37. package/front_end/panels/network/NetworkConfigView.ts +2 -1
  38. package/front_end/panels/network/NetworkItemView.ts +1 -1
  39. package/front_end/panels/network/NetworkPanel.ts +5 -4
  40. package/front_end/panels/network/NetworkWaterfallColumn.ts +5 -6
  41. package/front_end/panels/network/RequestCookiesView.ts +2 -1
  42. package/front_end/panels/network/RequestTimingView.ts +404 -348
  43. package/front_end/panels/network/networkTimingTable.css +22 -2
  44. package/front_end/panels/profiler/HeapSnapshotView.ts +3 -2
  45. package/front_end/panels/sensors/SensorsView.ts +4 -3
  46. package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts +8 -6
  47. package/front_end/panels/settings/KeybindsSettingsTab.ts +3 -2
  48. package/front_end/panels/settings/SettingsScreen.ts +2 -1
  49. package/front_end/panels/settings/WorkspaceSettingsTab.ts +1 -1
  50. package/front_end/panels/sources/AiCodeCompletionPlugin.ts +2 -1
  51. package/front_end/panels/sources/SourcesPanel.ts +2 -1
  52. package/front_end/panels/sources/sources-meta.ts +8 -1
  53. package/front_end/panels/timeline/TimelinePanel.ts +4 -3
  54. package/front_end/panels/timeline/TimelineUIUtils.ts +4 -20
  55. package/front_end/panels/timeline/components/LiveMetricsView.ts +1 -0
  56. package/front_end/panels/timeline/components/NetworkRequestTooltip.ts +42 -3
  57. package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts +2 -0
  58. package/front_end/panels/timeline/components/networkRequestTooltip.css +19 -0
  59. package/front_end/third_party/chromium/README.chromium +1 -1
  60. package/front_end/ui/components/adorners/Adorner.ts +3 -1
  61. package/front_end/ui/components/buttons/Button.docs.ts +195 -0
  62. package/front_end/ui/components/icon_button/IconButton.ts +1 -0
  63. package/front_end/ui/components/settings/SettingCheckbox.ts +50 -14
  64. package/front_end/ui/components/settings/settingCheckbox.css +6 -1
  65. package/front_end/ui/components/spinners/Spinners.docs.ts +13 -0
  66. package/front_end/ui/components/tooltips/Tooltip.docs.ts +76 -0
  67. package/front_end/ui/legacy/FilterBar.ts +1 -2
  68. package/front_end/ui/legacy/RadioButton.docs.ts +41 -0
  69. package/front_end/ui/legacy/SelectMenu.docs.ts +98 -0
  70. package/front_end/ui/legacy/Toolbar.ts +4 -6
  71. package/front_end/ui/legacy/Treeoutline.ts +15 -0
  72. package/front_end/ui/legacy/UIUtils.ts +117 -1
  73. package/front_end/ui/legacy/Widget.ts +68 -38
  74. package/front_end/ui/legacy/XLink.ts +1 -0
  75. package/front_end/ui/legacy/components/inline_editor/Swatches.ts +1 -0
  76. package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts +1 -0
  77. package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts +125 -0
  78. package/front_end/ui/legacy/components/settings_ui/settings_ui.ts +8 -0
  79. package/front_end/ui/legacy/legacy.ts +0 -2
  80. package/front_end/ui/legacy/popover.css +12 -11
  81. package/front_end/ui/visual_logging/KnownContextValues.ts +3 -0
  82. package/package.json +1 -1
  83. package/front_end/models/trace/lantern/testing/MetricTestUtils.ts +0 -62
  84. package/front_end/models/trace/lantern/testing/testing.ts +0 -5
  85. package/front_end/panels/application/components/badge.css +0 -25
  86. package/front_end/ui/components/docs/button/basic.html +0 -44
  87. package/front_end/ui/components/docs/button/basic.ts +0 -175
  88. package/front_end/ui/components/docs/radio_button/basic.html +0 -23
  89. package/front_end/ui/components/docs/radio_button/basic.ts +0 -50
  90. package/front_end/ui/components/docs/select_menu/basic.html +0 -19
  91. package/front_end/ui/components/docs/select_menu/basic.ts +0 -95
  92. package/front_end/ui/components/docs/select_menu/wide-option.html +0 -38
  93. package/front_end/ui/components/docs/select_menu/wide-option.ts +0 -43
  94. package/front_end/ui/components/docs/spinners/basic.html +0 -17
  95. package/front_end/ui/components/docs/spinners/basic.ts +0 -22
  96. package/front_end/ui/components/docs/tooltip/basic.html +0 -20
  97. package/front_end/ui/components/docs/tooltip/basic.ts +0 -82
  98. package/front_end/ui/legacy/SettingsUI.ts +0 -240
@@ -78,8 +78,8 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
78
78
  .network-timing-bar {
79
79
  position: absolute;
80
80
  min-width: 1px;
81
- top: 0;
82
- bottom: 0;
81
+ inset: 0 attr(data-right %) 0 attr(data-left %); /* stylelint-disable-line declaration-property-value-no-unknown */
82
+ background-color: attr(data-background <color>); /* stylelint-disable-line declaration-property-value-no-unknown */
83
83
  }
84
84
 
85
85
  .network-timing-bar-title {
@@ -145,6 +145,16 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
145
145
  left: -12px;
146
146
  }
147
147
 
148
+ tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
149
+ tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
150
+ display: none;
151
+ }
152
+
153
+ tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
154
+ tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
155
+ display: block;
156
+ }
157
+
148
158
  .network-fetch-timing-bar-clickable:focus-visible {
149
159
  background-color: var(--sys-color-state-focus-highlight);
150
160
  }
@@ -181,6 +191,16 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
181
191
  background-color: var(--network-overview-waiting); /* stylelint-disable-line plugin/use_theme_colors */
182
192
  }
183
193
 
194
+ .throttled devtools-icon {
195
+ vertical-align: middle;
196
+ margin-right: var(--sys-size-3);
197
+ color: var(--sys-color-yellow);
198
+ }
199
+
200
+ td.throttled {
201
+ color: var(--sys-color-yellow);
202
+ }
203
+
184
204
  .network-timing-bar.receiving,
185
205
  .network-timing-bar.receiving-push,
186
206
  .-theme-preserve {
@@ -16,6 +16,7 @@ import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapsh
16
16
  import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
17
17
  import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
18
18
  import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
19
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
19
20
  import * as Components from '../../ui/legacy/components/utils/utils.js';
20
21
  import * as UI from '../../ui/legacy/legacy.js';
21
22
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1339,7 +1340,7 @@ export class HeapSnapshotProfileType extends
1339
1340
  const showOptionToExposeInternalsInHeapSnapshot =
1340
1341
  Root.Runtime.experiments.isEnabled('show-option-tp-expose-internals-in-heap-snapshot');
1341
1342
  const exposeInternalsInHeapSnapshotCheckbox =
1342
- UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
1343
+ SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
1343
1344
  this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
1344
1345
  return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
1345
1346
  }
@@ -1549,7 +1550,7 @@ export class TrackingHeapSnapshotProfileType extends
1549
1550
  }
1550
1551
 
1551
1552
  override customContent(): Element|null {
1552
- const checkboxSetting = UI.SettingsUI.createSettingCheckbox(
1553
+ const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
1553
1554
  i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
1554
1555
  this.customContentInternal = (checkboxSetting);
1555
1556
  return checkboxSetting;
@@ -8,6 +8,7 @@ import * as Host from '../../core/host/host.js';
8
8
  import * as i18n from '../../core/i18n/i18n.js';
9
9
  import * as SDK from '../../core/sdk/sdk.js';
10
10
  import * as Geometry from '../../models/geometry/geometry.js';
11
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
11
12
  import * as UI from '../../ui/legacy/legacy.js';
12
13
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
13
14
  import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -549,7 +550,7 @@ export class SensorsView extends UI.Widget.VBox {
549
550
 
550
551
  private createPressureSection(): void {
551
552
  const container = this.contentElement.createChild('div', 'pressure-section');
552
- const control = UI.SettingsUI.createControlForSetting(
553
+ const control = SettingsUI.SettingsUI.createControlForSetting(
553
554
  Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure'),
554
555
  i18nString(UIStrings.forcesSelectedPressureStateEmulation));
555
556
 
@@ -798,7 +799,7 @@ export class SensorsView extends UI.Widget.VBox {
798
799
 
799
800
  private appendTouchControl(): void {
800
801
  const container = this.contentElement.createChild('div', 'touch-section');
801
- const control = UI.SettingsUI.createControlForSetting(
802
+ const control = SettingsUI.SettingsUI.createControlForSetting(
802
803
  Common.Settings.Settings.instance().moduleSetting('emulation.touch'),
803
804
  i18nString(UIStrings.forcesTouchInsteadOfClick));
804
805
 
@@ -809,7 +810,7 @@ export class SensorsView extends UI.Widget.VBox {
809
810
 
810
811
  private appendIdleEmulator(): void {
811
812
  const container = this.contentElement.createChild('div', 'idle-section');
812
- const control = UI.SettingsUI.createControlForSetting(
813
+ const control = SettingsUI.SettingsUI.createControlForSetting(
813
814
  Common.Settings.Settings.instance().moduleSetting('emulation.idle-detection'),
814
815
  i18nString(UIStrings.forcesSelectedIdleStateEmulation));
815
816
 
@@ -8,6 +8,7 @@ import '../../ui/components/cards/cards.js';
8
8
  import * as Common from '../../core/common/common.js';
9
9
  import * as i18n from '../../core/i18n/i18n.js';
10
10
  import * as Buttons from '../../ui/components/buttons/buttons.js';
11
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
11
12
  import * as UI from '../../ui/legacy/legacy.js';
12
13
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
13
14
 
@@ -112,7 +113,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
112
113
  const enabledSetting = Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
113
114
  const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
114
115
  enableIgnoreListing.appendChild(
115
- UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting));
116
+ SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting));
116
117
  UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
117
118
 
118
119
  const enableIgnoreListingCard = settingsContent.createChild('devtools-card');
@@ -123,14 +124,15 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
123
124
  generalExclusionGroup.classList.add('general-exclusion-group');
124
125
  const ignoreListContentScripts =
125
126
  generalExclusionGroup.createChild('div', 'ignore-list-option')
126
- .appendChild(UI.SettingsUI.createSettingCheckbox(
127
+ .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
127
128
  i18nString(UIStrings.ignoreListContentScripts),
128
129
  Common.Settings.Settings.instance().moduleSetting('skip-content-scripts')));
129
130
 
130
131
  const automaticallyIgnoreListContainer = generalExclusionGroup.createChild('div', 'ignore-list-option');
131
- const automaticallyIgnoreList = automaticallyIgnoreListContainer.appendChild(UI.SettingsUI.createSettingCheckbox(
132
- i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
133
- Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts')));
132
+ const automaticallyIgnoreList =
133
+ automaticallyIgnoreListContainer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
134
+ i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
135
+ Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts')));
134
136
 
135
137
  const automaticallyIgnoreLinkButton = new Buttons.Button.Button();
136
138
  automaticallyIgnoreLinkButton.data = {
@@ -148,7 +150,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
148
150
 
149
151
  const ignoreListAnonymousScripts =
150
152
  generalExclusionGroup.createChild('div', 'ignore-list-option')
151
- .appendChild(UI.SettingsUI.createSettingCheckbox(
153
+ .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
152
154
  i18nString(UIStrings.ignoreListAnonymousScripts),
153
155
  Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts')));
154
156
 
@@ -11,6 +11,7 @@ import * as i18n from '../../core/i18n/i18n.js';
11
11
  import * as Platform from '../../core/platform/platform.js';
12
12
  import * as Buttons from '../../ui/components/buttons/buttons.js';
13
13
  import * as IconButton from '../../ui/components/icon_button/icon_button.js';
14
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
14
15
  import * as UI from '../../ui/legacy/legacy.js';
15
16
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
16
17
 
@@ -126,8 +127,8 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
126
127
  const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
127
128
  const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
128
129
  keybindsSetSetting.addChangeListener(this.update, this);
129
- const keybindsSetSelect =
130
- UI.SettingsUI.createControlForSetting(keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));
130
+ const keybindsSetSelect = SettingsUI.SettingsUI.createControlForSetting(
131
+ keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));
131
132
 
132
133
  const card = settingsContent.createChild('devtools-card');
133
134
  card.heading = i18nString(UIStrings.shortcuts);
@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
14
14
  import * as Buttons from '../../ui/components/buttons/buttons.js';
15
15
  import type * as Cards from '../../ui/components/cards/cards.js';
16
16
  import * as IconButton from '../../ui/components/icon_button/icon_button.js';
17
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
17
18
  import * as Components from '../../ui/legacy/components/utils/utils.js';
18
19
  import * as UI from '../../ui/legacy/legacy.js';
19
20
  import {html, render} from '../../ui/lit/lit.js';
@@ -355,7 +356,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
355
356
  const sectionElement = document.createElement('div');
356
357
  for (const settingRegistration of settings) {
357
358
  const setting = Common.Settings.Settings.instance().moduleSetting(settingRegistration.settingName);
358
- const settingControl = UI.SettingsUI.createControlForSetting(setting);
359
+ const settingControl = SettingsUI.SettingsUI.createControlForSetting(setting);
359
360
  if (settingControl) {
360
361
  this.settingToControl.set(setting, settingControl);
361
362
  sectionElement.appendChild(settingControl);
@@ -61,7 +61,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
61
61
  <input
62
62
  class="harmony-input"
63
63
  jslog=${VisualLogging.textField().track({keydown: 'Enter', change: true}).context(input.excludePatternSetting.name)}
64
- ${UI.SettingsUI.bindToSetting(input.excludePatternSetting)}
64
+ ${UI.UIUtils.bindToSetting(input.excludePatternSetting)}
65
65
  id="workspace-setting-folder-exclude-pattern"></input>
66
66
  </div>
67
67
  <div class="mappings-info">${i18nString(UIStrings.mappingsAreInferredAutomatically)}</div>
@@ -255,6 +255,7 @@ export class AiCodeCompletionPlugin extends Plugin {
255
255
  }
256
256
 
257
257
  #removeAiCodeCompletionCitationsToolbar(): void {
258
+ this.#aiCodeCompletionCitationsToolbar?.detach();
258
259
  if (this.#editor) {
259
260
  this.#editor.dispatch({
260
261
  effects: SourceFrame.SourceFrame.removeSourceFrameInfobar.of(
@@ -300,7 +301,7 @@ export class AiCodeCompletionPlugin extends Plugin {
300
301
  this.#aiCodeCompletion?.remove();
301
302
  this.#aiCodeCompletion = undefined;
302
303
  this.#aiCodeCompletionCitations = [];
303
- this.#aiCodeCompletionDisclaimerContainer.removeChildren();
304
+ this.#aiCodeCompletionDisclaimer?.detach();
304
305
  this.#aiCodeCompletionDisclaimer = undefined;
305
306
  this.#removeAiCodeCompletionCitationsToolbar();
306
307
  this.#aiCodeCompletionCitationsToolbar = undefined;
@@ -44,6 +44,7 @@ import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
44
44
  import * as Workspace from '../../models/workspace/workspace.js';
45
45
  import * as PanelCommon from '../../panels/common/common.js';
46
46
  import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
47
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
47
48
  import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
48
49
  import * as UI from '../../ui/legacy/legacy.js';
49
50
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -921,7 +922,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
921
922
 
922
923
  const label = i18nString(UIStrings.pauseOnCaughtExceptions);
923
924
  const setting = Common.Settings.Settings.instance().moduleSetting('pause-on-caught-exception');
924
- debugToolbarDrawer.appendChild(UI.SettingsUI.createSettingCheckbox(label, setting));
925
+ debugToolbarDrawer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(label, setting));
925
926
 
926
927
  return debugToolbarDrawer;
927
928
  }
@@ -396,7 +396,11 @@ const UIStrings = {
396
396
  /**
397
397
  * @description Title of a setting under the Sources category in Settings
398
398
  */
399
- wasmAutoStepping: 'When debugging Wasm with debug information, do not pause on wasm bytecode if possible',
399
+ wasmAutoStepping: 'Wasm auto-stepping bytecode',
400
+ /**
401
+ * @description Tooltip text for a setting that controls Wasm will try to skip wasm bytecode
402
+ */
403
+ wasmAutoSteppingInfo: 'When debugging Wasm with debug information, try to skip wasm bytecode',
400
404
  /**
401
405
  * @description Title of a setting under the Sources category in Settings
402
406
  */
@@ -1850,6 +1854,9 @@ Common.Settings.registerSettingExtension({
1850
1854
  title: i18nLazyString(UIStrings.disableWasmAutoStepping),
1851
1855
  },
1852
1856
  ],
1857
+ learnMore: {
1858
+ tooltip: i18nLazyString(UIStrings.wasmAutoSteppingInfo),
1859
+ }
1853
1860
  });
1854
1861
 
1855
1862
  UI.ViewManager.registerLocationResolver({
@@ -57,6 +57,7 @@ import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
57
57
  import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
58
58
  import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
59
59
  import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
60
+ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
60
61
  import * as UI from '../../ui/legacy/legacy.js';
61
62
  import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
62
63
  import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1290,7 +1291,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
1290
1291
  this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
1291
1292
  cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
1292
1293
 
1293
- this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
1294
+ this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
1294
1295
  this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
1295
1296
  i18nString(UIStrings.capturesSelectorStats)));
1296
1297
 
@@ -1298,11 +1299,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
1298
1299
  networkThrottlingPane.append(i18nString(UIStrings.network));
1299
1300
  networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
1300
1301
 
1301
- this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
1302
+ this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
1302
1303
  this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
1303
1304
  i18nString(UIStrings.capturesAdvancedPaint)));
1304
1305
 
1305
- this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
1306
+ this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
1306
1307
  this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
1307
1308
  i18nString(UIStrings.disablesJavascriptSampling)));
1308
1309
 
@@ -732,26 +732,6 @@ export class TimelineUIUtils {
732
732
  break;
733
733
  }
734
734
 
735
- case Trace.Types.Events.Name.COMPILE_SCRIPT:
736
- case Trace.Types.Events.Name.CACHE_SCRIPT:
737
- case Trace.Types.Events.Name.EVALUATE_SCRIPT: {
738
- const url = unsafeEventData['url'];
739
- if (url) {
740
- const {lineNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
741
- details = this.linkifyLocation({
742
- scriptId: null,
743
- url,
744
- lineNumber: lineNumber || 0,
745
- columnNumber: 0,
746
- target,
747
- isFreshOrEnhanced,
748
- linkifier,
749
- omitOrigin: true,
750
- });
751
- }
752
- break;
753
- }
754
-
755
735
  case Trace.Types.Events.Name.BACKGROUND_DESERIALIZE:
756
736
  case Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT: {
757
737
  const url = unsafeEventData['url'];
@@ -1710,6 +1690,7 @@ export class TimelineUIUtils {
1710
1690
  return {callFrames} as Protocol.Runtime.StackTrace;
1711
1691
  }
1712
1692
 
1693
+ /** This renders a stack trace... and other cool stuff. */
1713
1694
  static async generateCauses(
1714
1695
  event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
1715
1696
  parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
@@ -2478,6 +2459,9 @@ export class TimelineDetailsContentHelper {
2478
2459
  if (!this.#linkifier) {
2479
2460
  return;
2480
2461
  }
2462
+
2463
+ // We resolve the original function name here. StackTracePreviewContent uses
2464
+ // Linkifier to resolve the source code location.
2481
2465
  const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
2482
2466
  let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
2483
2467
  while (currentResolvedStackTrace) {
@@ -4,6 +4,7 @@
4
4
  /* eslint-disable @devtools/no-imperative-dom-api */
5
5
  /* eslint-disable @devtools/no-lit-render-outside-of-view */
6
6
 
7
+ import '../../../ui/components/settings/settings.js';
7
8
  import '../../../ui/components/icon_button/icon_button.js';
8
9
  import './FieldSettingsDialog.js';
9
10
  import './NetworkThrottlingSelector.js';
@@ -7,6 +7,7 @@ import '../../../ui/components/icon_button/icon_button.js';
7
7
 
8
8
  import * as i18n from '../../../core/i18n/i18n.js';
9
9
  import * as Platform from '../../../core/platform/platform.js';
10
+ import * as SDK from '../../../core/sdk/sdk.js';
10
11
  import * as Trace from '../../../models/trace/trace.js';
11
12
  import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
12
13
  import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +16,7 @@ import * as TimelineUtils from '../utils/utils.js';
15
16
  import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
16
17
  import {colorForNetworkRequest, networkResourceCategory} from './Utils.js';
17
18
 
18
- const {html} = Lit;
19
+ const {html, nothing, Directives: {classMap, ifDefined}} = Lit;
19
20
 
20
21
  const MAX_URL_LENGTH = 60;
21
22
 
@@ -52,6 +53,11 @@ const UIStrings = {
52
53
  * @description Text to refer to the list of redirects.
53
54
  */
54
55
  redirects: 'Redirects',
56
+ /**
57
+ * @description Cell title in Network Data Grid Node of the Network panel
58
+ * @example {Fast 4G} PH1
59
+ */
60
+ wasThrottled: 'Request was throttled ({PH1})',
55
61
  } as const;
56
62
  const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
57
63
  const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -106,6 +112,16 @@ export class NetworkRequestTooltip extends HTMLElement {
106
112
  backgroundColor: color,
107
113
  };
108
114
 
115
+ const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(networkRequest);
116
+ const wasThrottled = sdkNetworkRequest &&
117
+ SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
118
+ sdkNetworkRequest.networkRequest);
119
+ const throttledTitle = wasThrottled ? i18nString(UIStrings.wasThrottled, {
120
+ PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
121
+ wasThrottled.conditions.title()
122
+ }) :
123
+ undefined;
124
+
109
125
  // The outside spans are transparent with a border on the outside edge.
110
126
  // The inside spans are 1px tall rectangles, vertically centered, with background color.
111
127
  // |
@@ -114,9 +130,20 @@ export class NetworkRequestTooltip extends HTMLElement {
114
130
  const leftWhisker = html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
115
131
  const rightWhisker = html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
116
132
 
133
+ const classes = classMap({
134
+ ['timings-row timings-row--duration']: true,
135
+ throttled: Boolean(wasThrottled?.urlPattern),
136
+ });
117
137
  return html`
118
- <div class="timings-row timings-row--duration">
119
- <span class="indicator"></span>
138
+ <div
139
+ class=${classes}
140
+ title=${ifDefined(throttledTitle)}>
141
+ ${
142
+ wasThrottled?.urlPattern ? html`<devtools-icon
143
+ class=indicator
144
+ name=watch
145
+ ></devtools-icon>` :
146
+ html`<span class="indicator"></span>`}
120
147
  ${i18nString(UIStrings.duration)}
121
148
  <span class="time"> ${i18n.TimeUtilities.formatMicroSecondsTime(networkRequest.dur)} </span>
122
149
  </div>
@@ -173,6 +200,11 @@ export class NetworkRequestTooltip extends HTMLElement {
173
200
 
174
201
  const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#data.networkRequest);
175
202
 
203
+ const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#data.networkRequest);
204
+ const wasThrottled = sdkNetworkRequest &&
205
+ SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
206
+ sdkNetworkRequest.networkRequest);
207
+
176
208
  // clang-format off
177
209
  const output = html`
178
210
  <style>${networkRequestTooltipStyles}</style>
@@ -186,6 +218,13 @@ export class NetworkRequestTooltip extends HTMLElement {
186
218
  </span>${networkResourceCategory(this.#data.networkRequest)}
187
219
  </div>
188
220
  <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(this.#data.networkRequest)}</div>
221
+ ${wasThrottled ? html`
222
+ <div class="throttled-row">
223
+ ${i18nString(UIStrings.wasThrottled, {
224
+ PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
225
+ wasThrottled.conditions.title()
226
+ })}
227
+ </div>` : nothing}
189
228
  ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#data.networkRequest) ?
190
229
  html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` : Lit.nothing
191
230
  }
@@ -2,6 +2,8 @@
2
2
  // Use of this source code is governed by a BSD-style license that can be
3
3
  // found in the LICENSE file.
4
4
 
5
+ import '../../../ui/components/settings/settings.js';
6
+
5
7
  import * as Common from '../../../core/common/common.js';
6
8
  import * as i18n from '../../../core/i18n/i18n.js';
7
9
  import * as Platform from '../../../core/platform/platform.js';
@@ -22,6 +22,11 @@
22
22
  margin-left: 15px;
23
23
  }
24
24
 
25
+ .throttled-row {
26
+ margin-left: 15px;
27
+ color: var(--sys-color-yellow);
28
+ }
29
+
25
30
  .network-category-chip {
26
31
  box-sizing: border-box;
27
32
  width: 10px;
@@ -62,6 +67,16 @@
62
67
  box-sizing: border-box;
63
68
  }
64
69
 
70
+ devtools-icon.indicator {
71
+ vertical-align: middle;
72
+ height: 12px;
73
+ width: 12px;
74
+ margin-right: 4px;
75
+ color: var(--sys-color-yellow);
76
+ border: none;
77
+ }
78
+
79
+
65
80
  .whisker-left {
66
81
  align-self: center;
67
82
  display: inline-flex;
@@ -104,6 +119,10 @@
104
119
  .time {
105
120
  font-weight: var(--ref-typeface-weight-medium);
106
121
  }
122
+
123
+ &.throttled {
124
+ color: var(--sys-color-yellow);
125
+ }
107
126
  }
108
127
 
109
128
  .redirects-row {
@@ -1,7 +1,7 @@
1
1
  Name: Dependencies sourced from the upstream `chromium` repository
2
2
  URL: https://chromium.googlesource.com/chromium/src
3
3
  Version: N/A
4
- Revision: 5ea04b0081c4e9801ea4b74784e39ff75c8c7abb
4
+ Revision: b60591ec8cb7d0c80f2661ee8fbbfef966d86046
5
5
  Update Mechanism: Manual (https://crbug.com/428069060)
6
6
  License: BSD-3-Clause
7
7
  License File: LICENSE
@@ -5,6 +5,7 @@
5
5
 
6
6
  import type * as Platform from '../../../core/platform/platform.js';
7
7
  import {html, render} from '../../../ui/lit/lit.js';
8
+ import * as UI from '../../legacy/legacy.js';
8
9
  import * as VisualElements from '../../visual_logging/visual_logging.js';
9
10
 
10
11
  import adornerStyles from './adorner.css.js';
@@ -37,7 +38,7 @@ export class Adorner extends HTMLElement {
37
38
  }
38
39
 
39
40
  override cloneNode(deep?: boolean): Node {
40
- const node = super.cloneNode(deep) as Adorner;
41
+ const node = UI.UIUtils.cloneCustomElement(this, deep);
41
42
  node.data = {name: this.name, content: this.#content, jslogContext: this.#jslogContext};
42
43
  return node;
43
44
  }
@@ -49,6 +50,7 @@ export class Adorner extends HTMLElement {
49
50
  if (this.#jslogContext && !this.getAttribute('jslog')) {
50
51
  this.setAttribute('jslog', `${VisualElements.adorner(this.#jslogContext)}`);
51
52
  }
53
+ this.#render();
52
54
  }
53
55
 
54
56
  isActive(): boolean {