chrome-devtools-frontend 1.0.1038685 → 1.0.1040084

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/CSSMatchedStyles.ts

@@ -5,7 +5,7 @@
 import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import {cssMetadata, CustomVariableRegex, VariableRegex} from './CSSMetadata.js';
+import {cssMetadata, VariableRegex} from './CSSMetadata.js';
 
 import {type CSSModel} from './CSSModel.js';
 import {type CSSProperty} from './CSSProperty.js';
@@ -618,7 +618,8 @@ class NodeCascade {
     this.propertiesState.clear();
     this.activeProperties.clear();
 
-    for (const style of this.styles) {
+    for (let i = this.styles.length - 1; i >= 0; i--) {
+      const style = this.styles[i];
       const rule = style.parentRule;
       // Compute cascade for CSSStyleRules only.
       if (rule && !(rule instanceof CSSStyleRule)) {
@@ -637,44 +638,43 @@ class NodeCascade {
           continue;
         }
 
-        if (!property.activeInStyle()) {
-          this.propertiesState.set(property, PropertyState.Overloaded);
+        // When a property does not have a range in an otherwise ranged CSSStyleDeclaration,
+        // we consider it as a non-leading property (see computeLeadingProperties()), and most
+        // of them are computed longhands. We exclude these from activeProperties calculation,
+        // and use parsed longhands instead (see below).
+        if (style.range && !property.range) {
           continue;
         }
 
-        const canonicalName = metadata.canonicalPropertyName(property.name);
-        const isPropShorthand = Boolean(metadata.getLonghands(canonicalName));
-
-        if (isPropShorthand) {
-          const longhandsFromShort =
-              (property.value.match(CustomVariableRegex) || []).map(e => e.replace(CustomVariableRegex, '$2'));
-          longhandsFromShort.forEach(longhandProperty => {
-            if (metadata.isCSSPropertyName(longhandProperty)) {
-              const activeProperty = this.activeProperties.get(longhandProperty);
-              if (!activeProperty) {
-                this.activeProperties.set(longhandProperty, property);
-              } else {
-                this.propertiesState.set(activeProperty, PropertyState.Overloaded);
-                this.activeProperties.set(longhandProperty, property);
-              }
-            }
-          });
-        }
-
-        const activeProperty = this.activeProperties.get(canonicalName);
-        if (activeProperty && (activeProperty.important || !property.important)) {
+        if (!property.activeInStyle()) {
           this.propertiesState.set(property, PropertyState.Overloaded);
           continue;
         }
 
-        if (activeProperty) {
-          this.propertiesState.set(activeProperty, PropertyState.Overloaded);
+        const canonicalName = metadata.canonicalPropertyName(property.name);
+        this.updatePropertyState(property, canonicalName);
+        for (const longhand of property.getLonghandProperties()) {
+          if (metadata.isCSSPropertyName(longhand.name)) {
+            this.updatePropertyState(longhand, longhand.name);
+          }
         }
-        this.propertiesState.set(property, PropertyState.Active);
-        this.activeProperties.set(canonicalName, property);
       }
     }
   }
+
+  private updatePropertyState(propertyWithHigherSpecificity: CSSProperty, canonicalName: string): void {
+    const activeProperty = this.activeProperties.get(canonicalName);
+    if (activeProperty?.important && !propertyWithHigherSpecificity.important) {
+      this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.Overloaded);
+      return;
+    }
+
+    if (activeProperty) {
+      this.propertiesState.set(activeProperty, PropertyState.Overloaded);
+    }
+    this.propertiesState.set(propertyWithHigherSpecificity, PropertyState.Active);
+    this.activeProperties.set(canonicalName, propertyWithHigherSpecificity);
+  }
 }
 
 class DOMInheritanceCascade {
@@ -841,9 +841,7 @@ class DOMInheritanceCascade {
     const activeProperties = new Map<string, CSSProperty>();
     for (const nodeCascade of this.#nodeCascades) {
       nodeCascade.computeActiveProperties();
-      for (const entry of nodeCascade.propertiesState.entries()) {
-        const property = (entry[0] as CSSProperty);
-        const state = (entry[1] as PropertyState);
+      for (const [property, state] of nodeCascade.propertiesState) {
         if (state === PropertyState.Overloaded) {
           this.#propertiesState.set(property, PropertyState.Overloaded);
           continue;
@@ -858,11 +856,9 @@ class DOMInheritanceCascade {
       }
     }
     // If every longhand of the shorthand is not active, then the shorthand is not active too.
-    for (const entry of activeProperties.entries()) {
-      const canonicalName = (entry[0] as string);
-      const shorthandProperty = (entry[1] as CSSProperty);
+    for (const [canonicalName, shorthandProperty] of activeProperties) {
       const shorthandStyle = shorthandProperty.ownerStyle;
-      const longhands = shorthandStyle.longhandProperties(shorthandProperty.name);
+      const longhands = shorthandProperty.getLonghandProperties();
       if (!longhands.length) {
         continue;
       }

package/front_end/core/sdk/CSSProperty.ts

@@ -27,10 +27,12 @@ export class CSSProperty {
   #nameRangeInternal: TextUtils.TextRange.TextRange|null;
   #valueRangeInternal: TextUtils.TextRange.TextRange|null;
   #invalidString?: Common.UIString.LocalizedString;
+  #longhandProperties: CSSProperty[] = [];
 
   constructor(
       ownerStyle: CSSStyleDeclaration, index: number, name: string, value: string, important: boolean,
-      disabled: boolean, parsedOk: boolean, implicit: boolean, text?: string|null, range?: Protocol.CSS.SourceRange) {
+      disabled: boolean, parsedOk: boolean, implicit: boolean, text?: string|null, range?: Protocol.CSS.SourceRange,
+      longhandProperties?: Protocol.CSS.CSSProperty[]) {
     this.ownerStyle = ownerStyle;
     this.index = index;
     this.name = name;
@@ -44,6 +46,24 @@ export class CSSProperty {
     this.#active = true;
     this.#nameRangeInternal = null;
     this.#valueRangeInternal = null;
+
+    if (longhandProperties && longhandProperties.length > 0) {
+      for (const property of longhandProperties) {
+        this.#longhandProperties.push(new CSSProperty(
+            ownerStyle, this.#longhandProperties.length, property.name, property.value, important, disabled, parsedOk,
+            true));
+      }
+    } else {
+      // Blink would not parse shorthands containing 'var()' functions:
+      // https://drafts.csswg.org/css-variables/#variables-in-shorthands).
+      // Therefore we manually check if the current property is a shorthand,
+      // and fills its longhand components with empty values.
+      const longhandNames = cssMetadata().getLonghands(name);
+      for (const longhandName of longhandNames || []) {
+        this.#longhandProperties.push(new CSSProperty(
+            ownerStyle, this.#longhandProperties.length, longhandName, '', important, disabled, parsedOk, true));
+      }
+    }
   }
 
   static parsePayload(ownerStyle: CSSStyleDeclaration, index: number, payload: Protocol.CSS.CSSProperty): CSSProperty {
@@ -55,7 +75,7 @@ export class CSSProperty {
     const result = new CSSProperty(
         ownerStyle, index, payload.name, payload.value, payload.important || false, payload.disabled || false,
         ('parsedOk' in payload) ? Boolean(payload.parsedOk) : true, Boolean(payload.implicit), payload.text,
-        payload.range);
+        payload.range, payload.longhandProperties);
     return result;
   }
 
@@ -302,4 +322,8 @@ export class CSSProperty {
   getInvalidStringForInvalidProperty(): Common.UIString.LocalizedString|undefined {
     return this.#invalidString;
   }
+
+  getLonghandProperties(): CSSProperty[] {
+    return this.#longhandProperties;
+  }
 }

package/front_end/core/sdk/CSSStyleDeclaration.ts

@@ -62,19 +62,15 @@ export class CSSStyleDeclaration {
 
     if (payload.cssText && this.range) {
       const cssText = new TextUtils.Text.Text(payload.cssText);
-      let start: {
-        line: number,
-        column: number,
-      }|{
-        line: number,
-        column: number,
-      } = {line: this.range.startLine, column: this.range.startColumn};
+      let start = {line: this.range.startLine, column: this.range.startColumn};
       for (const cssProperty of payload.cssProperties) {
         const range = cssProperty.range;
         if (range) {
           parseUnusedText.call(this, cssText, start.line, start.column, range.startLine, range.startColumn);
           start = {line: range.endLine, column: range.endColumn};
         }
+        // TODO(changhaohan): we should try not including longhand properties anymore, because
+        // they are already included in the longhandProperties field in a shorthand property.
         this.#allPropertiesInternal.push(
             CSSProperty.parsePayload(this, this.#allPropertiesInternal.length, cssProperty));
       }
@@ -303,18 +299,6 @@ export class CSSStyleDeclaration {
     return property ? property.implicit : false;
   }
 
-  longhandProperties(name: string): CSSProperty[] {
-    const longhands = cssMetadata().getLonghands(name.toLowerCase());
-    const result = [];
-    for (let i = 0; longhands && i < longhands.length; ++i) {
-      const property = this.#activePropertyMap.get(longhands[i]);
-      if (property) {
-        result.push(property);
-      }
-    }
-    return result;
-  }
-
   propertyAt(index: number): CSSProperty|null {
     return (index < this.allProperties().length) ? this.allProperties()[index] : null;
   }

package/front_end/panels/application/AppManifestView.ts

@@ -458,7 +458,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.presentationSection = this.reportView.appendSection(i18nString(UIStrings.presentation));
     this.protocolHandlersSection = this.reportView.appendSection(i18nString(UIStrings.protocolHandlers));
     this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
-    this.protocolHandlersSection.contentElement.append(this.protocolHandlersView);
+    this.protocolHandlersSection.appendFieldWithCustomView(this.protocolHandlersView);
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons');
     this.shortcutSections = [];
     this.screenshotsSections = [];

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -981,7 +981,8 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     for (const section of staticSections) {
       const sectionElement = section.getTitleElement();
       const childTitle = section.title();
-      const child = new ManifestChildTreeElement(this.resourcesPanel, sectionElement, childTitle);
+      const sectionFieldElement = section.getFieldElement();
+      const child = new ManifestChildTreeElement(this.resourcesPanel, sectionElement, childTitle, sectionFieldElement);
       this.appendChild(child);
     }
   }
@@ -998,12 +999,15 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
 
 export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
   #sectionElement: Element;
-  constructor(storagePanel: ResourcesPanel, element: Element, childTitle: string) {
+  #sectionFieldElement: HTMLElement;
+  constructor(storagePanel: ResourcesPanel, element: Element, childTitle: string, fieldElement: HTMLElement) {
     super(storagePanel, childTitle, false);
     const icon = UI.Icon.Icon.create('mediumicon-manifest', 'resource-tree-item');
     this.setLeadingIcons([icon]);
     this.#sectionElement = element;
+    this.#sectionFieldElement = fieldElement;
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
+    this.listItemElement.addEventListener('keydown', this.onInvokeElementKeydown.bind(this));
     UI.ARIAUtils.setAccessibleName(
         this.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: this.listItemElement.title}));
   }
@@ -1018,6 +1022,26 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
     UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
     Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
   }
+  // direct focus to the corresponding element
+  onInvokeElementKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Tab' || event.shiftKey) {
+      return;
+    }
+    const checkBoxElement = this.#sectionFieldElement.querySelector('.mask-checkbox');
+    let focusableElement: HTMLElement|null = this.#sectionFieldElement.querySelector('[tabindex="0"]');
+    if (checkBoxElement && checkBoxElement.shadowRoot) {
+      focusableElement = checkBoxElement.shadowRoot.querySelector('input') || null;
+    } else if (!focusableElement) {
+      // special case for protocol handler section since it is a custom Element and has different structure than the others
+      focusableElement = this.#sectionFieldElement.querySelector('devtools-protocol-handlers-view')
+                             ?.shadowRoot?.querySelector('[tabindex="0"]') ||
+          null;
+    }
+    if (focusableElement) {
+      focusableElement?.focus();
+      event.consume(true);
+    }
+  }
 }
 
 export class ClearStorageTreeElement extends ApplicationPanelTreeElement {

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/StylePropertiesSection.ts

@@ -971,7 +971,7 @@ export class StylePropertiesSection {
         break;
       }
       count++;
-      const isShorthand = Boolean(style.longhandProperties(property.name).length);
+      const isShorthand = property.getLonghandProperties().length > 0;
       const inherited = this.isPropertyInherited(property.name);
       const overloaded = this.isPropertyOverloaded(property);
       if (style.parentRule && style.parentRule.isUserAgent() && inherited) {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -558,19 +558,19 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const longhandProperties = this.style.longhandProperties(this.name);
+    const longhandProperties = this.property.getLonghandProperties();
     const leadingProperties = this.style.leadingProperties();
 
-    for (let i = 0; i < longhandProperties.length; ++i) {
-      const name = longhandProperties[i].name;
+    for (const property of longhandProperties) {
+      const name = property.name;
       let inherited = false;
       let overloaded = false;
 
       const section = this.section();
       if (section) {
         inherited = section.isPropertyInherited(name);
-        overloaded = this.matchedStylesInternal.propertyState(longhandProperties[i]) ===
-            SDK.CSSMatchedStyles.PropertyState.Overloaded;
+        overloaded =
+            this.matchedStylesInternal.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.Overloaded;
       }
 
       const leadingProperty = leadingProperties.find(property => property.name === name && property.activeInStyle());
@@ -579,8 +579,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
 
       const item = new StylePropertyTreeElement(
-          this.parentPaneInternal, this.matchedStylesInternal, longhandProperties[i], false, inherited, overloaded,
-          false);
+          this.parentPaneInternal, this.matchedStylesInternal, property, false, inherited, overloaded, false);
       item.setComputedStyles(this.computedStyles);
       item.setParentsComputedStyles(this.parentsComputedStyles);
       this.appendChild(item);

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/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/front_end/ui/legacy/ReportView.ts

@@ -130,6 +130,13 @@ export class Section extends VBox {
     return this.titleElement;
   }
 
+  getFieldElement(): HTMLElement {
+    return this.fieldList;
+  }
+  appendFieldWithCustomView(customElement: HTMLElement): void {
+    this.fieldList.append(customElement);
+  }
+
   setTitle(title: string, tooltip?: string): void {
     if (this.titleElement.textContent !== title) {
       this.titleElement.textContent = title;

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.1038685"
+  "version": "1.0.1040084"
 }