chrome-devtools-frontend 1.0.1625079 → 1.0.1626437

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -8,7 +8,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
@@ -1157,10 +1156,19 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         return {
           jslogContext: 'css-font-palette',
           metric: null,
-          ruleBlock: '@font-*',
+          ruleBlock: '',  // Not used
           isDefined: Boolean(this.#matchedStyles.atRules().find(
               ar => ar.type() === 'font-palette-values' && ar.name()?.text === match.text)),
         };
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE:
+        return {
+          jslogContext: 'css-list-style-type',
+          metric: null,
+          ruleBlock: '',  // Not used
+          isDefined: Boolean(this.#matchedStyles.atRules().find(
+              ar => ar.type() === 'counter-style' && ar.name()?.text === match.text)),
+        };
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY:
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY_FALLBACKS:
         return {
@@ -1183,6 +1191,10 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         metric && Host.userMetrics.swatchActivated(metric);
         if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FONT_PALETTE) {
           this.#stylesContainer.jumpToFontPaletteDefinition(match.text);
+        } else if (
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE ||
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE) {
+          this.#stylesContainer.jumpToCounterStyleDefinition(match.text);
         } else {
           this.#stylesContainer.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
         }
@@ -1599,20 +1611,6 @@ export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
   }
 }
 
-// clang-format off
-export class FontRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FontMatch) {
-  // clang-format on
-  constructor(readonly treeElement: StylePropertyTreeElement) {
-    super();
-  }
-
-  override render(match: SDK.CSSPropertyParserMatchers.FontMatch, context: RenderingContext): Node[] {
-    this.treeElement.section().registerFontProperty(this.treeElement);
-    const {nodes} = Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context);
-    return nodes;
-  }
-}
-
 // clang-format off
 export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.GridTemplateMatch) {
   // clang-format on
@@ -2462,9 +2460,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
             this.getComputedStyles() ?? new Map(), this.getComputedStyleExtraFields()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
-      renderers.push(new FontRenderer(this));
-    }
     this.listItemElement.removeChildren();
     const matchedResult = this.property.parseValue(this.matchedStyles(), this.computedStyles);
     this.valueElement = Renderer.renderValueElement(this.property, matchedResult, renderers).valueElement;
@@ -3610,9 +3605,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     // This occurs when deleting the last index of a StylePropertiesSection as this.style._allProperties array gets updated
     // before we index it when setting the value for updatedProperty
     const deleteProperty = majorChange && !styleText.length;
