chrome-devtools-frontend 1.0.943017 → 1.0.944427

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -6,87 +6,113 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
 
-export function sdkNodeToAXTreeNode(sdkNode: SDK.AccessibilityModel.AccessibilityNode): AXTreeNode {
-  const treeNodeData = sdkNode;
-  const role = sdkNode.role()?.value;
-
-  if (role === 'Iframe') {
-    return {
-      treeNodeData,
-      children: async(): Promise<AXTreeNode[]> => {
-        const domNode = await sdkNode.deferredDOMNode()?.resolvePromise();
-        if (!domNode) {
-          throw new Error('Could not find corresponding DOMNode');
-        }
-        const frameId = domNode.frameOwnerFrameId();
+function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
+  return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
+}
 
-        let document = domNode.contentDocument();
-        if (!document && frameId) {
-          const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
-          if (!frame) {
-            return [];
-          }
-          document = await frame.resourceTreeModel().domModel().requestDocument();
-        }
-        if (!document) {
-          return [];
-        }
+function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+  const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+  if (!model) {
+    throw Error('Could not instantiate model for frameId');
+  }
+  return model;
+}
 
-        const axmodel = document.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-        if (!axmodel) {
-          throw new Error('Could not find AccessibilityModel for child document');
-        }
-        // Check if we have requested the node before:
-        let localRoot = axmodel.axNodeForDOMNode(document);
-        if (!localRoot && frameId) {
-          // Request the root node of the iframe document:
-          localRoot = await axmodel.requestRootNode(1, frameId) || null;
-        }
-        if (!localRoot) {
-          throw new Error('Could not find root node');
-        }
-        return [sdkNodeToAXTreeNode(localRoot)];
-      },
-      id: sdkNode.id(),
-    };
+export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId);
+  const root = await model.requestRootNode(frameId);
+  if (!root) {
+    throw Error('No accessibility root for frame');
   }
+  return root;
+}
 
-  if (!sdkNode.numChildren()) {
-    return {
-      treeNodeData,
-      id: sdkNode.id(),
-    };
+function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.FrameId {
+  let frameId;
+  if (node instanceof SDK.DOMModel.DOMDocument) {
+    frameId = node.body?.frameId();
+  } else {
+    frameId = node.frameId();
+  }
+  if (!frameId) {
+    throw Error('No frameId for DOM node');
   }
+  return frameId;
+}
 
-  return {
-    treeNodeData,
-    children: async(): Promise<AXTreeNode[]> => {
-      if (sdkNode.numChildren() === sdkNode.children().length) {
-        return sdkNode.children().map(child => sdkNodeToAXTreeNode(child));
-      }
-      // numChildren returns the number of children that this node has, whereas node.children()
-      // returns only children that have been loaded. If these two don't match, that means that
-      // there are backend children that need to be loaded into the model, so request them now.
-      await sdkNode.accessibilityModel().requestAXChildren(sdkNode.id(), sdkNode.getFrameId() || undefined);
+export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  let frameId = getFrameIdForNodeOrDocument(domNode);
+  const model = getModel(frameId);
+  const result = await model.requestAndLoadSubTreeToNode(domNode);
+  if (!result) {
+    throw Error('Could not retrieve accessibility node for inspected DOM node');
+  }
 
-      if (sdkNode.numChildren() !== sdkNode.children().length) {
-        throw new Error('Once loaded, number of children and length of children must match.');
-      }
+  const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+  if (!topFrameId) {
+    return result;
+  }
+  while (frameId !== topFrameId) {
+    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    if (!node) {
+      break;
+    }
+    frameId = getFrameIdForNodeOrDocument(node);
+    const model = getModel(frameId);
+    const ancestors = await model.requestAndLoadSubTreeToNode(node);
+    result.push(...ancestors || []);
+  }
+  return result;
+}
 
-      const treeNodeChildren: AXTreeNode[] = [];
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  if (node.role()?.value === 'Iframe') {
+    const domNode = await node.deferredDOMNode()?.resolvePromise();
+    if (!domNode) {
+      throw new Error('Could not find corresponding DOMNode');
+    }
+    const frameId = domNode.frameOwnerFrameId();
+    if (!frameId) {
+      throw Error('No owner frameId on iframe node');
+    }
+    const localRoot = await getRootNode(frameId);
+    return [localRoot];
+  }
+  if (node.hasUnloadedChildren()) {
+    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
+    if (node.numChildren() !== node.children().length) {
+      throw new Error('Once loaded, number of children and length of children must match.');
+    }
+  }
+  return node.children();
+}
 
-      for (const child of sdkNode.children()) {
-        treeNodeChildren.push(sdkNodeToAXTreeNode(child));
-      }
+export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+  const treeNodeData = sdkNode;
+  if (isLeafNode(sdkNode)) {
+    return [{
+      treeNodeData,
+      id: getNodeId(sdkNode),
+    }];
+  }
 
-      return treeNodeChildren;
+  return [{
+    treeNodeData,
+    children: async(): Promise<AXTreeNode[]> => {
+      const childNodes = await getChildren(sdkNode);
+      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      return childTreeNodes.flat(1);
     },
-    id: sdkNode.id(),
-  };
+    id: getNodeId(sdkNode),
+  }];
 }
 
 type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
