chrome-devtools-frontend 1.0.1030946 → 1.0.1031400

package/front_end/core/i18n/locales/en-US.json

@@ -4842,10 +4842,10 @@
     "message": "Inactive property"
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleFix": {
-    "message": "Please change parent element's {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue."
+    "message": "Please change the parent element's property declaration from {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleReason": {
-    "message": "Parent element has {REASON_PROPERTY_DECLARATION_CODE} rule, therefore this elements {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect."
+    "message": "The parent element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, this element's property {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleChangeSuggestion": {
     "message": "For this property to work, please change the {EXISTING_PROPERTY_DECLARATION} rule to {TARGET_PROPERTY_DECLARATION}."
@@ -4854,7 +4854,7 @@
     "message": "For this property to work, please remove or change the value of {REASON_PROPERTY_DECLARATION_CODE}."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleReason": {
-    "message": "This element has the {REASON_PROPERTY_DECLARATION_CODE} property and, therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect."
+    "message": "This element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect."
   },
   "panels/elements/DOMLinkifier.ts | node": {
     "message": "<node>"
@@ -5330,8 +5330,8 @@
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Unknown property name"
   },
-  "panels/elements/TopLayerContainer.ts | topLayer": {
-    "message": "top-layer"
+  "panels/elements/TopLayerContainer.ts | reveal": {
+    "message": "reveal"
   },
   "panels/emulation/DeviceModeToolbar.ts | addDevicePixelRatio": {
     "message": "Add device pixel ratio"

package/front_end/core/i18n/locales/en-XL.json

@@ -4842,10 +4842,10 @@
     "message": "Îńâćt̂ív̂é p̂ŕôṕêŕt̂ý"
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleFix": {
-    "message": "P̂ĺêáŝé ĉh́âńĝé p̂ár̂én̂t́ êĺêḿêńt̂'ś {EXISTING_PARENT_ELEMENT_RULE} t̂ó {TARGET_PARENT_ELEMENT_RULE} t̂ó f̂íx̂ t́ĥíŝ íŝśûé."
+    "message": "P̂ĺêáŝé ĉh́âńĝé t̂h́ê ṕâŕêńt̂ él̂ém̂én̂t́'ŝ ṕr̂óp̂ér̂t́ŷ d́êćl̂ár̂át̂íôń f̂ŕôḿ {EXISTING_PARENT_ELEMENT_RULE} t̂ó {TARGET_PARENT_ELEMENT_RULE} t̂ó f̂íx̂ t́ĥíŝ íŝśûé."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedByParentElementRuleReason": {
-    "message": "P̂ár̂én̂t́ êĺêḿêńt̂ h́âś {REASON_PROPERTY_DECLARATION_CODE} r̂úl̂é, t̂h́êŕêf́ôŕê t́ĥíŝ él̂ém̂én̂t́ŝ {AFFECTED_PROPERTY_DECLARATION_CODE} h́âś n̂ó êf́f̂éĉt́."
+    "message": "T̂h́ê ṕâŕêńt̂ él̂ém̂én̂t́ ĥáŝ t́ĥé {REASON_PROPERTY_DECLARATION_CODE} p̂ŕôṕêŕt̂ý âńd̂ t́ĥér̂éf̂ór̂é, t̂h́îś êĺêḿêńt̂'ś p̂ŕôṕêŕt̂ý {AFFECTED_PROPERTY_DECLARATION_CODE} ĥáŝ ńô éf̂f́êćt̂."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleChangeSuggestion": {
     "message": "F̂ór̂ t́ĥíŝ ṕr̂óp̂ér̂t́ŷ t́ô ẃôŕk̂, ṕl̂éâśê ćĥán̂ǵê t́ĥé {EXISTING_PROPERTY_DECLARATION} r̂úl̂é t̂ó {TARGET_PROPERTY_DECLARATION}."
@@ -4854,7 +4854,7 @@
     "message": "F̂ór̂ t́ĥíŝ ṕr̂óp̂ér̂t́ŷ t́ô ẃôŕk̂, ṕl̂éâśê ŕêḿôv́ê ór̂ ćĥán̂ǵê t́ĥé v̂ál̂úê óf̂ {REASON_PROPERTY_DECLARATION_CODE}."
   },
   "panels/elements/CSSRuleValidator.ts | ruleViolatedBySameElementRuleReason": {
-    "message": "T̂h́îś êĺêḿêńt̂ h́âś t̂h́ê {REASON_PROPERTY_DECLARATION_CODE} ṕr̂óp̂ér̂t́ŷ án̂d́, t̂h́êŕêf́ôŕê, {AFFECTED_PROPERTY_DECLARATION_CODE} h́âś n̂ó êf́f̂éĉt́."
+    "message": "T̂h́îś êĺêḿêńt̂ h́âś t̂h́ê {REASON_PROPERTY_DECLARATION_CODE} ṕr̂óp̂ér̂t́ŷ án̂d́ t̂h́êŕêf́ôŕê, {AFFECTED_PROPERTY_DECLARATION_CODE} h́âś n̂ó êf́f̂éĉt́."
   },
   "panels/elements/DOMLinkifier.ts | node": {
     "message": "<n̂ód̂é>"
@@ -5330,8 +5330,8 @@
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Ûńk̂ńôẃn̂ ṕr̂óp̂ér̂t́ŷ ńâḿê"
   },
-  "panels/elements/TopLayerContainer.ts | topLayer": {
-    "message": "t̂óp̂-ĺâýêŕ"
+  "panels/elements/TopLayerContainer.ts | reveal": {
+    "message": "r̂év̂éâĺ"
   },
   "panels/emulation/DeviceModeToolbar.ts | addDevicePixelRatio": {
     "message": "Âd́d̂ d́êv́îćê ṕîx́êĺ r̂át̂íô"

package/front_end/core/platform/string-utilities.ts

@@ -263,16 +263,13 @@ export const regexSpecialCharacters = function(): string {
 };
 
 export const filterRegex = function(query: string): RegExp {
-  let regexString = '';
+  let regexString = '^(?:.*\\0)?';  // Start from beginning or after a \0
   for (let i = 0; i < query.length; ++i) {
     let c = query.charAt(i);
     if (SPECIAL_REGEX_CHARACTERS.indexOf(c) !== -1) {
       c = '\\' + c;
     }
-    if (i) {
-      regexString += '[^\\0' + c + ']*';
-    }
-    regexString += c;
+    regexString += '[^\\0' + c + ']*' + c;
   }
   return new RegExp(regexString, 'i');
 };

package/front_end/core/sdk/Target.ts

@@ -73,6 +73,9 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
       case Type.Browser:
         this.#capabilitiesMask = Capability.Target | Capability.IO;
         break;
+      case Type.Tab:
+        this.#capabilitiesMask = Capability.Target;
+        break;
     }
     this.#typeInternal = type;
     this.#parentTargetInternal = parentTarget;
@@ -227,6 +230,7 @@ export enum Type {
   Node = 'node',
   Browser = 'browser',
   AuctionWorklet = 'auction-worklet',
+  Tab = 'tab',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -52,7 +52,10 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
   async run(): Promise<void> {
     let firstCall = true;
     await SDK.Connections.initMainConnection(async () => {
-      const type = Root.Runtime.Runtime.queryParam('v8only') ? SDK.Target.Type.Node : SDK.Target.Type.Frame;
+      const type = Root.Runtime.Runtime.queryParam('v8only') ?
+          SDK.Target.Type.Node :
+          (Root.Runtime.Runtime.queryParam('targetType') === 'tab' ? SDK.Target.Type.Tab : SDK.Target.Type.Frame);
+      // TODO(crbug.com/1348385): support waiting for debugger with tab target.
       const waitForDebuggerInPage =
           type === SDK.Target.Type.Frame && Root.Runtime.Runtime.queryParam('panel') === 'sources';
       const target = SDK.TargetManager.TargetManager.instance().createTarget(

package/front_end/panels/application/components/StackTrace.ts

@@ -155,7 +155,7 @@ export class StackTrace extends HTMLElement {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
     for (const item of this.#stackTraceRows) {
-      if (this.#showHidden || (!item.ignoreListHide && !item.rowCountHide)) {
+      if (this.#showHidden || !item.ignoreListHide) {
         if ('functionName' in item) {
           expandableRows.push(LitHtml.html`
           <${StackTraceRow.litTagName} data-stack-trace-row .data=${{
@@ -168,7 +168,7 @@ export class StackTrace extends HTMLElement {
           `);
         }
       }
-      if (!this.#showHidden && 'functionName' in item && (item.ignoreListHide || item.rowCountHide)) {
+      if (!this.#showHidden && 'functionName' in item && item.ignoreListHide) {
         hiddenCallFramesCount++;
       }
     }

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -27,7 +27,7 @@ const UIStrings = {
     *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and, therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
+      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
     *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to some other property.
     *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
@@ -47,14 +47,14 @@ const UIStrings = {
     *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'Parent element has {REASON_PROPERTY_DECLARATION_CODE} rule, therefore this elements {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
+      'The parent element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, this element\'s property {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
     *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the properties of the parent element.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
   ruleViolatedByParentElementRuleFix:
-      'Please change parent element\'s {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+      'Please change the parent element\'s property declaration from {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -103,7 +103,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  private topLayerContainer?: TopLayerContainer;
+  #topLayerContainerByParent: Map<UI.TreeOutline.TreeElement, TopLayerContainer> = new Map();
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -453,7 +453,7 @@ export class ElementsTreeOutline extends
       }
     }
 
-    this.createTopLayerContainer();
+    void this.createTopLayerContainer(this.rootElement(), this.rootDOMNode.domModel());
 
     if (selectedNode) {
       this.revealAndSelectNode(selectedNode, true);
@@ -1183,9 +1183,16 @@ export class ElementsTreeOutline extends
     });
   }
 
-  createTopLayerContainer(): void {
-    this.topLayerContainer = new TopLayerContainer(this);
-    void this.topLayerContainer.throttledUpdateTopLayerElements();
+  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, domModel: SDK.DOMModel.DOMModel): Promise<void> {
+    if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
+      return;
+    }
+    const container = new TopLayerContainer(parent.treeOutline, domModel);
+    await container.throttledUpdateTopLayerElements();
+    if (container.currentTopLayerElements.size > 0) {
+      parent.appendChild(container);
+    }
+    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1342,6 +1349,9 @@ export class ElementsTreeOutline extends
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
+    if (child.nodeType() === Node.DOCUMENT_NODE) {
+      void this.createTopLayerContainer(newElement, child.domModel());
+    }
     return newElement;
   }
 
@@ -1447,8 +1457,14 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private topLayerElementsChanged(): void {
-    void this.topLayerContainer?.throttledUpdateTopLayerElements();
+  private async topLayerElementsChanged(): Promise<void> {
+    for (const [parent, container] of this.#topLayerContainerByParent) {
+      await container.throttledUpdateTopLayerElements();
+      if (container.currentTopLayerElements.size > 0 && container.parent !== parent) {
+        parent.appendChild(container);
+      }
+      container.hidden = container.currentTopLayerElements.size === 0;
+    }
   }
 
   private static treeOutlineSymbol = Symbol('treeOutline');

package/front_end/panels/elements/TopLayerContainer.ts

@@ -14,23 +14,24 @@ 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',
+  *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+  */
+  reveal: 'reveal',
 };
 
 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 {
-  domContainer: ElementsTreeOutline.ElementsTreeOutline;
+  tree: ElementsTreeOutline.ElementsTreeOutline;
+  domModel: SDK.DOMModel.DOMModel;
   currentTopLayerElements: Set<ElementsTreeElement>;
   topLayerUpdateThrottler: Common.Throttler.Throttler;
-  #inserted = false;
 
-  constructor(domContainer: ElementsTreeOutline.ElementsTreeOutline) {
+  constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
-    this.domContainer = domContainer;
+    this.tree = tree;
+    this.domModel = domModel;
     this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
@@ -44,26 +45,19 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     this.removeCurrentTopLayerElementsAdorners();
     this.currentTopLayerElements = new Set();
 
-    const domModel = this.domContainer.rootDOMNode?.domModel();
-    if (!domModel) {
-      this.hidden = true;
-      return;
-    }
-
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
-      this.hidden = true;
       return;
     }
 
     let topLayerElementIndex = 0;
     for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
+      const topLayerDOMNode = this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
       if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+            this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.domContainer.treeElementByNode.get(topLayerDOMNode);
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
         if (!topLayerTreeElement) {
           continue;
         }
@@ -73,21 +67,16 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
         // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
+        const previousTopLayerDOMNode =
+            (i > 0) ? this.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());
+              this.domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
       }
     }
-
-    this.hidden = topLayerElementIndex <= 0;
-    if (!this.hidden && !this.#inserted) {
-      this.domContainer.appendChild(this);
-      this.#inserted = true;
-    }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
@@ -118,8 +107,8 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
       adorner.addInteraction(onClick, {
         isToggle: false,
         shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.topLayer),
-        ariaLabelActive: i18nString(UIStrings.topLayer),
+        ariaLabelDefault: i18nString(UIStrings.reveal),
+        ariaLabelActive: i18nString(UIStrings.reveal),
       });
       adorner.addEventListener('mousedown', e => e.consume(), false);
     }

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -4,10 +4,14 @@
  * found in the LICENSE file.
  */
 
+:host {
+  padding: 6px;
+}
+
 .hint-popup-wrapper {
-  width: 400px;
-  line-height: 1.1;
+  max-width: 232px;
   font-size: 12px;
+  line-height: 1.4;
 }
 
 code {

package/front_end/panels/elements/stylesSectionTree.css

@@ -159,7 +159,7 @@ ol.expanded {
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto auto auto 5px;
+  margin: auto auto auto 3px;
   display: inline-block;
   cursor: pointer;
   transform: scale(0.9);

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -4,7 +4,9 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as Root from '../../core/root/root.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -62,6 +64,11 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     if (this.uiSourceCodeUrls.has(uiSourceCode.url())) {
       return false;
     }
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
+        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+            uiSourceCode)) {
+      return false;
+    }
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     return !binding || binding.fileSystem === uiSourceCode;
   }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -319,14 +319,14 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
           LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(target.property.value)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.revealInMemoryInspectorPanel),
-            this.openMemoryInspector.bind(this, target.property.value));
+            this.openMemoryInspector.bind(this, target.property.name, target.property.value));
       }
     }
   }
 
