chrome-devtools-frontend 1.0.1016605 → 1.0.1017938

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -43,6 +43,7 @@ import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
+import {TopLayerContainer} from './TopLayerContainer.js';
 
 import type {MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
@@ -100,6 +101,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
+  private topLayerContainer?: TopLayerContainer;
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -1001,6 +1003,7 @@ 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);
   }
 
   unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
@@ -1013,6 +1016,7 @@ 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);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
 
@@ -1164,13 +1168,41 @@ export class ElementsTreeOutline extends
       return Promise.resolve();
     }
 
-    return new Promise(resolve => {
-      treeElement.node().getChildNodes(() => {
-        populatedTreeElements.add(treeElement);
-        this.updateModifiedParentNode(treeElement.node());
-        resolve();
-      });
-    });
+    return new Promise<void>(resolve => {
+             treeElement.node().getChildNodes(() => {
+               populatedTreeElements.add(treeElement);
+               this.updateModifiedParentNode(treeElement.node());
+               resolve();
+             });
+           })
+        .then(() => {
+          if (treeElement.node().nodeName() === 'BODY') {
+            void this.createTopLayerContainer(treeElement);
+          }
+        });
+  }
+
+  async createTopLayerContainer(bodyElement: ElementsTreeElement): Promise<void> {
+    if (!this.topLayerContainer) {
+      this.topLayerContainer = new TopLayerContainer(bodyElement);
+    }
+    this.topLayerContainer.updateBody(bodyElement);
+    await this.updateTopLayerContainer();
+  }
+
+  async updateTopLayerContainer(): Promise<void> {
+    if (this.topLayerContainer) {
+      const bodyElement = this.topLayerContainer.bodyElement;
+      if (!bodyElement.children().includes(this.topLayerContainer) && !this.topLayerContainer.parent &&
+          !this.topLayerContainer.treeOutline) {
+        bodyElement.insertChild(this.topLayerContainer, bodyElement.childCount() - 1);
+      }
+      this.topLayerContainer.removeChildren();
+      const topLayerElementsExists = await this.topLayerContainer.addTopLayerElementsAsChildren();
+      if (!topLayerElementsExists) {
+        bodyElement.removeChild(this.topLayerContainer);
+      }
+    }
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1318,7 +1350,7 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement, child: SDK.DOMModel.DOMNode, index: number,
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode, index: number,
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
@@ -1427,6 +1459,10 @@ export class ElementsTreeOutline extends
     }
   }
 
+  private async topLayerElementsChanged(): Promise<void> {
+    await this.updateTopLayerContainer();
+  }
+
   private static treeOutlineSymbol = Symbol('treeOutline');
 }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -0,0 +1,97 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as ElementsComponents from './components/components.js';
+import * as ElementsTreeOutline from './ElementsTreeOutline.js';
+
+import type {ElementsTreeElement} from './ElementsTreeElement.js';
+
+const UIStrings = {
+  /**
+   * @description Top layer is rendered closest to the user within a viewport, therefore its elements always appear on top of all other content
+   */
+  topLayer: 'top-layer',
+};
+
+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 {
+  treeOutline: ElementsTreeOutline.ElementsTreeOutline|null;
+  domModel: SDK.DOMModel.DOMModel;
+  currentTopLayerElements: Set<ElementsTreeElement>;
+  bodyElement: ElementsTreeElement;
+
+  constructor(bodyElement: ElementsTreeElement) {
+    super('#top-layer');
+    this.bodyElement = bodyElement;
+    this.domModel = bodyElement.node().domModel();
+    this.treeOutline = null;
+    this.currentTopLayerElements = new Set();
+  }
+
+  updateBody(bodyElement: ElementsTreeElement): void {
+    this.bodyElement = bodyElement;
+  }
+
+  async addTopLayerElementsAsChildren(): Promise<boolean> {
+    this.removeCurrentTopLayerElementsAdorners();
+    this.currentTopLayerElements = new Set();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
+    if (newTopLayerElementsIDs === null) {
+      return false;
+    }
+    let topLayerElementIndex = 0;
+    if (newTopLayerElementsIDs) {
+      for (const elementID of newTopLayerElementsIDs) {
+        const topLayerDOMNode = this.domModel.idToDOMNode.get(elementID);
+        // Will need to add support for backdrop in the future.
+        if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
+          topLayerElementIndex++;
+          const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
+              this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+          const topLayerTreeElement = this.treeOutline?.treeElementByNode.get(topLayerDOMNode);
+          const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
+          if (topLayerTreeElement && !this.currentTopLayerElements.has(topLayerTreeElement)) {
+            this.appendChild(topLayerElementRepresentation);
+            this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, topLayerElementIndex);
+            this.currentTopLayerElements.add(topLayerTreeElement);
+          }
+        }
+      }
+    }
+    return topLayerElementIndex > 0;
+  }
+
+  private removeCurrentTopLayerElementsAdorners(): void {
+    for (const topLayerElement of this.currentTopLayerElements) {
+      topLayerElement.removeAllAdorners();
+    }
+  }
+
+  private addTopLayerAdorner(
+      element: ElementsTreeElement, topLayerElementRepresentation: ElementsTreeOutline.ShortcutTreeElement,
+      topLayerElementIndex: number): void {
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
+    const adornerContent = document.createElement('span');
+    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    const adorner = element?.adorn(config, adornerContent);
+    if (adorner) {
+      const onClick = (((): void => {
+                         topLayerElementRepresentation.revealAndSelect();
+                       }) as EventListener);
+      adorner.addInteraction(onClick, {
+        isToggle: false,
+        shouldPropagateOnKeydown: false,
+        ariaLabelDefault: i18nString(UIStrings.topLayer),
+        ariaLabelActive: i18nString(UIStrings.topLayer),
+      });
+      adorner.addEventListener('mousedown', e => e.consume(), false);
+    }
+  }
+}

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

