chrome-devtools-frontend 1.0.1520535 → 1.0.1521223

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -221,6 +221,16 @@ const UIStrings = {
    * the overlay showing CSS scroll snapping for the current element.
    */
   disableScrollSnap: 'Disable scroll-snap overlay',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it forces
+   * the element into applying its starting-style rules.
+   */
+  enableStartingStyle: 'Enable @starting-style mode',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it no longer
+   * forces the element into applying its starting-style rules.
+   */
+  disableStartingStyle: 'Disable @starting-style mode',
   /**
    * @description Label of an adorner in the Elements panel. When clicked, it redirects
    * to the Media Panel.
@@ -2586,6 +2596,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.pushMediaAdorner(this.tagTypeContext);
     }
 
+    if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
+      const affectedByStartingStyles = node.affectedByStartingStyles();
+      if (affectedByStartingStyles) {
+        this.pushStartingStyleAdorner(this.tagTypeContext);
+      }
+    }
+
     if (node.attributes().find(attr => attr.name === 'popover')) {
       this.pushPopoverAdorner(this.tagTypeContext);
     }
@@ -2756,6 +2773,36 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  pushStartingStyleAdorner(context: OpeningTagContext): void {
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
+    const adorner = this.adorn(config);
+    adorner.classList.add('starting-style');
+
+    const onClick = ((() => {
+                       const model = node.domModel().cssModel();
+                       if (adorner.isActive()) {
+                         model.forceStartingStyle(node, true);
+                       } else {
+                         model.forceStartingStyle(node, false);
+                       }
+                     }) as EventListener);
+
+    adorner.addInteraction(onClick, {
+      isToggle: true,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.enableStartingStyle),
+      ariaLabelActive: i18nString(UIStrings.disableStartingStyle),
+    });
+
+    context.styleAdorners.add(adorner);
+  }
+
   pushFlexAdorner(context: OpeningTagContext): void {
     const node = this.node();
     const nodeId = node.id;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1497,6 +1497,8 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
+    domModel.addEventListener(
+        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
   }
 
   unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
@@ -1511,6 +1513,8 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
+    domModel.removeEventListener(
+        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
 
@@ -1983,6 +1987,15 @@ export class ElementsTreeOutline extends
       void treeElement.tagTypeContext.adornersThrottler.schedule(async () => treeElement.updateScrollAdorner());
     }
   }
+
+  private affectedByStartingStylesFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>):
+      void {
+    const {node} = event.data;
+    const treeElement = this.treeElementByNode.get(node);
+    if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
+      void treeElement.tagTypeContext.adornersThrottler.schedule(async () => await treeElement.updateStyleAdorners());
+    }
+  }
 }
 
 export namespace ElementsTreeOutline {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -796,6 +796,11 @@ export class StylePropertiesSection {
         case Protocol.CSS.CSSRuleType.StyleRule:
           ancestorRuleElement = this.createNestingElement(rule.nestingSelectors?.[nestingIndex++]);
           break;
+        case Protocol.CSS.CSSRuleType.StartingStyleRule:
+          if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
+            ancestorRuleElement = this.createStartingStyleElement();
+          }
+          break;
       }
       if (ancestorRuleElement) {
         this.#ancestorRuleListElement.prepend(ancestorRuleElement);
@@ -917,6 +922,17 @@ export class StylePropertiesSection {
     return scopeElement;
   }
 
+  protected createStartingStyleElement(/* startingStyle: SDK.CSSStartingStyle.CSSStartingStyle*/):
+      ElementsComponents.CSSQuery.CSSQuery|undefined {
+    const startingStyleElement = new ElementsComponents.CSSQuery.CSSQuery();
+    startingStyleElement.data = {
+      queryPrefix: '@starting-style',
+      queryText: '',
+      jslogContext: 'starting-style',
+    };
+    return startingStyleElement;
+  }
+
   protected createSupportsElement(supports: SDK.CSSSupports.CSSSupports): ElementsComponents.CSSQuery.CSSQuery
       |undefined {
     if (!supports.text) {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -28,6 +28,7 @@ export enum RegisteredAdorners {
   FLEX = 'flex',
   AD = 'ad',
   SCROLL_SNAP = 'scroll-snap',
+  STARTING_STYLE = 'starting-style',
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
@@ -77,6 +78,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.STARTING_STYLE:
+      return {
+        name: 'starting-style',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
     case RegisteredAdorners.CONTAINER:
       return {
         name: 'container',

package/front_end/panels/settings/components/SyncSection.ts

@@ -54,22 +54,12 @@ const UIStrings = {
    * @description Label for the Google Developer Program subscription status that corresponds to
    * `PREMIUM_ANNUAL` plan.
    */
-  gdpPremiumAnnualSubscription: 'Premium (Annual)',
-  /**
-   * @description Label for the Google Developer Program subscription status that corresponds to
-   * `PREMIUM_MONTHLY` plan.
-   */
-  gdpPremiumMonthlySubscription: 'Premium (Monthly)',
+  gdpPremiumSubscription: 'Premium',
   /**
    * @description Label for the Google Developer Program subscription status that corresponds to
    * `PRO_ANNUAL` plan.
    */
-  gdpProAnnualSubscription: 'Pro (Annual)',
-  /**
-   * @description Label for the Google Developer Program subscription status that corresponds to
-   * `PRO_MONTHLY` plan.
-   */
-  gdpProMonthlySubscription: 'Pro (Monthly)',
+  gdpProSubscription: 'Pro',
   /**
    * @description Label for the Google Developer Program subscription status that corresponds
    * to a plan not known by the client.
@@ -137,13 +127,11 @@ function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIStr
 
   switch (profile.activeSubscription.subscriptionTier) {
     case Host.GdpClient.SubscriptionTier.PREMIUM_ANNUAL:
-      return i18nString(UIStrings.gdpPremiumAnnualSubscription);
     case Host.GdpClient.SubscriptionTier.PREMIUM_MONTHLY:
-      return i18nString(UIStrings.gdpPremiumMonthlySubscription);
+      return i18nString(UIStrings.gdpPremiumSubscription);
     case Host.GdpClient.SubscriptionTier.PRO_ANNUAL:
-      return i18nString(UIStrings.gdpProAnnualSubscription);
     case Host.GdpClient.SubscriptionTier.PRO_MONTHLY:
-      return i18nString(UIStrings.gdpProMonthlySubscription);
+      return i18nString(UIStrings.gdpProSubscription);
     default:
       return i18nString(UIStrings.gdpUnknownSubscription);
   }

package/front_end/ui/legacy/InspectorView.ts

@@ -197,8 +197,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.#toggleOrientationButton = new ToolbarButton(
         i18nString(UIStrings.toggleDrawerOrientation),
         this.drawerSplitWidget.isVertical() ? 'dock-bottom' : 'dock-right');
-    this.#toggleOrientationButton.element.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
-    this.#toggleOrientationButton.element.setAttribute('jslogcontext', 'toggle-drawer-orientation');
+    this.#toggleOrientationButton.element.setAttribute(
+        'jslog', `${VisualLogging.toggle('toggle-drawer-orientation').track({click: true})}`);
     this.#toggleOrientationButton.addEventListener(
         ToolbarButton.Events.CLICK, () => this.toggleDrawerOrientation(), this);
     this.drawerTabbedPane.addEventListener(
@@ -302,17 +302,17 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     inspectorViewInstance = null;
   }
 
-  onDockSideChangedHandledForTest(): void {
+  applyDrawerOrientationForDockSideForTest(): void {
   }
 
-  #onDockSideChanged(): void {
+  #applyDrawerOrientationForDockSide(): void {
     if (!this.drawerVisible()) {
-      this.onDockSideChangedHandledForTest();
+      this.applyDrawerOrientationForDockSideForTest();
       return;
     }
     const newOrientation = this.#getOrientationForDockMode();
-    this.#applyOrientation(newOrientation);
-    this.onDockSideChangedHandledForTest();
+    this.#applyDrawerOrientation(newOrientation);
+    this.applyDrawerOrientationForDockSideForTest();
   }
 
   #getDockMode(): DockMode {
@@ -339,10 +339,15 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return orientation;
   }
 
-  #applyOrientation(orientation: Omit<DrawerOrientation, DrawerOrientation.UNSET>): void {
-    const isVertical = orientation === DrawerOrientation.VERTICAL;
-    this.#toggleOrientationButton.setGlyph(isVertical ? 'dock-bottom' : 'dock-right');
-    this.drawerSplitWidget.setVertical(isVertical);
+  #applyDrawerOrientation(orientation: Omit<DrawerOrientation, DrawerOrientation.UNSET>): void {
+    const shouldBeVertical = orientation === DrawerOrientation.VERTICAL;
+    const isVertical = this.drawerSplitWidget.isVertical();
+    if (shouldBeVertical === isVertical) {
+      return;
+    }
+
+    this.#toggleOrientationButton.setGlyph(shouldBeVertical ? 'dock-bottom' : 'dock-right');
+    this.drawerSplitWidget.setVertical(shouldBeVertical);
     this.setDrawerRelatedMinimumSizes();
   }
 
@@ -360,15 +365,16 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.#resizeObserver.observe(this.element);
     this.#observedResize();
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
-    DockController.instance().addEventListener(DockControllerEvents.DOCK_SIDE_CHANGED, this.#onDockSideChanged, this);
-    this.#onDockSideChanged();
+    DockController.instance().addEventListener(
+        DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
+    this.#applyDrawerOrientationForDockSide();
   }
 
   override willHide(): void {
     this.#resizeObserver.unobserve(this.element);
     this.element.ownerDocument.removeEventListener('keydown', this.keyDownBound, false);
     DockController.instance().removeEventListener(
-        DockControllerEvents.DOCK_SIDE_CHANGED, this.#onDockSideChanged, this);
+        DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
   }
 
   resolveLocation(locationName: string): ViewLocation|null {
@@ -463,6 +469,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     } else {
       this.focusRestorer = null;
     }
+    this.#applyDrawerOrientationForDockSide();
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerShown));
   }
 
@@ -502,7 +509,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     currentSettings[dockMode] = newOrientation as DrawerOrientation;
     this.drawerOrientationByDockSetting.set(currentSettings);
 
-    this.#applyOrientation(newOrientation);
+    this.#applyDrawerOrientation(newOrientation);
   }
 
   isUserExplicitlyUpdatedDrawerOrientation(): boolean {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3573,6 +3573,7 @@ export const knownContextValues = new Set([
   'starter-badge-dismissed',
   'starter-badge-last-snoozed-timestamp',
   'starter-badge-snooze-count',
+  'starting-style',
   'static-global-setting',
   'static-synced-setting',
   'status',

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1520535"
+  "version": "1.0.1521223"
 }