chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/third_party/puppeteer/package/src/cdp/BrowserContext.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {CreatePageOptions} from '../api/Browser.js';
 import {
   WEB_PERMISSION_TO_PROTOCOL_PERMISSION,
   type Permission,
@@ -88,9 +89,9 @@ export class CdpBrowserContext extends BrowserContext {
     });
   }
 
-  override async newPage(): Promise<Page> {
+  override async newPage(options?: CreatePageOptions): Promise<Page> {
     using _guard = await this.waitForScreenshotOperations();
-    return await this.#browser._createPageInContext(this.#id);
+    return await this.#browser._createPageInContext(this.#id, options);
   }
 
   override browser(): CdpBrowser {

package/front_end/third_party/puppeteer/package/src/cdp/Page.ts

@@ -14,7 +14,7 @@ import type {ElementHandle} from '../api/ElementHandle.js';
 import type {Frame, WaitForOptions} from '../api/Frame.js';
 import type {HTTPResponse} from '../api/HTTPResponse.js';
 import type {JSHandle} from '../api/JSHandle.js';
-import type {Credentials} from '../api/Page.js';
+import type {Credentials, ReloadOptions} from '../api/Page.js';
 import {
   Page,
   PageEvent,
@@ -898,15 +898,15 @@ export class CdpPage extends Page {
     this.emit(PageEvent.Dialog, dialog);
   }
 
-  override async reload(
-    options?: WaitForOptions,
-  ): Promise<HTTPResponse | null> {
+  override async reload(options?: ReloadOptions): Promise<HTTPResponse | null> {
     const [result] = await Promise.all([
       this.waitForNavigation({
         ...options,
         ignoreSameDocumentNavigation: true,
       }),
-      this.#primaryTargetClient.send('Page.reload'),
+      this.#primaryTargetClient.send('Page.reload', {
+        ignoreCache: options?.ignoreCache ?? false,
+      }),
     ]);
 
     return result;

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '141.0.7390.122',
-  'chrome-headless-shell': '141.0.7390.122',
-  firefox: 'stable_144.0',
+  chrome: '142.0.7444.59',
+  'chrome-headless-shell': '142.0.7444.59',
+  firefox: 'stable_144.0.2',
 });

package/front_end/third_party/puppeteer/package/src/util/disposable.ts

@@ -45,7 +45,7 @@ export const asyncDisposeSymbol: typeof Symbol.asyncDispose =
 /**
  * @internal
  */
-class DisposableStackPolyfill {
+export class DisposableStackPolyfill {
   #disposed = false;
   #stack: Disposable[] = [];
 
@@ -194,7 +194,7 @@ export const DisposableStack: typeof DisposableStackPolyfill =
 /**
  * @internal
  */
-class AsyncDisposableStackPolyfill {
+export class AsyncDisposableStackPolyfill {
   #disposed = false;
   #stack: AsyncDisposable[] = [];
 

package/front_end/third_party/puppeteer/package/src/util/util.ts

@@ -10,3 +10,4 @@ export * from './Mutex.js';
 export * from './ErrorLike.js';
 export * from './AsyncIterableUtil.js';
 export * from './disposable.js';
+export * from './incremental-id-generator.js';

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.26.1';
+export const packageVersion = '24.27.0';
 // x-release-please-end

package/front_end/ui/components/docs/tooltip/basic.ts

@@ -31,7 +31,7 @@ Lit.render(
       >
         Non-button click trigger
       </span>
-      <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
+      <devtools-tooltip id="rich-tooltip" variant="rich" trigger="click">
         <p>Rich tooltip</p>
         <button>Action</button>
       </devtools-tooltip>

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -0,0 +1,280 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
+import * as PanelCommon from '../../../panels/common/common.js';
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as UI from '../../legacy/legacy.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+
+import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {
+  aiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestionState,
+  setAiAutoCompleteSuggestion,
+} from './config.js';
+import type {TextEditor} from './TextEditor.js';
+
+export enum AiCodeCompletionTeaserMode {
+  OFF = 'off',
+  ON = 'on',
+  ONLY_SHOW_ON_EMPTY = 'onlyShowOnEmpty',
+}
+
+export const setAiCodeCompletionTeaserMode = CodeMirror.StateEffect.define<AiCodeCompletionTeaserMode>();
+
+export const aiCodeCompletionTeaserModeState = CodeMirror.StateField.define<AiCodeCompletionTeaserMode>({
+  create: () => AiCodeCompletionTeaserMode.OFF,
+  update(value, tr) {
+    return tr.effects.find(effect => effect.is(setAiCodeCompletionTeaserMode))?.value ?? value;
+  },
+});
+
+export interface AiCodeCompletionConfig {
+  completionContext: {
+    additionalFiles?: Host.AidaClient.AdditionalFile[],
+    inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+    getPrefix?: () => string,
+    stopSequences?: string[],
+  };
+  onFeatureEnabled: () => void;
+  onFeatureDisabled: () => void;
+  onSuggestionAccepted: () => void;
+  onRequestTriggered: () => void;
+  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+}
+
+export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
+export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
+
+// TODO(samiyac): Add code relevant to AiCodeCompletion and for triggering requests
+export class AiCodeCompletionProvider {
+  #aidaClient?: Host.AidaClient.AidaClient;
+  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  #aiCodeCompletionTeaserDismissedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
+  #teaserCompartment = new CodeMirror.Compartment();
+  #teaser?: PanelCommon.AiCodeCompletionTeaser;
+  #suggestionRenderingTimeout?: number;
+  #editor?: TextEditor;
+  #aiCodeCompletionConfig?: AiCodeCompletionConfig;
+
+  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+
+  constructor(aiCodeCompletionConfig: AiCodeCompletionConfig) {
+    if (!this.#isAiCodeCompletionEnabled()) {
+      throw new Error('AI code completion feature is not enabled.');
+    }
+    this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
+  }
+
+  extension(): CodeMirror.Extension[] {
+    return [
+      this.#teaserCompartment.of([]),
+      aiAutoCompleteSuggestion,
+      aiCodeCompletionTeaserModeState,
+      aiAutoCompleteSuggestionState,
+    ];
+  }
+
+  dispose(): void {
+    this.#detachTeaser();
+    this.#teaser = undefined;
+    this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#cleanupAiCodeCompletion();
+  }
+
+  editorInitialized(editor: TextEditor): void {
+    this.#editor = editor;
+    if (!this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get()) {
+      this.#teaser = new PanelCommon.AiCodeCompletionTeaser({
+        onDetach: () => this.#detachTeaser.bind(this),
+      });
+      this.#editor.editor.dispatch(
+          {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
+    }
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    void this.#updateAiCodeCompletionState();
+  }
+
+  #setupAiCodeCompletion(): void {
+    if (!this.#editor || !this.#aiCodeCompletionConfig) {
+      return;
+    }
+    if (!this.#aidaClient) {
+      this.#aidaClient = new Host.AidaClient.AidaClient();
+    }
+    this.#aiCodeCompletionConfig.onFeatureEnabled();
+  }
+
+  #cleanupAiCodeCompletion(): void {
+    if (this.#suggestionRenderingTimeout) {
+      clearTimeout(this.#suggestionRenderingTimeout);
+      this.#suggestionRenderingTimeout = undefined;
+    }
+    this.#editor?.dispatch({
+      effects: setAiAutoCompleteSuggestion.of(null),
+    });
+    this.#aiCodeCompletionConfig?.onFeatureDisabled();
+  }
+
+  async #updateAiCodeCompletionState(): Promise<void> {
+    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
+    const isEnabled = this.#aiCodeCompletionSetting.get();
+    if (isAvailable && isEnabled) {
+      this.#detachTeaser();
+      this.#setupAiCodeCompletion();
+    } else if (isAvailable && !isEnabled) {
+      if (this.#teaser && !this.#aiCodeCompletionTeaserDismissedSetting.get()) {
+        this.#editor?.editor.dispatch(
+            {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
+      }
+      this.#cleanupAiCodeCompletion();
+    } else if (!isAvailable) {
+      this.#detachTeaser();
+      this.#cleanupAiCodeCompletion();
+    }
+  }
+
+  #detachTeaser(): void {
+    if (!this.#teaser) {
+      return;
+    }
+    this.#editor?.editor.dispatch({effects: this.#teaserCompartment.reconfigure([])});
+  }
+
+  // TODO(samiyac): Define static method in AiCodeCompletion and use that instead
+  #isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+  }
+}
+
+function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTeaser): CodeMirror.Extension {
+  return CodeMirror.ViewPlugin.fromClass(class {
+    teaser: PanelCommon.AiCodeCompletionTeaser;
+    #teaserDecoration: CodeMirror.DecorationSet = CodeMirror.Decoration.none;
+    #teaserMode: AiCodeCompletionTeaserMode;
+    #teaserDisplayTimeout?: number;
+
+    constructor(readonly view: CodeMirror.EditorView) {
+      this.teaser = teaser;
+      this.#teaserMode = view.state.field(aiCodeCompletionTeaserModeState);
+      this.#setupDecoration();
+    }
+
+    destroy(): void {
+      window.clearTimeout(this.#teaserDisplayTimeout);
+    }
+
+    update(update: CodeMirror.ViewUpdate): void {
+      const currentTeaserMode = update.state.field(aiCodeCompletionTeaserModeState);
+      if (currentTeaserMode !== this.#teaserMode) {
+        this.#teaserMode = currentTeaserMode;
+        this.#setupDecoration();
+        return;
+      }
+      if (this.#teaserMode === AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY && update.docChanged) {
+        this.#updateTeaserDecorationForOnlyShowOnEmptyMode();
+      } else if (this.#teaserMode === AiCodeCompletionTeaserMode.ON) {
+        if (update.docChanged) {
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+          window.clearTimeout(this.#teaserDisplayTimeout);
+          this.#updateTeaserDecorationForOnMode();
+        } else if (update.selectionSet && update.state.doc.length > 0) {
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+        }
+      }
+    }
+
+    get decorations(): CodeMirror.DecorationSet {
+      return this.#teaserDecoration;
+    }
+
+    #setupDecoration(): void {
+      switch (this.#teaserMode) {
+        case AiCodeCompletionTeaserMode.ON:
+          this.#updateTeaserDecorationForOnModeImmediately();
+          return;
+        case AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY:
+          this.#updateTeaserDecorationForOnlyShowOnEmptyMode();
+          return;
+        case AiCodeCompletionTeaserMode.OFF:
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+          return;
+      }
+    }
+
+    #updateTeaserDecorationForOnlyShowOnEmptyMode(): void {
+      if (this.view.state.doc.length === 0) {
+        this.#addTeaserWidget(0);
+      } else {
+        this.#teaserDecoration = CodeMirror.Decoration.none;
+      }
+    }
+
+    #updateTeaserDecorationForOnMode = Common.Debouncer.debounce(() => {
+      this.#teaserDisplayTimeout = window.setTimeout(() => {
+        this.#updateTeaserDecorationForOnModeImmediately();
+        this.view.dispatch({});
+      }, DELAY_BEFORE_SHOWING_RESPONSE_MS);
+    }, AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
+
+    #updateTeaserDecorationForOnModeImmediately(): void {
+      const cursorPosition = this.view.state.selection.main.head;
+      const line = this.view.state.doc.lineAt(cursorPosition);
+      if (cursorPosition >= line.to) {
+        this.#addTeaserWidget(cursorPosition);
+      }
+    }
+
+    #addTeaserWidget(pos: number): void {
+      this.#teaserDecoration = CodeMirror.Decoration.set([
+        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(this.teaser), side: 1}).range(pos),
+      ]);
+    }
+  }, {
+    decorations: v => v.decorations,
+    eventHandlers: {
+      mousedown(event: MouseEvent): boolean {
+        // Required for mouse click to propagate to the "Don't show again" span in teaser.
+        return (event.target instanceof Node && teaser.contentElement.contains(event.target));
+      },
+      keydown(event: KeyboardEvent): boolean {
+        if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) || !teaser.isShowing()) {
+          return false;
+        }
+        if (event.key === 'i') {
+          event.consume(true);
+          void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.fre');
+          void this.teaser.onAction(event);
+          return true;
+        }
+        if (event.key === 'x') {
+          event.consume(true);
+          void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.dismiss');
+          this.teaser.onDismiss(event);
+          return true;
+        }
+        return false;
+      }
+    },
+  });
+}

