chrome-devtools-frontend 1.0.1683520 → 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/StandaloneStylesContainer.ts

@@ -68,17 +68,8 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
-    this.#computedStyleModelInternal.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
-    this.#computedStyleModelInternal.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#onComputedStyleChanged, this);
-  }
-
-  #onComputedStyleChanged(): void {
-    if (this.isEditingStyle || this.userOperation) {
-      return;
-    }
-    this.#rebuildAndUpdate();
+    this.#computedStyleModelInternal.addEventListener(ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED,
+                                                      this.#onCSSModelChanged, this);
   }
 
   #rebuildAndUpdate(): void {
@@ -238,6 +229,9 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     this.isEditingStyle = editing;
   }
 
+  suppressResets(): void {
+  }
+
   setUserOperation(userOperation: boolean): void {
     this.userOperation = userOperation;
   }

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

@@ -2361,6 +2361,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     this.#stylesContainer.setUserOperation(true);
+    this.#stylesContainer.suppressResets();
     const success = await this.property.setDisabled(disabled);
     this.#stylesContainer.setUserOperation(false);
 
@@ -3124,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;
@@ -3652,6 +3659,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const currentNode = this.#stylesContainer.node();
     this.#stylesContainer.setUserOperation(true);
+    this.#stylesContainer.suppressResets();
 
     styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
     styleText += ')'.repeat(Platform.StringUtilities.countUnmatchedLeftParentheses(styleText));

package/front_end/panels/elements/StylesContainer.ts

@@ -29,6 +29,7 @@ export interface StylesContainer {
   filterRegex(): RegExp|null;
   setEditingStyle(editing: boolean): void;
   setUserOperation(userOperation: boolean): void;
+  suppressResets(): void;
   forceUpdate(): void;
   hideAllPopovers(): void;