chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -267,7 +267,7 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
           const formattedTextColor = formatColor(blendedTextColor);
           const formattedBackgroundColor = formatColor(blendedBackgroundColor.asLegacyColor());
           const key = `${formattedTextColor}_${formattedBackgroundColor}`;
-          if (Root.Runtime.experiments.isEnabled('apca')) {
+          if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
             const contrastRatio = contrastInfo.contrastRatioAPCA();
             const threshold = contrastInfo.contrastRatioAPCAThreshold();
             const passes = contrastRatio && threshold ? Math.abs(contrastRatio) >= threshold : false;

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -3,92 +3,42 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ComputedStyleWidget} from './ComputedStyleWidget.js';
-import {StylesSidebarPane} from './StylesSidebarPane.js';
 
+/**
+ * A thin wrapper around the CSS Model to gather up changes in CSS files that
+ * could impact a node's computed styles.
+ * Callers are expected to initiate tracking of the Node themselves via the CSS
+ * Model trackComputedStyleUpdatesForNode method.
+ */
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #node: SDK.DOMModel.DOMNode|null;
   #cssModel: SDK.CSSModel.CSSModel|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
-  private currentTrackedNodeId?: number;
 
-  constructor() {
+  constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
     this.#cssModel = null;
     this.eventListeners = [];
-    this.#node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+    this.#node = node ?? null;
   }
 
-  dispose(): void {
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+  get node(): SDK.DOMModel.DOMNode|null {
+    return this.#node;
   }
 
-  node(): SDK.DOMModel.DOMNode|null {
-    return this.#node;
+  set node(node: SDK.DOMModel.DOMNode|null) {
+    this.#node = node;
+    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
+    this.onCSSModelChanged(null);
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
-  // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
-  // For that case, we want to only run this function once.
-  private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
-    if (!this.#node) {
-      // There isn't a node selected now, so let's stop tracking computed style updates for the previously tracked node.
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
-    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
-    const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
-        (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
-    // There is a selected node but not the computed style widget nor the styles tab is visible.
-    // If there is a previously tracked node let's stop tracking computed style updates for that node.
-    if (!shouldTrackComputedStyleUpdates) {
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    // Either computed style widget or styles tab is visible
-    // if the currently tracked node id is not the same as the selected node
-    // let's start tracking the currently selected node.
-    if (this.currentTrackedNodeId !== this.#node.id) {
-      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.#node.id);
-      this.currentTrackedNodeId = this.#node.id;
-    }
-  }, 100);
-
-  private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    this.#node = event.data;
-    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
-    this.onCSSModelChanged(null);
-    this.evaluateTrackingComputedStyleUpdatesForNode();
-  }
-
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -97,6 +47,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     this.#cssModel = cssModel;
     const domModel = cssModel ? cssModel.domModel() : null;
     const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
+
     if (cssModel && domModel && resourceTreeModel) {
       this.eventListeners = [
         cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),
@@ -155,7 +106,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   private elementNode(): SDK.DOMModel.DOMNode|null {
-    const node = this.node();
+    const node = this.node;
     if (!node) {
       return null;
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -319,7 +319,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         return link;
       }
       return null;
-    }, () => this.computedStyleModel.node());
+    }, () => this.computedStyleModel.node);
 
     const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
     fontsWidget.show(this.contentElement);
@@ -356,7 +356,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node();
+    const node = this.computedStyleModel.node;
     if (!node || !this.computedStyleModel.cssModel()) {
       return null;
     }
@@ -370,7 +370,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
         SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node() ? matchedStyles : null;
+      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
     }
   }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -199,6 +199,8 @@ const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement =>
 
 let elementsPanelInstance: ElementsPanel;
 
+export const DEFAULT_COMPUTED_STYLES_DEBOUNCE_MS = 100;
+
 export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.Searchable,
                                                              SDK.TargetManager.SDKModelObserver<SDK.DOMModel.DOMModel>,
                                                              UI.View.ViewLocationResolver {
@@ -240,6 +242,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
+  #computedStyleModel: ComputedStyleModel;
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
@@ -263,7 +266,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled('full-accessibility-tree')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       this.initializeFullAccessibilityTreeView();
     }
     this.mainContainer.appendChild(this.domTreeContainer);
