chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/core/common/ResourceType.test.ts

@@ -18,7 +18,7 @@ const typeTestTitle = () => 'Type Test Title' as Platform.UIString.LocalizedStri
 
 describe('ResourceCategory class', () => {
   it('is able to be instantiated successfully', () => {
-    const resourceCategory = new ResourceCategory(testTitle, testShortTitle);
+    const resourceCategory = new ResourceCategory('category name', testTitle, testShortTitle);
     assert.strictEqual(resourceCategory.title(), 'Test Title', 'title is not correct');
     assert.strictEqual(resourceCategory.shortTitle(), 'Test Short Title', 'short title is not correct');
   });
@@ -26,7 +26,7 @@ describe('ResourceCategory class', () => {
 
 describeWithEnvironment('ResourceType class', () => {
   it('is able to be instantiated successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.name(), 'Type Test Name', 'name was not set correctly');
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not set correctly');
@@ -234,105 +234,105 @@ describeWithEnvironment('ResourceType class', () => {
   });
 
   it('is able to return its title successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not returned correctly');
   });
 
   it('is able to return its isTextType value successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isTextType(), 'isTextType was not returned correctly');
   });
 
   it('is able to return whether or not its a script if its name equals the value "script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name equals the value "sm-script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name is not equal to the values "script" or "sm-script"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isScript(), 'the resource should not be considered as a script');
      });
 
   it('is able to return whether or not its a document if its name equals the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocument(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether or not its a document if its name does not equal the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isDocument(), 'the resource should not be considered as a document');
   });
 
   it('is able to determine if a resource has scripts if it is a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is not a script or a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.hasScripts(), 'the resource should not be considered as a having scripts');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "sm-stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name is not equal to the values "stylesheet" or "sm-stylesheet"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isStyleSheet(), 'the resource should not be considered as a stylesheet');
      });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was none of those things', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(
         resourceType.isDocumentOrScriptOrStyleSheet(),
@@ -340,47 +340,47 @@ describeWithEnvironment('ResourceType class', () => {
   });
 
   it('is able to determine if it is from source map if it began with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isFromSourceMap(), 'the resource should be considered to be from source map');
   });
 
   it('is able to determine if it is from source map if it did not begin with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isFromSourceMap(), 'the resource should not be considered to be from source map');
   });
 
   it('is able to be converted to a string by returning its name', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.toString(), 'Type Test Name', 'the resource type was not converted to a string correctly');
   });
 
   it('is able to return the canonical mime type of a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/html', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/javascript', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/css', 'the canonical mime type was not returned correctly');
   });
 
   it('returns an empty string as a canonical mime type if it was not a document, a script or a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.canonicalMimeType(), '', 'the canonical mime type was not returned correctly');
   });

package/front_end/core/common/ResourceType.ts

