Bump node_modules versions

Updates all the packages to newer versions and fixes breaking changes.
Everything until patch 4 (include) is the changes need for this.
Patch 5 includes the changes to node_modules.

Fixed: 449017396
Change-Id: I29d16541cb4ca32e11fa3e406efb307a2d55c42b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7016612
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>

Author: Lightning00Blade

extensions/cxx_debugging/src/ModuleConfiguration.ts

@@ -12,11 +12,12 @@ import {globMatch} from './GlobMatch.js';
  * is found in LLDB.
  */
 export interface PathSubstitution {
-  readonly from: string; readonly to: string;
+  readonly from: string;
+  readonly to: string;
 }
 
 /**
- * List of {@type PathSubstitution}s.
+ * List of {@link PathSubstitution | PathSubstitutions}.
  */
 export type PathSubstitutions = readonly PathSubstitution[];
 
@@ -28,10 +29,10 @@ export type PathSubstitutions = readonly PathSubstitution[];
  * LLDB frontend in `PathMappingList::RemapPath()` inside `Target/PathMappingList.cpp`
  * (http://cs/github/llvm/llvm-project/lldb/source/Target/PathMappingList.cpp?l=157-185).
  *
- * @param pathSubstitutions possible substitutions to apply to the {@param sourcePath}, applies the first match.
+ * @param pathSubstitutions possible substitutions to apply to the `sourcePath`, applies the first match.
  * @param sourcePath the source path as found in the debugging information.
  * @param baseURL the URL of the WebAssembly module, which is used to resolve relative source paths.
- * @returns an absolute `file:`-URI or a URL relative to the {@param baseURL}.
+ * @returns an absolute `file:`-URI or a URL relative to the `baseURL`.
  */
 export function resolveSourcePathToURL(pathSubstitutions: PathSubstitutions, sourcePath: string, baseURL: URL): URL {
   // Normalize '\' to '/' in sourcePath first.
@@ -74,15 +75,16 @@ export function resolveSourcePathToURL(pathSubstitutions: PathSubstitutions, sou
  * If the name is `undefined`, the configuration is the default configuration,
  * which is chosen if there's no named configuration matching the basename of
  * the WebAssembly module file.
- * The name can be a wildcard pattern, and {@see globMatch} will be used to
+ * The name can be a wildcard pattern, and {@link globMatch} will be used to
  * match the name against the URL of the WebAssembly module file.
  */
 export interface ModuleConfiguration {
-  readonly name?: string; readonly pathSubstitutions: PathSubstitutions;
+  readonly name?: string;
+  readonly pathSubstitutions: PathSubstitutions;
 }
 
 /**
- * List of {@type ModuleConfiguration}s. These lists are intended to have
+ * List of {@link ModuleConfiguration | ModuleConfigurations}. These lists are intended to have
  * a default configuration, whose name field is `undefined`, which is chosen
  * when no matching named configuration is found.
  */

front_end/BUILD.gn

@@ -55,7 +55,7 @@ group("web_test_resources") {
 node_action("devtools_json") {
   inputs = []
 
-  script = "scripts/build/generate_devtools_json.js"
+  script = "scripts/build/generate_devtools_json.mjs"
 
   args = [ rebase_path(
           "$target_gen_dir/.well-known/appspecific/com.chrome.devtools.json",

front_end/core/common/Settings.ts

@@ -131,7 +131,7 @@ export class Settings {
    * to store UI state such as how a user choses to position a split widget or
    * which panel they last opened.
    * If you are creating a setting that you expect the user to control, and
-   * sync, prefer {@see createSetting}
+   * sync, prefer {@link Settings.createSetting}
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   moduleSetting<T = any>(settingName: string): Setting<T> {

front_end/models/trace/handlers/UserTimingsHandler.ts

@@ -151,7 +151,7 @@ function getEventTrack(event: Types.Events.SyntheticEventPair|Types.Events.Conso
 }
 
 /**
- * Similar to the default {@see Helpers.Trace.eventTimeComparator}
+ * Similar to the default {@link Helpers.Trace.eventTimeComparator}
  * but with a twist:
  * In case of equal start and end times, put the second event (within a
  * track) first.

front_end/panels/timeline/TimelinePanel.ts

@@ -310,7 +310,7 @@ let isNode: boolean;
 
 /**
  * Represents the states that the timeline panel can be in.
- * If you need to change the panel's view, use the {@see #changeView} method.
+ * If you need to change the panel's view, use the {@link TimelinePanel.#changeView} method.
  * Note that we do not represent the "Loading/Processing" view here. The
  * StatusPane is managed in the code that handles file import/recording, and
  * when it is visible it is rendered on top of the UI so obscures what is behind
@@ -787,8 +787,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   /**
-   * Determine if two view modes are equivalent. Useful because if {@see
-   * #changeView} gets called and the new mode is identical to the current,
+   * Determine if two view modes are equivalent. Useful because if
+   * {@link TimelinePanel.#changeView} gets called and the new mode is identical to the current,
    * we can bail without doing any UI updates.
    */
   #viewModesEquivalent(m1: ViewMode, m2: ViewMode): boolean {
@@ -2087,14 +2087,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   /**
    * Called when we update the active trace that is being shown to the user.
-   * This is called from {@see changeView} when we change the UI to show a
+   * This is called from {@link TimelinePanel.#changeView} when we change the UI to show a
    * trace - either one the user has just recorded/imported, or one they have
    * navigated to via the dropdown.
    *
    * If you need code to execute whenever the active trace changes, this is the method to use.
-   * If you need code to execute ONLY ON NEW TRACES, then use {@see loadingComplete}
+   * If you need code to execute ONLY ON NEW TRACES, then use {@link TimelinePanel.loadingComplete}
    * You should not call this method directly if you want the UI to update; use
-   * {@see changeView} to control what is shown to the user.
+   * {@link TimelinePanel.#changeView} to control what is shown to the user.
    */
   #setModelForActiveTrace(): void {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -23,7 +23,7 @@ import {TimelineGrid} from './TimelineGrid.js';
 /**
  * Set as the `details` value on the fake context menu event we dispatch to
  * trigger a context menu on an event on a keyboard space key press.
- * {@see onContextMenu} for more details and explanation.
+ * {@link FlameChart.onContextMenu} for more details and explanation.
  */
 const KEYBOARD_FAKED_CONTEXT_MENU_DETAIL = -1;
 
@@ -2347,7 +2347,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   /**
-   * Draws decorations onto events. {@see FlameChartDecoration}.
+   * Draws decorations onto events. {@link FlameChartDecoration}.
    */
   #drawDecorations(context: CanvasRenderingContext2D, timelineData: FlameChartTimelineData, indexes: number[]): void {
     const {entryTotalTimes, entryStartTimes, entryLevels} = timelineData;