chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/docs/styleguide/ux/components.md

@@ -76,7 +76,7 @@ space.
 
 Usage with lit-html:
 
-```js
+```ts
 html`<devtools-button class="some-class"
                       .variant=${Buttons.Button.Variant.PRIMARY}
                       .title=${i18nString(UIStrings.someString)}
@@ -86,13 +86,13 @@ html`<devtools-button class="some-class"
 
 Usage with the imperative API:
 
-```js
+```ts
 const button = new Buttons.Button.Button();
 button.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    title: i18nString(UIStrings.someString),
-    jslogContext: 'some-context',
-  };
+  variant: Buttons.Button.Variant.PRIMARY,
+  title: i18nString(UIStrings.someString),
+  jslogContext: 'some-context',
+};
 button.classList.add('some-class');
 button.addEventListener('click', event => onClick(event));
 ```
@@ -164,28 +164,36 @@ button.addEventListener('click', event => onClick(event));
 
 Usage with lit-html:
 
-```js
-html`<select aria-label="Choose your champion"
-             @onchange=${onChange}>
+```ts
+html`<select aria-label="Choose your champion" @onchange=${onChange}>
   <option hidden value="Choose your champion"></option>
-  <option jslog=${VisualLogging.item('hamster').track({click: true})}
-          value="Hamster">Hamster</option>
-  <option jslog=${VisualLogging.item('mouse').track({click: true})}
-          value="Mouse">Mouse</option>
-  <option jslog=${VisualLogging.item('cat').track({click: true})}
-          value="Cat">Cat</option>
-</select>`
+  <option
+    jslog=${VisualLogging.item('hamster').track({ click: true })}
+    value="Hamster"
+  >
+    Hamster
+  </option>
+  <option
+    jslog=${VisualLogging.item('mouse').track({ click: true })}
+    value="Mouse"
+  >
+    Mouse
+  </option>
+  <option jslog=${VisualLogging.item('cat').track({ click: true })} value="Cat">
+    Cat
+  </option>
+</select>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const select = UI.UIUtils.createSelect('Choose your champion', [
   'Hamster',
   'Mouse',
   'Cat',
 ]);
-select.addEventListener('change', event => onChange(event))
+select.addEventListener('change', event => onChange(event));
 ```
 
 ## Radio Buttons
@@ -212,16 +220,22 @@ select.addEventListener('change', event => onChange(event))
 
 Usage with lit-html:
 
-```js
-const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
-html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
+```ts
+const jslog = VisualLogging.toggle()
+  .track({ change: true })
+  .context(jslogContext);
+html`<label><input type="radio" name=${name} jslog=${jslog} />${title}</label>`;
 ```
 
 Usage with the imperative API:
 
-```js
-const {label, radio} = UI.UIUtils.createRadioButton(name, title, jslogContext);
-radio.addEventListener('change', event => onChange(event))
+```ts
+const { label, radio } = UI.UIUtils.createRadioButton(
+  name,
+  title,
+  jslogContext,
+);
+radio.addEventListener('change', event => onChange(event));
 ```
 
 ## Sliders
@@ -247,19 +261,21 @@ radio.addEventListener('change', event => onChange(event))
 
 Usage with lit-html:
 
-```js
-html`<input type="range"
-            min=${min}
-            max=${max}
-            tabindex=${tabIndex}
-            @change=${onChange}>`
+```ts
+html`<input
+  type="range"
+  min=${min}
+  max=${max}
+  tabindex=${tabIndex}
+  @change=${onChange}
+/>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const slider = UI.UIUtils.createSlider(min, max, tabIndex);
-slider.addEventListener('change', event => onChange(event))
+slider.addEventListener('change', event => onChange(event));
 ```
 
 ## Icons
@@ -293,13 +309,13 @@ For some frequently used icons e.g. cross-circle, warning-filled etc. colors are
 
 Usage with lit-html:
 
-```js
-html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`
+```ts
+html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');
 ```
 
@@ -379,53 +395,71 @@ Generally, we do not recommend using shortcuts in context menus since this goes
 
 Usage with lit-html (left-click on a `<devtools-menu-button>` opens a menu):
 
-```js
+```ts
 html`