@@ -354,9 +354,13 @@ export class ResourceType {
 }
 
 export class ResourceCategory {
+  readonly name: string;
   title: () => Platform.UIString.LocalizedString;
   shortTitle: () => Platform.UIString.LocalizedString;
-  constructor(title: () => Platform.UIString.LocalizedString, shortTitle: () => Platform.UIString.LocalizedString) {
+  constructor(
+      name: string, title: () => Platform.UIString.LocalizedString,
+      shortTitle: () => Platform.UIString.LocalizedString) {
+    this.name = name;
     this.title = title;
     this.shortTitle = shortTitle;
   }
@@ -368,17 +372,22 @@ export class ResourceCategory {
 }
 
 export const resourceCategories = {
-  XHR: new ResourceCategory(i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
-  Document: new ResourceCategory(i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
-  Stylesheet: new ResourceCategory(i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
-  Script: new ResourceCategory(i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
-  Font: new ResourceCategory(i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
-  Image: new ResourceCategory(i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
-  Media: new ResourceCategory(i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
-  Manifest: new ResourceCategory(i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
-  WebSocket: new ResourceCategory(i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
-  Wasm: new ResourceCategory(i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
-  Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
+  XHR: new ResourceCategory(
+      'Fetch and XHR', i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
+  Document: new ResourceCategory(UIStrings.document, i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
+  Stylesheet: new ResourceCategory(UIStrings.css, i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
+  Script:
+      new ResourceCategory(UIStrings.javascript, i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
+  Font: new ResourceCategory(UIStrings.font, i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
+  Image: new ResourceCategory(UIStrings.image, i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
+  Media: new ResourceCategory(UIStrings.media, i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
+  Manifest:
+      new ResourceCategory(UIStrings.manifest, i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
+  WebSocket:
+      new ResourceCategory(UIStrings.websocket, i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
+  Wasm: new ResourceCategory(
+      UIStrings.webassembly, i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
+  Other: new ResourceCategory(UIStrings.other, i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
 };
 
 /**

package/front_end/core/common/Revealer.ts

@@ -46,6 +46,10 @@ const UIStrings = {
    * @description The UI destination when revealing loaded resources through the Developer Resources Panel
    */
   developerResourcesPanel: 'Developer Resources panel',
+  /**
+   * @description The UI destination when revealing loaded resources through the Animations panel
+   */
+  animationsPanel: 'Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('core/common/Revealer.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -177,6 +181,7 @@ export const RevealerDestination = {
   APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
   SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),
   MEMORY_INSPECTOR_PANEL: i18nLazyString(UIStrings.memoryInspectorPanel),
+  ANIMATIONS_PANEL: i18nLazyString(UIStrings.animationsPanel),
 };
 
 export type RevealerDestination = () => Platform.UIString.LocalizedString;

package/front_end/core/common/SettingRegistration.ts

@@ -302,7 +302,7 @@ export interface SettingRegistration {
  */
 export interface LearnMore {
   tooltip: () => Platform.UIString.LocalizedString;
-  url: Platform.DevToolsPath.UrlString;
+  url?: Platform.DevToolsPath.UrlString;
 }
 
 interface LocalizedSettingExtensionOption {

package/front_end/core/common/Settings.ts

@@ -58,7 +58,7 @@ export class Settings {
   #eventSupport: ObjectWrapper<GenericEvents>;
   #registry: Map<string, Setting<unknown>>;
   readonly moduleSettings: Map<string, Setting<unknown>>;
-  readonly #config: Root.Runtime.HostConfig;
+  #config: Root.Runtime.HostConfig;
 
   private constructor(
       readonly syncedStorage: SettingsStorage, readonly globalStorage: SettingsStorage,
@@ -128,6 +128,10 @@ export class Settings {
     return this.#config;
   }
 
+  setHostConfig(config: Root.Runtime.HostConfig): void {
+    this.#config = config;
+  }
+
   private registerModuleSetting(setting: Setting<unknown>): void {
     const settingName = setting.name;
     const category = setting.category();

package/front_end/core/host/AidaClient.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
+import type * as Root from '../root/root.js';
 
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
 import type {AidaClientResult, SyncInformation} from './InspectorFrontendHostAPI.js';
@@ -15,6 +16,7 @@ export enum Entity {
 }
 
 export const enum Rating {
+  SENTIMENT_UNSPECIFIED = 'SENTIMENT_UNSPECIFIED',
   POSITIVE = 'POSITIVE',
   NEGATIVE = 'NEGATIVE',
 }
@@ -336,3 +338,60 @@ export function convertToUserTierEnum(userTier: string|undefined): UserTier {
   }
   return UserTier.BETA;
 }
+
+let hostConfigTrackerInstance: HostConfigTracker|undefined;
+
+export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  #pollTimer?: number;
+  #aidaAvailability?: AidaAccessPreconditions;
+
+  private constructor() {
+    super();
+  }
+
+  static instance(): HostConfigTracker {
+    if (!hostConfigTrackerInstance) {
+      hostConfigTrackerInstance = new HostConfigTracker();
+    }
+    return hostConfigTrackerInstance;
+  }
+
+  override addEventListener(eventType: Events, listener: Common.EventTarget.EventListener<EventTypes, Events>):
+      Common.EventTarget.EventDescriptor<EventTypes> {
+    const isFirst = !this.hasEventListeners(eventType);
+    const eventDescriptor = super.addEventListener(eventType, listener);
+    if (isFirst) {
+      window.clearTimeout(this.#pollTimer);
+      void this.pollAidaAvailability();
+    }
+    return eventDescriptor;
+  }
+
+  override removeEventListener(eventType: Events, listener: Common.EventTarget.EventListener<EventTypes, Events>):
+      void {
+    super.removeEventListener(eventType, listener);
+    if (!this.hasEventListeners(eventType)) {
+      window.clearTimeout(this.#pollTimer);
+    }
+  }
+
+  private async pollAidaAvailability(): Promise<void> {
+    this.#pollTimer = window.setTimeout(() => this.pollAidaAvailability(), 2000);
+    const currentAidaAvailability = await AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      const config = await new Promise<Root.Runtime.HostConfig>(
+          resolve => InspectorFrontendHostInstance.getHostConfig(config => resolve(config)));
+      Common.Settings.Settings.instance().setHostConfig(config);
+      this.dispatchEventToListeners(Events.AIDA_AVAILABILITY_CHANGED);
+    }
+  }
+}
+
+export const enum Events {
+  AIDA_AVAILABILITY_CHANGED = 'aidaAvailabilityChanged',
+}
+
+export type EventTypes = {
+  [Events.AIDA_AVAILABILITY_CHANGED]: void,
+};

package/front_end/core/host/InspectorFrontendHost.ts

@@ -410,7 +410,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
         blockedByAge: false,
         blockedByEnterprisePolicy: false,
         blockedByGeo: false,
-        disallowLogging: false,
+        disallowLogging: true,
       },
       devToolsConsoleInsights: {
         modelId: '',
@@ -429,6 +429,10 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
       devToolsPrivacyUI: {
         enabled: false,
       },
+      devToolsEnableOriginBoundCookies: {
+        portBindingEnabled: false,
+        schemeBindingEnabled: false,
+      },
       isOffTheRecord: false,
     };
     if ('hostConfigForTesting' in globalThis) {

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -379,12 +379,20 @@ export interface InspectorFrontendHostAPI {
   recordKeyDown(event: KeyDownEvent): void;
 }
 
+export interface AcceleratorDescriptor {
+  keyCode: number;
+  modifiers: number;
+}
+
 export interface ContextMenuDescriptor {
   type: 'checkbox'|'item'|'separator'|'subMenu';
   id?: number;
   label?: string;
+  accelerator?: AcceleratorDescriptor;
+  isExperimentalFeature?: boolean;
   enabled?: boolean;
   checked?: boolean;
+  isDevToolsPerformanceMenuItem?: boolean;
   subItems?: ContextMenuDescriptor[];
   shortcut?: string;
   jslogContext?: string;
@@ -475,7 +483,6 @@ export const enum EnumeratedHistogram {
   CSSHintShown = 'DevTools.CSSHintShown',
   LighthouseModeRun = 'DevTools.LighthouseModeRun',
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
-  ColorPickerOpenedFrom = 'DevTools.ColorPickerOpenedFrom',
   CSSPropertyDocumentation = 'DevTools.CSSPropertyDocumentation',
   SwatchActivated = 'DevTools.SwatchActivated',
   AnimationPlaybackRateChanged = 'DevTools.AnimationPlaybackRateChanged',

package/front_end/core/host/UserMetrics.ts

@@ -312,11 +312,6 @@ export class UserMetrics {
         EnumeratedHistogram.LighthouseCategoryUsed, type, LighthouseCategoryUsed.MAX_VALUE);
   }
 
-  colorPickerOpenedFrom(type: ColorPickerOpenedFrom): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.ColorPickerOpenedFrom, type, ColorPickerOpenedFrom.MAX_VALUE);
-  }
-
   cssPropertyDocumentation(type: CSSPropertyDocumentation): void {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.CSSPropertyDocumentation, type, CSSPropertyDocumentation.MAX_VALUE);
@@ -570,7 +565,19 @@ export enum Action {
   InsightsReminderTeaserAbortedInSettings = 167,
   GeneratingInsightWithoutDisclaimer = 168,
   FreestylerOpenedFromElementsPanelFloatingButton = 169,
-  MAX_VALUE = 170,
+  DrJonesOpenedFromNetworkPanel = 170,
+  DrJonesOpenedFromSourcesPanel = 171,
+  DrJonesOpenedFromSourcesPanelFloatingButton = 172,
+  DrJonesOpenedFromPerformancePanel = 173,
+  DrJonesOpenedFromNetworkPanelFloatingButton = 174,
+  AiAssistancePanelOpened = 175,
+  AiAssistanceQuerySubmitted = 176,
+  AiAssistanceAnswerReceived = 177,
+  AiAssistanceDynamicSuggestionClicked = 178,
+  AiAssistanceSideEffectConfirmed = 179,
+  AiAssistanceSideEffectRejected = 180,
+  AiAssistanceError = 181,
+  MAX_VALUE = 182,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -1020,16 +1027,12 @@ export enum DevtoolsExperiments {
   'extension-storage-viewer' = 100,
   'floating-entry-points-for-ai-assistance' = 101,
   'timeline-experimental-insights' = 102,
+  'timeline-dim-unrelated-events' = 103,
+  'timeline-alternative-navigation' = 104,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 103,
-}
-
-export const enum ColorPickerOpenedFrom {
-  SOURCES_PANEL = 0,
-  STYLES_TAB = 1,
-  MAX_VALUE = 2,
+  MAX_VALUE = 105,
 }
 
 export const enum CSSPropertyDocumentation {

package/front_end/core/i18n/ByteUtilities.test.ts

@@ -0,0 +1,34 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+
+import * as i18n from './i18n.js';
+
+describeWithLocale('ByteUtilities', () => {
+  describe('bytesToString', () => {
+    it('formats for < 1000 bytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(50), '50\xA0B');
+    });
+
+    it('formats for < 100 kilobytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(5 * 1000), '5.0\xA0kB');
+    });
+
+    it('formats for < 1000 kilobytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(500 * 1000), '500\xA0kB');
+    });
+
+    it('formats for < 100 megabytes', () => {
+      const oneAndAHalfMegabytes = 1500 * 1000;
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(oneAndAHalfMegabytes), '1.5\xA0MB');
+    });
+
+    it('formats for > 100 megabytes', () => {
+      const oneMegabyte = 1000 * 1000;
+      const twoHundredAndTenMegabytes = oneMegabyte * 210;
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(twoHundredAndTenMegabytes), '210\xA0MB');
+    });
+  });
+});

package/front_end/core/i18n/ByteUtilities.ts

@@ -0,0 +1,65 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {defineFormatter} from './NumberFormatter.js';
+
+const narrowBytes = defineFormatter({
+  style: 'unit',
+  unit: 'byte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowKilobytesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'kilobyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const narrowKilobytesInteger = defineFormatter({
+  style: 'unit',
+  unit: 'kilobyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMegabytesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'megabyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const narrowMegabytesInteger = defineFormatter({
+  style: 'unit',
+  unit: 'megabyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+export const bytesToString = (bytes: number): string => {
+  if (bytes < 1000) {
+    return narrowBytes.format(bytes);
+  }
+
+  const kilobytes = bytes / 1000;
+  if (kilobytes < 100) {
+    return narrowKilobytesDecimal.format(kilobytes);
+  }
+  if (kilobytes < 1000) {
+    return narrowKilobytesInteger.format(kilobytes);
+  }
+
+  const megabytes = kilobytes / 1000;
+  if (megabytes < 100) {
+    return narrowMegabytesDecimal.format(megabytes);
+  }
+  return narrowMegabytesInteger.format(megabytes);
+};

package/front_end/core/i18n/NumberFormatter.ts

@@ -0,0 +1,75 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {DevToolsLocale} from './DevToolsLocale.js';
+
+export interface NumberFormatter {
+  format(value: number): string;
+  formatToParts(value: number): Intl.NumberFormatPart[];
+}
+
+/**
+ * Creates an instance of NumberFormatter.
+ *
+ * Safe to call in top-level of a module, since the creation of Intl.NumberFormat is deferred
+ * until first usage.
+ */
+export function defineFormatter(options: Intl.NumberFormatOptions): NumberFormatter {
+  let intlNumberFormat: Intl.NumberFormat;
+
+  return {
+    format(value) {
+      if (!intlNumberFormat) {
+        intlNumberFormat = new Intl.NumberFormat(DevToolsLocale.instance().locale, options);
+      }
+      return formatAndEnsureSpace(intlNumberFormat, value);
+    },
+    formatToParts(value) {
+      if (!intlNumberFormat) {
+        intlNumberFormat = new Intl.NumberFormat(DevToolsLocale.instance().locale, options);
+      }
+      return intlNumberFormat.formatToParts(value);
+    },
+  };
+}
+
+/**
+ * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
+ * We don't like that, so when there is no space literal we inject an nbsp manually.
+ */
+function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number): string {
+  const parts = formatter.formatToParts(value);
+
+  let hasSpace = false;
+  for (const part of parts) {
+    if (part.type === 'literal') {
+      if (part.value === ' ') {
+        hasSpace = true;
+        part.value = '\xA0';
+      } else if (part.value === '\xA0') {
+        hasSpace = true;
+      }
+    }
+  }
+
+  if (hasSpace) {
+    return parts.map(part => part.value).join('');
+  }
+
+  const unitIndex = parts.findIndex(part => part.type === 'unit');
+
+  // Unexpected for there to be no unit, but just in case, handle that.
+  if (unitIndex === -1) {
+    return parts.map(part => part.value).join('');
+  }
+
+  // For locales where the unit comes first (sw), the space has to come after the unit.
+  if (unitIndex === 0) {
+    return parts[0].value + '\xA0' + parts.slice(1).map(part => part.value).join('');
+  }
+
+  // Otherwise, it comes before.
+  return parts.slice(0, unitIndex).map(part => part.value).join('') + '\xA0' +
+      parts.slice(unitIndex).map(part => part.value).join('');
+}