chrome-devtools-frontend 1.0.1545096 → 1.0.1547147

package/front_end/panels/sources/CoveragePlugin.ts

@@ -7,10 +7,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Coverage from '../coverage/coverage.js';
 
@@ -123,7 +123,7 @@ export class CoveragePlugin extends Plugin {
   }
 
   private getCoverageManager(): Coverage.CoverageDecorationManager.CoverageDecorationManager|undefined {
-    return this.uiSourceCode.getDecorationData(SourceFrame.SourceFrame.DecoratorType.COVERAGE);
+    return this.uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.COVERAGE);
   }
 
   override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
@@ -132,9 +132,9 @@ export class CoveragePlugin extends Plugin {
     }
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
-    if (type === SourceFrame.SourceFrame.DecoratorType.COVERAGE) {
+    if (type === Workspace.UISourceCode.DecoratorType.COVERAGE) {
       this.startDecoUpdate(editor);
     }
   }

package/front_end/panels/sources/Plugin.ts

@@ -41,7 +41,7 @@ export class Plugin {
       void {
   }
 
-  decorationChanged(_type: SourceFrame.SourceFrame.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
+  decorationChanged(_type: Workspace.UISourceCode.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
   }
 
   editorExtension(): CodeMirror.Extension {

package/front_end/panels/sources/ProfilePlugin.ts

@@ -5,10 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -90,22 +89,31 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 function markersFromProfileData(
-    map: Map<number, number>, state: CodeMirror.EditorState,
-    type: SourceFrame.SourceFrame.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
-  const markerType = type === SourceFrame.SourceFrame.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
+    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
+  const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      const {from} = state.doc.line(line);
-      markers.push(new markerType(value).range(from));
+      if (value instanceof Map) {
+        for (const [, data] of value) {
+          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
+        }
+        continue;
+      }
+      aggregatedByLine.set(line, value);
     }
   }
+  for (const [line, value] of aggregatedByLine) {
+    const {from} = state.doc.line(line);
+    markers.push(new markerType(value).range(from));
+  }
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType): typeof Plugin =>
-    class extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Map<number, number>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
@@ -134,7 +142,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|undefined {
+  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
     return this.uiSourceCode.getDecorationData(type);
   }
 
@@ -144,7 +152,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
         !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
     const installed = Boolean(editor.state.field(this.field, false));
     const map = this.getLineMap();
@@ -189,6 +197,6 @@ const theme = CodeMirror.EditorView.baseTheme({
   },
 });
 
-export const MemoryProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+export const MemoryProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.MEMORY);
 
-export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
+export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.PERFORMANCE);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -238,6 +238,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
+    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);
@@ -423,7 +424,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
 
   private onDecorationChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     for (const plugin of this.plugins) {
-      plugin.decorationChanged(event.data as SourceFrame.SourceFrame.DecoratorType, this.textEditor);
+      plugin.decorationChanged(event.data as Workspace.UISourceCode.DecoratorType, this.textEditor);
     }
   }
 

package/front_end/panels/sources/sources-meta.ts

@@ -232,18 +232,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotAutomaticallyRevealFilesIn: 'Do not automatically reveal files in sidebar',
-  /**
-   * @description Setting under the Sources category to toggle usage of JavaScript source maps.
-   */
-  javaScriptSourceMaps: 'JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
   /**
    * @description Title of a setting under the Sources category.
    *'tab moves focus' is the name of the setting, which means that when the user
@@ -373,18 +361,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotDisplayVariableValuesInline: 'Do not display variable values inline while debugging',
-  /**
-   * @description Title of a setting under the Sources category
-   */
-  cssSourceMaps: 'CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableCssSourceMaps: 'Enable CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableCssSourceMaps: 'Disable CSS source maps',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1556,25 +1532,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
-  settingName: 'js-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,
@@ -1799,25 +1756,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.cssSourceMaps),
-  settingName: 'css-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableCssSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableCssSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/timeline/README.md

@@ -14,15 +14,7 @@ The first method is to run DevTools! Load up the Chrome for Testing version that
 
 DevTools, navigate to the Performance Panel and record or import a trace. There are a number of trace files saved in `devtools-frontend/test/unittests/fixtures/traces` that you can use.
 