@@ -96,6 +122,11 @@ 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 {
+  return node.getFrameId() + '#' + node.id();
 }

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -9,15 +9,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 
-export class AccessibilityTreeView extends UI.Widget.VBox {
-  private readonly accessibilityTreeComponent =
-      new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
-  private treeData: AccessibilityTreeUtils.AXTreeNode[] = [];
+export class AccessibilityTreeView extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.AccessibilityModel.AccessibilityModel> {
+  private accessibilityTreeComponent = new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
   private readonly toggleButton: HTMLButtonElement;
-  private accessibilityModel: SDK.AccessibilityModel.AccessibilityModel|null = null;
-  private rootAXNode: SDK.AccessibilityModel.AccessibilityNode|null = null;
-  private selectedTreeNode: AccessibilityTreeUtils.AXTreeNode|null = null;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
+  private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
   constructor(toggleButton: HTMLButtonElement) {
     super();
@@ -27,6 +24,8 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     this.contentElement.appendChild(this.toggleButton);
     this.contentElement.appendChild(this.accessibilityTreeComponent);
 
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.AccessibilityModel.AccessibilityModel, this);
+
     // The DOM tree and accessibility are kept in sync as much as possible, so
     // on node selection, update the currently inspected node and reveal in the
     // DOM tree.
@@ -57,153 +56,105 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     });
   }
 
-  wasShown(): void {
+  async wasShown(): Promise<void> {
+    await this.refreshAccessibilityTree();
     if (this.inspectedDOMNode) {
-      this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
-    } else {
-      this.accessibilityTreeComponent.expandRecursively(1);
-    }
-  }
-
-  setAccessibilityModel(model: SDK.AccessibilityModel.AccessibilityModel|null): void {
-    this.accessibilityModel = model;
-  }
-
-  wireToDOMModel(domModel: SDK.DOMModel.DOMModel): void {
-    if (!domModel.parentModel()) {
-      this.setAccessibilityModel(domModel.target().model(SDK.AccessibilityModel.AccessibilityModel));
+      await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
     }
-    domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.NodeRemoved, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.AttrModified, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, this.domUpdatedNode, this);
-    domModel.addEventListener(SDK.DOMModel.Events.CharacterDataModified, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.domUpdated, this);
-    domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
-  }
-
-  unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
-    domModel.removeEventListener(SDK.DOMModel.Events.NodeInserted, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.NodeRemoved, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, this.domUpdatedNode, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.CharacterDataModified, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.domUpdated, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
   }
 
