chrome-devtools-frontend 1.0.1621678 → 1.0.1624409

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -8,6 +8,8 @@ import * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Marked from '../../third_party/marked/marked.js';
+import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import greenDevPanelStyles from './GreenDevPanel.css.js';
@@ -265,9 +267,11 @@ export class GreenDevPanel extends UI.Panel.Panel {
     if (data.type === 'new-message' && data.text) {
       this.#appendMessageToContainer(session.container, data.text, data.isUser ?? false);
     } else if (data.type === 'update-last-message') {
-      const lastMsg = session.container.lastElementChild?.querySelector('.message-content');
+      const lastMsg = session.container.lastElementChild?.querySelector('.message-content devtools-markdown-view');
       if (lastMsg) {
-        lastMsg.textContent = data.text ?? null;
+        (lastMsg as MarkdownView.MarkdownView.MarkdownView).data = {
+          tokens: Marked.Marked.lexer(data.text ?? ''),
+        };
       }
     } else if (data.type === 'full-state') {
       session.container.innerHTML = '';
@@ -306,7 +310,30 @@ export class GreenDevPanel extends UI.Panel.Panel {
 
     const content = document.createElement('div');
     content.className = 'message-content';
-    content.textContent = text;
+    if (isUser) {
+      content.textContent = text;
+    } else {
+      const markdown = new MarkdownView.MarkdownView.MarkdownView();
+      markdown.data = {
+        tokens: Marked.Marked.lexer(text),
+      };
+      content.append(markdown);
+      const style = document.createElement('style');
+      style.textContent = `
+        .message { font-size: 1.0rem; }
+        .message code { font-size: 1.0rem; font-family: 'Roboto Mono', monospace; color: green; }
+        devtools-code-block {
+          white-space: pre-wrap;
+        }
+      `;
+      markdown.shadowRoot?.appendChild(style);
+
+      const codeBlocks = markdown.shadowRoot?.querySelectorAll('devtools-code-block');
+      for (const block of codeBlocks ?? []) {
+        // We need to rerender the component for the styles to be applied.
+        block.connectedCallback();
+      }
+    }
     content.style.flexGrow = '1';
     messageElement.appendChild(content);
 

package/front_end/panels/media/EventDisplayTable.ts

@@ -42,7 +42,7 @@ export interface EventDisplayColumnConfig {
 }
 
 export const enum MediaEventColumnKeys {
-  TIMESTAMP = 'display-timestamp',
+  TIMESTAMP = 'displayTimestamp',
   EVENT = 'event',
   VALUE = 'value',
 }

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -176,35 +176,11 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
   #disabled = false;
 
   static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
-    ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
     const selectElement = element.createChild('select');
-    const select = new NetworkThrottlingSelect(selectElement, {
-      title,
-      jslogContext: SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
-      currentConditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()
-    });
+    const select = new NetworkThrottlingSelect(selectElement, {title});
+    select.bindToGlobalConditions = true;
     select.show(element, undefined, /* suppressOrphanWidgetError= */ true);
-    select.addEventListener(Events.CONDITIONS_CHANGED, event => {
-      const conditions = event.data;
-      if (!('block' in conditions)) {
-        SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
-      }
-    });
-    SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
-        SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
-          select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-        });
-
-    // Subscribe to CrUX field data changes to show recommended throttling
-    // presets based on real-user RTT data.
-    const cruxManager = CrUXManager.CrUXManager.instance();
-    const updateRecommendation = (): void => {
-      const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
-      select.recommendedConditions =
-          PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
-    };
-    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, updateRecommendation);
-    updateRecommendation();
+    select.performUpdate();
 
     return select;
   }
@@ -259,6 +235,51 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
     this.requestUpdate();
   }
 
+  #onConditionsChanged =
+      (event: Common.EventTarget.EventTargetEvent<SDK.NetworkManager.ThrottlingConditions>): void => {
+        const conditions = event.data;
+        if (!('block' in conditions)) {
+          SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
+        }
+      };
+
+  #onGlobalConditionsChanged = (): void => {
+    this.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
+  };
+
+  #updateRecommendation = (): void => {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
+    this.recommendedConditions = PanelsCommon.ThrottlingUtils.getRecommendedNetworkConditions(roundTripTimeMetricData);
+  };
+
+  set bindToGlobalConditions(bind: boolean) {
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    const multitargetNetworkManager = SDK.NetworkManager.MultitargetNetworkManager.instance();
+
+    if (bind) {
+      this.#jslogContext = SDK.NetworkManager.activeNetworkThrottlingKeySetting().name;
+      ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
+      this.#currentConditions = multitargetNetworkManager.networkConditions();
+
+      this.addEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
+      multitargetNetworkManager.addEventListener(
+          SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
+
+      // Subscribe to CrUX field data changes to show recommended throttling
+      // presets based on real-user RTT data.
+      cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
+      this.#updateRecommendation();
+    } else {
+      this.removeEventListener(Events.CONDITIONS_CHANGED, this.#onConditionsChanged);
+      multitargetNetworkManager.removeEventListener(
+          SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onGlobalConditionsChanged);
+      cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#updateRecommendation);
+    }
+
+    this.requestUpdate();
+  }
+
   get variant(): NetworkThrottlingSelect.Variant {
     return this.#variant;
   }

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
@@ -330,45 +331,27 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     };
   }
 