-#### Option 2: the components server
-
-You can also use the DevTools component server. This server runs standalone parts of DevTools in the browser. To do this, run `npm run components-server` in the terminal, which will run a server on `localhost:8090`.
-
-You can then navigate to the Performance Panel examples using the link on the index page. This runs the real Performance Panel code in isolation, and you can additionally preload a trace by appending `?trace=name-of-trace-file-from-fixtures`. This is a nicer development cycle because you do not have to manually import a trace after each change. Note though that some parts of the experience are stubbed, so you always should test your work in proper DevTools too.
-
-These examples can also be used to create screenshot tests, which are an important tool for the Performance Panel because it is the only way to test `<canvas>` output. We define these as interaction tests (`devtools-frontend/tests/interactions/panels/performance`).
-
-#### Option 3: bundled DevTools in the browser
+#### Option 2: bundled DevTools in the browser
 
 This option loads the DevTools frontend in a browser tab in Chrome, but requires a little more setup to easily load traces.
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -135,13 +135,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-/**
- * This appender is only triggered when the Renderer handler is run. At
- * the moment this only happens in the basic component server example.
- * In the future, once this appender fully supports the behaviour of the
- * old engine's thread/sync tracks we can always run it by enabling the
- * Renderer and Samples handler by default.
- **/
 export class ThreadAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Thread';
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -946,7 +946,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       const agent = conversationHandler.createAgent(AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE);
-      const conversation = new AiAssistanceModel.AiHistoryStorage.Conversation(
+      const conversation = new AiAssistanceModel.AiConversation.AiConversation(
           AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
           [],
           agent.id,

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1646,6 +1646,8 @@ export class TimelineUIUtils {
   private static renderEventJson(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper): void {
     contentHelper.addSection(i18nString(UIStrings.traceEvent));
 
+    contentHelper.appendElementRow('eventKey', new Trace.EventsSerializer.EventsSerializer().keyForEvent(event) ?? '?');
+
     const eventWithArgsFirst = {
       ...{args: event.args},
       ...event,

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

@@ -14,6 +14,7 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import exportTraceOptionsStyles from './exportTraceOptions.css.js';
 
@@ -44,6 +45,10 @@ const UIStrings = {
    * @description Text for the compression option.
    */
   shouldCompress: 'Compress with gzip',
+  /**
+   * @description Text for the explanation link
+   */
+  explanation: 'Explanation',
   /**
    * @description Text for the save trace button
    */
@@ -292,7 +297,16 @@ export class ExportTraceOptions extends HTMLElement {
             'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
-          <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
+          <div class='export-trace-options-row export-trace-options-row-last'>
+            <div class="export-trace-explanation">
+              <x-link
+                href="https://developer.chrome.com/docs/devtools/performance/save-trace"
+                class=devtools-link
+                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('save-trace-explanation')}>
+                  ${i18nString(UIStrings.explanation)}
+              </x-link>
+            </div>
+            <devtools-button
                   class="setup-button"
                   data-export-button
                   @click=${this.#onExportClick.bind(this)}

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

@@ -58,6 +58,14 @@ const UIStrings = {
    * @description Title of a view that shows performance metrics from the local environment.
    */
   localMetrics: 'Local metrics',
+  /**
+   *@description Text for the link to the historical field data for the specific URL or origin that is shown. This link text appears in parenthesis after the collection period information in the field data dialog. The link opens the CrUX Vis viewer (https://cruxvis.withgoogle.com).
+   */
+  fieldDataHistoryLink: 'View history',
+  /**
+   *@description Tooltip for the CrUX Vis viewer link which shows the history of the field data for the specific URL or origin.
+   */
+  fieldDataHistoryTooltip: 'View field data history in CrUX Vis',
   /**
    * @description Accessible label for a section that logs user interactions and layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
    */
@@ -840,6 +848,32 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
+  #renderFieldDataHistoryLink(): Lit.LitTemplate {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
+      return Lit.nothing;
+    }
+    const normalizedUrl = this.#cruxManager.pageResult?.normalizedUrl;
+    if (!normalizedUrl) {
+      return Lit.nothing;
+    }
+    const tmp = new URL('https://cruxvis.withgoogle.com/');
+    tmp.searchParams.set('view', 'cwvsummary');
+    tmp.searchParams.set('url', normalizedUrl);
+    // identifier must be 'origin' or 'url'.
+    const identifier = this.#cruxManager.fieldPageScope;
+    tmp.searchParams.set('identifier', identifier);
+    // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
+    const device = this.#cruxManager.getSelectedDeviceScope();
+    tmp.searchParams.set('device', device);
+    const cruxVis = `${tmp.origin}/#/${tmp.search}`;
+    return html`
+        (<x-link href=${cruxVis}
+                 class="local-field-link"
+                 title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
+        >${i18nString(UIStrings.fieldDataHistoryLink)}</x-link>)
+      `;
+  }
+
   #renderCollectionPeriod(): Lit.LitTemplate {
     const range = this.#getCollectionPeriodRange();
 
@@ -851,11 +885,13 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const fieldDataHistoryLink = range ? this.#renderFieldDataHistoryLink() : Lit.nothing;
+
     const warnings = this.#cruxManager.pageResult?.warnings || [];
 
     return html`
       <div class="field-data-message">
-        <div>${message}</div>
+        <div>${message} ${fieldDataHistoryLink}</div>
         ${warnings.map(warning => html`
           <div class="field-data-warning">${warning}</div>
         `)}

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

@@ -19,13 +19,22 @@
     height: 24px;
   }
 
-  .export-trace-blank {
+  .export-trace-explanation {
     flex: 1;
-    min-width: var(--sys-size-25)
+    min-width: var(--sys-size-25);
   }
 }
 
+.export-trace-options-row-last {
+  align-items: center;
+}
+
 .info-tooltip-container {
   max-width: var(--sys-size-28);
   white-space: normal;
 }
+
+x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+}

package/front_end/third_party/chromium/README.chromium

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

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -69,6 +69,7 @@ export const markdownLinks = new Map<string, string>([
   ],
   ['storagePartitioningExplainer', 'https://developers.google.com/privacy-sandbox/cookies/storage-partitioning'],
   ['storageAccessAPI', 'https://developer.mozilla.org/en-US/docs/Web/API/StorageAccessHandle/createObjectURL'],
+  ['https://goo.gle/ps-status', 'https://goo.gle/ps-status'],
 ]);
 
 export const getMarkdownLink = (key: string): string => {

package/front_end/ui/legacy/ARIAUtils.ts

@@ -5,6 +5,7 @@
 import * as Platform from '../../core/platform/platform.js';
 
 import {Dialog} from './Dialog.js';
+import {getEnclosingShadowRootForNode} from './DOMUtilities.js';
 
 let id = 0;
 
@@ -348,8 +349,7 @@ export function setActiveDescendant(element: Element, activedescendant: Element|
 
   if (activedescendant.isConnected && element.isConnected) {
     console.assert(
-        Platform.DOMUtilities.getEnclosingShadowRootForNode(activedescendant) ===
-            Platform.DOMUtilities.getEnclosingShadowRootForNode(element),
+        getEnclosingShadowRootForNode(activedescendant) === getEnclosingShadowRootForNode(element),
         'elements are not in the same shadow dom');
   }
 

package/front_end/ui/legacy/ActionRegistration.ts

@@ -215,6 +215,10 @@ export class Action extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     return this.actionRegistration.bindings;
   }
 
+  configurableBindings(): boolean {
+    return this.actionRegistration.configurableBindings ?? true;
+  }
+
   experiment(): string|undefined {
     return this.actionRegistration.experiment;
   }
@@ -536,6 +540,13 @@ export interface ActionRegistration {
    * are flavors of the current appliaction context.
    */
   bindings?: Binding[];
+  /**
+   * Whether the action's bindings should be displayed for configuration in the
+   * Settings UI. Setting this to `false` will hide the action from the Shortcuts
+   * tab. Defaults to `true`.
+   */
+  // TODO(crbug.com/436764687): Consider removing this again if parametrized actions get moved to a separate mechanism
+  configurableBindings?: boolean;
   /**
    * The name of the experiment an action is associated with. Enabling and disabling the declared
    * experiment will enable and disable the action respectively.

package/front_end/ui/legacy/SoftDropDown.ts

@@ -5,12 +5,12 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle} from './DOMUtilities.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior} from './GlassPane.js';
 import {ListControl, type ListDelegate, ListMode} from './ListControl.js';
 import {Events as ListModelEvents, type ItemsReplacedEvent, type ListModel} from './ListModel.js';
@@ -54,7 +54,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
       );
     }
     this.element.classList.add('soft-dropdown');
-    Platform.DOMUtilities.appendStyle(this.element, softDropDownButtonStyles);
+    appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = IconButton.Icon.create('triangle-down');
     this.element.appendChild(dropdownArrowIcon);

package/front_end/ui/legacy/TextPrompt.ts

@@ -38,6 +38,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle, rangeOfWord} from './DOMUtilities.js';
 import {SuggestBox, type SuggestBoxDelegate, type Suggestion} from './SuggestBox.js';
 import textPromptStyles from './textPrompt.css.js';
 import {Tooltip} from './Tooltip.js';
@@ -344,7 +345,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
     this.boundOnBlur = this.onBlur.bind(this);
     this.proxyElement = element.ownerDocument.createElement('span');
-    Platform.DOMUtilities.appendStyle(this.proxyElement, textPromptStyles);
+    appendStyle(this.proxyElement, textPromptStyles);
     this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
     this.proxyElement.style.display = this.proxyElementDisplay;
     if (element.parentElement) {
@@ -740,7 +741,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       return;
     }
 
-    const wordQueryRange = Platform.DOMUtilities.rangeOfWord(
+    const wordQueryRange = rangeOfWord(
         selectionRange.startContainer, selectionRange.startOffset, this.completionStopCharacters, this.element(),
         'backward');
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -45,6 +45,7 @@ import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle} from './DOMUtilities.js';
 import {type Config, InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
 import type {SearchableView} from './SearchableView.js';
@@ -428,7 +429,7 @@ export class TreeOutlineInShadow extends TreeOutline {
 
   registerRequiredCSS(...cssFiles: Array<string&{_tag: 'CSS-in-JS'}>): void {
     for (const cssFile of cssFiles) {
-      Platform.DOMUtilities.appendStyle(this.shadowRoot, cssFile);
+      appendStyle(this.shadowRoot, cssFile);
     }
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -53,6 +53,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
 import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
+import {appendStyle, deepActiveElement, rangeOfWord} from './DOMUtilities.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
 import {InspectorView} from './InspectorView.js';
@@ -358,7 +359,7 @@ export function isEditing(): boolean {
     return true;
   }
 
-  const focused = Platform.DOMUtilities.deepActiveElement(document);
+  const focused = deepActiveElement(document);
   if (!focused) {
     return false;
   }
@@ -580,8 +581,8 @@ export function handleElementValueModifications(
   }
 
   const originalValue = element.textContent;
-  const wordRange = Platform.DOMUtilities.rangeOfWord(
-      selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
+  const wordRange =
+      rangeOfWord(selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
   const wordString = wordRange.toString();
 
   if (suggestionHandler?.(wordString)) {
@@ -655,8 +656,8 @@ export function addPlatformClass(element: HTMLElement): void {
 }
 
 export function installComponentRootStyles(element: HTMLElement): void {
-  Platform.DOMUtilities.appendStyle(element, inspectorCommonStyles);
-  Platform.DOMUtilities.appendStyle(element, Buttons.textButtonStyles);
+  appendStyle(element, inspectorCommonStyles);
+  appendStyle(element, Buttons.textButtonStyles);
 
   // Detect overlay scrollbar enable by checking for nonzero scrollbar width.
   if (!Host.Platform.isMac() && measuredScrollbarWidth(element.ownerDocument) === 0) {
@@ -681,7 +682,7 @@ export class ElementFocusRestorer {
   private previous: HTMLElement|null;
   constructor(element: Element) {
     this.element = (element as HTMLElement | null);
-    this.previous = (Platform.DOMUtilities.deepActiveElement(element.ownerDocument) as HTMLElement | null);
+    this.previous = (deepActiveElement(element.ownerDocument) as HTMLElement | null);
     (element as HTMLElement).focus();
   }
 
@@ -1930,7 +1931,7 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
 function focusChanged(event: Event): void {
   const target = event.target as HTMLElement;
   const document = target ? target.ownerDocument : null;
-  const element = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
+  const element = document ? deepActiveElement(document) : null;
   updateWidgetfocusWidgetForNode(element);
 }
 
@@ -1953,11 +1954,11 @@ export function createShadowRootWithCoreStyles(element: Element, options: {
   const {cssFile, delegatesFocus} = options;
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
-  Platform.DOMUtilities.appendStyle(shadowRoot, inspectorCommonStyles, Buttons.textButtonStyles);
+  appendStyle(shadowRoot, inspectorCommonStyles, Buttons.textButtonStyles);
   if (Array.isArray(cssFile)) {
-    Platform.DOMUtilities.appendStyle(shadowRoot, ...cssFile);
+    appendStyle(shadowRoot, ...cssFile);
   } else if (cssFile) {
-    Platform.DOMUtilities.appendStyle(shadowRoot, cssFile);
+    appendStyle(shadowRoot, cssFile);
   }
   shadowRoot.addEventListener('focus', focusChanged, true);
   return shadowRoot;

package/front_end/ui/legacy/Widget.ts

@@ -35,6 +35,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
+import {appendStyle, deepActiveElement} from './DOMUtilities.js';
 import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
 // Remember the original DOM mutation methods here, since we
@@ -766,7 +767,7 @@ export class Widget {
 
   registerRequiredCSS(...cssFiles: Array<string&{_tag: 'CSS-in-JS'}>): void {
     for (const cssFile of cssFiles) {
-      Platform.DOMUtilities.appendStyle(this.#shadowRoot ?? this.element, cssFile);
+      appendStyle(this.#shadowRoot ?? this.element, cssFile);
     }
   }
 
@@ -1106,7 +1107,7 @@ export class WidgetFocusRestorer {
   private previous: HTMLElement|null;
   constructor(widget: Widget) {
     this.widget = widget;
-    this.previous = (Platform.DOMUtilities.deepActiveElement(widget.element.ownerDocument) as HTMLElement | null);
+    this.previous = (deepActiveElement(widget.element.ownerDocument) as HTMLElement | null);
     widget.focus();
   }