-<devtools-menu-button
-  icon-name="some-icon-name"
-  .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
-    menu.defaultSection().appendItem('Item', () => {
-      console.log('Item clicked');
-    }, {jslogContext: 'item'});
-  }}
-  jslogContext="my-menu-button"
-></devtools-menu-button>
-`
+  <devtools-menu-button
+    icon-name="some-icon-name"
+    .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
+      menu.defaultSection().appendItem(
+        'Item',
+        () => {
+          console.log('Item clicked');
+        },
+        { jslogContext: 'item' },
+      );
+    }}
+    jslogContext="my-menu-button"
+  ></devtools-menu-button>
+`;
 ```
 
 Usage with the imperative API (menu shows on a right-click)
 
 Various simple menu items:
 
-```js
+```ts
 const element = this.shadowRoot.querySelector('.element-to-add-menu-to');
 element.addEventListener('contextmenu', (event: MouseEvent) => {
   const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
-// Regular item
-  contextMenu.defaultSection().appendItem('Regular item', () => {
-    console.log('Regular item clicked ');
-  }, { jslogContext: 'regular-item' });
-
-// Disabled item
-  contextMenu.defaultSection().appendItem('Disabled item', () => {
-    console.log('Will not be printed');
-  }, { jslogContext: 'disabled-item',
-       disabled: true });
-
-// Experimental item
-  const item = contextMenu.defaultSection().appendItem('Experimental item', () => {
-    console.log('Experimental item clicked');
-  }, { jslogContext: 'experimental-item',
-       isPreviewFeature: true });
-
-// Separator
+  // Regular item
+  contextMenu.defaultSection().appendItem(
+    'Regular item',
+    () => {
+      console.log('Regular item clicked ');
+    },
+    { jslogContext: 'regular-item' },
+  );
+
+  // Disabled item
+  contextMenu.defaultSection().appendItem(
+    'Disabled item',
+    () => {
+      console.log('Will not be printed');
+    },
+    { jslogContext: 'disabled-item', disabled: true },
+  );
+
+  // Experimental item
+  const item = contextMenu.defaultSection().appendItem(
+    'Experimental item',
+    () => {
+      console.log('Experimental item clicked');
+    },
+    { jslogContext: 'experimental-item', isPreviewFeature: true },
+  );
+
+  // Separator
   contextMenu.defaultSection().appendSeparator();
 
-// Checkbox item
-  contextMenu.defaultSection().appendCheckboxItem('Checkbox item', () => {
-    console.log('Checkbox item clicked');
-  }, { checked: true, jslogContext: 'checkbox-item' });
+  // Checkbox item
+  contextMenu.defaultSection().appendCheckboxItem(
+    'Checkbox item',
+    () => {
+      console.log('Checkbox item clicked');
+    },
+    { checked: true, jslogContext: 'checkbox-item' },
+  );
 
   void contextMenu.show();
 });
@@ -433,39 +467,85 @@ element.addEventListener('contextmenu', (event: MouseEvent) => {
 
 Custom section:
 
-```js
-  const customSection = contextMenu.section('Custom section');
-  customSection.appendItem('Section inner item 1', () => { /* ... */ }, {jslogContext: 'my-inner-item-1'});
+```ts
+const customSection = contextMenu.section('Custom section');
+customSection.appendItem(
+  'Section inner item 1',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-1' },
+);
 
-  customSection.appendItem('Section inner item 2', () => { /* ... */ }, {jslogContext: 'my-inner-item-2'});
+customSection.appendItem(
+  'Section inner item 2',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-2' },
+);
 ```
 
 Sub menu:
 
-```js
-const subMenu = contextMenu.defaultSection().appendSubMenuItem('Item to open sub menu', /* disabled */ false, 'my-sub-menu');
-subMenu.defaultSection().appendItem('Sub menu inner item 1', () => { /* ... */ }, {jslogContext: 'my-inner-item-1'});
-subMenu.defaultSection().appendItem('Sub menu inner item 2', () => { /* ... */ }, {jslogContext: 'my-inner-item-2'});
+```ts
+const subMenu = contextMenu
+  .defaultSection()
+  .appendSubMenuItem(
+    'Item to open sub menu',
+    /* disabled */ false,
+    'my-sub-menu',
+  );
+subMenu.defaultSection().appendItem(
+  'Sub menu inner item 1',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-1' },
+);
+subMenu.defaultSection().appendItem(
+  'Sub menu inner item 2',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-2' },
+);
 ```
 
 Context menu provider registration (adds items dynamically based on the context menu’s target):
 
 ```js
 // Define provider
