chrome-devtools-frontend 1.0.943182 → 1.0.944903

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();
     }

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Protocol from '../../../generated/protocol.js';
 
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -31,10 +32,23 @@ function truncateTextIfNeeded(text: string): string {
   return text;
 }
 
+function isPrintable(valueType: Protocol.Accessibility.AXValueType): boolean {
+  switch (valueType) {
+    case Protocol.Accessibility.AXValueType.Boolean:
+    case Protocol.Accessibility.AXValueType.BooleanOrUndefined:
+    case Protocol.Accessibility.AXValueType.String:
+    case Protocol.Accessibility.AXValueType.Number:
+      return true;
+    default:
+      return false;
+  }
+}
+
 export interface AccessibilityTreeNodeData {
   ignored: boolean;
   name: string;
   role: string;
+  properties: Protocol.Accessibility.AXProperty[];
 }
 
 export class AccessibilityTreeNode extends HTMLElement {
@@ -44,11 +58,13 @@ export class AccessibilityTreeNode extends HTMLElement {
   private ignored = true;
   private name = '';
   private role = '';
+  private properties: Protocol.Accessibility.AXProperty[] = [];
 
   set data(data: AccessibilityTreeNodeData) {
     this.ignored = data.ignored;
     this.name = data.name;
     this.role = data.role;
+    this.properties = data.properties;
     this.render();
   }
 
@@ -57,12 +73,20 @@ export class AccessibilityTreeNode extends HTMLElement {
   }
 
   private async render(): Promise<void> {
+    const role = LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.role)}</span>`;
+    const name = LitHtml.html`"<span class='attribute-value'>${this.name}</span>"`;
+    const properties = this.properties.map(
+        ({name, value}) => isPrintable(value.type) ?
+            LitHtml.html`&nbsp<span class='attribute-name'>${name}</span>:&nbsp<span class='attribute-value'>${
+                value.value}</span>` :
+            LitHtml.nothing);
+
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write('Accessibility node render', () => {
       // clang-format off
       LitHtml.render(
-        LitHtml.html`${this.ignored?
-          LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>`:
-          LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.role)}</span>&nbsp"<span class='attribute-value'>${this.name}</span>"`}`,
+        this.ignored ?
+          LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
+          LitHtml.html`${role}&nbsp${name}${properties}`,
         this.shadow,
         {host: this});
       // clang-format on

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -246,6 +246,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum Events {
+  // RequestSelected might fire twice for the same "activation"
   RequestSelected = 'RequestSelected',
   RequestActivated = 'RequestActivated',
 }
@@ -1007,7 +1008,10 @@ export class NetworkRequestNode extends NetworkNode {
       cell.style.setProperty('padding-left', leftPadding);
       this.nameCell = cell;
       cell.addEventListener('dblclick', this.openInNewTab.bind(this), false);
-      cell.addEventListener('click', () => {
+      cell.addEventListener('mousedown', () => {
+        // When the request panel isn't visible yet, firing the RequestActivated event
+        // doesn't make it visible if no request is selected. So we'll select it first.
+        this.select();
         this.parentView().dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
       });
       let iconElement;

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -41,7 +41,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   private readonly snippetsSetting: Common.Settings.Setting<Snippet[]>;
   constructor() {
     // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    super('snippet://' as Platform.DevToolsPath.UrlString, 'snippets');
+    super('snippet://', 'snippets');
     this.lastSnippetIdentifierSetting =
         Common.Settings.Settings.instance().createSetting('scriptSnippets_lastIdentifier', 0);
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -71,6 +71,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const editorConfig = [
       CodeMirror.javascript.javascriptLanguage,
       TextEditor.Config.baseConfiguration(oldCondition || ''),
+      TextEditor.Config.closeBrackets,
       TextEditor.Config.autocompletion,
       CodeMirror.EditorView.lineWrapping,
       TextEditor.Config.showCompletionHint,

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -702,8 +702,8 @@ export class DebuggerPlugin extends Plugin {
       if (this.popoverHelper.isPopoverVisible()) {
         this.popoverHelper.hidePopover();
         event.consume();
+        return true;
       }
-      return true;
     }
     if (ctrlDown && this.executionLocation) {
       this.setControlDown(true);

package/front_end/panels/sources/NavigatorView.ts

@@ -851,7 +851,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
       const folderPath = Common.ParsedURL.ParsedURL.capFilePrefix(
           Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
-              Platform.DevToolsPath.RawPathString,
+              Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),

package/front_end/panels/sources/Plugin.ts

@@ -18,9 +18,6 @@ export class Plugin {
     return false;
   }
 
-  wasShown(): void {
-  }
-
   willHide(): void {
   }