-  createSaveDataOverrideSelector(className?: string): UI.Toolbar.ToolbarComboBox {
-    const reset = new Option(i18nString(UIStrings.noSaveDataOverride), undefined, true, true);
-    const enable = new Option(i18nString(UIStrings.saveDataOn));
-    const disable = new Option(i18nString(UIStrings.saveDataOff));
-    const handler = (e: Event): void => {
-      const select = e.target as HTMLSelectElement;
-      switch (select.selectedOptions.item(0)) {
-        case reset:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.UNSET));
-          }
-          break;
-        case enable:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.ENABLED));
-          }
-          break;
-        case disable:
-          for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(
-                   SDK.EmulationModel.EmulationModel)) {
-            void this.#emulationQueue.push(
-                emulationModel.setDataSaverOverride(SDK.EmulationModel.DataSaverOverride.DISABLED));
-          }
-          break;
-      }
-      this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, select.selectedIndex);
-    };
-    const select = new UI.Toolbar.ToolbarComboBox(handler, i18nString(UIStrings.saveDataSettingTooltip), className);
-    select.addOption(reset);
-    select.addOption(enable);
-    select.addOption(disable);
-
-    this.addEventListener(
-        ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => select.setSelectedIndex(data));
+  setSaveDataOverride(selectedIndex: number): void {
+    let override = SDK.EmulationModel.DataSaverOverride.UNSET;
+    if (selectedIndex === 1) {
+      override = SDK.EmulationModel.DataSaverOverride.ENABLED;
+    } else if (selectedIndex === 2) {
+      override = SDK.EmulationModel.DataSaverOverride.DISABLED;
+    }
+    for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
+      void this.#emulationQueue.push(emulationModel.setDataSaverOverride(override));
+    }
+    this.dispatchEventToListeners(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, selectedIndex);
+  }
 
+  createSaveDataOverrideSelector(className?: string): HTMLSelectElement {
+    const select = document.createElement('select');
+    select.title = i18nString(UIStrings.saveDataSettingTooltip);
+    UI.ARIAUtils.setLabel(select, i18nString(UIStrings.saveDataSettingTooltip));
+    if (className) {
+      select.className = className;
+    }
+    UI.Widget.registerWidgetConfig(select, UI.Widget.widgetConfig(SaveDataOverrideSelect));
     return select;
   }
 
@@ -453,6 +436,52 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
   }
 }
 