-  private async openMemoryInspector(obj: SDK.RemoteObject.RemoteObject): Promise<void> {
+  private async openMemoryInspector(name: string, obj: SDK.RemoteObject.RemoteObject): Promise<void> {
     const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
-    void controller.openInspectorView(obj);
+    void controller.openInspectorView(obj, undefined /* address */, name);
   }
 }

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

@@ -160,12 +160,11 @@ export class LinearMemoryInspector extends HTMLElement {
       throw new Error('Memory offset has to be greater or equal to zero.');
     }
 
-    if (data.highlightInfo !== undefined) {
+    if (data.highlightInfo) {
       if (data.highlightInfo.size < 0) {
         throw new Error('Object size has to be greater than or equal to zero');
       }
-      if (data.highlightInfo.startAddress > data.memoryOffset + data.memory.length ||
-          data.highlightInfo.startAddress < 0) {
+      if (data.highlightInfo.startAddress < 0 || data.highlightInfo.startAddress >= data.outerMemoryLength) {
         throw new Error('Object start address is out of bounds.');
       }
     }

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

@@ -164,6 +164,21 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return await memoryWrapper.getRange(start, chunkEnd);
   }
 
+  async evaluateExpression(callFrame: SDK.DebuggerModel.CallFrame, expressionName: string):
+      Promise<SDK.RemoteObject.RemoteObject|undefined> {
+    const result = await callFrame.evaluate({expression: expressionName});
+    if ('error' in result) {
+      console.error(`Tried to evaluate the expression '${expressionName}' but got an error: ${result.error}`);
+      return undefined;
+    }
+    if ('exceptionDetails' in result && result?.exceptionDetails?.text) {
+      console.error(
+          `Tried to evaluate the expression '${expressionName}' but got an exception: ${result.exceptionDetails.text}`);
+      return undefined;
+    }
+    return result.object;
+  }
+
   saveSettings(data: Settings): void {
     const valueTypes = Array.from(data.valueTypes);
     const modes = [...data.modes];
@@ -233,14 +248,15 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   // This function returns the size of the source language value represented
   // by the ValueNode. If the value is a pointer, the function returns the size of
   // the pointed-to value. If the pointed-to value is also a pointer, it returns
-  // the size of the pointer (usually 4 bytes) to stay consistent with the DWARF extension.
+  // the size of the pointer (usually 4 bytes). This is the convention taken
+  // by the DWARF extension.
   // > double x = 42.0;
   // > double *ptr = &x;
   // > double **dblptr = &ptr;
   //
   // retrieveObjectSize(ptr_ValueNode) -> 8, the size of a double
   // retrieveObjectSize(dblptr_ValueNode) -> 4, the size of a pointer
-  static retrieveObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
+  static extractObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
     let typeInfo = obj.sourceType.typeInfo;
     const pointerMembers = typeInfo.members.filter(member => member.name === '*');
     if (pointerMembers.length === 1) {
@@ -257,7 +273,34 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return typeInfo.size;
   }
 
-  async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number): Promise<void> {
+  // The object type description corresponds to the type of the highlighted memory
+  // that the user sees in the memory inspector. For pointers, we highlight the pointed to object.
+  //
+  // Example: The variable `x` has the type `int *`. Assume that `x` points to the value 3.
+  // -> The memory inspector will jump to the address where 3 is stored.
+  // -> The memory inspector will highlight the bytes that represent the 3.
+  // -> The object type description of what we show will thus be `int` and not `int *`.
+  static extractObjectTypeDescription(obj: Bindings.DebuggerLanguagePlugins.ValueNode): string {
+    const objType = obj.description;
+    if (!objType) {
+      return '';
+    }
+    const lastChar = objType.charAt(objType.length - 1);
+    const secondToLastChar = objType.charAt(objType.length - 2);
+    const isPointerType = lastChar === '*' || lastChar === '&';
+    const isOneLevelPointer = secondToLastChar === ' ';
+    if (!isPointerType) {
+      return objType;
+    }
+    if (isOneLevelPointer) {
+      // For example, 'int *'and 'int &' become 'int'.
+      return objType.slice(0, objType.length - 2);
+    }
+    // For example, 'int **' becomes 'int *'.
+    return objType.slice(0, objType.length - 1);
+  }
+
+  async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number, expression?: string): Promise<void> {
     const response = await LinearMemoryInspectorController.retrieveDWARFMemoryObjectAndAddress(obj);
     let memoryObj = obj;
     let memoryAddress = address;
@@ -288,8 +331,8 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     }
     const memoryProperty = internalProperties?.find(({name}) => name === '[[WebAssemblyMemory]]');
     const memory = memoryProperty?.value;
-    const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, memoryAddress);
-    if (highlightInfo !== undefined) {
+    const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, expression);
+    if (highlightInfo) {
       this.#setHighlightInfo(id, highlightInfo);
     } else {
       this.#resetHighlightInfo(id);
@@ -308,17 +351,21 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
   }
 
