chrome-devtools-frontend 1.0.1039659 → 1.0.1040084

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