+export interface SaveDataOverrideViewInput {
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+}
+
+export type SaveDataOverrideViewFunction =
+    (input: SaveDataOverrideViewInput, output: undefined, target: HTMLSelectElement) => void;
+
+export const DEFAULT_SAVE_DATA_VIEW: SaveDataOverrideViewFunction = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <option value="unset" ?selected=${input.selectedIndex === 0}>${i18nString(UIStrings.noSaveDataOverride)}</option>
+    <option value="enabled" ?selected=${input.selectedIndex === 1}>${i18nString(UIStrings.saveDataOn)}</option>
+    <option value="disabled" ?selected=${input.selectedIndex === 2}>${i18nString(UIStrings.saveDataOff)}</option>
+  `, target, {container: {listeners: {change: (e: Event) => input.onSelect((e.target as HTMLSelectElement).selectedIndex)}}});
+  // clang-format on
+};
+
+export class SaveDataOverrideSelect extends
+    Common.ObjectWrapper.eventMixin<ThrottlingManager.EventTypes, typeof UI.Widget.Widget<HTMLSelectElement>>(
+        UI.Widget.Widget) {
+  #selectedIndex = 0;
+  readonly #view: SaveDataOverrideViewFunction;
+
+  constructor(element: HTMLElement, view = DEFAULT_SAVE_DATA_VIEW) {
+    super(element);
+    this.#view = view;
+    ThrottlingManager.instance().addEventListener(ThrottlingManager.Events.SAVE_DATA_OVERRIDE_CHANGED, ({data}) => {
+      this.#selectedIndex = data;
+      this.requestUpdate();
+    });
+    this.performUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          selectedIndex: this.#selectedIndex,
+          onSelect: index => {
+            ThrottlingManager.instance().setSaveDataOverride(index);
+          },
+        },
+        undefined, this.contentElement);
+  }
+}
+
 export namespace ThrottlingManager {
   export const enum Events {
     SAVE_DATA_OVERRIDE_CHANGED = 'SaveDataOverrideChanged',

package/front_end/panels/network/NetworkConfigView.ts

@@ -218,7 +218,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
     const section = this.createSection(title, 'network-config-throttling');
     MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(section, title);
     const saveDataSelect =
-        MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select').element;
+        MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector('chrome-select');
     section.appendChild(saveDataSelect);
   }
 

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -182,12 +182,6 @@ const UIStrings = {
    * @description Text in Heap Snapshot View of a profiler tool
    */
   heapSnapshotProfilesShowMemory: 'See the memory distribution of JavaScript objects and related DOM nodes',
-  /**
-   * @description Label for a checkbox in the heap snapshot view of the profiler tool. The "heap snapshot" contains the
-   * current state of JavaScript memory. With this checkbox enabled, the snapshot also includes internal data that is
-   * specific to Chrome (hence implementation-specific).
-   */
-  exposeInternals: 'Internals with implementation details',
   /**
    * @description Progress update that the profiler is capturing a snapshot of the heap
    */
@@ -1282,7 +1276,6 @@ export class StatisticsPerspective extends Perspective {
 export class HeapSnapshotProfileType extends
     Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
         implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
-  readonly exposeInternals: Common.Settings.Setting<boolean>;
   customContentInternal: UI.UIUtils.CheckboxLabel|null;
   constructor(id?: string, title?: string) {
     super(id || HeapSnapshotProfileType.TypeId, title || i18nString(UIStrings.heapSnapshot));
@@ -1295,7 +1288,6 @@ export class HeapSnapshotProfileType extends
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.HeapProfilerModel.HeapProfilerModel, SDK.HeapProfilerModel.Events.REPORT_HEAP_SNAPSHOT_PROGRESS,
         this.reportHeapSnapshotProgress, this);
-    this.exposeInternals = Common.Settings.Settings.instance().createSetting('expose-internals', false);
     this.customContentInternal = null;
   }
 
@@ -1336,19 +1328,6 @@ export class HeapSnapshotProfileType extends
     return i18nString(UIStrings.heapSnapshotProfilesShowMemory);
   }
 
-  override customContent(): Element|null {
-    const exposeInternalsInHeapSnapshotCheckbox =
-        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
-    this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
-    return exposeInternalsInHeapSnapshotCheckbox;
-  }
-
-  override setCustomContentEnabled(enable: boolean): void {
-    if (this.customContentInternal) {
-      this.customContentInternal.disabled = !enable;
-    }
-  }
-
   override createProfileLoadedFromFile(title: string): ProfileHeader {
     return new HeapProfileHeader(null, this, title);
   }
@@ -1370,7 +1349,7 @@ export class HeapSnapshotProfileType extends
     await heapProfilerModel.takeHeapSnapshot({
       reportProgress: true,
       captureNumericValue: true,
-      exposeInternals: this.exposeInternals.get(),
+      exposeInternals: true,
     });
     profile = this.profileBeingRecorded() as HeapProfileHeader;
     if (!profile) {

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -107,7 +107,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
-  private constructor() {
+  constructor() {
     super({useShadowDom: true});
     this.registerRequiredCSS(watchExpressionsSidebarPaneStyles, objectValueStyles);
 
@@ -209,6 +209,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
 
       this.createWatchExpression(expression);
     }
+    await Promise.all(this.#watchExpressions.map(we => we.updateComplete));
   }
 
   private createWatchExpression(expression: string|null): WatchExpression {
@@ -332,6 +333,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private textPrompt?: ObjectPropertyPrompt;
   private result?: SDK.RemoteObject.RemoteObject|null;
   private preventClickTimeout?: number;
+  #updateComplete: Promise<void> = Promise.resolve();
   constructor(
       expression: string|null,
       expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController,
@@ -350,6 +352,10 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.update();
   }
 
+  get updateComplete(): Promise<void> {
+    return this.#updateComplete;
+  }
+
   treeElement(): UI.TreeOutline.TreeElement {
     return this.#treeElement;
   }
@@ -386,7 +392,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   update(): void {
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext && this.#expression) {
-      void this.#evaluateExpression(currentExecutionContext, this.#expression).then(result => {
+      this.#updateComplete = this.#evaluateExpression(currentExecutionContext, this.#expression).then(result => {
         if ('object' in result) {
           this.createWatchExpression(result.object, result.exceptionDetails);
         } else {
@@ -395,6 +401,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       });
     } else {
       this.createWatchExpression();
+      this.#updateComplete = Promise.resolve();
     }
   }
 
@@ -430,8 +437,9 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#treeElement.setDisableSelectFocus(false);
     this.#treeElement.listItemElement.classList.remove('watch-expression-editing');
     if (this.textPrompt) {
+      const text = this.textPrompt.text();
       this.textPrompt.detach();
-      const newExpression = canceled ? this.#expression : this.textPrompt.text();
+      const newExpression = canceled ? this.#expression : text;
       this.textPrompt = undefined;
       this.element.removeChildren();
       this.updateExpression(newExpression);
@@ -445,7 +453,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  private updateExpression(newExpression: string|null): void {
+  updateExpression(newExpression: string|null): void {
     if (this.#expression) {
       this.expandController.stopWatchSectionsWithId(this.#expression);
     }

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

@@ -205,8 +205,8 @@
 }
 
 .interaction-inp-chip {
-  background-color: var(--sys-color-yellow-bright);
-  color: var(--sys-color-on-yellow);
+  background-color: var(--sys-color-yellow-container);
+  color: var(--sys-color-on-yellow-container);
   padding: 0 2px;
 }
 

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: b1e55a8961dbd7de8febb16a1bd10f31de63c4c6
+Revision: e388465394450fcfccc5529cf634c8561999f3b8
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/{core → ui}/dom_extension/DOMExtension.ts

@@ -38,7 +38,7 @@
 // @ts-nocheck This file is not checked by TypeScript Compiler as it has a lot of legacy code.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as Platform from '../platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 
 Node.prototype.traverseNextTextNode = function(stayWithin?: Node): Node|null {
   let node = this.traverseNextNode(stayWithin);

package/front_end/ui/legacy/UIUtils.ts

@@ -2285,7 +2285,6 @@ export const bindToSetting =
         }
       }
 
-      const jslogBuilder = jslog ? VisualLogging.toggle(setting.name).track({change: true}) : null;
       // We can't use `setValue` as the change listener directly, otherwise we won't
       // be able to remove it again.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2295,22 +2294,45 @@ export const bindToSetting =
       }
 
       if (setting.type() === Common.Settings.SettingType.BOOLEAN || typeof setting.defaultValue === 'boolean') {
+        let attachedButton: Buttons.Button.Button|undefined;
+        let clickListener: (() => void)|undefined;
+
         return Directives.ref(e => {
           if (e === undefined) {
             setting.removeChangeListener(settingChanged);
+            if (attachedButton && clickListener) {
+              attachedButton.removeEventListener('click', clickListener);
+              attachedButton = undefined;
+            }
             return;
           }
-          if (jslogBuilder) {
+          if (jslog) {
+            const isButton = e instanceof Buttons.Button.Button;
+            const jslogBuilder = VisualLogging.toggle(setting.name).track(isButton ? {click: true} : {change: true});
             e.setAttribute('jslog', jslogBuilder.toString());
           }
 
           setting.addChangeListener(settingChanged);
-          setValue =
-              bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
+
+          if (e instanceof Buttons.Button.Button) {
+            attachedButton = e;
+            clickListener = (): void => {
+              (setting as Common.Settings.Setting<boolean>).set(!setting.get());
+            };
+            e.addEventListener('click', clickListener);
+            setValue = (value: boolean): void => {
+              e.toggled = value;
+            };
+          } else {
+            setValue =
+                bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
+          }
           setValue(setting.get());
         });
       }
 
+      const jslogBuilder = jslog ? VisualLogging.toggle(setting.name).track({change: true}) : null;
+
       if (setting.type() === Common.Settings.SettingType.REGEX || setting instanceof Common.Settings.RegExpSetting) {
         return Directives.ref(e => {
           if (e === undefined) {

package/front_end/ui/legacy/Widget.ts

@@ -29,7 +29,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import '../../core/dom_extension/dom_extension.js';
+import '../dom_extension/dom_extension.js';
 
 import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -722,6 +722,7 @@ export const knownContextValues = new Set([
   'cache-storage-view-tab',
   'cache-storage.delete-selected',
   'cache-storage.refresh',
+  'cache-widget',
   'calibrated-cpu-throttling',
   'call-tree',
   'cancel',
@@ -744,6 +745,7 @@ export const knownContextValues = new Set([
   'changes',
   'changes.changes',
   'changes.reveal-source',
+  'character-set-widget',
   'checkbox-item',
   'checked',
   'chevron-left',
@@ -816,6 +818,7 @@ export const knownContextValues = new Set([
   'close-walkthrough',
   'closeable-tabs',
   'closeableTabs',
+  'cls-culprits-widget',
   'code',
   'code-completion.accordion',
   'code-disclaimer',
@@ -934,6 +937,7 @@ export const knownContextValues = new Set([
   'console-view',
   'console.clear',
   'console.clear.history',
+  'console.collapse-all',
   'console.create-pin',
   'console.sidebar-selected-filter',
   'console.text-filter',
@@ -1368,6 +1372,7 @@ export const knownContextValues = new Set([
   'distance',
   'dock-side',
   'document',
+  'document-latency-widget',
   'document.write',
   'documentation',
   'documents',
@@ -1383,6 +1388,7 @@ export const knownContextValues = new Set([
   'dom-node-inserted-into-document',
   'dom-node-removed',
   'dom-node-removed-from-document',
+  'dom-size-widget',
   'dom-snapshot',
   'dom-subtree-modified',
   'dom-window.close',
@@ -1421,6 +1427,7 @@ export const knownContextValues = new Set([
   'drjones.sources-panel-context.performance',
   'drjones.sources-panel-context.script',
   'drop',
+  'duplicate-javascript-widget',
   'durable-messages',
   'duration',
   'durationchange',
@@ -1704,6 +1711,7 @@ export const knownContextValues = new Set([
   'folder',
   'font',
   'font-display',
+  'font-display-widget',
   'font-editor',
   'font-editor-documentation',
   'font-family',
@@ -1743,6 +1751,7 @@ export const knownContextValues = new Set([
   'force-state',
   'forced-color-adjust',
   'forced-reflow',
+  'forced-reflow-widget',
   'form-data',
   'form-factors',
   'fourth',
@@ -1972,6 +1981,7 @@ export const knownContextValues = new Set([
   'ignore-this-retainer',
   'image',
   'image-animation',
+  'image-delivery-widget',
   'image-orientation',
   'image-rendering',
   'image-url',
@@ -2010,6 +2020,7 @@ export const knownContextValues = new Set([
   'inline-size',
   'inline-variable-values',
   'inline-variable-values-false',
+  'inp-breakdown-widget',
   'input',
   'insertCompositionText',
   'insertFromDrop',
@@ -2274,6 +2285,8 @@ export const knownContextValues = new Set([
   'layout-count',
   'layout-shifts',
   'lcp-breakdown',
+  'lcp-breakdown-widget',
+  'lcp-discovery-widget',
   'learn-more',
   'learn-more.ai-annotations',
   'learn-more.ai-assistance',
@@ -2288,6 +2301,7 @@ export const knownContextValues = new Set([
   'learn-more.origin-trials',
   'leavepictureinpicture',
   'left',
+  'legacy-javascript-widget',
   'legend',
   'length',
   'length-popover',
@@ -2698,6 +2712,7 @@ export const knownContextValues = new Set([
   'mobile-throttling',
   'model',
   'modern',
+  'modern-http-widget',
   'monitoring-xhr-enabled',
   'monspace',
   'more',
@@ -2756,6 +2771,7 @@ export const knownContextValues = new Set([
   'network-conditions.network-offline',
   'network-conditions.network-online',
   'network-default',
+  'network-dependency-tree-widget',
   'network-direct-socket-message-filter',
   'network-event-source-message-filter',
   'network-film-strip',
@@ -3713,6 +3729,7 @@ export const knownContextValues = new Set([
   'slot',
   'slow',
   'slow-4g',
+  'slow-css-selector-widget',
   'sm-script',
   'sm-stylesheet',
   'small',
@@ -3963,6 +3980,7 @@ export const knownContextValues = new Set([
   'th',
   'third',
   'third-parties',
+  'third-parties-widget',
   'third-party-tree',
   'third-property',
   'this-origin',
@@ -4343,6 +4361,7 @@ export const knownContextValues = new Set([
   'view-transition-group',
   'view-transition-name',
   'view-transition-scope',
+  'viewport-widget',
   'views-location-override',
   'virtual-authenticators',
   'visibility',

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1621678"
+  "version": "1.0.1624409"
 }