-  static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, memoryAddress?: number): HighlightInfo|undefined {
+  static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, expression?: string): HighlightInfo|undefined {
+    if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
+      return undefined;
+    }
+
     let highlightInfo;
-    if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      try {
-        highlightInfo = {
-          startAddress: memoryAddress || 0,
-          size: LinearMemoryInspectorController.retrieveObjectSize(obj),
-        };
-      } catch (err) {
-        highlightInfo = undefined;
-      }
+    try {
+      highlightInfo = {
+        startAddress: obj.inspectableAddress || 0,
+        size: LinearMemoryInspectorController.extractObjectSize(obj),
+        name: expression,
+        type: LinearMemoryInspectorController.extractObjectTypeDescription(obj),
+      };
+    } catch (err) {
+      highlightInfo = undefined;
     }
     return highlightInfo;
   }
@@ -337,8 +384,16 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     const debuggerModel = event.data;
     for (const [bufferId, remoteObject] of this.#bufferIdToRemoteObject) {
       if (debuggerModel.runtimeModel() === remoteObject.runtimeModel()) {
-        this.#resetHighlightInfo(bufferId);
-        this.#paneInstance.refreshView(bufferId);
+        const topCallFrame = debuggerModel.debuggerPausedDetails()?.callFrames[0];
+        if (topCallFrame) {
+          void this
+              .updateHighlightedMemory(bufferId, topCallFrame)
+              // Need to call refreshView in the callback to trigger re-render.
+              .then(() => this.#paneInstance.refreshView(bufferId));
+        } else {
+          this.#resetHighlightInfo(bufferId);
+          this.#paneInstance.refreshView(bufferId);
+        }
       }
     }
   }
