chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -342,6 +342,10 @@ const UIStrings = {
    * @description Context menu item in Elements panel to explain container context via AI.
    */
   explainContainerContext: 'Explain container context',
+  /**
+   * @description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+   */
+  reveal: 'reveal',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -379,10 +383,12 @@ export interface ViewInput {
   showGridLanesAdorner: boolean;
   showMediaAdorner: boolean;
   showPopoverAdorner: boolean;
+  showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
+  topLayerIndex: number;
 
   onGutterClick: (e: Event) => void;
   onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
@@ -392,6 +398,7 @@ export interface ViewInput {
   onGridAdornerClick: (e: Event) => void;
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
+  onTopLayerAdornerClick: (e: Event) => void;
 }
 
 export interface ViewOutput {
@@ -436,9 +443,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
   const popoverAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
+  const topLayerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -571,6 +580,25 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef(input)}>
           <span>${popoverAdornerConfig.name}</span>
         </devtools-adorner>`: nothing}
+        ${input.showTopLayerAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          tabindex=0
+          .data=${{name: topLayerAdornerConfig.name, jslogContext: topLayerAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(topLayerAdornerConfig.name).track({click: true})}
+          aria-label=${i18nString(UIStrings.reveal)}
+          @click=${input.onTopLayerAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onTopLayerAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span class="adorner-with-icon">
+            ${`top-layer (${input.topLayerIndex})`}<devtools-icon name="select-element"></devtools-icon>
+          </span>
+        </devtools-adorner>`: nothing}
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
@@ -768,10 +796,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
           showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
               Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+          showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
           gridAdornerActive: this.#gridAdornerActive,
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
           nodeInfo: this.#nodeInfo,
+          topLayerIndex: this.node().topLayerIndex(),
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
             ElementsPanel.instance().registerAdorner(adorner);
@@ -784,6 +814,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
           onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
           onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
+          onTopLayerAdornerClick: () => {
+            if (!this.treeOutline) {
+              return;
+            }
+            this.treeOutline.revealInTopLayer(this.node());
+          },
         },
         this, this.listItemElement);
   }
@@ -1069,6 +1105,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   override onbind(): void {
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
+      this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
     }
   }
 
@@ -1079,6 +1116,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
+    this.nodeInternal.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
   }
 
   override onattach(): void {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -486,7 +486,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  #topLayerContainerByParent = new Map<UI.TreeOutline.TreeElement, TopLayerContainer>();
+  #topLayerContainerByDocument = new WeakMap<SDK.DOMModel.DOMDocument, TopLayerContainer>();
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   #popupHelper?: UI.PopoverHelper.PopoverHelper;
   #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
@@ -1526,7 +1526,6 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
@@ -1543,7 +1542,6 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
@@ -1719,16 +1717,24 @@ export class ElementsTreeOutline extends
     });
   }
 
-  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, document: SDK.DOMModel.DOMDocument): Promise<void> {
+  createTopLayerContainer(parent: UI.TreeOutline.TreeElement, document: SDK.DOMModel.DOMDocument): void {
     if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
       return;
     }
     const container = new TopLayerContainer(parent.treeOutline, document);
-    await container.throttledUpdateTopLayerElements();
-    if (container.currentTopLayerDOMNodes.size > 0) {
-      parent.appendChild(container);
+    this.#topLayerContainerByDocument.set(document, container);
+    parent.appendChild(container);
+  }
+
+  revealInTopLayer(node: SDK.DOMModel.DOMNode): void {
+    const document = node.ownerDocument;
+    if (!document) {
+      return;
+    }
+    const container = this.#topLayerContainerByDocument.get(document);
+    if (container) {
+      container.revealInTopLayer(node);
     }
-    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
@@ -1898,9 +1904,6 @@ export class ElementsTreeOutline extends
       index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
-    if (child instanceof SDK.DOMModel.DOMDocument) {
-      void this.createTopLayerContainer(newElement, child);
-    }
     return newElement;
   }
 
@@ -1997,6 +2000,15 @@ export class ElementsTreeOutline extends
       this.insertChildElement(treeElement, node, treeElement.childCount(), true);
     }
 
