chrome-devtools-frontend 1.0.943986 → 1.0.945579

package/front_end/panels/console/ConsolePrompt.ts

@@ -6,9 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ConsolePanel} from './ConsolePanel.js';
@@ -27,17 +27,17 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private addCompletionsFromHistory: boolean;
   private historyInternal: ConsoleHistoryManager;
   private initialText: string;
-  private editor: UI.TextEditor.TextEditor|null;
+  private editor: TextEditor.TextEditor.TextEditor;
   private readonly eagerPreviewElement: HTMLDivElement;
   private textChangeThrottler: Common.Throttler.Throttler;
   private readonly formatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private requestPreviewBound: () => Promise<void>;
+  private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
   private readonly promptIcon: UI.Icon.Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   private previewRequestForTest: Promise<void>|null;
-  private defaultAutocompleteConfig: UI.TextEditor.AutocompleteConfig|null;
   private highlightingNode: boolean;
 
   constructor() {
@@ -46,7 +46,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.historyInternal = new ConsoleHistoryManager();
 
     this.initialText = '';
-    this.editor = null;
     this.eagerPreviewElement = document.createElement('div');
     this.eagerPreviewElement.classList.add('console-eager-preview');
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
@@ -68,41 +67,41 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.element.tabIndex = 0;
     this.previewRequestForTest = null;
+    this.highlightingNode = false;
 
-    this.defaultAutocompleteConfig = null;
+    const editorState = CodeMirror.EditorState.create({
+      doc: this.initialText,
+      extensions: [
+        CodeMirror.keymap.of(this.editorKeymap()),
+        CodeMirror.EditorView.updateListener.of(update => this.editorUpdate(update)),
+        TextEditor.JavaScript.argumentHints(),
+        TextEditor.JavaScript.completion(),
+        TextEditor.Config.showCompletionHint,
+        CodeMirror.javascript.javascript(),
+        TextEditor.Config.baseConfiguration(this.initialText),
+        TextEditor.Config.autocompletion,
+        CodeMirror.javascript.javascriptLanguage.data.of({
+          autocomplete: (context: CodeMirror.CompletionContext): CodeMirror.CompletionResult | null =>
+              this.historyCompletions(context),
+        }),
+        CodeMirror.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.consolePrompt)}),
+        CodeMirror.EditorView.lineWrapping,
+        CodeMirror.autocompletion({aboveCursor: true}),
+      ],
+    });
 
-    this.highlightingNode = false;
+    this.editor = new TextEditor.TextEditor.TextEditor(editorState);
+    this.editor.addEventListener('keydown', (event): void => {
+      if (event.defaultPrevented) {
+        event.stopPropagation();
+      }
+    });
+    editorContainerElement.appendChild(this.editor);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-
-    const options = {
-      devtoolsAccessibleName: (i18nString(UIStrings.consolePrompt) as string),
-      lineNumbers: false,
-      lineWrapping: true,
-      mimeType: 'javascript',
-      autoHeight: true,
-    };
-    this.editor = factory.createEditor((options as UI.TextEditor.Options));
-
-    this.defaultAutocompleteConfig =
-        ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this.editor);
-    this.editor.configureAutocomplete(Object.assign({}, this.defaultAutocompleteConfig, {
-      suggestionsCallback: this.wordsWithQuery.bind(this),
-      anchorBehavior: UI.GlassPane.AnchorBehavior.PreferTop,
-    }));
-    this.editor.widget().element.addEventListener('keydown', this.editorKeyDown.bind(this), true);
-    this.editor.widget().show(editorContainerElement);
-    this.editor.addEventListener(UI.TextEditor.Events.CursorChanged, this.updatePromptIcon, this);
-    this.editor.addEventListener(UI.TextEditor.Events.TextChanged, this.onTextChanged, this);
-    this.editor.addEventListener(UI.TextEditor.Events.SuggestionChanged, this.onTextChanged, this);
-
-    this.setText(this.initialText);
-    this.initialText = '';
     if (this.hasFocus()) {
       this.focus();
     }
     this.element.removeAttribute('tabindex');