-  domUpdatedNode(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
-    this.update(event.data.node);
-  }
-
-  domUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
-    this.update(event.data);
-  }
-
-  async update(node: SDK.DOMModel.DOMNode): Promise<void> {
-    const axModel = node.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-    await axModel?.updateSubtreeAndAncestors(node.backendNodeId());
-    this.renderTree();
-  }
-
-  documentUpdated(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMModel>): void {
-    const domModel = event.data;
-    const axModel = domModel.target().model(SDK.AccessibilityModel.AccessibilityModel);
-    if (domModel.existingDocument() && !domModel.parentModel() && axModel) {
-      this.refreshAccessibilityTree(axModel);
+  async refreshAccessibilityTree(): Promise<void> {
+    if (!this.root) {
+      const frameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+      if (!frameId) {
+        throw Error('No top frame');
+      }
+      this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+      if (!this.root) {
+        throw Error('No root');
+      }
     }
+    await this.renderTree();
+    await this.accessibilityTreeComponent.expandRecursively(1);
   }
 
-  renderTree(): void {
-    if (!this.rootAXNode) {
-      this.treeData = [];
-    } else {
-      this.treeData = [AccessibilityTreeUtils.sdkNodeToAXTreeNode(this.rootAXNode)];
+  async renderTree(): Promise<void> {
+    if (!this.root) {
+      return;
     }
-
+    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);
     this.accessibilityTreeComponent.data = {
       defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
-      tree: this.treeData,
+      tree: treeData,
+      filter: (node): TreeOutline.TreeOutline.FilterOption => {
+        return node.ignored() || (node.role()?.value === 'generic' && !node.name()?.value) ?
+            TreeOutline.TreeOutline.FilterOption.FLATTEN :
+            TreeOutline.TreeOutline.FilterOption.SHOW;
+      },
     };
-
-    const axModel = this.inspectedDOMNode?.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-    const inspectedAXNode = axModel?.axNodeForDOMNode(this.inspectedDOMNode);
-    if (inspectedAXNode) {
-      this.selectedTreeNode = AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
-      this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.selectedTreeNode);
-    } else {
-      this.accessibilityTreeComponent.expandRecursively(1);
-    }
-  }
-
-  async refreshAccessibilityTree(accessibilityModel: SDK.AccessibilityModel.AccessibilityModel): Promise<void> {
-    // We always expand the root node so we might as well fetch one level of children immediately.
-    const root = await accessibilityModel.requestRootNode(1);
-    if (!root) {
-      return;
-    }
-
-    this.rootAXNode = root;
-    this.inspectedDOMNode = null;
-    this.renderTree();
   }
 
   // Given a selected DOM node, asks the model to load the missing subtree from the root to the
   // selected node and then re-renders the tree.
   async loadSubTreeIntoAccessibilityModel(selectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    if (!this.accessibilityModel) {
-      return;
-    }
-
-    // If this node has been loaded previously, the accessibility tree will return it's cached node.
-    // Eventually we'll need some mechanism for forcing it to fetch a new node when we are subscribing
-    // for updates, but TBD later.
-    // EG for a backend tree like:
-    //
-    // A*
-    //   B
-    //     C
-    //   D
-    //     E
-    // Where only A is already loaded into the model, calling requestAndLoadSubTreeToNode(C) will
-    // load [A, B, D, C] into the model, and return C.
-    const inspectedAXNode = await this.accessibilityModel.requestAndLoadSubTreeToNode(selectedNode);
+    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode);
+    const inspectedAXNode = ancestors.find(node => node.backendDOMNodeId() === selectedNode.backendNodeId());
     if (!inspectedAXNode) {
       return;
     }
+    await this.accessibilityTreeComponent.expandNodeIds(ancestors.map(node => node.getFrameId() + '#' + node.id()));
+    await this.accessibilityTreeComponent.focusNodeId(AccessibilityTreeUtils.getNodeId(inspectedAXNode));
+  }
 
-    this.accessibilityTreeComponent.data = {
-      defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
-      tree: this.treeData,
-    };
-
-    // These nodes require a special case, as they don't have an unignored node in the
-    // accessibility tree. Someone inspecting these in the DOM is probably expecting to
-    // be focused on the root WebArea of the accessibility tree.
-    // TODO(meredithl): Fix for when the inspected node is ingored in the accessibility
-    // tree. Eg, inspecting <head> in the DOM tree.
-    if (selectedNode.nodeName() === 'BODY' || selectedNode.nodeName() === 'HTML') {
-      this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.treeData[0]);
-      this.selectedTreeNode = this.treeData[0];
+  // A node was revealed through the elements picker.
+  async revealAndSelectNode(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
+    if (inspectedNode === this.inspectedDOMNode) {
       return;
     }
-
-    this.selectedTreeNode = AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
-    this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.selectedTreeNode);
+    this.inspectedDOMNode = inspectedNode;
+    // We only want to load nodes into the model when the AccessibilityTree is visible.
+    if (this.isShowing()) {
+      await this.loadSubTreeIntoAccessibilityModel(inspectedNode);
+    }
   }
 
