chrome-devtools-frontend 1.0.1520139 → 1.0.1521223

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -105,6 +105,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
         cssModel.addEventListener(SDK.CSSModel.Events.FontsUpdated, this.onCSSModelChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onCSSModelChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onCSSModelChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.StartingStylesStateForced, this.onCSSModelChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onCSSModelChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onComputedStyleChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
@@ -193,7 +194,7 @@ export const enum Events {
 }
 
 export type CSSModelChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|SDK.CSSModel.StyleSheetChangedEvent|
-                                   SDK.CSSModel.PseudoStateForcedEvent|null|void;
+                                   SDK.CSSModel.PseudoStateForcedEvent|SDK.DOMModel.DOMNode|null|void;
 
 export interface EventTypes {
   [Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent;

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);
   }
@@ -270,7 +258,7 @@ function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInfor
   return html`
     <devtools-button
       aria-describedby=settings-sync-info
-      aria-label=${warningText}
+      .title=${warningText}
       .iconName=${'info'}
       .variant=${Buttons.Button.Variant.ICON}
       .size=${Buttons.Button.Size.SMALL}

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
+import '../../../ui/components/tooltips/tooltips.js';
+import '../../../ui/components/buttons/buttons.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -46,6 +49,18 @@ const UIStrings = {
    * @description Text for the save trace button
    */
   saveButtonTitle: 'Save',
+  /**
+   * @description Title for the information icon showing more information about an option
+   */
+  moreInfoTitle: 'More information',
+  /**
+   * @description Text shown in the information pop-up next to the "Include script content" option.
+   */
+  scriptContentPrivacyInfo: 'Includes the full content of all loaded scripts (except extensions).',
+  /**
+   * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
+   */
+  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);
@@ -74,6 +89,9 @@ export interface ExportTraceOptionsState {
   displaySourceMapsCheckbox?: boolean;
 }
 
+type CheckboxId = 'annotations'|'script-content'|'script-source-maps'|'compress-with-gzip';
+const checkboxesWithInfoDialog = new Set<CheckboxId>(['script-content', 'script-source-maps']);
+
 export class ExportTraceOptions extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: ExportTraceOptionsData|null = null;
@@ -187,7 +205,7 @@ export class ExportTraceOptions extends HTMLElement {
   }
 
   #renderCheckbox(
-      checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
+      checkboxId: CheckboxId, checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
       checked: boolean): Lit.TemplateResult {
     UI.Tooltip.Tooltip.install(checkboxWithLabel, title);
     checkboxWithLabel.ariaLabel = title;
@@ -202,11 +220,40 @@ export class ExportTraceOptions extends HTMLElement {
       return html`
         <div class='export-trace-options-row'>
           ${checkboxWithLabel}
+
+          ${checkboxesWithInfoDialog.has(checkboxId) ? html`
+            <devtools-button
+              aria-details=${`export-trace-tooltip-${checkboxId}`}
+              class="pen-icon"
+              .title=${UIStrings.moreInfoTitle}
+              .iconName=${'info'}
+              .variant=${Buttons.Button.Variant.ICON}
+              ></devtools-button>
+            ` : Lit.nothing}
         </div>
       `;
     // clang-format on
   }
 
+  #renderInfoTooltip(checkboxId: CheckboxId): Lit.LitTemplate {
+    if (!checkboxesWithInfoDialog.has(checkboxId)) {
+      return Lit.nothing;
+    }
+
+    return html`
+    <devtools-tooltip
+      variant="rich"
+      id=${`export-trace-tooltip-${checkboxId}`}
+    >
+      <div class="info-tooltip-container">
+      <p>
+        ${checkboxId === 'script-content' ? i18nString(UIStrings.scriptContentPrivacyInfo) : Lit.nothing}
+        ${checkboxId === 'script-source-maps' ? i18nString(UIStrings.sourceMapsContentPrivacyInfo) : Lit.nothing}
+      </p>
+      </div>
+    </devtools-tooltip>`;
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Export trace options dialog render was not scheduled');
@@ -230,16 +277,18 @@ export class ExportTraceOptions extends HTMLElement {
           state: this.#state.dialogState,
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='export-trace-options-content'>
-          ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox(this.#includeAnnotationsCheckbox,
+          ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
-          ${this.#state.displayScriptContentCheckbox ? this.#renderCheckbox(this.#includeScriptContentCheckbox,
+          ${this.#state.displayScriptContentCheckbox ? this.#renderCheckbox('script-content', this.#includeScriptContentCheckbox,
             i18nString(UIStrings.includeScriptContent), this.#state.includeScriptContent): ''}
           ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderCheckbox(
+            'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
-          ${this.#renderCheckbox(this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
+          ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
           <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
                   class="setup-button"
+                  data-export-button
                   @click=${this.#onExportClick.bind(this)}
                   .data=${{
                     variant: Buttons.Button.Variant.PRIMARY,
@@ -249,6 +298,9 @@ export class ExportTraceOptions extends HTMLElement {
                 </div>
         </div>
       </devtools-button-dialog>
+
+      ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
+      ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
     `;
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -24,3 +24,8 @@
     min-width: var(--sys-size-25)
   }
 }
+
+.info-tooltip-container {
+  max-width: var(--sys-size-28);
+  white-space: normal;
+}

package/front_end/third_party/lighthouse/README.chromium

@@ -9,4 +9,11 @@ License File: LICENSE
 Security Critical: no
 Shipped: yes
 
-This directory contains Chromium's version of the lighthouse report assets, including renderer.
+This directory contains Chromium's version of Lighthouse. It includes:
+
+- locale strings
+- report assets
+- report renderer
+- worker bundle for running Lighthouse core
+
+Build documentation: https://github.com/GoogleChrome/lighthouse/blob/main/build/readme.md#building-for-devtools

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.1520139"
+  "version": "1.0.1521223"
 }