@@ -355,4 +410,29 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     this.#bufferIdToRemoteObject.delete(bufferId);
     this.#resetHighlightInfo(bufferId);
   }
+
+  async updateHighlightedMemory(bufferId: string, callFrame: SDK.DebuggerModel.CallFrame): Promise<void> {
+    const oldHighlightInfo = this.getHighlightInfo(bufferId);
+    const expressionName = oldHighlightInfo?.name;
+    if (!oldHighlightInfo || !expressionName) {
+      this.#resetHighlightInfo(bufferId);
+      return;
+    }
+    const obj = await this.evaluateExpression(callFrame, expressionName);
+    if (!obj) {
+      this.#resetHighlightInfo(bufferId);
+      return;
+    }
+
+    const newHighlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, expressionName);
+    if (!newHighlightInfo || !this.#pointToSameMemoryObject(newHighlightInfo, oldHighlightInfo)) {
+      this.#resetHighlightInfo(bufferId);
+    } else {
+      this.#setHighlightInfo(bufferId, newHighlightInfo);
+    }
+  }
+
+  #pointToSameMemoryObject(highlightInfoA: HighlightInfo, highlightInfoB: HighlightInfo): boolean {
+    return highlightInfoA.type === highlightInfoB.type && highlightInfoA.startAddress === highlightInfoB.startAddress;
+  }
 }

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

