chrome-devtools-frontend 1.0.1039659 → 1.0.1040337

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/components/BackForwardCacheView.ts

@@ -280,11 +280,11 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
-      <div class='report-line'>
-        <div class='report-key'>
+      <div class="report-line">
+        <div class="report-key">
           ${i18nString(UIStrings.url)}
         </div>
-        <div class='report-value'>
+        <div class="report-value">
           ${this.#frame.url}
         </div>
       </div>
@@ -339,11 +339,11 @@ export class BackForwardCacheView extends HTMLElement {
       topFrameElement.setLeadingIcons([UI.Icon.Icon.create('mediumicon-frame')]);
     }
     return LitHtml.html`
-    <div class='report-line'>
-    <div class='report-key'>
+    <div class="report-line">
+    <div class="report-key">
       ${i18nString(UIStrings.framesTitle)}
     </div>
-    <div class='report-value'>
+    <div class="report-value">
       ${treeOutline.element}
     </div>
   </div>`;
@@ -395,7 +395,7 @@ export class BackForwardCacheView extends HTMLElement {
         // clang-format off
         return LitHtml.html`
           <${ReportView.ReportView.ReportSection.litTagName}>
-            <div class='status'>
+            <div class="status">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                 iconName: 'ic_checkmark_16x16',
                 color: 'green',
@@ -412,7 +412,7 @@ export class BackForwardCacheView extends HTMLElement {
         // clang-format off
         return LitHtml.html`
           <${ReportView.ReportView.ReportSection.litTagName}>
-            <div class='status'>
+            <div class="status">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                   iconName: 'circled_backslash_icon',
                   color: 'var(--color-text-secondary)',
@@ -496,7 +496,7 @@ export class BackForwardCacheView extends HTMLElement {
       ${explanations.length > 0 ? LitHtml.html`
         <${ReportView.ReportView.ReportSectionHeader.litTagName}>
           ${category}
-          <div class='help-outline-icon'>
+          <div class="help-outline-icon">
             <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
               iconName: 'help_outline',
               color: 'var(--color-text-secondary)',
@@ -530,9 +530,9 @@ export class BackForwardCacheView extends HTMLElement {
       return LitHtml.nothing;
     }
     const rows = [LitHtml.html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
-    rows.push(...frames.map(url => LitHtml.html`<div class='text-ellipsis' title=${url}>${url}</div>`));
+    rows.push(...frames.map(url => LitHtml.html`<div class="text-ellipsis" title=${url}>${url}</div>`));
     return LitHtml.html`
-      <div class='explanation-frames'>
+      <div class="explanation-frames">
         <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
         {rows} as
         ExpandableList.ExpandableList.ExpandableListData}></${ExpandableList.ExpandableList.ExpandableList.litTagName}>
@@ -558,7 +558,7 @@ export class BackForwardCacheView extends HTMLElement {
       <${ReportView.ReportView.ReportSection.litTagName}>
         ${(explanation.reason in NotRestoredReasonDescription) ?
           LitHtml.html`
-            <div class='circled-exclamation-icon'>
+            <div class="circled-exclamation-icon">
               <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
                 iconName: 'circled_exclamation_icon',
                 color: 'orange',
@@ -574,7 +574,7 @@ export class BackForwardCacheView extends HTMLElement {
            </div>` :
             LitHtml.nothing}
       </${ReportView.ReportView.ReportSection.litTagName}>
-      <div class='gray-text'>
+      <div class="gray-text">
         ${explanation.reason}
       </div>
       ${this.#renderFramesPerReason(frames)}

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.1040337"
 }