chrome-devtools-frontend 1.0.1016075 → 1.0.1017408

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/lighthouse/LighthousePanel.ts

@@ -81,7 +81,15 @@ export class LighthousePanel extends UI.Panel.Panel {
   private rightToolbar!: UI.Toolbar.Toolbar;
   private showSettingsPaneSetting!: Common.Settings.Setting<boolean>;
   private stateBefore?: {
-    emulation: {enabled: boolean, outlineEnabled: boolean, toolbarControlsEnabled: boolean},
+    emulation: {
+      type: EmulationModel.DeviceModeModel.Type,
+      enabled: boolean,
+      outlineEnabled: boolean,
+      toolbarControlsEnabled: boolean,
+      scale: number,
+      device: EmulationModel.EmulatedDevices.EmulatedDevice|null,
+      mode: EmulationModel.EmulatedDevices.Mode|null,
+    },
     network: {conditions: SDK.NetworkManager.Conditions},
   };
   private isLHAttached?: boolean;
@@ -385,7 +393,7 @@ export class LighthousePanel extends UI.Panel.Panel {
       }
 
     } catch (err) {
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
@@ -413,12 +421,12 @@ export class LighthousePanel extends UI.Panel.Panel {
 
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.LighthouseFinished);
 
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       this.buildReportUI(lighthouseResponse.lhr, lighthouseResponse.artifacts);
       // Give focus to the new audit button when completed
       this.newButton.element.focus();
     } catch (err) {
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
@@ -430,7 +438,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private async cancelLighthouse(): Promise<void> {
     this.currentLighthouseRun = undefined;
     this.statusView.updateStatus(i18nString(UIStrings.cancelling));
-    await this.resetEmulationAndProtocolConnection();
+    await this.restoreEmulationAndProtocolConnection();
     this.renderStartView();
   }
 
@@ -447,9 +455,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.stateBefore = {
       emulation: {
+        type: emulationModel.type(),
         enabled: emulationModel.enabledSetting().get(),
         outlineEnabled: emulationModel.deviceOutlineSetting().get(),
         toolbarControlsEnabled: emulationModel.toolbarControlsEnabledSetting().get(),
+        scale: emulationModel.scaleSetting().get(),
+        device: emulationModel.device(),
+        mode: emulationModel.mode(),
       },
       network: {conditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()},
     };
@@ -473,7 +485,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.isLHAttached = true;
   }
 
-  private async resetEmulationAndProtocolConnection(): Promise<void> {
+  private async restoreEmulationAndProtocolConnection(): Promise<void> {
     if (!this.isLHAttached) {
       return;
     }
@@ -483,9 +495,25 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     if (this.stateBefore) {
       const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-      emulationModel.enabledSetting().set(this.stateBefore.emulation.enabled);
-      emulationModel.deviceOutlineSetting().set(this.stateBefore.emulation.outlineEnabled);
-      emulationModel.toolbarControlsEnabledSetting().set(this.stateBefore.emulation.toolbarControlsEnabled);
+
+      // Detaching a session after overriding device metrics will prevent other sessions from overriding device metrics in the future.
+      // A workaround is to call "Emulation.clearDeviceMetricOverride" which is the result of the next line.
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=1337089
+      emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
+
+      const {type, enabled, outlineEnabled, toolbarControlsEnabled, scale, device, mode} = this.stateBefore.emulation;
+      emulationModel.enabledSetting().set(enabled);
+      emulationModel.deviceOutlineSetting().set(outlineEnabled);
+      emulationModel.toolbarControlsEnabledSetting().set(toolbarControlsEnabled);
+
+      // `emulate` will ignore the `scale` parameter for responsive emulation.
+      // In this case we can just set it here.
+      if (type === EmulationModel.DeviceModeModel.Type.Responsive) {
+        emulationModel.scaleSetting().set(scale);
+      }
+
+      emulationModel.emulate(type, device, mode, scale);
+
       SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(this.stateBefore.network.conditions);
       delete this.stateBefore;
     }

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.1016075"
+  "version": "1.0.1017408"
 }