-    this.editor.widget().element.tabIndex = -1;
 
     this.editorSetForTest();
 
@@ -126,7 +125,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // ConsoleView and prompt both use a throttler, so we clear the preview
     // ASAP to avoid inconsistency between a fresh viewport and stale preview.
     if (this.eagerEvalSetting.get()) {
-      const asSoonAsPossible = !this.editor || !this.editor.textWithCurrentSuggestion();
+      const asSoonAsPossible = !TextEditor.Config.contentIncludingHint(this.editor.editor);
       this.previewRequestForTest = this.textChangeThrottler.schedule(this.requestPreviewBound, asSoonAsPossible);
     }
     this.updatePromptIcon();
@@ -134,15 +133,16 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private async requestPreview(): Promise<void> {
-    if (!this.editor) {
-      return;
-    }
-    const text = this.editor.textWithCurrentSuggestion().trim();
+    const id = ++this.requestPreviewCurrent;
+    const text = TextEditor.Config.contentIncludingHint(this.editor.editor).trim();
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         text, true /* throwOnSideEffect */, true /* replMode */, 500 /* timeout */);
+    if (this.requestPreviewCurrent !== id) {
+      return;
+    }
     this.innerPreviewElement.removeChildren();
-    if (preview.deepTextContent() !== this.editor.textWithCurrentSuggestion().trim()) {
+    if (preview.deepTextContent() !== TextEditor.Config.contentIncludingHint(this.editor.editor).trim()) {
       this.innerPreviewElement.appendChild(preview);
     }
     if (result && 'object' in result && result.object && result.object.subtype === 'node') {
@@ -174,149 +174,102 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   clearAutocomplete(): void {
-    if (this.editor) {
-      this.editor.clearAutocomplete();
-    }
+    CodeMirror.closeCompletion(this.editor.editor);
   }
 
   private isCaretAtEndOfPrompt(): boolean {
-    return this.editor !== null &&
-        this.editor.selection().collapseToEnd().equal(this.editor.fullRange().collapseToEnd());
+    return this.editor.state.selection.main.head === this.editor.state.doc.length;
   }
 
   moveCaretToEndOfPrompt(): void {
-    if (this.editor) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
-    }
+    this.editor.dispatch({
+      selection: CodeMirror.EditorSelection.cursor(this.editor.state.doc.length),
+    });
   }
 
-  setText(text: string): void {
-    if (this.editor) {
-      this.editor.setText(text);
-    } else {
-      this.initialText = text;
-    }
-    this.dispatchEventToListeners(Events.TextChanged);
+  clear(): void {
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length},
+    });
   }
 
   text(): string {
-    return this.editor ? this.editor.text() : this.initialText;
+    return this.editor.state.doc.toString();
   }
 
   setAddCompletionsFromHistory(value: boolean): void {
     this.addCompletionsFromHistory = value;
   }
 