package/front_end/ui/components/text_editor/text_editor.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
 export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -167,6 +167,7 @@ const proposedRectForSimpleTooltip =
 
 export type TooltipVariant = 'simple'|'rich';
 export type PaddingMode = 'small'|'large';
+export type TooltipTrigger = 'hover'|'click'|'both';
 
 export interface TooltipProperties {
   id: string;
@@ -174,6 +175,7 @@ export interface TooltipProperties {
   padding?: PaddingMode;
   anchor?: HTMLElement;
   jslogContext?: string;
+  trigger?: TooltipTrigger;
 }
 
 /**
@@ -182,7 +184,7 @@ export interface TooltipProperties {
  * @property hoverDelay - reflects the `"hover-delay"` attribute.
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
- * @property useClick - reflects the `"click"` attribute.
+ * @property trigger - reflects the `"trigger"` attribute.
  * @property verticalDistanceIncrease - reflects the `"vertical-distance-increase"` attribute.
  * @property preferSpanLeft - reflects the `"prefer-span-left"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
@@ -190,17 +192,19 @@ export interface TooltipProperties {
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
  *                 `"rich"` for interactive content, background according to theme's surface.
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
- * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attribute trigger - Specifies which action triggers the tooltip. `"hover"` is the default. `"click"` means the
+ *                 tooltip will be shown on click instead of hover. `"both"` means both hover and click trigger the
+ *                 tooltip.
  * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
  * @attribute prefer-span-left - If present, the tooltip's preferred position is `"span-left"` (The right
  *                 side of the tooltip and its anchor are aligned. The tooltip expands to the left from
  *                 there.). Applies to rich tooltips only.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
- *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
- *                    as well, use-click takes precedence.
+ *                  Requires a hotkey to open when fosed (Alt-down). When `"trigger"` is present
+ *                  as well, `"trigger"` takes precedence.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'];
   static lastOpenedTooltipId: string|null = null;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -231,16 +235,20 @@ export class Tooltip extends HTMLElement {
     }
   }
 
-  get useClick(): boolean {
-    return this.hasAttribute('use-click') ?? false;
-  }
-  set useClick(useClick: boolean) {
-    if (useClick) {
-      this.setAttribute('use-click', '');
-    } else {
-      this.removeAttribute('use-click');
+  get trigger(): TooltipTrigger {
+    switch (this.getAttribute('trigger')) {
+      case 'click':
+        return 'click';
+      case 'both':
+        return 'both';
+      case 'hover':
+      default:
+        return 'hover';
     }
   }
+  set trigger(trigger: TooltipTrigger) {
+    this.setAttribute('trigger', trigger);
+  }
 
   get hoverDelay(): number {
     return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 300;
@@ -297,7 +305,7 @@ export class Tooltip extends HTMLElement {
 
   constructor(properties?: TooltipProperties) {
     super();
-    const {id, variant, padding, jslogContext, anchor} = properties ?? {};
+    const {id, variant, padding, jslogContext, anchor, trigger} = properties ?? {};
     if (id) {
       this.id = id;
     }
@@ -317,6 +325,9 @@ export class Tooltip extends HTMLElement {
       }
       this.#anchor = anchor;
     }
+    if (trigger) {
+      this.trigger = trigger;
+    }
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
@@ -432,7 +443,7 @@ export class Tooltip extends HTMLElement {
     this.#previousAnchorRect = anchorRect;
     this.#previousPopoverRect = currentPopoverRect;
 
-    const inspectorViewRect = UI.InspectorView.InspectorView.instance().element.getBoundingClientRect();
+    const inspectorViewRect = UI.UIUtils.getDevToolsBoundingElement().getBoundingClientRect();
     const preferredPositions =
         this.preferSpanLeft ? [PositionOption.BOTTOM_SPAN_LEFT, PositionOption.TOP_SPAN_LEFT] : [];
     const proposedPopoverRect = this.variant === 'rich' ?
@@ -463,7 +474,7 @@ export class Tooltip extends HTMLElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tooltip');
     }
-    this.setAttribute('popover', this.useClick ? 'auto' : 'manual');
+    this.setAttribute('popover', this.trigger === 'hover' ? 'manual' : 'auto');
     this.#updateJslog();
   }
 
@@ -474,6 +485,9 @@ export class Tooltip extends HTMLElement {
   #setClosing = (event: Event): void => {
     if ((event as ToggleEvent).newState === 'closed') {
       this.#closing = true;
+      if (this.#timeout) {
+        window.clearTimeout(this.#timeout);
+      }
     }
   };
 
@@ -521,9 +535,10 @@ export class Tooltip extends HTMLElement {
       // as we always want to support ESC to close.
       this.#anchor.addEventListener('keydown', this.#keyDown);
 
-      if (this.useClick) {
+      if (this.trigger === 'click' || this.trigger === 'both') {
         this.#anchor.addEventListener('click', this.toggle);
-      } else {
+      }
+      if (this.trigger === 'hover' || this.trigger === 'both') {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
         if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);

package/front_end/ui/i18n/i18n.ts

@@ -0,0 +1,31 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import * as I18n from '../../core/i18n/i18n.js';
+import type * as ThirdPartyI18n from '../../third_party/i18n/i18n.js';
+
+/**
+ * Returns a span element that may contains other DOM element as placeholders
+ */
+export function getFormatLocalizedString(
+    registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
+    placeholders: Record<string, Object>): HTMLSpanElement {
+  const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
+                        .getMessageFormatterFor(stringId);
+
+  const element = document.createElement('span');
+  for (const icuElement of formatter.getAst()) {
+    if (icuElement.type === /* argumentElement */ 1) {
+      const placeholderValue = placeholders[icuElement.value];
+      if (placeholderValue) {
+        element.append(placeholderValue as Node | string);
+      }
+    } else if ('value' in icuElement) {
+      element.append(String(icuElement.value));
+    }
+  }
+  return element;
+}

package/front_end/ui/legacy/Dialog.ts

@@ -33,7 +33,6 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
       this.contentElement.setAttribute(
           'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Escape'})}`);
     }
-    this.widget().setDefaultFocusedElement(this.contentElement);
     this.setPointerEventsBehavior(PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
     this.setOutsideClickCallback(event => {
       // If there are stacked dialogs, we only want to

package/front_end/ui/legacy/SettingsUI.ts

@@ -205,16 +205,6 @@ const bindCheckboxImpl = function(
   };
 };
 
-export const createCustomSetting = function(name: string, element: Element): Element {
-  const p = document.createElement('p');
-  p.classList.add('settings-select');
-  const label = p.createChild('label');
-  label.textContent = name;
-  ARIAUtils.bindLabelToControl(label, element);
-  p.appendChild(element);
-  return p;
-};
-
 export const createControlForSetting = function(
     setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
   const uiTitle = setting.title();
@@ -239,10 +229,6 @@ export const createControlForSetting = function(
   }
 };
 
-export interface SettingUI {
-  settingElement(): Element|null;
-}
-
 /**
  * Track toggle action as a whole or
  * track on and off action separately.

package/front_end/ui/legacy/SoftDropDown.ts

@@ -38,7 +38,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   private list: ListControl<T>;
   private rowHeight: number;
   private width: number;
-  private listWasShowing200msAgo: boolean;
 
   constructor(model: ListModel<T>, delegate: Delegate<T>, jslogContext?: string) {
     this.delegate = delegate;
@@ -79,9 +78,8 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         'jslog',
         `${VisualLogging.menu().parent('mapped').track({resize: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown'})}`);
 
-    this.listWasShowing200msAgo = false;
     this.element.addEventListener('mousedown', event => {
-      if (this.listWasShowing200msAgo) {
+      if (this.glassPane.isShowing()) {
         this.hide(event);
       } else if (!this.element.disabled) {
         this.show(event);
@@ -96,9 +94,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         return;
       }
 
-      if (!this.listWasShowing200msAgo) {
-        return;
-      }
       this.selectHighlightedItem();
       if (event.target instanceof Element && event.target?.parentElement) {
         // hide() will consume the mouseup event and click won't be triggered
@@ -122,9 +117,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
       this.list.selectItem(this.selectedItem);
     }
     event.consume(true);
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = true;
-    }, 200);
   }
 
   private updateGlasspaneSize(): void {
@@ -134,9 +126,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   }
 
   private hide(event: Event): void {
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = false;
-    }, 200);
     this.glassPane.hide();
     this.list.selectItem(null);
     ARIAUtils.setExpanded(this.element, false);

package/front_end/ui/legacy/ViewManager.ts

@@ -164,14 +164,12 @@ export interface EventTypes {
 }
 
 export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly views: Map<string, View>;
-  private readonly locationNameByViewId: Map<string, string>;
+  readonly views = new Map<string, View>();
+  private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
   private constructor() {
     super();
-    this.views = new Map();
-    this.locationNameByViewId = new Map();
 
     // Read override setting for location
     this.locationOverrideSetting = Common.Settings.Settings.instance().createSetting('views-location-override', {});