-    if (deleteProperty) {
-      this.#parentSection.resetToolbars();
-    } else if (!deleteProperty && updatedProperty) {
+    if (!deleteProperty && updatedProperty) {
       this.property = updatedProperty;
     }
 
@@ -3655,6 +3648,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.#clearGhostTextInValue();
+    if (this.value === text) {
+      return;
+    }
     if (this.value) {
       // If there is an existing value, and user is editing the name field
       // which leads to a new value suggestion, then the previous value should no
@@ -3668,7 +3664,24 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   #clearGhostTextInValue(): void {
-    this.listItemElement.querySelector('.ghost-value-prediction')?.remove();
+    const ghostTextElement = this.listItemElement.querySelector('.ghost-value-prediction');
+    if (!ghostTextElement) {
+      return;
+    }
+    ghostTextElement.remove();
+    // If there's no value, there's nothing to restore
+    if (!this.value) {
+      return;
+    }
+    // Restore original classes
+    if (this.property.parsedOk) {
+      this.listItemElement.classList.remove('not-parsed-ok', 'invalid-property-value');
+    } else {
+      const invalidPropertyValue = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name);
+      if (!invalidPropertyValue) {
+        this.listItemElement.classList.remove('invalid-property-value');
+      }
+    }
   }
 }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -32,9 +32,8 @@ export class StylesAiCodeCompletionProvider {
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
-      throw new Error('AI code completion feature in Styles is not enabled.');
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()) {
+      throw new Error('AI code completion feature in Styles is not available.');
     }
     this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -82,7 +81,10 @@ export class StylesAiCodeCompletionProvider {
   async #updateAiCodeCompletionState(): Promise<void> {
     const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
     const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
-    const isEnabled = this.#aiCodeCompletionSetting.get();
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
+    const isEnabled =
+        AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale) &&
+        this.#aiCodeCompletionSetting.get();
     if (isAvailable && isEnabled) {
       this.#setupAiCodeCompletion();
     } else {

package/front_end/panels/elements/StylesContainer.ts

@@ -52,6 +52,7 @@ export interface StylesContainer {
   jumpToProperty(propertyName: string, sectionName?: string, blockName?: string): boolean;
   jumpToSectionBlock(section: string): void;
   jumpToFontPaletteDefinition(paletteName: string): void;
+  jumpToCounterStyleDefinition(counterStyleName: string): void;
   jumpToDeclaration(valueSource: SDK.CSSMatchedStyles.CSSValueSource): void;
   setActiveProperty(treeElement: StylePropertyTreeElement|null): void;
   addStyleUpdateListener(listener: () => void): void;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -140,6 +140,10 @@ const UIStrings = {
    * @example {color: blue;} PH1
    */
   aiSuggestionAccepted: '{PH1} Suggestion accepted.',
+  /**
+   * @description Title of the general at-rule section
+   */
+  atRuleSection: 'Other @rules',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -154,8 +158,6 @@ 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.
@@ -275,8 +277,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     });
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()) {
       this.aiCodeCompletionConfig = {
         completionContext: {},
         generationContext: {},
@@ -348,7 +349,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   jumpToFontPaletteDefinition(paletteName: string): void {
-    this.jumpToSection(`@font-palette-values ${paletteName}`, AT_RULE_SECTION_NAME);
+    this.jumpToSection(`@font-palette-values ${paletteName}`, i18nString(UIStrings.atRuleSection));
+  }
+
+  jumpToCounterStyleDefinition(counterStyleName: string): void {
+    this.jumpToSection(`@counter-style ${counterStyleName}`, i18nString(UIStrings.atRuleSection));
   }
 
   forceUpdate(): void {
@@ -1045,7 +1050,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.swatchPopoverHelper().reposition();
 
     // Record the elements tool load time after the sidepane has loaded.
-    Host.userMetrics.panelLoaded('elements', 'DevTools.Launch.Elements');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('elements', 'DevTools.Launch.Elements');
 
     this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED, {hasMatchedStyles: false});
   }
@@ -1711,7 +1716,7 @@ export class SectionBlock {
     const separatorElement = document.createElement('div');
     const block = new SectionBlock(separatorElement, true, expandedByDefault);
     separatorElement.className = 'sidebar-separator';
-    separatorElement.appendChild(document.createTextNode(AT_RULE_SECTION_NAME));
+    separatorElement.appendChild(document.createTextNode(i18nString(UIStrings.atRuleSection)));
     return block;
   }
 

package/front_end/panels/elements/stylesSidebarPane.css

@@ -217,10 +217,6 @@
   width: 100%;
 }
 
-.font-toolbar-hidden {
-  visibility: hidden;
-}
-
 .sidebar-separator {
   background-color: var(--sys-color-surface2);
   padding: 0 5px;
@@ -262,10 +258,6 @@
 
     --toolbar-height: 16px;
   }
-
-  &.shifted-toolbar {
-    padding-right: 32px;
-  }
 }
 
 .styles-pane:not(.is-editing-style)

package/front_end/panels/emulation/AdvancedApp.ts

@@ -13,7 +13,7 @@ import {type Bounds, Events, InspectedPagePlaceholder} from './InspectedPagePlac
 
 let appInstance: AdvancedApp;
 
-export class AdvancedApp implements Common.App.App {
+export class AdvancedApp implements UI.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
   private deviceModeView!: DeviceModeWrapper;
   private inspectedPagePlaceholder!: InspectedPagePlaceholder;
@@ -188,7 +188,7 @@ globalThis.Emulation.AdvancedApp = AdvancedApp;
 
 let advancedAppProviderInstance: AdvancedAppProvider;
 
-export class AdvancedAppProvider implements Common.AppProvider.AppProvider {
+export class AdvancedAppProvider implements UI.AppProvider.AppProvider {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): AdvancedAppProvider {
@@ -200,7 +200,7 @@ export class AdvancedAppProvider implements Common.AppProvider.AppProvider {
     return advancedAppProviderInstance;
   }
 
-  createApp(): Common.App.App {
+  createApp(): UI.App.App {
     return AdvancedApp.instance();
   }
 }