-  private editorKeyDown(event: Event): void {
-    if (!this.editor) {
-      return;
-    }
-    const keyboardEvent = (event as KeyboardEvent);
-    let newText;
-    let isPrevious;
-    // Check against visual coordinates in case lines wrap.
-    const selection = this.editor.selection();
-    const cursorY = this.editor.visualCoordinates(selection.endLine, selection.endColumn).y;
-
-    switch (keyboardEvent.keyCode) {
-      case UI.KeyboardShortcut.Keys.Up.code: {
-        const startY = this.editor.visualCoordinates(0, 0).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== startY) {
-          break;
-        }
-        newText = this.historyInternal.previous(this.text());
-        isPrevious = true;
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Down.code: {
-        const fullRange = this.editor.fullRange();
-        const endY = this.editor.visualCoordinates(fullRange.endLine, fullRange.endColumn).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== endY) {
-          break;
-        }
-        newText = this.historyInternal.next();
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.P.code: {  // Ctrl+P = Previous
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.previous(this.text());
-          isPrevious = true;
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.N.code: {  // Ctrl+N = Next
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.next();
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Enter.code: {
-        this.enterKeyPressed(keyboardEvent);
-        break;
+  private editorKeymap(): readonly CodeMirror.KeyBinding[] {
+    return [
+      {key: 'ArrowUp', run: (): boolean => this.moveHistory(-1)},
+      {key: 'ArrowDown', run: (): boolean => this.moveHistory(1)},
+      {mac: 'Ctrl-p', run: (): boolean => this.moveHistory(-1, true)},
+      {mac: 'Ctrl-n', run: (): boolean => this.moveHistory(1, true)},
+      {key: 'Enter', run: (): boolean => this.evaluate(), shift: CodeMirror.insertNewlineAndIndent},
+    ];
+  }
+
+  private moveHistory(dir: -1|1, force = false): boolean {
+    const {editor} = this.editor, {main} = editor.state.selection;
+    if (!force) {
+      if (!main.empty) {
+        return false;
       }
-      case UI.KeyboardShortcut.Keys.Tab.code: {
-        if (!this.text()) {
-          keyboardEvent.consume();
-        }
-        break;
+      const cursorCoords = editor.coordsAtPos(main.head);
+      const endCoords = editor.coordsAtPos(dir < 0 ? 0 : editor.state.doc.length);
+      // Check if there are wrapped lines in this direction, and let
+      // the cursor move normally if there are.
+      if (cursorCoords && endCoords &&
+          (dir < 0 ? cursorCoords.top > endCoords.top + 5 : cursorCoords.bottom < endCoords.bottom - 5)) {
+        return false;
       }
     }
 
+    const history = this.historyInternal;
+    const newText = dir < 0 ? history.previous(this.text()) : history.next();
     if (newText === undefined) {
-      return;
+      return false;
     }
-    keyboardEvent.consume(true);
-    this.setText(newText);
 
-    if (isPrevious) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(0, Infinity));
-    } else {
-      this.moveCaretToEndOfPrompt();
-    }
+    const cursorPos = dir < 0 ? newText.search(/\n|$/) : newText.length;
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length, insert: newText},
+      selection: CodeMirror.EditorSelection.cursor(cursorPos),
+      scrollIntoView: true,
+    });
+    return true;
+  }
+
+  private enterWillEvaluate(): boolean {
+    const {state} = this.editor;
+    return state.doc.length > 0 && TextEditor.JavaScript.isExpressionComplete(state);
   }
 
-  private async enterWillEvaluate(): Promise<boolean> {
-    if (!this.isCaretAtEndOfPrompt()) {
-      return true;
+  private evaluate(): boolean {
+    if (this.enterWillEvaluate()) {
+      this.appendCommand(this.text(), true);
+      this.editor.dispatch({
+        changes: {from: 0, to: this.editor.state.doc.length},
+        scrollIntoView: true,
+      });
+    } else if (this.editor.state.doc.length) {
+      return CodeMirror.insertNewlineAndIndent(this.editor.editor);
+    } else {
+      this.editor.dispatch({scrollIntoView: true});
     }
-    return await ObjectUI.JavaScriptAutocomplete.JavaScriptAutocomplete.isExpressionComplete(this.text());
+    this.enterProcessedForTest();
+    return true;
   }
 
   private updatePromptIcon(): void {
     this.iconThrottler.schedule(async () => {
-      const canComplete = await this.enterWillEvaluate();
-      this.promptIcon.classList.toggle('console-prompt-incomplete', !canComplete);
+      this.promptIcon.classList.toggle('console-prompt-incomplete', !this.enterWillEvaluate());
     });
   }
 
-  private async enterKeyPressed(event: KeyboardEvent): Promise<void> {
-    if (event.altKey || event.ctrlKey || event.shiftKey) {
-      return;
-    }
-
-    event.consume(true);
-
-    // Since we prevent default, manually emulate the native "scroll on key input" behavior.
-    this.element.scrollIntoView();
-    this.clearAutocomplete();
-
-    const str = this.text();
-    if (!str.length) {
-      return;
-    }
-
-    if (await this.enterWillEvaluate()) {
-      await this.appendCommand(str, true);
-    } else if (this.editor) {
-      this.editor.newlineAndIndent();
-    }
-    this.enterProcessedForTest();
-  }
-
-  private async appendCommand(text: string, useCommandLineAPI: boolean): Promise<void> {
-    this.setText('');
+  private appendCommand(text: string, useCommandLineAPI: boolean): void {
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
@@ -333,10 +286,19 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private enterProcessedForTest(): void {
   }
 
-  private historyCompletions(prefix: string, force?: boolean): UI.SuggestBox.Suggestions {
+  private editorUpdate(update: CodeMirror.ViewUpdate): void {
+    if (update.docChanged ||
+        CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {
+      this.onTextChanged();
+    } else if (update.selectionSet) {
+      this.updatePromptIcon();
+    }
+  }
+
+  private historyCompletions(context: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null {
     const text = this.text();
-    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text && !force)) {
-      return [];
+    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text.length && !context.explicit)) {
+      return null;
     }
     const result = [];
     const set = new Set<string>();
@@ -350,30 +312,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         continue;
       }
       set.add(item);
-      result.push(
-          {text: item.substring(text.length - prefix.length), iconType: 'smallicon-text-prompt', isSecondary: true});
+      result.push({label: item, type: 'secondary', boost: -1e5});
     }
-    return result as UI.SuggestBox.Suggestions;
+    return result.length ? {
+      from: 0,
+      to: text.length,
+      options: result,
+    } :
+                           null;
   }
 
   focus(): void {
-    if (this.editor) {
-      this.editor.widget().focus();
-    } else {
-      this.element.focus();
-    }
-  }
-
-  private async wordsWithQuery(
-      queryRange: TextUtils.TextRange.TextRange, substituteRange: TextUtils.TextRange.TextRange,
-      force?: boolean): Promise<UI.SuggestBox.Suggestions> {
-    if (!this.editor || !this.defaultAutocompleteConfig || !this.defaultAutocompleteConfig.suggestionsCallback) {
-      return [];
-    }
-    const query = this.editor.text(queryRange);
-    const words = await this.defaultAutocompleteConfig.suggestionsCallback(queryRange, substituteRange, force);
-    const historyWords = this.historyCompletions(query, force);
-    return words ? words.concat(historyWords) : historyWords;
+    this.editor.focus();
   }
 
   private editorSetForTest(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -1218,7 +1218,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private clearPromptBackwards(): void {
-    this.prompt.setText('');
+    this.prompt.clear();
   }
 
   private promptKeyDown(event: Event): void {

package/front_end/panels/console/consoleView.css

@@ -345,13 +345,13 @@
 }
 
 #console-messages .link {
+  cursor: pointer;
   text-decoration: underline;
 }
 
 #console-messages .link,
 #console-messages .devtools-link {
   color: var(--color-text-secondary);
-  cursor: pointer;
   word-break: break-all;
 }
 

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -338,7 +338,7 @@
   background: none;
   border: none;
   -webkit-mask-image: var(--image-file-ic_show_node_16x16);
-  background-color: var(--color-background-elevation-1);
+  background-color: var(--color-text-secondary);
   width: 16px;
   height: 16px;
   display: none;
@@ -348,7 +348,7 @@
 
 .show-element:focus,
 .show-element:hover {
-  background-color: var(--color-syntax-1);
+  background-color: var(--color-primary);
 }
 
 .nodeId-column:focus-within .show-element,

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -122,8 +122,9 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
   const role = sdkNode.role()?.value || '';
+  const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
-  return LitHtml.html`<${tag} .data=${{name, role, ignored} as Data}></${tag}>`;
+  return LitHtml.html`<${tag} .data=${{name, role, ignored, properties} as Data}></${tag}>`;
 }
 
 export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1044,6 +1044,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           },
         ]),
         TextEditor.Config.baseConfiguration(initialValue),
