chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -40,7 +40,7 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualElements from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
-import {adornerRef, ElementsTreeElement} from './ElementsTreeElement.js';
+import {adornerRef, ElementsTreeElement, handleAdornerKeydown} from './ElementsTreeElement.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
 const {html, render} = Lit;
@@ -66,10 +66,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     <span class="elements-tree-shortcut-title">\u21AA ${input.title}</span>
     <devtools-adorner
       .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
-      class="adorner-reveal"
-      jslog=${VisualElements.adorner('reveal')}
+      class="adorner-reveal clickable"
+      role=button
+      tabindex=0
+      jslog=${VisualElements.adorner('reveal').track({click: true})}
       aria-label=${i18nString(UIStrings.reveal)}
       @click=${input.onRevealAdornerClick}
+      @keydown=${handleAdornerKeydown(input.onRevealAdornerClick)}
       @mousedown=${(e: Event) => e.consume()}
       ${adornerRef()}>
       <span class="adorner-with-icon">

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -124,6 +124,10 @@ const UIStrings = {
    * @description Accessibility label for the button that collapses an expanded CSS rule in the Styles tab.
    */
   collapseExpandedRule: 'Collapse expanded rule',
+  /**
+   * @description Text displayed next to a CSS rule that was previously matched but no longer is.
+   */
+  notMatching: 'This rule doesn’t currently match the selected element',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylePropertiesSection.ts', UIStrings);
@@ -149,7 +153,7 @@ export interface ActiveAiSuggestion {
 export class StylePropertiesSection {
   protected stylesContainer: StylesContainer;
   styleInternal: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
-  readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   private computedStyles: Map<string, string>|null;
   private parentsComputedStyles: Map<string, string>|null;
   private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
@@ -191,17 +195,21 @@ export class StylePropertiesSection {
 
   private ghostStyleTreeElements: GhostStylePropertyTreeElement[] = [];
   #activeAiSuggestion?: ActiveAiSuggestion;
-
-  constructor(
-      stylesContainer: StylesContainer, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null,
-      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null, customHeaderText?: string) {
+  #isInactive = false;
+  #manuallyCollapsed = false;
+  #statusElement: Icon|undefined;
+  #lastInheritedNode: SDK.DOMModel.DOMNode|null = null;
+
+  constructor(stylesContainer: StylesContainer, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+              style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number,
+              computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
+              computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null, customHeaderText?: string) {
     this.#customHeaderText = customHeaderText;
     this.stylesContainer = stylesContainer;
     this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
+    this.#lastInheritedNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
     this.computedStyles = computedStyles;
     this.parentsComputedStyles = parentsComputedStyles;
     this.computedStyleExtraFields = computedStyleExtraFields;
@@ -283,6 +291,9 @@ export class StylePropertiesSection {
     this.selectorElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     this.#specificityTooltips = selectorContainer.createChild('span');
 
+    this.#statusElement = createIcon('warning', 'styles-section-status hidden medium');
+    selectorContainer.appendChild(this.#statusElement);
+
     // We only add braces for style rules with selectors and non-style rules, which create their own sections.
     if (headerText.length > 0 || !(rule instanceof SDK.CSSRule.CSSStyleRule)) {
       const openBrace = selectorContainer.createChild('span', 'sidebar-pane-open-brace');
@@ -384,6 +395,42 @@ export class StylePropertiesSection {
     return this.sectionIdx;
   }
 
+  setInactive(inactive: boolean): void {
+    const wasInactive = this.#isInactive;
+    this.#isInactive = inactive;
+    this.element.classList.toggle('styles-section-inactive', inactive);
+    this.propertiesTreeOutline.element.classList.toggle('styles-section-inactive', inactive);
+    if (this.#statusElement) {
+      this.#statusElement.classList.toggle('hidden', !inactive);
+      this.#statusElement.title = inactive ? i18nString(UIStrings.notMatching) : '';
+    }
+    this.markSelectorMatches();
+    if (wasInactive !== inactive) {
+      this.updateCollapsedState();
+    }
+  }
+
+  isInactive(): boolean {
+    return this.#isInactive;
+  }
+
+  rebuildWithPayload(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+                     style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, computedStyles: Map<string, string>|null,
+                     parentsComputedStyles: Map<string, string>|null,
+                     computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): void {
+    this.matchedStyles = matchedStyles;
+    this.styleInternal = style;
+    this.computedStyles = computedStyles;
+    this.parentsComputedStyles = parentsComputedStyles;
+    this.computedStyleExtraFields = computedStyleExtraFields;
+    this.#lastInheritedNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
+    this.update(true);
+  }
+
+  inheritedNode(): SDK.DOMModel.DOMNode|null {
+    return this.#lastInheritedNode;
+  }
+
   treeScopeDistance(): number {
     const treeScope = this.styleInternal.parentRule?.treeScope;
     if (!treeScope) {
@@ -1380,6 +1427,10 @@ export class StylePropertiesSection {
       return false;
     }
 
+    if (this.#isInactive) {
+      return true;
+    }
+
     const style = this.styleInternal;
     const properties = style.leadingProperties();
 
@@ -1407,10 +1458,15 @@ export class StylePropertiesSection {
   }
 
   updateCollapsedState(): void {
+    if (this.#manuallyCollapsed) {
+      // Preserve user action if they have manually toggled the collapse state.
+      return;
+    }
     const shouldCollapse = this.#shouldCollapse();
     // Mark as collapsible so the toggle icon is always shown for
     // sections that can be collapsed, even after manual expansion.
-    this.element.classList.toggle('collapsible', shouldCollapse);
+    // Always make it an option to collapse inactive styles.
+    this.element.classList.toggle('collapsible', shouldCollapse || this.#isInactive);
     this.#setCollapsed(shouldCollapse);
   }
 
@@ -1428,6 +1484,7 @@ export class StylePropertiesSection {
   }
 
   #toggleCollapsed(): void {
+    this.#manuallyCollapsed = true;
     this.#setCollapsed(!this.#isCollapsed);
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3125,6 +3125,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    if (this.#lazyRender) {
+      this.#stylesContainer.untrackForLazyRendering(this.listItemElement);
+      this.#lazyRender = false;
+      this.updateTitle();
+    }
+
     const selectedElement = context.isEditingName ? this.nameElement : this.valueElement;
     if (!selectedElement) {
       return;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -210,7 +210,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private isActivePropertyHighlighted = false;
   private initialUpdateCompleted = false;
   hasMatchedStyles = false;
-  private sectionBlocks: SectionBlock[] = [];
+  sectionBlocks: SectionBlock[] = [];
+  #allKnownBlocks = new Map<string, SectionBlock>();
+  #lastNode: SDK.DOMModel.DOMNode|null = null;
   private idleCallbackManager: IdleCallbackManager|null = null;
   private needsForceUpdate = false;
   private isSuppressingResets = false;
@@ -247,6 +249,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     Common.Settings.Settings.instance()
         .moduleSetting('collapse-non-contributing-css-rules')
         .addChangeListener(this.updateCollapsedSectionsSetting, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('show-inactive-css-rules')
+        .addChangeListener(this.requestUpdate, this);
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
@@ -562,6 +567,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       section.update(section === editedSection);
     }
 
+    this.#performSyncViewportCheck();
+
     if (this.#filterRegex) {
       this.updateFilter();
     }
@@ -1009,9 +1016,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     this.#elementsForSyncViewportCheck = [];
     this.linkifier.reset();
+    const node = this.node();
+    if (this.#lastNode !== node) {
+      // Clear inactive styles when a different node is selected.
+      this.#allKnownBlocks.clear();
+      this.#lastNode = node;
+    }
+
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
 
-    const node = this.node();
     this.hasMatchedStyles = matchedStyles !== null && node !== null;
     if (!this.hasMatchedStyles) {
       this.sectionBlocks = [];
@@ -1103,6 +1116,36 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.matchedStyles = matchedStyles;
   }
 
+  setNodeForTest(node: SDK.DOMModel.DOMNode): void {
+    if (this.#lastNode !== node) {
+      this.#allKnownBlocks.clear();
+      this.#lastNode = node;
+    }
+  }
+
+  private getStyleId(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): string {
+    if (style.range) {
+      return `${style.styleSheetId || ''}:${style.range.toString()}`;
+    }
+    if (style.type === SDK.CSSStyleDeclaration.Type.Inline || style.type === SDK.CSSStyleDeclaration.Type.Attributes) {
+      return style.type;
+    }
+    if (style.type === SDK.CSSStyleDeclaration.Type.Animation) {
+      return `${style.type}:${style.animationName() || ''}:${style.cssText}`;
+    }
+    const parentRule = style.parentRule;
+    if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
+      return `${style.type}:${parentRule.selectorText()}`;
+    }
+    if (parentRule instanceof SDK.CSSRule.CSSKeyframeRule) {
+      return `${style.type}:${parentRule.parentRuleName()}:${parentRule.key().text}`;
+    }
+    if (parentRule instanceof SDK.CSSRule.CSSPropertyRule) {
+      return `${style.type}:${parentRule.propertyName().text}`;
+    }
+    return `${style.type}:${style.cssText}`;
+  }
+
   rebuildSectionsForMatchedStyleRulesForTest(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
                                              computedStyles: Map<string, string>|null,
                                              parentsComputedStyles: Map<string, string>|null,
@@ -1128,7 +1171,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
 
-    let lastLayerParent: SectionBlock|undefined;
+    let lastLayerParent: SectionBlock|undefined = blocks[0];
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers = false;
 
@@ -1160,12 +1203,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // Always render eagerly for layout tests.
     this.#shouldRenderLazily = !Host.InspectorFrontendHost.isUnderTest() && totalProperties > LAZY_RENDER_THRESHOLD;
 
-    for (const style of matchedStyles.nodeStyles()) {
+    const activeStyles = matchedStyles.nodeStyles().filter(style => {
+      const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
+          style.type === SDK.CSSStyleDeclaration.Type.Animation;
+      return !isTransitionOrAnimationStyle || animationsPanelVisible || !cssAnimationsOnlyWhenAnimationsTabOpen;
+    });
+
+    for (const style of activeStyles) {
       const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
           style.type === SDK.CSSStyleDeclaration.Type.Animation;
-      if (isTransitionOrAnimationStyle && cssAnimationsOnlyWhenAnimationsTabOpen && !animationsPanelVisible) {
-        continue;
-      }
 
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
@@ -1355,7 +1401,59 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     await this.idleCallbackManager.awaitDone();
 
-    return blocks;
+    const showInactiveCSSRules = Common.Settings.Settings.instance().moduleSetting('show-inactive-css-rules').get();
+    if (!showInactiveCSSRules) {
+      return blocks;
+    }
+
+    return this.mergeInactiveStyles(blocks);
+  }
+
+  private computeBlockIds(blocks: SectionBlock[]): Map<SectionBlock, string> {
+    let nullBlockCounter = 0;
+    const blockIds = new Map<SectionBlock, string>();
+    for (const block of blocks) {
+      blockIds.set(block, block.titleElement()?.textContent || `MAIN_BLOCK_NULL_${nullBlockCounter++}`);
+    }
+    return blockIds;
+  }
+
+  private mergeInactiveStyles(blocks: SectionBlock[]): SectionBlock[] {
+    const blockIds = this.computeBlockIds(blocks);
+    for (const [id, block] of this.#allKnownBlocks) {
+      if (!blockIds.has(block)) {
+        blockIds.set(block, id);
+      }
+    }
+    const getBlockId = (block: SectionBlock): string => blockIds.get(block) || 'UNKNOWN_BLOCK';
+
+    for (const block of blocks) {
+      const bid = getBlockId(block);
+      const knownBlock = this.#allKnownBlocks.get(bid);
+      if (knownBlock) {
+        block.sections = mergeOrderedItems(
+            knownBlock.sections,
+            block.sections,
+            section => this.getStyleId(section.styleInternal),
+            section => section.setInactive(true),
+        );
+      }
+    }
+
+    const oldBlocks = Array.from(this.#allKnownBlocks.values());
+    const finalBlocks = mergeOrderedItems(
+        oldBlocks,
+        blocks,
+        getBlockId,
+        block => block.sections.forEach(section => section.setInactive(true)),
+    );
+
+    this.#allKnownBlocks.clear();
+    for (const block of finalBlocks) {
+      this.#allKnownBlocks.set(getBlockId(block), block);
+    }
+
+    return finalBlocks;
   }
 
   async createNewRuleInViaInspectorStyleSheet(): Promise<void> {
@@ -2592,6 +2690,43 @@ export function escapeUrlAsCssComment(urlText: string): string {
   return url.toString();
 }
 
+/**
+ * Merges a newly active list of items with an existing (previously known) list of items,
+ * preserving the relative order of inactive items while updating and inserting active items.
+ */
+export function mergeOrderedItems<T>(
+    oldItems: T[],
+    newItems: T[],
+    getId: (item: T) => string,
+    markInactive: (item: T) => void,
+    ): T[] {
+  const newIds = new Set(newItems.map(getId));
+  const merged: T[] = [];
+  let newIdx = 0;
+
+  for (const oldItem of oldItems) {
+    const oldId = getId(oldItem);
+    if (newIds.has(oldId)) {
+      while (newIdx < newItems.length) {
+        const newItem = newItems[newIdx++];
+        merged.push(newItem);
+        if (getId(newItem) === oldId) {
+          break;
+        }
+      }
+    } else {
+      markInactive(oldItem);
+      merged.push(oldItem);
+    }
+  }
+
+  while (newIdx < newItems.length) {
+    merged.push(newItems[newIdx++]);
+  }
+
+  return merged;
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {

package/front_end/panels/elements/classesPaneWidget.css

@@ -6,8 +6,8 @@
 
 .styles-element-classes-pane {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 6px 2px 2px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) var(--sys-size-2) var(--sys-size-2);
 }
 
 .styles-element-classes-container {
@@ -21,15 +21,15 @@
 }
 
 .styles-element-classes-pane .title-container {
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .styles-element-classes-pane .new-class-input {
   padding-left: 3px;
   padding-right: 3px;
   overflow: hidden;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
   line-height: 15px;
   margin-left: 3px;
   width: calc(100% - 7px);
@@ -37,6 +37,6 @@
   cursor: text;
 
   &:hover {
-    box-shadow: 0 0 0 1px var(--ref-palette-neutral90);
+    box-shadow: 0 0 0 var(--sys-size-1) var(--ref-palette-neutral90);
   }
 }

package/front_end/panels/elements/components/stylePropertyEditor.css

@@ -11,7 +11,7 @@
 .row {
   padding: 0;
   color: var(--sys-color-on-surface);
-  padding-bottom: 16px;
+  padding-bottom: var(--sys-size-8);
 }
 
 .row:last-child {
@@ -19,7 +19,7 @@
 }
 
 .property {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
   white-space: nowrap;
 }
 
@@ -49,12 +49,12 @@
 }
 
 .button {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   background-color: var(--sys-color-cdt-base-container);
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
+  width: var(--sys-size-11);
+  height: var(--sys-size-11);
+  min-width: var(--sys-size-11);
+  min-height: var(--sys-size-11);
   padding: 0;
   margin: 0;
   display: flex;

package/front_end/panels/elements/computedStyleWidget.css

@@ -6,7 +6,7 @@
 
 @scope to (devtools-widget > *) {
   .styles-sidebar-pane-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex-shrink: 0;
   }
 

package/front_end/panels/elements/elementStatePaneWidget.css

@@ -6,22 +6,22 @@
 @scope to (devtools-widget > *) {
   .styles-element-state-pane {
     overflow: hidden;
-    padding-left: 2px;
+    padding-left: var(--sys-size-2);
     background-color: var(--sys-color-cdt-base-container);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     margin-top: 0;
-    padding-bottom: 2px;
+    padding-bottom: var(--sys-size-2);
   }
 
   .styles-element-state-pane > .page-state-checkbox {
-    margin-block: 6px;
+    margin-block: var(--sys-size-4);
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--sys-size-2);
   }
 
   .styles-element-state-pane .section-header {
-    margin: 8px 4px 6px;
+    margin: var(--sys-size-5) var(--sys-size-3) var(--sys-size-4);
     color: var(--color-text-secondary);
   }
 
@@ -36,14 +36,14 @@
 
   .pseudo-states-container {
     display: grid;
-    column-gap: 12px;
+    column-gap: var(--sys-size-6);
     grid-template-columns: repeat(2, 1fr);
     grid-auto-flow: row;
   }
 
   .pseudo-states-container.specific-pseudo-states {
     grid-template-columns: repeat(2, 1fr);
-    margin-bottom: 4px;
+    margin-bottom: var(--sys-size-3);
   }
 
   .force-specific-element-header:focus {

package/front_end/panels/elements/elements-meta.ts

@@ -225,6 +225,10 @@ const UIStrings = {
    * @description Whether CSS rules that do not apply active styles in the Styles tab are collapsed by default.
    */
   collapseNonContributingCSSRules: 'Collapse non-contributing CSS rules',
+  /**
+   * @description Title of a setting under the Elements category in Settings.
+   */
+  showInactiveCSSRules: 'Show inactive CSS rules',
   /**
    * @description Title of a setting in the Event listeners tab.
    */
@@ -642,6 +646,16 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  order: 8,
+  title: i18nLazyString(UIStrings.showInactiveCSSRules),
+  settingName: 'show-inactive-css-rules',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'show-event-listeners-for-ancestors',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/elements/elementsPanel.css

@@ -37,7 +37,7 @@
 
 #elements-content {
   overflow: auto;
-  padding: 2px 0 0;
+  padding: var(--sys-size-2) 0 0;
   height: 100%;
 }
 
@@ -47,7 +47,7 @@
 }
 
 .style-panes-wrapper:not(.computed-styles-pane-wrapper) > div:not(:last-child) {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .style-panes-wrapper > div:has(+ .ai-code-completion-summary-toolbar-container) {
@@ -71,14 +71,14 @@
 
 #elements-crumbs {
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
   width: 100%;
 }
 
 devtools-adorner-settings-pane {
   margin-bottom: 10px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: auto;
 }