chrome-devtools-frontend 1.0.972865 → 1.0.973645

package/front_end/third_party/codemirror.next/codemirror.next.d.ts

@@ -5641,6 +5641,30 @@ constructor is no longer provided.) Values of `null` are ignored.
 */
 declare const showPanel: Facet<PanelConstructor | null, readonly (PanelConstructor | null)[]>;
 
+declare type HighlightOptions = {
+    /**
+    Determines whether, when nothing is selected, the word around
+    the cursor is matched instead. Defaults to false.
+    */
+    highlightWordAroundCursor?: boolean;
+    /**
+    The minimum length of the selection before it is highlighted.
+    Defaults to 1 (always highlight non-cursor selections).
+    */
+    minSelectionLength?: number;
+    /**
+    The amount of matches (in the viewport) at which to disable
+    highlighting. Defaults to 100.
+    */
+    maxMatches?: number;
+};
+/**
+This extension highlights text that matches the selection. It uses
+the `"cm-selectionMatch"` class for the highlighting. When
+`highlightWordAroundCursor` is enabled, the word at the cursor
+itself will be highlighted with `"cm-selectionMatch-main"`.
+*/
+declare function highlightSelectionMatches(options?: HighlightOptions): Extension;
 /**
 Select next occurrence of the current selection.
 Expand selection to the word when selection range is empty.
@@ -5788,4 +5812,4 @@ declare function shell(): Promise<StreamLanguage<unknown>>;
 declare function wast(): Promise<typeof _codemirror_lang_wast>;
 declare function xml(): Promise<typeof _codemirror_lang_xml>;
 
-export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MapMode, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, closeCompletion, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, repositionTooltips, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, selectedCompletion, shell, showPanel, showTooltip, standardKeymap, startCompletion, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };
+export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MapMode, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, closeCompletion, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSelectionMatches, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, repositionTooltips, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, selectedCompletion, shell, showPanel, showTooltip, standardKeymap, startCompletion, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1,2 @@
-export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as scrollPastEnd,a0 as indentLess,a1 as indentMore,a2 as insertNewlineAndIndent,a3 as selectMatchingBracket,a4 as selectSubwordBackward,a5 as selectSubwordForward,a6 as standardKeymap,a7 as toggleComment,a8 as codeFolding,a9 as foldGutter,a_ as placeholder,aa as foldKeymap,aA as selectNextOccurrence,aB as Annotation,ab as gutter,aC as AnnotationType,ac as GutterMarker,aD as ChangeDesc,ad as gutters,aE as ChangeSet,ae as lineNumberMarkers,aF as Compartment,af as lineNumbers,aG as EditorState,ag as HighlightStyle,aH as Facet,ah as highlightTree,aI as MapMode,ai as Tag,aJ as SelectionRange,aj as history,aK as StateEffect,ak as historyKeymap,aL as StateEffectType,al as redo,aM as StateField,am as redoSelection,aN as Transaction,an as undo,aO as StreamLanguage,ao as undoSelection,aP as StringStream,ap as css,aQ as Line,aq as html,aR as Text,ar as javascript,as as ensureSyntaxTree,aS as repositionTooltips,at as indentOnInput,aT as showTooltip,au as indentUnit,aU as tooltips,aV as Decoration,av as bracketMatching,aW as drawSelection,aw as showPanel,aX as EditorView,ax as Range,ay as RangeSet,aY as highlightSpecialChars,aZ as MatchDecorator,az as RangeSetBuilder,B as json,b0 as ViewPlugin,b1 as ViewUpdate,b2 as WidgetType,b3 as TreeCursor,b4 as StyleModule,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as closeCompletion,o as keymap,P as Parser,Q as completeAnyWord,R as CompletionContext,S as currentCompletions,T as Tree,t as tags,U as ifNotIn,V as selectedCompletion,W as startCompletion,x as clojure,X as closeBrackets,Y as closeBracketsKeymap,y as coffeescript,z as cpp,Z as cursorMatchingBracket}from"./chunk/codemirror.js";
+export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as placeholder,a0 as indentLess,a1 as indentMore,a2 as insertNewlineAndIndent,a3 as selectMatchingBracket,a4 as selectSubwordBackward,a5 as selectSubwordForward,a6 as standardKeymap,a7 as toggleComment,a8 as codeFolding,a9 as foldGutter,a_ as MatchDecorator,aa as foldKeymap,aA as selectNextOccurrence,ab as gutter,aB as highlightSelectionMatches,aC as Annotation,ac as GutterMarker,aD as AnnotationType,ad as gutters,aE as ChangeDesc,ae as lineNumberMarkers,aF as ChangeSet,af as lineNumbers,aG as Compartment,ag as HighlightStyle,aH as EditorState,ah as highlightTree,aI as Facet,ai as Tag,aJ as MapMode,aj as history,aK as SelectionRange,ak as historyKeymap,aL as StateEffect,al as redo,aM as StateEffectType,am as redoSelection,aN as StateField,an as undo,aO as Transaction,ao as undoSelection,aP as StreamLanguage,ap as css,aQ as StringStream,aq as html,aR as Line,ar as javascript,aS as Text,as as ensureSyntaxTree,at as indentOnInput,aT as repositionTooltips,au as indentUnit,aU as showTooltip,av as bracketMatching,aV as tooltips,aW as Decoration,aw as showPanel,ax as Range,aX as drawSelection,aY as EditorView,ay as RangeSet,az as RangeSetBuilder,aZ as highlightSpecialChars,B as json,b0 as scrollPastEnd,b1 as ViewPlugin,b2 as ViewUpdate,b3 as WidgetType,b4 as TreeCursor,b5 as StyleModule,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as closeCompletion,o as keymap,P as Parser,Q as completeAnyWord,R as CompletionContext,S as currentCompletions,T as Tree,t as tags,U as ifNotIn,V as selectedCompletion,W as startCompletion,x as clojure,X as closeBrackets,Y as closeBracketsKeymap,y as coffeescript,z as cpp,Z as cursorMatchingBracket}from"./chunk/codemirror.js";
 

package/front_end/third_party/codemirror.next/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.12",
+    "@codemirror/autocomplete": "0.19.13",
     "@codemirror/closebrackets": "0.19.0",
     "@codemirror/commands": "0.19.8",
     "@codemirror/comment": "0.19.1",

package/front_end/ui/components/expandable_list/expandableList.css

@@ -17,7 +17,7 @@ div {
 
 .arrow-icon {
   display: inline-block;
-  -webkit-mask-image: url("Images/treeoutlineTriangles.svg");
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
   background-color: var(--color-text-primary);

package/front_end/ui/components/text_editor/config.ts

@@ -224,6 +224,7 @@ export function baseConfiguration(text: string): CM.Extension {
   return [
     theme(),
     CM.highlightSpecialChars(),
+    CM.highlightSelectionMatches(),
     CM.history(),
     CM.drawSelection(),
     CM.EditorState.allowMultipleSelections.of(true),

package/front_end/ui/components/text_editor/cursor_tooltip.ts

@@ -4,11 +4,12 @@
 
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 
+export const closeTooltip = CodeMirror.StateEffect.define<null>();
+
 export function cursorTooltip(
     source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,
     ): CodeMirror.Extension {
   const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>();
-  const closeTooltip = CodeMirror.StateEffect.define<null>();
 
   const state = CodeMirror.StateField.define<null|CodeMirror.Tooltip>({
     create() {
@@ -41,18 +42,18 @@ export function cursorTooltip(
     update(update: CodeMirror.ViewUpdate): void {
       this.updateID++;
       if (update.transactions.some(tr => tr.selection) && update.state.selection.main.empty) {
-        this.scheduleUpdate(update.view);
+        this.#scheduleUpdate(update.view);
       }
     }
 
-    scheduleUpdate(view: CodeMirror.EditorView): void {
+    #scheduleUpdate(view: CodeMirror.EditorView): void {
       if (this.pending > -1) {
         clearTimeout(this.pending);
       }
-      this.pending = window.setTimeout(() => this.startUpdate(view), 50) as unknown as number;
+      this.pending = window.setTimeout(() => this.#startUpdate(view), 50) as unknown as number;
     }
 
-    startUpdate(view: CodeMirror.EditorView): void {
+    #startUpdate(view: CodeMirror.EditorView): void {
       this.pending = -1;
       const {main} = view.state.selection;
       if (main.empty) {
@@ -60,7 +61,7 @@ export function cursorTooltip(
         void source(view.state, main.from).then(tooltip => {
           if (this.updateID !== updateID) {
             if (this.pending < 0) {
-              this.scheduleUpdate(view);
+              this.#scheduleUpdate(view);
             }
           } else if (tooltip) {
             view.dispatch({effects: openTooltip.of(tooltip)});

package/front_end/ui/components/text_editor/javascript.ts

@@ -7,7 +7,8 @@ import * as Formatter from '../../../models/formatter/formatter.js';
 import * as JavaScriptMetaData from '../../../models/javascript_metadata/javascript_metadata.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
-import {cursorTooltip} from './cursor_tooltip.js';
+
+import {closeTooltip, cursorTooltip} from './cursor_tooltip.js';
 
 export function completion(): CodeMirror.Extension {
   return CodeMirror.javascript.javascriptLanguage.data.of({
@@ -225,6 +226,7 @@ async function evaluateExpression(
 
 const primitivePrototypes = new Map<string, string>([
   ['string', 'String'],
+  ['symbol', 'Symbol'],
   ['number', 'Number'],
   ['boolean', 'Boolean'],
   ['bigint', 'BigInt'],
@@ -319,9 +321,7 @@ async function completePropertiesInner(
     object = innerObject as SDK.RemoteObject.RemoteObject;
   }
 
-  const toPrototype = object.subtype === 'array' ?
-      'Array' :
-      object.subtype === 'typedarray' ? 'Uint8Array' : primitivePrototypes.get(object.type);
+  const toPrototype = primitivePrototypes.get(object.type);
   if (toPrototype) {
     object = await evaluateExpression(context, toPrototype + '.prototype', 'completion');
   }
@@ -329,7 +329,8 @@ async function completePropertiesInner(
   const functionType = expression === 'globalThis' ? 'function' : 'method';
   const otherType = expression === 'globalThis' ? 'variable' : 'property';
   if (object && (object.type === 'object' || object.type === 'function')) {
-    const properties = await object.getAllProperties(false, false);
+    const properties = await object.getAllProperties(
+        /* accessorPropertiesOnly */ false, /* generatePreview */ false, /* nonIndexedPropertiesOnly */ true);
     const isFunction = object.type === 'function';
     for (const prop of properties.properties || []) {
       if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller')) &&
@@ -424,6 +425,10 @@ export function argumentHints(): CodeMirror.Extension {
   return cursorTooltip(getArgumentHints);
 }
 
+export function closeArgumentsHintsTooltip(view: CodeMirror.EditorView): void {
+  view.dispatch({effects: closeTooltip.of(null)});
+}
+
 async function getArgumentHints(
     state: CodeMirror.EditorState, pos: number): Promise<(() => CodeMirror.TooltipView)|null> {
   const node = CodeMirror.syntaxTree(state).resolveInner(pos).enterUnfinishedNodesBefore(pos);

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.972865"
+  "version": "1.0.973645"
 }

package/scripts/build/ninja/README.md

@@ -3,6 +3,17 @@
 The DevTools build system contains several templates to integrate files in the build system.
 Below you can find an overview of which template/combination of templates you need to use and when.
 
+## General guidance
+
+Whenever you are implementing a template, take into account that GN expects the source folder structure to be [mirrored](https://chromium.googlesource.com/chromium/src/+/HEAD/build/docs/writing_gn_templates.md#where-to-place-outputs) in the out-directory.
+Historically, DevTools used the location-agnostic [`out/Default/resources/inspector`](https://groups.google.com/a/chromium.org/g/devtools-dev/c/BENZ8ZTW0Ls/m/W7BhAvOzBAAJ) folder, but we have since adopted the GN guidelines for mirroring our source folder.
+Primary motivations are the instability of the separate folder, as well as required hacks to compute "relative" sub-folders in GN.
+Since GN has no notion of a "root" folder for DevTools, computation of sub-folders can only be done based on heuristics, which will fail sooner rather than later.
+
+Additionally, GN is a [timestamp-based build system](https://gn.googlesource.com/gn/+/master/docs/reference.md#target-declarations-action_declare-a-target-that-runs-a-script-a-single-time-outputs) when checking for correctness.
+This means that you want to avoid writing to the file system if the content stays the same.
+For Node scripts, use the `writeIfChanged` function from [write-if-changed.js](./write-if-changed.js) to integrate nicely with GN.
+
 ## Entrypoints and modules
 
 The buildsystem has a concept of "entrypoints" and "modules".
@@ -57,46 +68,6 @@ devtools_entrypoint("bundle") {
 
 > Rule: `devtools_entrypoints` is named "bundle", as in a release build it bundles with Rollup
 
-### Legacy: Non-TypeScript entrypoints
-
-Not all modules are currently typechecked only by TypeScript.
-There are two other options, related to the legacy Closure Compiler.
-
-#### Typescriptified modules (e.g. TypeScript + Closure Compiler)
-
-Any module that is fully typescriptified (e.g. a JavaScript file that is typechecked by both TypeScript and Compiler Compiler) can be imported from both TypeScript modules and Closure Compile-checked modules.
-
-> Rule: Any typescriptified module can never contain an entrypoint or source file in their implementation that is TypeScript-authored. In practice this rule comes down to: you can only have a TypeScript-authored implementation file if the corresponding entrypoint is also TypeScript-authored.
-
-As such, the following layout is used for TypeScriptified modules:
-
-```python
-import("../../scripts/build/ninja/devtools_entrypoint.gni")
-import("../../scripts/build/ninja/devtools_module.gni")
-
-devtools_module("my_module") {
-  sources = [
-    "implementation_detail.js",
-    "some_other_file.js",
-  ]
-
-  deps = [
-    "../other_dependency:bundle",
-  ]
-}
-
-devtools_entrypoint("bundle") {
-  entrypoint = "my_module.js"
-
-  deps = [
-    ":my_module",
-  ]
-}
-```
-
-Here, both the entrypoint and the sources of the module are all JavaScript files.
-All of these files are typechecked by Closure Compiler and TypeScript.
-
 ## GRD file generation
 
 To make sure that files are loaded in Chromium, DevTools generates a GRD file that includes all files that are allowed to be loaded by the backend.