+        TextEditor.Config.closeBrackets,
         TextEditor.Config.autocompletion,
         CodeMirror.html.html(),
         TextEditor.Config.domWordWrap.instance(),

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -30,6 +30,8 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private section?: StylePropertiesSection;
   private editorContainer: HTMLElement;
 
+  #triggerKey: string|undefined;
+
   constructor() {
     super(true);
     this.contentElement.tabIndex = 0;
@@ -71,6 +73,14 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
+  setTriggerKey(value: string): void {
+    this.#triggerKey = value;
+  }
+
+  getTriggerKey(): string|undefined {
+    return this.#triggerKey;
+  }
+
   unbindContext(): void {
     this.pane = undefined;
     this.section = undefined;
@@ -105,8 +115,8 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   }
 
   static createTriggerButton(
-      pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor},
-      buttonTitle: string): HTMLElement {
+      pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
+      triggerKey: string): HTMLElement {
     const triggerButton = createButton(buttonTitle);
 
     triggerButton.onclick = async(event): Promise<void> => {
@@ -115,6 +125,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       const widget = StyleEditorWidget.instance();
       widget.setEditor(editorClass);
       widget.bindContext(pane, section);
+      widget.setTriggerKey(triggerKey);
       await widget.render();
       const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
       const onScroll = (): void => {

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -39,12 +39,19 @@ export class StylePropertyHighlighter {
    * Find the first non-overridden property that matches the provided name, scroll to it and highlight it.
    */
   findAndHighlightPropertyName(propertyName: string): void {
-    const {treeElement, section} = this.findTreeElementAndSection(
-        treeElement => treeElement.property.name === propertyName && !treeElement.overloaded());
-    if (treeElement) {
-      this.scrollAndHighlightTreeElement(treeElement);
-      if (section) {
-        section.element.focus();
+    for (const section of this.styleSidebarPane.allSections()) {
+      if (!section.style().hasActiveProperty(propertyName)) {
+        continue;
+      }
+      section.showAllItems();
+      const treeElement = this.findTreeElementFromSection(
+          treeElement => treeElement.property.name === propertyName && !treeElement.overloaded(), section);
+      if (treeElement) {
+        this.scrollAndHighlightTreeElement(treeElement);
+        if (section) {
+          section.element.focus();
+        }
+        return;
       }
     }
   }
@@ -57,23 +64,26 @@ export class StylePropertyHighlighter {
     treeElement: StylePropertyTreeElement|null,
     section: StylePropertiesSection|null,
   } {
-    let result: StylePropertyTreeElement|null = null;
-    let containingSection: StylePropertiesSection|null = null;
     for (const section of this.styleSidebarPane.allSections()) {
-      let treeElement = section.propertiesTreeOutline.firstChild();
-      while (treeElement && !result && (treeElement instanceof StylePropertyTreeElement)) {
-        if (compareCb(treeElement)) {
-          result = treeElement;
-          break;
-        }
-        treeElement = treeElement.traverseNextTreeElement(false, null, true);
+      const treeElement = this.findTreeElementFromSection(compareCb, section);
+      if (treeElement) {
+        return {treeElement, section};
       }
-      if (result) {
-        containingSection = section;
-        break;
+    }
+    return {treeElement: null, section: null};
+  }
+
+  private findTreeElementFromSection(
+      compareCb: (arg0: StylePropertyTreeElement) => boolean, section: StylePropertiesSection): StylePropertyTreeElement
+      |null {
+    let treeElement = section.propertiesTreeOutline.firstChild();
+    while (treeElement && (treeElement instanceof StylePropertyTreeElement)) {
+      if (compareCb(treeElement)) {
+        return treeElement;
       }
+      treeElement = treeElement.traverseNextTreeElement(false, null, true);
     }
-    return {treeElement: result, section: containingSection};
+    return null;
   }
 
   private scrollAndHighlightTreeElement(treeElement: StylePropertyTreeElement): void {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -668,21 +668,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const section = this.section();
     if (this.valueElement && section && section.editable && this.property.name === 'display') {
       const propertyValue = this.property.trimmedValueWithoutImportant();
-      if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
+      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
+      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
+      if (isFlex || isGrid) {
+        const key = `${section.getSectionIdx()}_${section.nextEditorTriggerButtonIdx}`;
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton));
+            this.parentPaneInternal, section, isFlex ? FlexboxEditor : GridEditor,
+            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+        section.nextEditorTriggerButtonIdx++;
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
-          helper.setAnchorElement(button);
-        }
-      }
-      if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton));
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
+        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
           helper.setAnchorElement(button);
         }
       }