@@ -30,6 +30,7 @@ export enum RegisteredAdorners {
   SCROLL_SNAP = 'scroll-snap',
   CONTAINER = 'container',
   SLOT = 'slot',
+  TOP_LAYER = 'top-layer',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -72,6 +73,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.TOP_LAYER:
+      return {
+        name: 'top-layer',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elements.ts

@@ -9,6 +9,7 @@ import './DOMLinkifier.js';
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
+import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
@@ -25,6 +26,7 @@ import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
 import './ElementsTreeElementHighlighter.js';
+import './TopLayerContainer.js';
 
 import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
@@ -53,6 +55,7 @@ import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
 import * as StylePropertyTreeElement from './StylePropertyTreeElement.js';
 import * as StylePropertyUtils from './StylePropertyUtils.js';
 import * as StylesSidebarPane from './StylesSidebarPane.js';
+import * as TopLayerContainer from './TopLayerContainer.js';
 
 export {
   ClassesPaneWidget,
@@ -82,4 +85,5 @@ export {
   StylePropertyTreeElement,
   StylePropertyUtils,
   StylesSidebarPane,
+  TopLayerContainer,
 };

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -116,6 +116,13 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
     }
     this.registerCSSFiles([performanceMonitorStyles]);
     this.controlPane.instantiateMetricData();
+    const themeSupport = ThemeSupport.ThemeSupport.instance();
+    themeSupport.addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      // instantiateMetricData sets the colors for the metrics, which we need
+      // to re-evaluate when the theme changes before re-drawing the canvas.
+      this.controlPane.instantiateMetricData();
+      this.draw();
+    });
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SuspendStateChanged, this.suspendStateChanged, this);
     void this.model.enable();

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -319,6 +319,6 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
   private async openMemoryInspector(obj: SDK.RemoteObject.RemoteObject): Promise<void> {
     const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
-    void controller.openInspectorView(obj, 0);
+    void controller.openInspectorView(obj);
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -77,17 +77,16 @@ async function getBufferFromObject(obj: SDK.RemoteObject.RemoteObject): Promise<
   return new SDK.RemoteObject.RemoteArrayBuffer(obj);
 }
 
+export function isDWARFMemoryObject(obj: SDK.RemoteObject.RemoteObject): boolean {
+  return obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode && obj.inspectableAddress !== undefined;
+}
+
 export function isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
   const isWasmOrBuffer = obj.type === 'object' && obj.subtype && ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
-  if (isWasmOrBuffer) {
+  if (isWasmOrBuffer || isDWARFMemoryObject(obj)) {
     return true;
   }
 
-  const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
-  if (isWasmDWARF) {
-    return obj.inspectableAddress !== undefined;
-  }
-
   return false;
 }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -388,11 +388,13 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject): void {
-    // We show the memory icon only on ArrayBuffer and WebAssembly.Memory instances.
+    // We show the memory icon only on ArrayBuffer, WebAssembly.Memory and DWARF memory instances.
     // TypedArrays DataViews are also supported, but showing the icon next to their
     // previews is quite a significant visual overhead, and users can easily get to
     // their buffers and open the memory inspector from there.
-    if (!LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(obj)) {
+    const arrayBufferOrWasmMemory =
+        (obj.type === 'object' && (obj.subtype === 'arraybuffer' || obj.subtype === 'webassemblymemory'));
+    if (!arrayBufferOrWasmMemory && !LinearMemoryInspector.LinearMemoryInspectorController.isDWARFMemoryObject(obj)) {
       return;
     }
     const memoryIcon = new IconButton.Icon.Icon();
@@ -408,7 +410,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const controller =
           LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
       Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
-      void controller.openInspectorView(obj, 0);
+      void controller.openInspectorView(obj);
     };
 
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1016605"
+  "version": "1.0.1017938"
 }