-  // Selected node in the DOM has changed, and the corresponding accessibility node may be
-  // unloaded.
+  // Selected node in the DOM tree has changed.
   async selectedNodeChanged(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
+    if (this.isShowing()) {
+      return;
+    }
+    if (inspectedNode.ownerDocument && (inspectedNode.nodeName() === 'HTML' || inspectedNode.nodeName() === 'BODY')) {
+      inspectedNode = inspectedNode.ownerDocument;
+    }
     if (inspectedNode === this.inspectedDOMNode) {
       return;
     }
     this.inspectedDOMNode = inspectedNode;
-    // We only want to load nodes into the model when the AccessibilityTree is visible.
-    if (this.isShowing()) {
-      await this.loadSubTreeIntoAccessibilityModel(inspectedNode);
+  }
+
+  treeUpdated({data}: Common.EventTarget
+                  .EventTargetEvent<SDK.AccessibilityModel.EventTypes[SDK.AccessibilityModel.Events.TreeUpdated]>):
+      void {
+    if (!data.root) {
+      this.renderTree();
+      return;
     }
+    const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+    if (data.root?.getFrameId() !== topFrameId) {
+      this.renderTree();
+      return;
+    }
+    this.root = data.root;
+    this.accessibilityTreeComponent.collapseAllNodes();
+
+    this.refreshAccessibilityTree();
+  }
+
+  modelAdded(model: SDK.AccessibilityModel.AccessibilityModel): void {
+    model.addEventListener(SDK.AccessibilityModel.Events.TreeUpdated, this.treeUpdated, this);
+  }
+
+  modelRemoved(model: SDK.AccessibilityModel.AccessibilityModel): void {
+    model.removeEventListener(SDK.AccessibilityModel.Events.TreeUpdated, this.treeUpdated, this);
   }
 }

package/front_end/panels/elements/ElementsPanel.ts

@@ -328,11 +328,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   modelAdded(domModel: SDK.DOMModel.DOMModel): void {
     const parentModel = domModel.parentModel();
 
-    // Different frames will have different DOMModels, we only want to add the accessibility model
-    // for the top level frame, as the accessibility tree does not yet support exploring IFrames.
-    if (this.accessibilityTreeView) {
-      this.accessibilityTreeView.wireToDOMModel(domModel);
-    }
     let treeOutline: ElementsTreeOutline|null = parentModel ? ElementsTreeOutline.forDOMModel(parentModel) : null;
     if (!treeOutline) {
       treeOutline = new ElementsTreeOutline(true, true);
@@ -507,6 +502,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         crumbs,
         selectedNode: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode),
       };
+
+      if (this.accessibilityTreeView) {
+        this.accessibilityTreeView.selectedNodeChanged(selectedNode);
+      }
     } else {
       this.breadcrumbs.data = {crumbs: [], selectedNode: null};
     }
@@ -837,7 +836,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!treeOutline) {
       return null;
     }
-    return /** @type {?ElementsTreeElement} */ treeOutline.findTreeElement(node) as ElementsTreeElement | null;
+    return treeOutline.findTreeElement(node);
   }
 
   private leaveUserAgentShadowDOM(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode {
@@ -859,7 +858,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     if (this.accessibilityTreeView) {
-      this.accessibilityTreeView.selectedNodeChanged(node);
+      this.accessibilityTreeView.revealAndSelectNode(node);
     }
 
     await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);

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;
 
+  #propertyIndex = -1;
+
   constructor() {
     super(true);
     this.contentElement.tabIndex = 0;
@@ -71,6 +73,14 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
+  setPropertyIndex(value: number): void {
+    this.#propertyIndex = value;
+  }
+
+  getPropertyIndex(): number {
+    return this.#propertyIndex;
+  }
+
   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,
+      propertyIndex: number): 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.setPropertyIndex(propertyIndex);
       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

@@ -670,19 +670,22 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       const propertyValue = this.property.trimmedValueWithoutImportant();
       if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton));
+            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton),
+            this.property.index);
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
+        if (helper.isShowing(StyleEditorWidget.instance()) &&
+            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
           helper.setAnchorElement(button);
         }
       }
       if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton));
+            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton), this.property.index);
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
+        if (helper.isShowing(StyleEditorWidget.instance()) &&
+            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
           helper.setAnchorElement(button);
         }
       }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1922,7 +1922,7 @@ export class StylePropertiesSection {
     }
   }
 
-  private showAllItems(event?: Event): void {
+  showAllItems(event?: Event): void {
     if (event) {
       event.consume();
     }