+    if (node instanceof SDK.DOMModel.DOMDocument && !this.isXMLMimeType) {
+      let topLayerContainer = this.#topLayerContainerByDocument.get(node);
+      if (!topLayerContainer) {
+        topLayerContainer = new TopLayerContainer(this, node);
+        this.#topLayerContainerByDocument.set(node, topLayerContainer);
+      }
+      treeElement.appendChild(topLayerContainer);
+    }
+
     this.treeElementsBeingUpdated.delete(treeElement);
   }
 
@@ -2008,16 +2020,6 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private async topLayerElementsChanged(): Promise<void> {
-    for (const [parent, container] of this.#topLayerContainerByParent) {
-      await container.throttledUpdateTopLayerElements();
-      if (container.currentTopLayerDOMNodes.size > 0 && container.parent !== parent) {
-        parent.appendChild(container);
-      }
-      container.hidden = container.currentTopLayerDOMNodes.size === 0;
-    }
-  }
-
   private scrollableFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
     let {node} = event.data;
     if (node.nodeName() === '#document') {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -1,119 +1,54 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as Common from '../../core/common/common.js';
-import * as i18n from '../../core/i18n/i18n.js';
+import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import * as ElementsComponents from './components/components.js';
-import type {ElementsTreeElement} from './ElementsTreeElement.js';
 import type {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 
-const UIStrings = {
-  /**
-   * @description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
-   */
-  reveal: 'reveal',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   tree: ElementsTreeOutline;
   document: SDK.DOMModel.DOMDocument;
-  currentTopLayerDOMNodes = new Set<SDK.DOMModel.DOMNode>();
-  topLayerUpdateThrottler: Common.Throttler.Throttler;
 
   constructor(tree: ElementsTreeOutline, document: SDK.DOMModel.DOMDocument) {
     super('#top-layer');
     this.tree = tree;
     this.document = document;
-    this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
-  }
-
-  async throttledUpdateTopLayerElements(): Promise<void> {
-    await this.topLayerUpdateThrottler.schedule(() => this.updateTopLayerElements());
+    this.document.domModel().addEventListener(
+        SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
+    this.topLayerElementsChanged({
+      data: {
+        document,
+        documentShortcuts: [],
+      },
+    });
   }
 
-  async updateTopLayerElements(): Promise<void> {
-    this.removeChildren();
-    this.removeCurrentTopLayerElementsAdorners();
-    this.currentTopLayerDOMNodes = new Set();
-    const domModel = this.document.domModel();
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
-    if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
+  topLayerElementsChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.EventTypes['TopLayerElementsChanged']>): void {
+    if (this.document !== event.data.document) {
       return;
     }
-
-    let topLayerElementIndex = 0;
-    for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
-      if (!topLayerDOMNode || topLayerDOMNode.ownerDocument !== this.document) {
-        continue;
-      }
-
-      if (topLayerDOMNode.nodeName() !== '::backdrop') {
-        const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
-        const topLayerElementRepresentation = new ShortcutTreeElement(topLayerElementShortcut);
-        this.appendChild(topLayerElementRepresentation);
-        this.currentTopLayerDOMNodes.add(topLayerDOMNode);
-
-        // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
-        if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
-          const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
-          const backdropElementRepresentation = new ShortcutTreeElement(backdropElementShortcut);
-          topLayerElementRepresentation.appendChild(backdropElementRepresentation);
-        }
-
-        // TODO(changhaohan): store not-yet-inserted DOMNodes and adorn them when inserted.
-        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
-        if (topLayerTreeElement) {
-          this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, ++topLayerElementIndex);
-        }
+    this.removeChildren();
+    const shortcuts = event.data.documentShortcuts;
+    this.hidden = shortcuts.length === 0;
+    for (const shortcut of shortcuts) {
+      const element = new ShortcutTreeElement(shortcut);
+      this.appendChild(element);
+      for (const child of shortcut.childShortcuts) {
+        element.appendChild(new ShortcutTreeElement(child));
       }
     }
   }
 
-  private removeCurrentTopLayerElementsAdorners(): void {
-    for (const node of this.currentTopLayerDOMNodes) {
-      const topLayerTreeElement = this.tree.treeElementByNode.get(node);
-      topLayerTreeElement?.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
-    }
-  }
-
-  private addTopLayerAdorner(
-      element: ElementsTreeElement, topLayerElementRepresentation: ShortcutTreeElement,
-      topLayerElementIndex: number): void {
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
-    const adornerContent = document.createElement('span');
-    adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = createIcon('select-element');
-    const adornerText = document.createElement('span');
-    adornerText.textContent = `top-layer (${topLayerElementIndex})`;
-    adornerContent.append(linkIcon);
-    adornerContent.append(adornerText);
-    const adorner = element?.adorn(config, adornerContent);
-    if (adorner) {
-      const onClick = ((() => {
-                         topLayerElementRepresentation.revealAndSelect();
-                       }) as EventListener);
-      adorner.addInteraction(onClick, {
-        isToggle: false,
-        shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.reveal),
-        ariaLabelActive: i18nString(UIStrings.reveal),
-      });
-      adorner.addEventListener('mousedown', e => e.consume(), false);
-    }
+  revealInTopLayer(node: SDK.DOMModel.DOMNode): void {
+    this.children().forEach(child => {
+      if (child instanceof ShortcutTreeElement && child.deferredNode().backendNodeId() === node.backendNodeId()) {
+        child.revealAndSelect();
+      }
+    });
   }
 }

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -200,7 +200,7 @@ export interface ViewInput {
     onAnimationEnd: () => void,
     onCitationAnimationEnd: () => void,
     onSearch: () => void,
-    onRating: (isPositive: boolean) => void,
+    onRating: (isPositive: boolean) => Promise<Host.InspectorFrontendHostAPI.AidaClientResult>| undefined,
     onReport: () => void,
     onGoToSignIn: () => void,
     onConsentReminderConfirmed: () => Promise<void>,
@@ -989,7 +989,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
     }
   }
 
-  #onRating(isPositive: boolean): void {
+  #onRating(isPositive: boolean): Promise<Host.InspectorFrontendHostAPI.AidaClientResult>|undefined {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
     }
