chrome-devtools-frontend 1.0.1038113 → 1.0.1039659

package/front_end/core/common/ParsedURL.ts

@@ -177,7 +177,7 @@ export class ParsedURL {
    */
   static encodedFromParentPathAndName(parentPath: Platform.DevToolsPath.EncodedPathString, name: string):
       Platform.DevToolsPath.EncodedPathString {
-    return ParsedURL.concatenate(parentPath, '/', encodeURIComponent(name));
+    return ParsedURL.concatenate(parentPath, '/', ParsedURL.preEncodeSpecialCharactersInPath(name));
   }
 
   /**

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

@@ -12165,10 +12165,10 @@
     "message": "Show Memory Inspector"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | deleteHighlight": {
-    "message": "Delete memory highlight"
+    "message": "Stop highlighting this memory"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | jumpToAddress": {
-    "message": "Jump to highlighted memory"
+    "message": "Jump to this memory"
   },
   "ui/components/linear_memory_inspector/LinearMemoryInspector.ts | addressHasToBeANumberBetweenSAnd": {
     "message": "Address has to be a number between {PH1} and {PH2}"

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

@@ -12165,10 +12165,10 @@
     "message": "Ŝh́ôẃ M̂ém̂ór̂ý Îńŝṕêćt̂ór̂"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | deleteHighlight": {
-    "message": "D̂él̂ét̂é m̂ém̂ór̂ý ĥíĝh́l̂íĝh́t̂"
+    "message": "Ŝt́ôṕ ĥíĝh́l̂íĝh́t̂ín̂ǵ t̂h́îś m̂ém̂ór̂ý"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | jumpToAddress": {
-    "message": "Ĵúm̂ṕ t̂ó ĥíĝh́l̂íĝh́t̂éd̂ ḿêḿôŕŷ"
+    "message": "Ĵúm̂ṕ t̂ó t̂h́îś m̂ém̂ór̂ý"
   },
   "ui/components/linear_memory_inspector/LinearMemoryInspector.ts | addressHasToBeANumberBetweenSAnd": {
     "message": "Âd́d̂ŕêśŝ h́âś t̂ó b̂é â ńûḿb̂ér̂ b́êt́ŵéêń {PH1} âńd̂ {PH2}"

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -134,6 +134,9 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
   }
 
   async storageKeyForFrame(frameId: Protocol.Page.FrameId): Promise<string|null> {
+    if (!this.framesInternal.has(frameId)) {
+      return null;
+    }
     const response = await this.storageAgent.invoke_getStorageKeyForFrame({frameId: frameId});
     if (response.getError() === 'Frame tree node for given frame not found') {
       return null;
@@ -540,11 +543,11 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     const storageKeys = new Set<string>();
     let mainStorageKey: string|null = null;
 
-    for (const {isMainFrame, storageKey} of await Promise.all(
-             [...this.framesInternal.values()].map(async f => f.storageKey.then(k => ({
-                                                                                  isMainFrame: f.isMainFrame(),
-                                                                                  storageKey: k,
-                                                                                }))))) {
+    for (const {isMainFrame, storageKey} of await Promise.all([...this.framesInternal.values()].map(
+             f => f.getStorageKey(/* forceFetch */ false).then(k => ({
+                                                                 isMainFrame: f.isMainFrame(),
+                                                                 storageKey: k,
+                                                               }))))) {
       if (isMainFrame) {
         mainStorageKey = storageKey;
       }
@@ -570,7 +573,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
   }
 
   async getMainStorageKey(): Promise<string|null> {
-    return this.mainFrame ? this.mainFrame.storageKey : null;
+    return this.mainFrame ? this.mainFrame.getStorageKey(/* forceFetch */ false) : null;
   }
 
   getMainSecurityOrigin(): string|null {
@@ -767,6 +770,7 @@ export class ResourceTreeFrame {
     this.#urlInternal = framePayload.url as Platform.DevToolsPath.UrlString;
     this.#domainAndRegistryInternal = framePayload.domainAndRegistry;
     this.#securityOriginInternal = framePayload.securityOrigin;
+    void this.getStorageKey(/* forceFetch */ true);
     this.#unreachableUrlInternal =
         framePayload.unreachableUrl as Platform.DevToolsPath.UrlString || Platform.DevToolsPath.EmptyUrlString;
     this.#adFrameStatusInternal = framePayload?.adFrameStatus;
@@ -827,8 +831,8 @@ export class ResourceTreeFrame {
     return this.#securityOriginInternal;
   }
 
-  get storageKey(): Promise<string|null> {
-    if (!this.#storageKeyInternal) {
+  getStorageKey(forceFetch: boolean): Promise<string|null> {
+    if (!this.#storageKeyInternal || forceFetch) {
       this.#storageKeyInternal = this.#model.storageKeyForFrame(this.#idInternal);
     }
     return this.#storageKeyInternal;

package/front_end/panels/application/IndexedDBModel.ts

@@ -176,9 +176,11 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     if (!this.enabled) {
       return;
     }
-    await this.indexedDBAgent.invoke_deleteDatabase(
-        {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name});
-    void this.loadDatabaseNames(databaseId.securityOrigin);
+    if (databaseId.securityOrigin) {
+      await this.indexedDBAgent.invoke_deleteDatabase(
+          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name});
+      void this.loadDatabaseNames(databaseId.securityOrigin);
+    }
   }
 
   async refreshDatabaseNames(): Promise<void> {
@@ -193,14 +195,18 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   }
 
   async clearObjectStore(databaseId: DatabaseId, objectStoreName: string): Promise<void> {
-    await this.indexedDBAgent.invoke_clearObjectStore(
-        {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName});
+    if (databaseId.securityOrigin) {
+      await this.indexedDBAgent.invoke_clearObjectStore(
+          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName});
+    }
   }
 
   async deleteEntries(databaseId: DatabaseId, objectStoreName: string, idbKeyRange: IDBKeyRange): Promise<void> {
     const keyRange = IndexedDBModel.keyRangeFromIDBKeyRange(idbKeyRange);
-    await this.indexedDBAgent.invoke_deleteObjectStoreEntries(
-        {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName, keyRange});
+    if (databaseId.securityOrigin) {
+      await this.indexedDBAgent.invoke_deleteObjectStoreEntries(
+          {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name, objectStoreName, keyRange});
+    }
   }
 
   private securityOriginAdded(event: Common.EventTarget.EventTargetEvent<string>): void {
@@ -259,19 +265,19 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     for (const securityOrigin in this.databaseNamesBySecurityOrigin) {
       const databaseNames = this.databaseNamesBySecurityOrigin[securityOrigin];
       for (let i = 0; i < databaseNames.length; ++i) {
-        result.push(new DatabaseId(securityOrigin, databaseNames[i]));
+        result.push(new DatabaseId(securityOrigin, undefined, databaseNames[i]));
       }
     }
     return result;
   }
 
   private databaseAdded(securityOrigin: string, databaseName: string): void {
-    const databaseId = new DatabaseId(securityOrigin, databaseName);
+    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
     this.dispatchEventToListeners(Events.DatabaseAdded, {model: this, databaseId: databaseId});
   }
 
   private databaseRemoved(securityOrigin: string, databaseName: string): void {
-    const databaseId = new DatabaseId(securityOrigin, databaseName);
+    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
     this.dispatchEventToListeners(Events.DatabaseRemoved, {model: this, databaseId: databaseId});
   }
 
@@ -288,15 +294,20 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   }
 
   private async loadDatabase(databaseId: DatabaseId, entriesUpdated: boolean): Promise<void> {
-    const {databaseWithObjectStores} = await this.indexedDBAgent.invoke_requestDatabase(
-        {securityOrigin: databaseId.securityOrigin, databaseName: databaseId.name});
+    let databaseWithObjectStores: Protocol.IndexedDB.DatabaseWithObjectStores|null = null;
+    if (databaseId.securityOrigin) {
+      databaseWithObjectStores = (await this.indexedDBAgent.invoke_requestDatabase({
+                                   securityOrigin: databaseId.securityOrigin,
+                                   databaseName: databaseId.name,
+                                 })).databaseWithObjectStores;
+      if (!this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
+        return;
+      }
+    }
 
     if (!databaseWithObjectStores) {
       return;
     }
-    if (!this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
-      return;
-    }
 
     const databaseModel = new Database(databaseId, databaseWithObjectStores.version);
     this.databasesInternal.set(databaseId, databaseModel);
@@ -334,44 +345,58 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
       idbKeyRange: IDBKeyRange|null, skipCount: number, pageSize: number,
       callback: (arg0: Array<Entry>, arg1: boolean) => void): Promise<void> {
     const keyRange = idbKeyRange ? IndexedDBModel.keyRangeFromIDBKeyRange(idbKeyRange) : undefined;
+    const runtimeModel = this.target().model(SDK.RuntimeModel.RuntimeModel);
+    let response: Protocol.IndexedDB.RequestDataResponse|null = null;
+
+    if (databaseId.securityOrigin) {
+      response = await this.indexedDBAgent.invoke_requestData({
+        securityOrigin: databaseId.securityOrigin,
+        databaseName,
+        objectStoreName,
+        indexName,
+        skipCount,
+        pageSize,
+        keyRange,
+      });
+      if (!runtimeModel || !this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
+        return;
+      }
+    }
 
-    const response = await this.indexedDBAgent.invoke_requestData({
-      securityOrigin: databaseId.securityOrigin,
-      databaseName,
-      objectStoreName,
-      indexName,
-      skipCount,
-      pageSize,
-      keyRange,
-    });
-
+    if (!response) {
+      return;
+    }
     if (response.getError()) {
       console.error('IndexedDBAgent error: ' + response.getError());
       return;
     }
 
-    const runtimeModel = this.target().model(SDK.RuntimeModel.RuntimeModel);
-    if (!runtimeModel || !this.databaseNamesBySecurityOrigin[databaseId.securityOrigin]) {
-      return;
-    }
     const dataEntries = response.objectStoreDataEntries;
     const entries = [];
     for (const dataEntry of dataEntries) {
-      const key = runtimeModel.createRemoteObject(dataEntry.key);
-      const primaryKey = runtimeModel.createRemoteObject(dataEntry.primaryKey);
-      const value = runtimeModel.createRemoteObject(dataEntry.value);
+      const key = runtimeModel?.createRemoteObject(dataEntry.key);
+      const primaryKey = runtimeModel?.createRemoteObject(dataEntry.primaryKey);
+      const value = runtimeModel?.createRemoteObject(dataEntry.value);
+      if (!key || !primaryKey || !value) {
+        return;
+      }
       entries.push(new Entry(key, primaryKey, value));
     }
     callback(entries, response.hasMore);
   }
 
   async getMetadata(databaseId: DatabaseId, objectStore: ObjectStore): Promise<ObjectStoreMetadata|null> {
-    const databaseOrigin = databaseId.securityOrigin;
     const databaseName = databaseId.name;
     const objectStoreName = objectStore.name;
-    const response =
-        await this.indexedDBAgent.invoke_getMetadata({securityOrigin: databaseOrigin, databaseName, objectStoreName});
+    let response: Protocol.IndexedDB.GetMetadataResponse|null = null;
+    if (databaseId.securityOrigin) {
+      response = await this.indexedDBAgent.invoke_getMetadata(
+          {securityOrigin: databaseId.securityOrigin, databaseName, objectStoreName});
+    }
 
+    if (!response) {
+      return null;
+    }
     if (response.getError()) {
       console.error('IndexedDBAgent error: ' + response.getError());
       return null;
@@ -382,7 +407,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   private async refreshDatabaseList(securityOrigin: string): Promise<void> {
     const databaseNames = await this.loadDatabaseNames(securityOrigin);
     for (const databaseName of databaseNames) {
-      void this.loadDatabase(new DatabaseId(securityOrigin, databaseName), false);
+      void this.loadDatabase(new DatabaseId(securityOrigin, undefined, databaseName), false);
     }
   }
 
@@ -400,7 +425,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
 
   indexedDBContentUpdated({origin: securityOrigin, databaseName, objectStoreName}:
                               Protocol.Storage.IndexedDBContentUpdatedEvent): void {
-    const databaseId = new DatabaseId(securityOrigin, databaseName);
+    const databaseId = new DatabaseId(securityOrigin, undefined, databaseName);
     this.dispatchEventToListeners(
         Events.IndexedDBContentUpdated, {databaseId: databaseId, objectStoreName: objectStoreName, model: this});
   }
@@ -450,15 +475,17 @@ export class Entry {
 }
 
 export class DatabaseId {
-  securityOrigin: string;
+  readonly securityOrigin?: string;
+  readonly storageKey?: string;
   name: string;
-  constructor(securityOrigin: string, name: string) {
-    this.securityOrigin = securityOrigin;
+  constructor(securityOrigin: string|undefined, storageKey: string|undefined, name: string) {
+    securityOrigin ? this.securityOrigin = securityOrigin : (storageKey ? this.storageKey = storageKey : undefined);
     this.name = name;
   }
 
   equals(databaseId: DatabaseId): boolean {
-    return this.name === databaseId.name && this.securityOrigin === databaseId.securityOrigin;
+    return this.name === databaseId.name && this.securityOrigin === databaseId.securityOrigin &&
+        this.storageKey === databaseId.storageKey;
   }
 }
 

package/front_end/panels/application/IndexedDBViews.ts

@@ -198,7 +198,9 @@ export class IDBDatabaseView extends UI.Widget.VBox {
   }
 
   private refreshDatabase(): void {
-    this.securityOriginElement.textContent = this.database.databaseId.securityOrigin;
+    if (this.database.databaseId.securityOrigin) {
+      this.securityOriginElement.textContent = this.database.databaseId.securityOrigin;
+    }
     if (this.versionElement) {
       this.versionElement.textContent = this.database.version.toString();
     }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1396,7 +1396,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     button.setToggleWithDot(true);
 
     button.element.addEventListener('click', event => {
-      const menu = new UI.ContextMenu.ContextMenu(event);
+      const boundingRect = button.element.getBoundingClientRect();
+      const menu = new UI.ContextMenu.ContextMenu(event, {
+        x: boundingRect.left,
+        y: boundingRect.bottom,
+      });
       const preferredColorScheme = prefersColorSchemeSetting.get();
       const isLightColorScheme = preferredColorScheme === 'light';
       const isDarkColorScheme = preferredColorScheme === 'dark';

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -461,6 +461,7 @@ export class ShortcutListItem {
   private createIconButton(label: string, iconName: string, className: string, listener: () => void):
       HTMLButtonElement {
     const button = document.createElement('button') as HTMLButtonElement;
+    button.setAttribute('title', label);
     button.appendChild(UI.Icon.Icon.create(iconName));
     button.addEventListener('click', listener);
     UI.ARIAUtils.setAccessibleName(button, label);

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -171,6 +171,10 @@ button.text-button {
   margin: 0 2px;
 }
 
+.keybinds-list-text:has(.keybinds-delete-button) {
+  grid-column: 3 / -1;
+}
+
 .docs-link.devtools-link {
   align-self: flex-start;
   min-height: 2em;

package/front_end/panels/sources/NavigatorView.ts

@@ -1266,6 +1266,10 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  updateAccessibleName(): void {
+    UI.ARIAUtils.setAccessibleName(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1523,6 +1527,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
       tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCodeInternal.displayName()});
     }
     this.treeElement.tooltip = tooltip;
+    this.treeElement.updateAccessibleName();
 
     this.parent?.childrenInternal.delete(this.id);
     this.id = 'UISourceCode:' + this.uiSourceCodeInternal.canononicalScriptId();

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -100,7 +100,7 @@ export async function getPuppeteerConnection(
   );
 
   const [, browser] = await Promise.all([
-    connection.createSession({ targetId: mainTargetId }),
+    connection._createSession({targetId: mainTargetId}, /* emulateAutoAttach=*/ true),
     browserPromise,
   ]);
 

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

@@ -12,13 +12,16 @@ import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList
 
 const UIStrings = {
   /**
-  *@description Tooltip text that appears when hovering over a 'jump-to-highlight-button' button that is on the left side of a 'highlight-chip' chip.
+  *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
+  Clicking the button changes the displayed slice of computer memory in the Linear Memory Inspector to contain the inspected variable's bytes.
   */
-  jumpToAddress: 'Jump to highlighted memory',
+  jumpToAddress: 'Jump to this memory',
   /**
-   *@description Tooltip text that appears when hovering over a 'remove-highlight-button' button that is on the right end of a 'highlight-chip' chip.
+   *@description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
+   Clicking the delete button stops highlighting the variable's memory in the Linear Memory Inspector.
+   'Memory' is a slice of bytes in the computer memory.
    */
-  deleteHighlight: 'Delete memory highlight',
+  deleteHighlight: 'Stop highlighting this memory',
 };
 const str_ =
     i18n.i18n.registerUIStrings('ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts', UIStrings);
@@ -27,6 +30,7 @@ const {render, html} = LitHtml;
 
 export interface LinearMemoryHighlightChipListData {
   highlightInfos: Array<HighlightInfo>;
+  focusedMemoryHighlight?: HighlightInfo;
 }
 
 export class DeleteMemoryHighlightEvent extends Event {
@@ -54,6 +58,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #highlightedAreas: HighlightInfo[] = [];
+  #focusedMemoryHighlight?: HighlightInfo;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linearMemoryHighlightChipListStyles];
@@ -61,6 +66,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
 
   set data(data: LinearMemoryHighlightChipListData) {
     this.#highlightedAreas = data.highlightInfos;
+    this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
     this.#render();
   }
 
@@ -83,11 +89,15 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
   #createChip(highlightInfo: HighlightInfo): LitHtml.TemplateResult {
     const expressionName = highlightInfo.name || '<anonymous>';
     const expressionType = highlightInfo.type;
-
+    const isFocused = highlightInfo === this.#focusedMemoryHighlight;
+    const classMap = {
+      focused: isFocused,
+      'highlight-chip': true,
+    };
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="highlight-chip">
+      <div class=${LitHtml.Directives.classMap(classMap)}>
         <button class="jump-to-highlight-button" title=${
             i18nString(UIStrings.jumpToAddress)}
             @click=${():void => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>

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

@@ -203,6 +203,7 @@ export class LinearMemoryInspector extends HTMLElement {
     const canGoForwardInHistory = this.#history.canRollover();
 
     const highlightedMemoryAreas = this.#highlightInfo ? [this.#highlightInfo] : [];
+    const focusedMemoryHighlight = this.#getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas, this.#address);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -214,9 +215,8 @@ export class LinearMemoryInspector extends HTMLElement {
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
           <${LinearMemoryHighlightChipList.litTagName}
-          .data=${{highlightInfos: highlightedMemoryAreas} as LinearMemoryHighlightChipListData}
-          @jumptohighlightedmemory=${this.#onJumpToAddress}
-          @>
+          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight: focusedMemoryHighlight } as LinearMemoryHighlightChipListData}
+          @jumptohighlightedmemory=${this.#onJumpToAddress}>
           </${LinearMemoryHighlightChipList.litTagName}>
         <${LinearMemoryViewer.litTagName}
           .data=${{
@@ -224,7 +224,8 @@ export class LinearMemoryInspector extends HTMLElement {
             end - this.#memoryOffset),
             address: this.#address, memoryOffset: start,
             focus: this.#currentNavigatorMode === Mode.Submitted,
-            highlightInfo: this.#highlightInfo } as LinearMemoryViewerData}
+            highlightInfo: this.#highlightInfo,
+            focusedMemoryHighlight: focusedMemoryHighlight } as LinearMemoryViewerData}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </${LinearMemoryViewer.litTagName}>
@@ -375,6 +376,29 @@ export class LinearMemoryInspector extends HTMLElement {
     this.#address = address;
     this.dispatchEvent(new AddressChangedEvent(this.#address));
   }
+
+  // Returns the highlightInfo with the smallest size property that encloses the provided address.
+  // If there are multiple smallest enclosing highlights, we pick the one appearing the earliest in highlightedMemoryAreas.
+  // If no such highlightInfo exists, it returns undefined.
+  //
+  // Selecting the smallest enclosing memory highlight is a heuristic that aims to pick the
+  // most specific highlight given a provided address. This way, objects contained in other objects are
+  // potentially still accessible.
+  #getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas: HighlightInfo[], address: number): HighlightInfo
+      |undefined {
+    let smallestEnclosingHighlight;
+    for (const highlightedMemory of highlightedMemoryAreas) {
+      if (highlightedMemory.startAddress <= address &&
+          address < highlightedMemory.startAddress + highlightedMemory.size) {
+        if (!smallestEnclosingHighlight) {
+          smallestEnclosingHighlight = highlightedMemory;
+        } else if (highlightedMemory.size < smallestEnclosingHighlight.size) {
+          smallestEnclosingHighlight = highlightedMemory;
+        }
+      }
+    }
+    return smallestEnclosingHighlight;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-inspector', LinearMemoryInspector);

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

@@ -16,6 +16,7 @@ export interface LinearMemoryViewerData {
   memoryOffset: number;
   focus: boolean;
   highlightInfo?: HighlightInfo;
+  focusedMemoryHighlight?: HighlightInfo;
 }
 
 export class ByteSelectedEvent extends Event {
@@ -53,6 +54,7 @@ export class LinearMemoryViewer extends HTMLElement {
   #address = 0;
   #memoryOffset = 0;
   #highlightInfo?: HighlightInfo;
+  #focusedMemoryHighlight?: HighlightInfo;
 
   #numRows = 1;
   #numBytesInRow = BYTE_GROUP_SIZE;
@@ -73,6 +75,7 @@ export class LinearMemoryViewer extends HTMLElement {
     this.#memory = data.memory;
     this.#address = data.address;
     this.#highlightInfo = data.highlightInfo;
+    this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
     this.#memoryOffset = data.memoryOffset;
     this.#focusOnByte = data.focus;
     this.#update();
@@ -239,12 +242,14 @@ export class LinearMemoryViewer extends HTMLElement {
       const addMargin = i !== startIndex && (i - startIndex) % BYTE_GROUP_SIZE === 0;
       const selected = i === this.#address - this.#memoryOffset;
       const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
+      const focusedMemoryArea = this.#isFocusedArea(actualIndex);
       const classMap = {
         'cell': true,
         'byte-cell': true,
         'byte-group-margin': addMargin,
         selected,
         'highlight-area': shouldBeHighlighted,
+        'focused-area': focusedMemoryArea,
       };
       const isSelectableCell = i < this.#memory.length;
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
@@ -259,11 +264,13 @@ export class LinearMemoryViewer extends HTMLElement {
     for (let i = startIndex; i < endIndex; ++i) {
       const actualIndex = i + this.#memoryOffset;
       const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
+      const focusedMemoryArea = this.#isFocusedArea(actualIndex);
       const classMap = {
         'cell': true,
         'text-cell': true,
         selected: this.#address - this.#memoryOffset === i,
         'highlight-area': shouldBeHighlighted,
+        'focused-area': focusedMemoryArea,
       };
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
@@ -291,6 +298,14 @@ export class LinearMemoryViewer extends HTMLElement {
     return this.#highlightInfo.startAddress <= index
     && index < this.#highlightInfo.startAddress + this.#highlightInfo.size;
   }
+
+  #isFocusedArea(index: number): boolean {
+    if (!this.#focusedMemoryHighlight) {
+      return false;
+    }
+    return this.#focusedMemoryHighlight.startAddress <= index
+    && index < this.#focusedMemoryHighlight.startAddress + this.#focusedMemoryHighlight.size;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-viewer', LinearMemoryViewer);

package/front_end/ui/components/linear_memory_inspector/linearMemoryHighlightChipList.css

@@ -59,18 +59,6 @@
   border-radius: 50%;
 }
 
-.highlight-chip:hover > .delete-highlight-container {
-  display: flex;
-  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
-  background: linear-gradient(90deg, transparent 0%, rgb(241 243 244) 25%); /* stylelint-disable-line plugin/use_theme_colors */
-}
-
-:host-context(.-theme-with-dark-background) .highlight-chip:hover > .delete-highlight-container {
-  display: flex;
-  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
-  background: linear-gradient(90deg, transparent 0%, rgb(41 42 45) 25%); /* stylelint-disable-line plugin/use_theme_colors */
-}
-
 .jump-to-highlight-button {
   cursor: pointer;
   padding: 0;
@@ -108,3 +96,30 @@
   white-space: pre;
   flex-shrink: 0;
 }
+
+.highlight-chip.focused {
+  border-color: var(--color-primary);
+  background-color: var(--color-button-secondary-background-hovering);
+}
+
+.highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(241 243 244) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+.highlight-chip.focused:hover > .delete-highlight-container {
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(231 241 253) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+:host-context(.-theme-with-dark-background) .highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(41 42 45) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+:host-context(.-theme-with-dark-background) .highlight-chip.focused:hover > .delete-highlight-container {
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(48 55 68) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}

package/front_end/ui/components/linear_memory_inspector/linearMemoryViewer.css

@@ -36,10 +36,6 @@
   background-color: var(--legacy-item-selection-bg-color);
 }
 
-.highlight-area {
-  background-color: var(--legacy-item-selection-bg-color);
-}
-
 .byte-cell {
   min-width: 21px;
   color: var(--color-text-primary);
@@ -69,3 +65,22 @@
   background-color: var(--color-details-hairline);
   margin: 0 4px;
 }
+
+.highlight-area {
+  background-color: var(--color-background-elevation-2);
+}
+
+.cell.focused-area {
+  background-color: var(--color-primary-variant);
+  color: var(--color-button-primary-text);
+}
+
+.cell.focused-area.selected {
+  background: rgb(1 74 195); /* stylelint-disable-line plugin/use_theme_colors */
+  border-color: var(--color-button-outline-focus);
+}
+
+:host-context(.-theme-with-dark-background) .cell.focused-area.selected {
+  background: rgb(192 216 255); /* stylelint-disable-line plugin/use_theme_colors */
+  border-color: var(--color-button-outline-focus);
+}

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.1038113"
+  "version": "1.0.1039659"
 }