@@ -226,7 +226,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const highlightInfo = LinearMemoryInspectorController.instance().getHighlightInfo(this.#tabId);
     if (highlightInfo !== undefined) {
       if (highlightInfo.startAddress < 0 || highlightInfo.startAddress >= this.#memoryWrapper.length()) {
-        throw new Error('Highlight info start address is out of bounds.');
+        throw new Error('HighlightInfo start address is out of bounds.');
       }
       if (highlightInfo.size <= 0) {
         throw new Error('Highlight size must be a positive number.');

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

@@ -5,4 +5,8 @@
 export interface HighlightInfo {
   startAddress: number;
   size: number;
+  // If the inspector is opened from a different UI location
+  // than the scope view, we don't have guaranteed access to the name.
+  name?: string;
+  type: string;
 }

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

@@ -386,16 +386,17 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValueWithCustomSupport(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean, parentElement?: Element,
-      linkifier?: Components.Linkifier.Linkifier): ObjectPropertyValue {
+      linkifier?: Components.Linkifier.Linkifier, variableName?: string): ObjectPropertyValue {
     if (value.customPreview()) {
       const result = (new CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
       return new ObjectPropertyValue(result);
     }
-    return ObjectPropertiesSection.createPropertyValue(value, wasThrown, showPreview, parentElement, linkifier);
+    return ObjectPropertiesSection.createPropertyValue(
+        value, wasThrown, showPreview, parentElement, linkifier, variableName);
   }
 
-  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject): void {
+  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject, variableName?: string): void {
     // 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
@@ -418,7 +419,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);
+      void controller.openInspectorView(obj, undefined /* address */, variableName);
     };
 
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');
@@ -428,7 +429,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValue(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean, parentElement?: Element,
-      linkifier?: Components.Linkifier.Linkifier): ObjectPropertyValue {
+      linkifier?: Components.Linkifier.Linkifier, variableName?: string): ObjectPropertyValue {
     let propertyValue;
     const type = value.type;
     const subtype = value.subtype;
@@ -464,7 +465,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         propertyValue.element.textContent = description;
         UI.Tooltip.Tooltip.install(propertyValue.element as HTMLElement, description);
       }
-      this.appendMemoryIcon(valueElement, value);
+      this.appendMemoryIcon(valueElement, value, variableName);
     }
 
     if (wasThrown) {
@@ -1090,7 +1091,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     } else if (this.property.value) {
       const showPreview = this.property.name !== '[[Prototype]]';
       this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-          this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this.linkifier);
+          this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this.linkifier,
+          this.path() /* variableName */);
       this.valueElement = (this.propertyValue.element as HTMLElement);
     } else if (this.property.getter) {
       this.valueElement = document.createElement('span');

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -94,7 +94,6 @@ export function buildStackTraceRows(
     updateCallback?: (arg0: (StackTraceRegularRow|StackTraceAsyncRow)[]) => void,
     ): (StackTraceRegularRow|StackTraceAsyncRow)[] {
   const stackTraceRows: (StackTraceRegularRow|StackTraceAsyncRow)[] = [];
-  let regularRowCount = 0;
 
   if (updateCallback) {
     const throttler = new Common.Throttler.Throttler(100);
@@ -110,14 +109,11 @@ export function buildStackTraceRows(
       asyncRow = {
         asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description, previousCallFrames),
         ignoreListHide: false,
-        rowCountHide: false,
       };
       stackTraceRows.push(asyncRow);
     }
     let hiddenCallFrames = 0;
     for (const stackFrame of stackTrace.callFrames) {
-      regularRowCount++;
-      const rowCountHide = regularRowCount > 30 && stackTrace.callFrames.length > 31;
       let ignoreListHide = false;
       const functionName = UI.UIUtils.beautifyFunctionName(stackFrame.functionName);
       const link =
@@ -125,10 +121,13 @@ export function buildStackTraceRows(
       if (link) {
         link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
         // TODO(crbug.com/1183325): fix race condition with uiLocation still being null here
+        // Note: This has always checked whether the call frame location *in the generated
+        // code* is ignore-listed or not. This can change after the live location updates,
+        // and is handled again in the linkifier live location update callback.
         const uiLocation = Linkifier.uiLocation(link);
         if (uiLocation &&
-            Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(
-                uiLocation.uiSourceCode.url())) {
+            Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+                uiLocation.uiSourceCode)) {
           ignoreListHide = true;
         }
         // Linkifier is using a workaround with the 'zero width space' (\u200b).
@@ -137,13 +136,13 @@ export function buildStackTraceRows(
           link.textContent = i18nString(UIStrings.unknownSource);
         }
       }
-      if (rowCountHide || ignoreListHide) {
+      if (ignoreListHide) {
         ++hiddenCallFrames;
       }
-      stackTraceRows.push({functionName, link, ignoreListHide, rowCountHide});
+      stackTraceRows.push({functionName, link, ignoreListHide});
     }
     if (asyncRow && hiddenCallFrames > 0 && hiddenCallFrames === stackTrace.callFrames.length) {
-      stackTraceRows[1].rowCountHide ? asyncRow.rowCountHide = true : asyncRow.ignoreListHide = true;
+      asyncRow.ignoreListHide = true;
     }
   }
 
@@ -173,20 +172,24 @@ function updateHiddenRows(
     const row = stackTraceRows[i];
 
     if ('link' in row && row.link) {
+      // Note: This checks whether the call frame location *in the live location* is
+      // ignore-listed or not. When a source map is present, this corresponds to the
+      // location in the original source, not the generated source. Therefore, the
+      // ignore-list status might be different now from when the row was created.
       const uiLocation = Linkifier.uiLocation(row.link);
       if (uiLocation &&
-          Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(
-              uiLocation.uiSourceCode.url())) {
+          Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+              uiLocation.uiSourceCode)) {
         row.ignoreListHide = true;
       }
-      if (row.rowCountHide || row.ignoreListHide) {
+      if (row.ignoreListHide) {
         shouldHideSubCount++;
       }
     }
     if ('asyncDescription' in row) {
       // hide current row if all (regular) rows since the previous asyncRow are hidden
       if (shouldHideSubCount > 0 && shouldHideSubCount === indexOfAsyncRow - i - 1) {
-        stackTraceRows[i + 1].rowCountHide ? row.rowCountHide = true : row.ignoreListHide = true;
+        row.ignoreListHide = true;
       }
       indexOfAsyncRow = i;
       shouldHideSubCount = 0;
@@ -238,11 +241,11 @@ function renderStackTraceTable(
         row.createChild('td').appendChild(item.link);
         links.push(item.link);
       }
-      if (item.rowCountHide || item.ignoreListHide) {
+      if (item.ignoreListHide) {
         ++hiddenCallFramesCount;
       }
     }
-    if (item.rowCountHide || item.ignoreListHide) {
+    if (item.ignoreListHide) {
       row.classList.add('hidden-row');
     }
     container.appendChild(row);
@@ -271,11 +274,9 @@ export interface StackTraceRegularRow {
   functionName: string;
   ignoreListHide: boolean;
   link: HTMLElement|null;
-  rowCountHide: boolean;
 }
 
 export interface StackTraceAsyncRow {
   asyncDescription: string;
   ignoreListHide: boolean;
-  rowCountHide: boolean;
 }

package/package.json

@@ -56,5 +56,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.1030946"
+  "version": "1.0.1031400"
 }