@@ -1009,7 +1009,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedNegative);
     }
     const disallowLogging = Root.Runtime.hostConfig.aidaAvailability?.disallowLogging ?? true;
-    void this.#aidaClient.registerClientEvent({
+    return this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: this.#state.metadata.rpcGlobalId,
       disable_user_content_logging: disallowLogging,
       do_conversation_client_event: {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './LinearMemoryValueInterpreter.js';
 import './LinearMemoryViewer.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -20,6 +19,7 @@ import {
   Navigation,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
+import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
 import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import {
@@ -186,10 +186,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
     ${
       input.hideValueInspector ? nothing : html`
     <div class="value-interpreter">
-      <devtools-linear-memory-inspector-interpreter
-        .data=${
-          {
-            value: input.memory
+      <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryValueInterpreter, {
+            buffer: input.memory
                        .slice(
                            input.address - input.memoryOffset,
                            input.address + VALUE_INTEPRETER_MAX_NUM_BYTES,
@@ -203,9 +201,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
             onJumpToAddressClicked: input.onJumpToAddress,
             onValueTypeToggled: input.onValueTypeToggled,
             onEndiannessChanged: input.onEndiannessChanged,
-  }}
-        >
-      </devtools-linear-memory-inspector-interpreter>
+      })}></devtools-widget>
     </div>`}
     `,
          target);