chrome-devtools-frontend 1.0.945329 → 1.0.946351

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

@@ -21,35 +21,36 @@ declare global {
 export class TextEditor extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private activeEditor: CodeMirror.EditorView|undefined = undefined;
-  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
-  private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
-  private pendingState: CodeMirror.EditorState|undefined;
-  private lastScrollPos = {left: 0, top: 0};
-  private resizeTimeout = -1;
-  private devtoolsResizeObserver = new ResizeObserver(() => {
-    if (this.resizeTimeout < 0) {
-      this.resizeTimeout = window.setTimeout(() => {
-        this.resizeTimeout = -1;
-        if (this.activeEditor) {
-          CodeMirror.repositionTooltips(this.activeEditor);
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #activeEditor: CodeMirror.EditorView|undefined = undefined;
+  #dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
+  #activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
+  #pendingState: CodeMirror.EditorState|undefined;
+  #lastScrollPos = {left: 0, top: 0};
+  #resizeTimeout = -1;
+  #resizeListener = (): void => {
+    if (this.#resizeTimeout < 0) {
+      this.#resizeTimeout = window.setTimeout(() => {
+        this.#resizeTimeout = -1;
+        if (this.#activeEditor) {
+          CodeMirror.repositionTooltips(this.#activeEditor);
         }
       }, 50);
     }
-  });
+  };
+  #devtoolsResizeObserver = new ResizeObserver(this.#resizeListener);
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
-    this.pendingState = pendingState;
-    this.shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
+    this.#pendingState = pendingState;
+    this.#shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
   }
 
   private createEditor(): CodeMirror.EditorView {
-    this.activeEditor = new CodeMirror.EditorView({
+    this.#activeEditor = new CodeMirror.EditorView({
       state: this.state,
-      parent: this.shadow,
-      root: this.shadow,
+      parent: this.#shadow,
+      root: this.#shadow,
       dispatch: (tr: CodeMirror.Transaction): void => {
         this.editor.update([tr]);
         if (tr.reconfigured) {
@@ -57,19 +58,19 @@ export class TextEditor extends HTMLElement {
         }
       },
     });
-    this.activeEditor.scrollDOM.scrollTop = this.lastScrollPos.top;
-    this.activeEditor.scrollDOM.scrollLeft = this.lastScrollPos.left;
-    this.activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
-      this.lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
-      this.lastScrollPos.top = (event.target as HTMLElement).scrollTop;
+    this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
+    this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
+    this.#activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
+      this.#lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
+      this.#lastScrollPos.top = (event.target as HTMLElement).scrollTop;
     });
     this.ensureSettingListeners();
     this.startObservingResize();
-    return this.activeEditor;
+    return this.#activeEditor;
   }
 
   get editor(): CodeMirror.EditorView {
-    return this.activeEditor || this.createEditor();
+    return this.#activeEditor || this.createEditor();
   }
 
   dispatch(spec: CodeMirror.TransactionSpec): void {
@@ -77,68 +78,69 @@ export class TextEditor extends HTMLElement {
   }
 
   get state(): CodeMirror.EditorState {
-    if (this.activeEditor) {
-      return this.activeEditor.state;
+    if (this.#activeEditor) {
+      return this.#activeEditor.state;
     }
-    if (!this.pendingState) {
-      this.pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
+    if (!this.#pendingState) {
+      this.#pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
     }
-    return this.pendingState;
+    return this.#pendingState;
   }
 
   set state(state: CodeMirror.EditorState) {
-    if (this.activeEditor) {
-      this.activeEditor.setState(state);
+    if (this.#activeEditor) {
+      this.#activeEditor.setState(state);
     } else {
-      this.pendingState = state;
+      this.#pendingState = state;
     }
   }
 
   connectedCallback(): void {
-    if (!this.activeEditor) {
+    if (!this.#activeEditor) {
       this.createEditor();
     }
   }
 
   disconnectedCallback(): void {
-    if (this.activeEditor) {
-      this.pendingState = this.activeEditor.state;
-      this.devtoolsResizeObserver.disconnect();
-      this.activeEditor.destroy();
-      this.activeEditor = undefined;
+    if (this.#activeEditor) {
+      this.#pendingState = this.#activeEditor.state;
+      this.#devtoolsResizeObserver.disconnect();
+      window.removeEventListener('resize', this.#resizeListener);
+      this.#activeEditor.destroy();
+      this.#activeEditor = undefined;
       this.ensureSettingListeners();
     }
   }
 
   focus(): void {
-    if (this.activeEditor) {
-      this.activeEditor.focus();
+    if (this.#activeEditor) {
+      this.#activeEditor.focus();
     }
   }
 
   private ensureSettingListeners(): void {
-    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
-    if (dynamicSettings === this.dynamicSettings) {
+    const dynamicSettings = this.#activeEditor ? this.#activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.#dynamicSettings) {
       return;
     }
-    this.dynamicSettings = dynamicSettings;
+    this.#dynamicSettings = dynamicSettings;
 
-    for (const [setting, listener] of this.activeSettingListeners) {
+    for (const [setting, listener] of this.#activeSettingListeners) {
       setting.removeChangeListener(listener);
     }
-    this.activeSettingListeners = [];
+    this.#activeSettingListeners = [];
 
     const settings = Common.Settings.Settings.instance();
     for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
         const change = dynamicSetting.sync(this.state, data);
-        if (change && this.activeEditor) {
-          this.activeEditor.dispatch({effects: change});
+        if (change && this.#activeEditor) {
+          this.#activeEditor.dispatch({effects: change});
         }
       };
       const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
-      this.activeSettingListeners.push([setting, handler]);
+      this.#activeSettingListeners.push([setting, handler]);
     }
   }
 
@@ -146,12 +148,13 @@ export class TextEditor extends HTMLElement {
     const devtoolsElement =
         WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
     if (devtoolsElement) {
-      this.devtoolsResizeObserver.observe(devtoolsElement);
+      this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
+    window.addEventListener('resize', this.#resizeListener);
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
-    const view = this.activeEditor;
+    const view = this.#activeEditor;
     if (!view) {
       return;
     }

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

@@ -63,7 +63,7 @@ export class DynamicSetting<T> {
   static none: readonly DynamicSetting<unknown>[] = [];
 }
 
-export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.keymap.of([{
+export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', [], CM.keymap.of([{
   key: 'Tab',
   run: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentMore(view) : false,
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
@@ -85,7 +85,7 @@ export function guessIndent(doc: CM.Text): string {
   let scanned = 0;
   for (let cur = doc.iterLines(1, Math.min(doc.lines + 1, LINES_TO_SCAN_FOR_INDENTATION_GUESSING)); !cur.next().done;) {
     let space = (/^\s*/.exec(cur.value) as string[])[0];
-    if (space.length === cur.value.length || !space.length) {
+    if (space.length === cur.value.length || !space.length || cur.value[space.length] === '*') {
       continue;
     }
     if (space[0] === '\t') {
@@ -324,7 +324,7 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const wordBefore = /[\w$]+$/.exec(lineBefore.text);
+    const wordBefore = /#?[\w$]+$/.exec(lineBefore.text);
     if (wordBefore && !label.startsWith(wordBefore[0])) {
       return null;
     }

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

@@ -15,6 +15,23 @@ export function completion(): CodeMirror.Extension {
   });
 }
 
+export async function completeInContext(
+    textBefore: string, query: string, force: boolean = false): Promise<UI.SuggestBox.Suggestions> {
+  const state = CodeMirror.EditorState.create({
+    doc: textBefore,
+    selection: {anchor: textBefore.length},
+    extensions: CodeMirror.javascript.javascriptLanguage,
+  });
+  const result = await javascriptCompletionSource(new CodeMirror.CompletionContext(state, textBefore.length, force));
+  return result ?
+      result.options.filter((o): boolean => o.label.startsWith(query)).map((o): UI.SuggestBox.Suggestion => ({
+                                                                             text: o.label,
+                                                                             priority: 100 + (o.boost || 0),
+                                                                             isSecondary: o.type === 'secondary',
+                                                                           })) :
+      [];
+}
+
 class CompletionSet {
   constructor(
       readonly completions: CodeMirror.Completion[] = [],
@@ -101,7 +118,7 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror
     return null;
   }
 
-  if (node.name === 'PropertyName') {
+  if (node.name === 'PropertyName' || node.name === 'PrivatePropertyName') {
     return parent?.name !== 'MemberExpression' ? null :
                                                  {type: QueryType.PropertyName, from: node.from, relatedNode: parent};
   }
@@ -172,7 +189,7 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
   return {
     from: query.from ?? cx.pos,
     options: result.completions,
-    span: /^[\w\P{ASCII}]*/u,
+    span: /^#?[\w\P{ASCII}]*/u,
   };
 }
 
@@ -217,10 +234,10 @@ let cacheInstance: PropertyCache|null = null;
 // Store recent collections of property completions. The empty string
 // is used to store the set of global bindings.
 class PropertyCache {
-  private readonly cache: Map<string, Promise<CompletionSet>> = new Map();
+  readonly #cache: Map<string, Promise<CompletionSet>> = new Map();
 
   constructor() {
-    const clear = (): void => this.cache.clear();
+    const clear = (): void => this.#cache.clear();
     SDK.ConsoleModel.ConsoleModel.instance().addEventListener(SDK.ConsoleModel.Events.CommandEvaluated, clear);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, clear);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -230,14 +247,14 @@ class PropertyCache {
   }
 
   get(expression: string): Promise<CompletionSet>|undefined {
-    return this.cache.get(expression);
+    return this.#cache.get(expression);
   }
 
   set(expression: string, value: Promise<CompletionSet>): void {
-    this.cache.set(expression, value);
+    this.#cache.set(expression, value);
     setTimeout(() => {
-      if (this.cache.get(expression) === value) {
-        this.cache.delete(expression);
+      if (this.#cache.get(expression) === value) {
+        this.#cache.delete(expression);
       }
     }, maxCacheAge);
   }
@@ -312,7 +329,8 @@ async function completePropertiesInner(
     const properties = await object.getAllProperties(false, false);
     const isFunction = object.type === 'function';
     for (const prop of properties.properties || []) {
-      if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller'))) {
+      if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller')) &&
+          (!prop.private || expression === 'this')) {
         const label = quoted ? quoted + prop.name + quoted : prop.name;
         const completion: CodeMirror.Completion = {
           label,

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

@@ -7,6 +7,7 @@ import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 export const editorTheme = CM.EditorView.theme({
   '&.cm-editor': {
     color: 'color: var(--color-text-primary)',
+    cursor: 'auto',
     '&.cm-focused': {
       outline: 'none',
     },

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -26,27 +26,27 @@ export class PromptInputEvent extends Event {
 
 export class TextPrompt extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-prompt`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private ariaLabelText = '';
-  private prefixText = '';
-  private suggestionText = '';
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #ariaLabelText = '';
+  #prefixText = '';
+  #suggestionText = '';
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [textPromptStyles];
+    this.#shadow.adoptedStyleSheets = [textPromptStyles];
   }
 
   set data(data: TextPromptData) {
-    this.ariaLabelText = data.ariaLabel;
-    this.prefixText = data.prefix;
-    this.suggestionText = data.suggestion;
+    this.#ariaLabelText = data.ariaLabel;
+    this.#prefixText = data.prefix;
+    this.#suggestionText = data.suggestion;
     this.render();
   }
 
   get data(): TextPromptData {
     return {
-      ariaLabel: this.ariaLabelText,
-      prefix: this.prefixText,
-      suggestion: this.suggestionText,
+      ariaLabel: this.#ariaLabelText,
+      prefix: this.#prefixText,
+      suggestion: this.#suggestionText,
     };
   }
 
@@ -55,7 +55,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   private input(): HTMLInputElement {
-    const inputElement = this.shadow.querySelector<HTMLInputElement>('input');
+    const inputElement = this.#shadow.querySelector<HTMLInputElement>('input');
     if (!inputElement) {
       throw new Error('Expected an input element!');
     }
@@ -92,12 +92,12 @@ export class TextPrompt extends HTMLElement {
   }
 
   setPrefix(prefix: string): void {
-    this.prefixText = prefix;
+    this.#prefixText = prefix;
     this.render();
   }
 
   setSuggestion(suggestion: string): void {
-    this.suggestionText = suggestion;
+    this.#suggestionText = suggestion;
     this.render();
   }
 
@@ -112,7 +112,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   private suggestion(): HTMLSpanElement {
-    const suggestionElement = this.shadow.querySelector<HTMLSpanElement>('.suggestion');
+    const suggestionElement = this.#shadow.querySelector<HTMLSpanElement>('.suggestion');
     if (!suggestionElement) {
       throw new Error('Expected an suggestion element!');
     }
@@ -125,11 +125,11 @@ export class TextPrompt extends HTMLElement {
 
   private render(): void {
     const output = LitHtml.html`
-      <span class="prefix">${this.prefixText} </span>
-      <span class="text-prompt-input"><input aria-label=${this.ariaLabelText} spellcheck="false" @input=${
+      <span class="prefix">${this.#prefixText} </span>
+      <span class="text-prompt-input"><input aria-label=${this.#ariaLabelText} spellcheck="false" @input=${
         this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion="${
-        this.suggestionText}"></span></span>`;
-    LitHtml.render(output, this.shadow, {host: this});
+        this.#suggestionText}"></span></span>`;
+    LitHtml.render(output, this.#shadow, {host: this});
   }
 }