Sync with google/devtools-frontend

Current HEAD
ChromeDevTools/devtools-frontend@17cba89

Author: WebCloud

.gitignore

@@ -46,3 +46,4 @@ test/perf/.generated
 /.vscode/settings.json
 /.vscode/tasks.json
 /.vscode/launch.json
+node_modules/

config/gni/devtools_grd_files.gni

@@ -70,6 +70,7 @@ grd_files_release_sources = [
   "front_end/Images/chromeLeft.avif",
   "front_end/Images/chromeMiddle.avif",
   "front_end/Images/chromeRight.avif",
+  "front_end/Images/class.svg",
   "front_end/Images/clear-list.svg",
   "front_end/Images/clear.svg",
   "front_end/Images/cloud.svg",
@@ -142,6 +143,7 @@ grd_files_release_sources = [
   "front_end/Images/heap-snapshot.svg",
   "front_end/Images/heap-snapshots.svg",
   "front_end/Images/help.svg",
+  "front_end/Images/hover.svg",
   "front_end/Images/iframe-crossed.svg",
   "front_end/Images/iframe.svg",
   "front_end/Images/import.svg",
@@ -601,9 +603,13 @@ grd_files_release_sources = [
   "front_end/panels/sources/sources-meta.js",
   "front_end/panels/sources/sources.js",
   "front_end/panels/timeline/components/components.js",
+  "front_end/panels/timeline/components/insights/insights.js",
   "front_end/panels/timeline/extensions/extensions.js",
+  "front_end/panels/timeline/overlays/components/components.js",
+  "front_end/panels/timeline/overlays/overlays.js",
   "front_end/panels/timeline/timeline-meta.js",
   "front_end/panels/timeline/timeline.js",
+  "front_end/panels/timeline/utils/utils.js",
   "front_end/panels/utils/utils.js",
   "front_end/panels/web_audio/graph_visualizer/graph_visualizer.js",
   "front_end/panels/web_audio/web_audio-meta.js",
@@ -750,7 +756,6 @@ grd_files_debug_sources = [
   "front_end/core/platform/MimeType.js",
   "front_end/core/platform/NumberUtilities.js",
   "front_end/core/platform/PromiseUtilities.js",
-  "front_end/core/platform/SetUtilities.js",
   "front_end/core/platform/StringUtilities.js",
   "front_end/core/platform/Timing.js",
   "front_end/core/platform/TypedArrayUtilities.js",
@@ -966,6 +971,7 @@ grd_files_debug_sources = [
   "front_end/models/persistence/editFileSystemView.css.js",
   "front_end/models/persistence/workspaceSettingsTab.css.js",
   "front_end/models/source_map_scopes/NamesResolver.js",
+  "front_end/models/source_map_scopes/ScopeChainModel.js",
   "front_end/models/source_map_scopes/ScopeTreeCache.js",
   "front_end/models/text_utils/CodeMirrorUtils.js",
   "front_end/models/text_utils/ContentData.js",
@@ -981,7 +987,6 @@ grd_files_debug_sources = [
   "front_end/models/timeline_model/TimelineModelFilter.js",
   "front_end/models/timeline_model/TimelineProfileTree.js",
   "front_end/models/timeline_model/TracingLayerTree.js",
-  "front_end/models/trace/EntriesFilter.js",
   "front_end/models/trace/LanternComputationData.js",
   "front_end/models/trace/ModelImpl.js",
   "front_end/models/trace/Processor.js",
@@ -1021,12 +1026,14 @@ grd_files_debug_sources = [
   "front_end/models/trace/handlers/WorkersHandler.js",
   "front_end/models/trace/handlers/types.js",
   "front_end/models/trace/helpers/Extensions.js",
+  "front_end/models/trace/helpers/Network.js",
   "front_end/models/trace/helpers/SamplesIntegrator.js",
   "front_end/models/trace/helpers/SyntheticEvents.js",
   "front_end/models/trace/helpers/Timing.js",
   "front_end/models/trace/helpers/Trace.js",
   "front_end/models/trace/helpers/TreeHelpers.js",
   "front_end/models/trace/insights/CumulativeLayoutShift.js",
+  "front_end/models/trace/insights/DocumentLatency.js",
   "front_end/models/trace/insights/InsightRunners.js",
   "front_end/models/trace/insights/InteractionToNextPaint.js",
   "front_end/models/trace/insights/LargestContentfulPaint.js",
@@ -1345,7 +1352,9 @@ grd_files_debug_sources = [
   "front_end/panels/freestyler/FreestylerEvaluateAction.js",
   "front_end/panels/freestyler/FreestylerPanel.js",
   "front_end/panels/freestyler/components/FreestylerChatUi.js",
+  "front_end/panels/freestyler/components/ProvideFeedback.js",
   "front_end/panels/freestyler/components/freestylerChatUi.css.js",
+  "front_end/panels/freestyler/components/provideFeedback.css.js",
   "front_end/panels/freestyler/freestylerPanel.css.js",
   "front_end/panels/issues/AffectedBlockedByResponseView.js",
   "front_end/panels/issues/AffectedCookiesView.js",
@@ -1685,6 +1694,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/CompatibilityTracksAppender.js",
   "front_end/panels/timeline/CountersGraph.js",
   "front_end/panels/timeline/EasterEgg.js",
+  "front_end/panels/timeline/EntriesFilter.js",
   "front_end/panels/timeline/EventUICategory.js",
   "front_end/panels/timeline/EventsSerializer.js",
   "front_end/panels/timeline/EventsTimelineTreeView.js",
@@ -1698,7 +1708,6 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/LayoutShiftsTrackAppender.js",
   "front_end/panels/timeline/ModificationsManager.js",
   "front_end/panels/timeline/NetworkTrackAppender.js",
-  "front_end/panels/timeline/Overlays.js",
   "front_end/panels/timeline/SaveFileFormatter.js",
   "front_end/panels/timeline/SourceMapsResolver.js",
   "front_end/panels/timeline/TargetForEvent.js",
@@ -1728,36 +1737,47 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/BreadcrumbsUI.js",
   "front_end/panels/timeline/components/CPUThrottlingSelector.js",
   "front_end/panels/timeline/components/DetailsView.js",
-  "front_end/panels/timeline/components/EntryLabelOverlay.js",
+  "front_end/panels/timeline/components/FieldSettingsDialog.js",
   "front_end/panels/timeline/components/InteractionBreakdown.js",
   "front_end/panels/timeline/components/LiveMetricsView.js",
+  "front_end/panels/timeline/components/NetworkRequestDetails.js",
   "front_end/panels/timeline/components/NetworkRequestTooltip.js",
   "front_end/panels/timeline/components/NetworkThrottlingSelector.js",
   "front_end/panels/timeline/components/Sidebar.js",
   "front_end/panels/timeline/components/SidebarAnnotationsTab.js",
-  "front_end/panels/timeline/components/SidebarInsight.js",
-  "front_end/panels/timeline/components/TimeRangeOverlay.js",
-  "front_end/panels/timeline/components/TimespanBreakdownOverlay.js",
+  "front_end/panels/timeline/components/SidebarSingleNavigation.js",
   "front_end/panels/timeline/components/Utils.js",
   "front_end/panels/timeline/components/breadcrumbsUI.css.js",
-  "front_end/panels/timeline/components/entryLabelOverlay.css.js",
+  "front_end/panels/timeline/components/fieldSettingsDialog.css.js",
+  "front_end/panels/timeline/components/insights/LCPDiscovery.js",
+  "front_end/panels/timeline/components/insights/LCPPhases.js",
+  "front_end/panels/timeline/components/insights/SidebarInsight.js",
+  "front_end/panels/timeline/components/insights/sidebarInsight.css.js",
+  "front_end/panels/timeline/components/insights/types.js",
   "front_end/panels/timeline/components/interactionBreakdown.css.js",
   "front_end/panels/timeline/components/liveMetricsView.css.js",
+  "front_end/panels/timeline/components/networkRequestDetails.css.js",
   "front_end/panels/timeline/components/networkRequestTooltip.css.js",
   "front_end/panels/timeline/components/sidebar.css.js",
   "front_end/panels/timeline/components/sidebarAnnotationsTab.css.js",
-  "front_end/panels/timeline/components/sidebarInsight.css.js",
-  "front_end/panels/timeline/components/timeRangeOverlay.css.js",
-  "front_end/panels/timeline/components/timespanBreakdownOverlay.css.js",
+  "front_end/panels/timeline/components/sidebarSingleNavigation.css.js",
   "front_end/panels/timeline/extensions/ExtensionUI.js",
   "front_end/panels/timeline/historyToolbarButton.css.js",
+  "front_end/panels/timeline/overlays/OverlaysImpl.js",
+  "front_end/panels/timeline/overlays/components/EntryLabelOverlay.js",
+  "front_end/panels/timeline/overlays/components/TimeRangeOverlay.js",
+  "front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.js",
+  "front_end/panels/timeline/overlays/components/entryLabelOverlay.css.js",
+  "front_end/panels/timeline/overlays/components/timeRangeOverlay.css.js",
+  "front_end/panels/timeline/overlays/components/timespanBreakdownOverlay.css.js",
   "front_end/panels/timeline/timelineFlameChartView.css.js",
   "front_end/panels/timeline/timelineFlamechartPopover.css.js",
   "front_end/panels/timeline/timelineHistoryManager.css.js",
   "front_end/panels/timeline/timelineMiniMap.css.js",
   "front_end/panels/timeline/timelinePaintProfiler.css.js",
   "front_end/panels/timeline/timelinePanel.css.js",
   "front_end/panels/timeline/timelineStatusDialog.css.js",
+  "front_end/panels/timeline/utils/NetworkRequest.js",
   "front_end/panels/web_audio/AudioContextContentBuilder.js",
   "front_end/panels/web_audio/AudioContextSelector.js",
   "front_end/panels/web_audio/WebAudioModel.js",
@@ -1864,6 +1884,7 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/BrowserConnector.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/BrowserContext.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/CDPSession.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/CdpPreloadScript.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/ChromeTargetManager.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/Connection.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/cdp/Coverage.js",

config/gni/devtools_image_files.gni

@@ -74,6 +74,7 @@ devtools_svg_sources = [
   "chevron-left.svg",
   "chevron-right.svg",
   "chevron-up.svg",
+  "class.svg",
   "clear-list.svg",
   "clear.svg",
   "cloud.svg",
@@ -145,6 +146,7 @@ devtools_svg_sources = [
   "heap-snapshot.svg",
   "heap-snapshots.svg",
   "help.svg",
+  "hover.svg",
   "iframe-crossed.svg",
   "iframe.svg",
   "import.svg",

front_end/.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
         'rulesdir/ban_a_tags_in_lit_html': 'error',
         'rulesdir/check_component_naming': 'error',
         'rulesdir/check_css_import': 'error',
+        'rulesdir/enforce-optional-properties-last': 'error',
         'rulesdir/check_enumerated_histograms': 'error',
         'rulesdir/check_was_shown_methods': 'error',
         'rulesdir/static_custom_event_names': 'error',

front_end/BUILD.gn

@@ -189,7 +189,9 @@ group("unittests") {
     "panels/sources/components:unittests",
     "panels/timeline:unittests",
     "panels/timeline/components:unittests",
+    "panels/timeline/components/insights:unittests",
     "panels/timeline/fixtures/traces",
+    "panels/timeline/overlays:unittests",
     "panels/timeline/track_appenders:unittests",
     "panels/utils:unittests",
     "panels/web_audio:unittests",

front_end/Images/src/class.svg

@@ -2385,49 +2385,19 @@ export const IsolationModeHighlight = {
   Mask: Legacy.fromRGBA([248, 249, 249, 1]),
 };
 
+type Space = number|{
+  min: number,
+  max: number,
+  count: (number|undefined),
+};
+
 export class Generator {
-  readonly #hueSpace: number|{
-    min: number,
-    max: number,
-    count: (number|undefined),
-  };
-  readonly #satSpace: number|{
-    min: number,
-    max: number,
-    count: (number|undefined),
-  };
-  readonly #lightnessSpace: number|{
-    min: number,
-    max: number,
-    count: (number|undefined),
-  };
-  readonly #alphaSpace: number|{
-    min: number,
-    max: number,
-    count: (number|undefined),
-  };
+  readonly #hueSpace: Space;
+  readonly #satSpace: Space;
+  readonly #lightnessSpace: Space;
+  readonly #alphaSpace: Space;
   readonly #colors: Map<string, string>;
-  constructor(
-      hueSpace?: number|{
-        min: number,
-        max: number,
-        count: (number|undefined),
-      },
-      satSpace?: number|{
-        min: number,
-        max: number,
-        count: (number|undefined),
-      },
-      lightnessSpace?: number|{
-        min: number,
-        max: number,
-        count: (number|undefined),
-      },
-      alphaSpace?: number|{
-        min: number,
-        max: number,
-        count: (number|undefined),
-      }) {
+  constructor(hueSpace?: Space, satSpace?: Space, lightnessSpace?: Space, alphaSpace?: Space) {
     this.#hueSpace = hueSpace || {min: 0, max: 360, count: undefined};
     this.#satSpace = satSpace || 67;
     this.#lightnessSpace = lightnessSpace || 80;
@@ -2461,11 +2431,7 @@ export class Generator {
     return `${start})`;
   }
 
-  private indexToValueInSpace(index: number, space: number|{
-    min: number,
-    max: number,
-    count: (number|undefined),
-  }): number {
+  private indexToValueInSpace(index: number, space: Space): number {
     if (typeof space === 'number') {
       return space;
     }

front_end/Images/src/hover.svg

@@ -22,12 +22,12 @@ describe('ColorUtils', () => {
     assert.deepEqual(result, [0, 0.5, 0.5, 0.5], 'RGBA color was not converted to HWB successfully');
   });
 
-  it('is able to return the luminance of an RGBA value with the RGB values more than 0.03928', () => {
+  it('is able to return the luminance of an RGBA value with the RGB values more than 0.04045', () => {
     const lum = Common.ColorUtils.luminance([0.5, 0.5, 0.5, 0.5]);
     assert.strictEqual(lum, 0.21404114048223255, 'luminance was not calculated correctly');
   });
 
-  it('is able to return the luminance of an RGBA value with the RGB values less than 0.03928', () => {
+  it('is able to return the luminance of an RGBA value with the RGB values less than 0.04045', () => {
     const lum = Common.ColorUtils.luminance([0.03927, 0.03927, 0.03927, 0.5]);
     assert.strictEqual(lum, 0.003039473684210526, 'luminance was not calculated correctly');
   });

front_end/core/common/Color.ts

@@ -77,12 +77,12 @@ export function rgbaToHwba([r, g, b, a]: Color4DOr3D): Color4DOr3D {
 
 /**
  * Calculate the luminance of this color using the WCAG algorithm.
- * See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * See https://www.w3.org/TR/WCAG21/#dfn-relative-luminance.
  */
 export function luminance([rSRGB, gSRGB, bSRGB]: number[]): number {
-  const r = rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow(((rSRGB + 0.055) / 1.055), 2.4);
-  const g = gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow(((gSRGB + 0.055) / 1.055), 2.4);
-  const b = bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow(((bSRGB + 0.055) / 1.055), 2.4);
+  const r = rSRGB <= 0.04045 ? rSRGB / 12.92 : Math.pow(((rSRGB + 0.055) / 1.055), 2.4);
+  const g = gSRGB <= 0.04045 ? gSRGB / 12.92 : Math.pow(((gSRGB + 0.055) / 1.055), 2.4);
+  const b = bSRGB <= 0.04045 ? bSRGB / 12.92 : Math.pow(((bSRGB + 0.055) / 1.055), 2.4);
 
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }