chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -49,6 +49,7 @@ import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_e
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import * as ElementsComponents from './components/components.js';
 import type {ComputedStyleModel, CSSModelChangedEvent} from './ComputedStyleModel.js';
@@ -58,8 +59,8 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import * as LayersWidget from './LayersWidget.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
 import {
+  AtRuleSection,
   BlankStylePropertiesSection,
-  FontPaletteValuesRuleSection,
   FunctionRuleSection,
   HighlightPseudoStylePropertiesSection,
   KeyframePropertiesSection,
@@ -139,6 +140,8 @@ const MIN_FOLDED_SECTIONS_COUNT = 5;
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
 /** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
+/** Title of the general at-rule section */
+export const AT_RULE_SECTION_NAME = '@font-*';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific
 // highlighting mode on the current element.
@@ -354,6 +357,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.jumpToSection(functionName, FUNCTION_SECTION_NAME);
   }
 
+  jumpToFontPaletteDefinition(paletteName: string): void {
+    this.jumpToSection(`@font-palette-values ${paletteName}`, AT_RULE_SECTION_NAME);
+  }
+
   forceUpdate(): void {
     this.needsForceUpdate = true;
     this.#swatchPopoverHelper.hide();
@@ -1153,14 +1160,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       blocks.push(block);
     }
 
-    const fontPaletteValuesRule = matchedStyles.fontPaletteValuesRule();
-    if (fontPaletteValuesRule) {
-      const block = SectionBlock.createFontPaletteValuesRuleBlock(fontPaletteValuesRule.name().text);
-      this.idleCallbackManager.schedule(() => {
-        block.sections.push(
-            new FontPaletteValuesRuleSection(this, matchedStyles, fontPaletteValuesRule.style, sectionIdx));
-        sectionIdx++;
-      });
+    const atRules = matchedStyles.atRules();
+    if (atRules.length > 0) {
+      const expandedByDefault = atRules.length <= MIN_FOLDED_SECTIONS_COUNT;
+      const block = SectionBlock.createAtRuleBlock(expandedByDefault);
+      for (const atRule of atRules) {
+        this.idleCallbackManager.schedule(() => {
+          block.sections.push(new AtRuleSection(this, matchedStyles, atRule.style, sectionIdx, expandedByDefault));
+          sectionIdx++;
+        });
+      }
       blocks.push(block);
     }
 
@@ -1543,7 +1552,7 @@ export class SectionBlock {
     const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
     const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
-    const link = await Common.Linkifier.Linkifier.linkify(node, {
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
       tooltip: undefined,
     });
@@ -1575,11 +1584,12 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
-  static createFontPaletteValuesRuleBlock(name: string): SectionBlock {
+  static createAtRuleBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
+    const block = new SectionBlock(separatorElement, true, expandedByDefault);
     separatorElement.className = 'sidebar-separator';
-    separatorElement.textContent = `@font-palette-values ${name}`;
-    return new SectionBlock(separatorElement);
+    separatorElement.appendChild(document.createTextNode(AT_RULE_SECTION_NAME));
+    return block;
   }
 
   static createPositionTryBlock(positionTryName: string): SectionBlock {
@@ -1595,7 +1605,7 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('inherited')}`);
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFroms));
-    const link = await Common.Linkifier.Linkifier.linkify(node, {
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
       tooltip: undefined,
     });

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

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.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 type * as PanelsCommon from '../common/common.js';
 
 import type * as Elements from './elements.js';
 
@@ -177,6 +178,14 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (elementsModul
   return getClassCallBack(loadedElementsModule);
 }
 
+let loadedPanelsCommonModule: (typeof PanelsCommon|undefined);
+async function loadPanelsCommonModule(): Promise<typeof PanelsCommon> {
+  if (!loadedPanelsCommonModule) {
+    loadedPanelsCommonModule = await import('../common/common.js');
+  }
+  return loadedPanelsCommonModule;
+}
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'elements',
@@ -698,7 +707,7 @@ Common.Linkifier.registerLinkifier({
     ];
   },
   async loadLinkifier() {
-    const Elements = await loadElementsModule();
-    return Elements.DOMLinkifier.Linkifier.instance();
+    const PanelsCommon = await loadPanelsCommonModule();
+    return PanelsCommon.DOMLinkifier.Linkifier.instance();
   },
 });

package/front_end/panels/elements/elements.ts

@@ -5,7 +5,6 @@
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
 import './ComputedStyleModel.js';
-import './DOMLinkifier.js';
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
@@ -37,7 +36,6 @@ import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
 import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
-import * as DOMLinkifier from './DOMLinkifier.js';
 import * as DOMPath from './DOMPath.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
@@ -73,7 +71,6 @@ export {
   ComputedStyleWidget,
   CSSRuleValidator,
   CSSValueTraceView,
-  DOMLinkifier,
   DOMPath,
   ElementsPanel,
   ElementsSidebarPane,