chrome-devtools-frontend 1.0.1039140 → 1.0.1040170

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/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.1039140"
+  "version": "1.0.1040170"
 }