@@ -299,10 +302,20 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    const computedStyleModel = new ComputedStyleModel();
-    this.stylesWidget = new StylesSidebarPane(computedStyleModel);
-    this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
-    this.metricsWidget = new MetricsSidebarPane(computedStyleModel);
+    this.#computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, event => {
+      this.#computedStyleModel.node = event.data;
+      this.evaluateTrackingComputedStyleUpdatesForNode();
+    });
+
+    UI.Context.Context.instance().addFlavorChangeListener(
+        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
+
+    this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
+    this.computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
     Common.Settings.Settings.instance()
         .moduleSetting('sidebar-position')
@@ -343,6 +356,23 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
+  // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
+  // For that case, we want to only run this function once.
+  private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
+    const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    if (!selectedNode) {
+      return;
+    }
+
+    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
+    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
+    const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
+        (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
+
+    void selectedNode.domModel()?.cssModel()?.trackComputedStyleUpdatesForNode(
+        shouldTrackComputedStyleUpdates ? selectedNode.id : undefined);
+  }, 100);
+
   private handleElementExpanded(): void {
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -21,7 +21,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.computedStyleModelInternal.node();
+    return this.computedStyleModelInternal.node;
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -606,7 +606,7 @@ export class ElementsTreeOutline extends
                 return html`
                   <div class="squiggles-content-item">
                   <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
-                  <x-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</x-link>
+                  <devtools-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</devtools-link>
                   <span>${elementIssueDetails.tooltip}</span>
                   </div>`;})}
             </div>`, popover.contentElement);

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -93,7 +93,7 @@ export class PlatformFontsWidget extends UI.Widget.VBox {
 
   override async performUpdate(): Promise<void> {
     const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node();
+    const node = this.sharedModel.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -128,6 +128,7 @@ export class StylePropertiesSection {
   readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   private computedStyles: Map<string, string>|null;
   private parentsComputedStyles: Map<string, string>|null;
+  private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   editable: boolean;
   private hoverTimer: number|null = null;
   private willCauseCancelEditing = false;
@@ -168,7 +169,8 @@ export class StylePropertiesSection {
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null, customHeaderText?: string) {
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null, customHeaderText?: string) {
     this.#customHeaderText = customHeaderText;
     this.parentPane = parentPane;
     this.sectionIdx = sectionIdx;
@@ -176,6 +178,7 @@ export class StylePropertiesSection {
     this.matchedStyles = matchedStyles;
     this.computedStyles = computedStyles;
     this.parentsComputedStyles = parentsComputedStyles;
+    this.computedStyleExtraFields = computedStyleExtraFields;
     this.editable = Boolean(style.styleSheetId && style.range);
     this.originalPropertiesCount = style.leadingProperties().length;
     this.customPopulateCallback = () => this.populateStyle(this.styleInternal, this.propertiesTreeOutline);
@@ -257,7 +260,7 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.editable) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.editable) {
       this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
       this.fontEditorSectionManager = new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(), this);
       this.fontEditorButton =
@@ -330,6 +333,10 @@ export class StylePropertiesSection {
     this.parentsComputedStyles = parentsComputedStyles;
   }
 
+  setComputedStyleExtraFields(computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): void {
+    this.computedStyleExtraFields = computedStyleExtraFields;
+  }
+
   updateAuthoringHint(): void {
     let child = this.propertiesTreeOutline.firstChild();
     while (child) {
@@ -1165,6 +1172,7 @@ export class StylePropertiesSection {
       });
       item.setComputedStyles(this.computedStyles);
       item.setParentsComputedStyles(this.parentsComputedStyles);
+      item.setComputedStyleExtraFields(this.computedStyleExtraFields);
       parent.appendChild(item);
     }
 
@@ -1677,7 +1685,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
       insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null, null);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetHeader = styleSheetHeader;
@@ -1779,7 +1787,7 @@ export class RegisteredPropertiesSection extends StylePropertiesSection {
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, propertyName: string,
       expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null, propertyName);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null, propertyName);
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
     }
@@ -1814,7 +1822,7 @@ export class FunctionRuleSection extends StylePropertiesSection {
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, children: SDK.CSSRule.CSSNestedStyle[], sectionIdx: number,
       functionName: string, expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null, functionName);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null, functionName);
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
     }
@@ -1876,7 +1884,7 @@ export class AtRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, expandedByDefault: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'font-palette-values-key';
     if (!expandedByDefault) {
       this.element.classList.add('hidden');
@@ -1888,7 +1896,7 @@ export class PositionTryRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, active: boolean) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'position-try-values-key';
     this.propertiesTreeOutline.element.classList.toggle('no-affect', !active);
   }
@@ -1898,7 +1906,7 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
-    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null, null);
     this.selectorElement.className = 'keyframe-key';
   }