-class MyCustomNodeProvider implements UI.ContextMenu.Provider<SomeTarget|SomeOtherTarget> {
-  appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu, target: SomeTarget|SomeOtherTarget) {
+class MyCustomNodeProvider
+  implements UI.ContextMenu.Provider<SomeTarget | SomeOtherTarget>
+{
+  appendApplicableItems(
+    event: Event,
+    contextMenu: UI.ContextMenu.ContextMenu,
+    target: SomeTarget | SomeOtherTarget,
+  ) {
     if (target instanceof SomeTarget) {
-      contextMenu.defaultSection().appendItem('Item 1', () => {
-        console.log('Item 1 clicked');}, {jsLogContext: 'my-item-1'});
+      contextMenu.defaultSection().appendItem(
+        'Item 1',
+        () => {
+          console.log('Item 1 clicked');
+        },
+        { jsLogContext: 'my-item-1' },
+      );
     } else {
-      contextMenu.defaultSection().appendItem('Item 2', () => {
-        console.log('Item 2 clicked');}, {jsLogContext: 'my-item-2'});
+      contextMenu.defaultSection().appendItem(
+        'Item 2',
+        () => {
+          console.log('Item 2 clicked');
+        },
+        { jsLogContext: 'my-item-2' },
+      );
     }
   }
 }
 ```
 
-```js
+```ts
 // Register provider
 UI.ContextMenu.registerProvider<SDK.DOMModel.DOMNode>({
   contextTypes: () => [SomeTarget, SomeOtherTarget],
@@ -479,11 +559,12 @@ UI.ContextMenu.registerProvider<SDK.DOMModel.DOMNode>({
 
 Static menu item registration via ItemLocation (adds an action to a predefined menu location):
 
-```js
+```ts
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.NAVIGATOR_MENU_DEFAULT,
   actionId: 'quick-open.show',
   order: undefined,
 });
 ```
+
 This will automatically add the "Open file" action to the context menu that appears when clicking the Elements panel's 3-dot button.

package/docs/styleguide/ux/numbers.md

@@ -52,7 +52,7 @@ initialized.
 Prefer the helper exported by [ByteUtilities.ts] when formatting byte values.
 For example:
 
-```js
+```ts
 // Formatting bytes
 i18n.ByteUtilities.bytesToString(99);
 
@@ -68,7 +68,7 @@ i18n.ByteUtilities.bytesToString(1500 * 1000);
 Prefer the helpers exported by [time-utilities.ts] when formatting time values.
 For example:
 
-```js
+```ts
 // Formatting precise milliseconds
 i18n.TimeUtilities.preciseMillisToString(6.12345);
 
@@ -90,7 +90,7 @@ invocation of `format()` or `formatToParts()` methods, and therefore it's safe
 to define the formatters this way without running into the issue that the
 `DevToolsLocale` isn't initialized yet:
 
-```js
+```ts
 import * as i18n from 'path/to/i18n/i18n.js';
 
 const percentageFormatter = i18n.NumberFormatter.defineFormatter({
@@ -99,7 +99,6 @@ const percentageFormatter = i18n.NumberFormatter.defineFormatter({
 });
 ```
 
-
 [Intl.NumberFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 [ByteUtilities.ts]: ../../../front_end/core/i18n/ByteUtilities.ts
 [NumberFormatter.ts]: ../../../front_end/core/i18n/NumberFormatter.ts

package/eslint.config.mjs

@@ -720,6 +720,7 @@ export default defineConfig([
       'rulesdir/no-assert-deep-strict-equal': 'error',
       'rulesdir/no-assert-equal': 'error',
       'rulesdir/no-assert-equal-boolean-null-undefined': 'error',
+      'rulesdir/no-capture-screenshot': 'error',
       'rulesdir/no-imperative-dom-api': 'off',
       'rulesdir/no-lit-render-outside-of-view': 'off',
       'rulesdir/prefer-assert-instance-of': 'error',

package/front_end/core/common/README.md

@@ -6,23 +6,24 @@ A settings registration is represented by the `SettingRegistration` interface, d
 
 All settings have to be registered using the function `Common.Settings.registerSettingExtension` which expects an object of type `SettingRegistration` as parameter.
 
-As an example, take the registration of the `showHTMLComments` settting,  which allows users to determine if HTML comments are shown in the Elements tree:
-```js
+As an example, take the registration of the `showHTMLComments` setting, which allows users to determine if HTML comments are shown in the Elements tree:
+
+```ts
 Common.Settings.registerSettingExtension({
-  category:  Common.Settings.SettingCategory.ELEMENTS,
-  order:  3,
-  title:  ls`Show HTML comments`,
-  settingName:  'showHTMLComments',
-  settingType:  Common.Settings.SettingType.BOOLEAN,
-  defaultValue:  true,
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  order: 3,
+  title: ls`Show HTML comments`,
+  settingName: 'showHTMLComments',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
   options: [
     {
-      value:  true,
-      title:  ls`Show HTML comments`,
+      value: true,
+      title: ls`Show HTML comments`,
     },
     {
-      value:  false,
-      title:  ls`Hide HTML comments`,
+      value: false,
+      title: ls`Hide HTML comments`,
     },
   ],
 });

package/front_end/core/host/GdpClient.ts

@@ -80,7 +80,7 @@ function normalizeBadgeName(name: string): string {
 export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.com/profile/u/me';
 
 async function makeHttpRequest<R extends object>(request: DispatchHttpRequestRequest): Promise<R|null> {
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
+  if (!isGdpProfilesAvailable()) {
     return null;
   }
 
@@ -224,5 +224,20 @@ function setDebugGdpIntegrationEnabled(enabled: boolean): void {
   }
 }
 
+export function isGdpProfilesAvailable(): boolean {
+  const isBaseFeatureEnabled = Boolean(Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled);
+  const isBrandedBuild = Boolean(Root.Runtime.hostConfig.devToolsGdpProfilesAvailability?.enabled);
+  const isOffTheRecordProfile = Root.Runtime.hostConfig.isOffTheRecord;
+  const isDisabledByEnterprisePolicy =
+      getGdpProfilesEnterprisePolicy() === Root.Runtime.GdpProfilesEnterprisePolicyValue.DISABLED;
+  return isBaseFeatureEnabled && isBrandedBuild && !isOffTheRecordProfile && !isDisabledByEnterprisePolicy;
+}
+
+export function getGdpProfilesEnterprisePolicy(): Root.Runtime.GdpProfilesEnterprisePolicyValue {
+  return (
+      Root.Runtime.hostConfig.devToolsGdpProfilesAvailability?.enterprisePolicyValue ??
+      Root.Runtime.GdpProfilesEnterprisePolicyValue.DISABLED);
+}
+
 // @ts-expect-error
 globalThis.setDebugGdpIntegrationEnabled = setDebugGdpIntegrationEnabled;

package/front_end/core/host/UserMetrics.ts

@@ -511,7 +511,8 @@ export enum Action {
   AiCodeCompletionSuggestionDisplayed = 186,
   AiCodeCompletionSuggestionAccepted = 187,
   AiCodeCompletionError = 188,
-  MAX_VALUE = 189,
+  AttributeLinkClicked = 189,
+  MAX_VALUE = 190,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -1194,7 +1195,8 @@ export const enum SwatchType {
   ANGLE = 7,
   LENGTH = 8,
   POSITION_TRY_LINK = 10,
-  MAX_VALUE = 11,
+  ATTR_LINK = 11,
+  MAX_VALUE = 12,
 }
 
 export const enum BadgeType {

package/front_end/core/root/Runtime.ts

@@ -479,6 +479,18 @@ interface GdpProfiles {
   starterBadgeEnabled: boolean;
 }
 
+export enum GdpProfilesEnterprisePolicyValue {
+  ENABLED = 0,
+  ENABLED_WITHOUT_BADGES = 1,
+  DISABLED = 2,
+}
+
+interface GdpProfilesAvailability {
+  // Whether GDP profiles can be enabled on this host (only possible on branded builds).
+  enabled: boolean;
+  enterprisePolicyValue: GdpProfilesEnterprisePolicyValue;
+}
+
 interface LiveEdit {
   enabled: boolean;
 }
@@ -529,6 +541,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsIpProtectionInDevTools: IpProtectionInDevTools,
   devToolsGlobalAiButton: GlobalAiButton,
   devToolsGdpProfiles: GdpProfiles,
+  devToolsGdpProfilesAvailability: GdpProfilesAvailability,
   devToolsLiveEdit: LiveEdit,
   devToolsFlexibleLayout: DevToolsFlexibleLayout,
 }>;

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -869,14 +869,18 @@ export class CSSMatchedStyles {
     return domCascade ? domCascade.computeAttribute(style, attributeName, type) : null;
   }
 
-  rawAttributeValueFromStyle(style: CSSStyleDeclaration, attributeName: string): string|null {
+  originatingNodeForStyle(style: CSSStyleDeclaration): DOMNode|null {
     let node: DOMNode|null = this.nodeForStyle(style) ?? this.node();
 
     // If it's a pseudo-element, we need to find the originating element.
     while (node?.pseudoType()) {
       node = node.parentNode;
     }
+    return node;
+  }
 
+  rawAttributeValueFromStyle(style: CSSStyleDeclaration, attributeName: string): string|null {
+    const node = this.originatingNodeForStyle(style);
     if (!node) {
       return null;
     }

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -459,11 +459,11 @@ export class EnhancedTracesParser {
     for (const orphanScript of orphanScripts) {
       const orphanScriptExecutionContextIsolateId =
           this.getExecutionContextIsolateId(orphanScript.isolate, orphanScript.executionContextId);
-      if (orphanScriptExecutionContextIsolateId in executionContextIsolateToTarget) {
-        const frameId = executionContextIsolateToTarget.get(orphanScriptExecutionContextIsolateId);
-        if (frameId) {
-          targetToScripts.get(frameId)?.push(orphanScript);
-        }
+      const frameId = executionContextIsolateToTarget.get(orphanScriptExecutionContextIsolateId);
+
+      if (frameId) {
+        // Found a link via execution context, use it.
+        targetToScripts.get(frameId)?.push(orphanScript);
       } else if (orphanScript.pid) {
         const target = targets.find(target => target.pid === orphanScript.pid);
         if (target) {