chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

package/front_end/panels/timeline/timeline.ts

@@ -6,7 +6,6 @@ import * as AnimationsTrackAppender from './AnimationsTrackAppender.js';
 import * as AnnotationHelpers from './AnnotationHelpers.js';
 import * as AppenderUtils from './AppenderUtils.js';
 import * as BenchmarkEvents from './BenchmarkEvents.js';
-import * as CLSLinkifier from './CLSLinkifier.js';
 import * as CompatibilityTracksAppender from './CompatibilityTracksAppender.js';
 import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
@@ -51,7 +50,6 @@ export {
   AnnotationHelpers,
   AppenderUtils,
   BenchmarkEvents,
-  CLSLinkifier,
   CompatibilityTracksAppender,
   CountersGraph,
   EntriesFilter,

package/front_end/panels/whats_new/ReleaseNoteView.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Marked from '../../third_party/marked/marked.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.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';
@@ -131,7 +132,7 @@ export class ReleaseNoteView extends UI.Panel.Panel {
     this.#view(
         {
           getReleaseNote,
-          openNewTab: UI.UIUtils.openInNewTab,
+          openNewTab: UIHelpers.openInNewTab,
           markdownContent,
           getThumbnailPath: this.#getThumbnailPath,
         },

package/front_end/panels/whats_new/WhatsNewImpl.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {getReleaseNote} from './ReleaseNoteText.js';
@@ -69,7 +70,7 @@ let releaseNotesActionDelegateInstance: ReleaseNotesActionDelegate;
 export class ReleaseNotesActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
     const releaseNote = getReleaseNote();
-    UI.UIUtils.openInNewTab(releaseNote.link);
+    UIHelpers.openInNewTab(releaseNote.link);
     return true;
   }
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReleaseNotesActionDelegate {
@@ -85,7 +86,7 @@ export class ReleaseNotesActionDelegate implements UI.ActionRegistration.ActionD
 let reportIssueActionDelegateInstance: ReportIssueActionDelegate;
 export class ReportIssueActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
-    UI.UIUtils.openInNewTab('https://goo.gle/devtools-bug');
+    UIHelpers.openInNewTab('https://goo.gle/devtools-bug');
     return true;
   }
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReportIssueActionDelegate {

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: 3e8720c1c3a43f134e2008e1764e70380a5b8bc1
+Revision: 9964dcba17c15a0ec11126abaa933c551bae04d5
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "allowUmdGlobalAccess": true,
     "outDir": "ignored",
+    "rootDir": ".",
     "target": "ES2023",
     "lib": [
       "ES2023",

package/front_end/ui/components/buttons/Button.docs.ts

@@ -4,10 +4,11 @@
 
 import {Button, FloatingButton} from './buttons.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
+  const buttonDocs = container.createChild('div', 'button-docs');
   const style = document.createElement('style');
   style.textContent = `
-      #container > div {
+      .button-docs > div {
         width: 80%;
         padding: var(--sys-size-11);
         display: flex;
@@ -16,13 +17,13 @@ export async function render(container: HTMLElement) {
         gap: var(--sys-size-5);
       }
     `;
-  container.appendChild(style);
+  buttonDocs.appendChild(style);
 
   const appendSection = (headerText: string, sectionElement: HTMLElement) => {
     const header = document.createElement('header');
     header.textContent = headerText;
-    container.appendChild(header);
-    container.appendChild(sectionElement);
+    buttonDocs.appendChild(header);
+    buttonDocs.appendChild(sectionElement);
   };
 
   const buttonsSection = document.createElement('div');

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/components/snackbars/Snackbars.docs.ts

@@ -4,7 +4,7 @@
 
 import {Snackbar} from './snackbars.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   const onActionClick = (): void => {
     // eslint-disable-next-line no-console
     console.log('Action button clicked!');

package/front_end/ui/components/spinners/Spinners.docs.ts

@@ -8,6 +8,6 @@ import * as Lit from '../../lit/lit.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
 }

package/front_end/ui/components/survey_link/SurveyLink.docs.ts

@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import {SurveyLink} from '../survey_link/survey_link.js';
+
+import {SurveyLink} from './survey_link.js';
 
 export function render(container: HTMLElement): void {
   const link = new SurveyLink.SurveyLink();

package/front_end/ui/components/switch/Switch.docs.ts

@@ -4,7 +4,7 @@
 
 import {Switch} from './switch.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
     const example = document.createElement('div');
     example.style.marginTop = '20px';

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

@@ -4,11 +4,11 @@
 
 import * as Lit from '../../lit/lit.js';
 
-import {Tooltip} from './Tooltip.js';
+import {Tooltip} from './tooltips.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   Lit.render(
       html`
     <div style="position: relative; z-index: 0;">
@@ -44,7 +44,7 @@ export async function render(container: HTMLElement) {
       container);
 
   const anchor = container.querySelector('.anchor') as HTMLElement;
-  const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
+  const programmaticTooltip = new Tooltip.Tooltip({id: 'programatic', variant: 'rich', anchor});
   programmaticTooltip.append('Text content');
   anchor.insertAdjacentElement('afterend', programmaticTooltip);
 

package/front_end/ui/helpers/OpenInNewTab.ts

@@ -0,0 +1,87 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+
+/**
+ * Opens the given `url` in a new Chrome tab.
+ *
+ * If the `url` is a Google owned documentation page (currently that includes
+ * `web.dev`, `developers.google.com`, and `developer.chrome.com`), the `url`
+ * will also be checked for UTM parameters:
+ *
+ * - If no `utm_source` search parameter is present, this method will add a new
+ *   search parameter `utm_source=devtools` to `url`.
+ * - If no `utm_campaign` search parameter is present, and DevTools is running
+ *   within a branded build, this method will add `utm_campaign=<channel>` to
+ *   the search parameters, with `<channel>` being the release channel of
+ *   Chrome ("stable", "beta", "dev", or "canary").
+ *
+ * @param url the URL to open in a new tab.
+ * @throws TypeError if `url` is not a valid URL.
+ * @see https://en.wikipedia.org/wiki/UTM_parameters
+ */
+export function openInNewTab(url: URL|string): void {
+  url = new URL(`${url}`);
+  // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+  // there using CDP.
+  if (Common.ParsedURL.schemeIs(url, 'chrome:')) {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+
+    void rootTarget.targetAgent().invoke_createTarget({url: url.toString()}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
+      }
+    });
+  } else {
+    if (['developer.chrome.com', 'developers.google.com', 'web.dev'].includes(url.hostname)) {
+      if (!url.searchParams.has('utm_source')) {
+        url.searchParams.append('utm_source', 'devtools');
+      }
+      const {channel} = Root.Runtime.hostConfig;
+      if (!url.searchParams.has('utm_campaign') && typeof channel === 'string') {
+        url.searchParams.append('utm_campaign', channel);
+      }
+    }
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
+  }
+}

package/front_end/ui/helpers/helpers.ts

@@ -0,0 +1,5 @@
+// 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.
+
+export {openInNewTab} from './OpenInNewTab.js';

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/ContextMenu.docs.ts

@@ -8,10 +8,11 @@ import {ContextMenu} from './legacy.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
+  const menuDocs = container.createChild('div', 'menu-docs');
   const style = document.createElement('style');
   style.textContent = `
-      #container > div {
+      .menu-docs > div {
         width: var(--sys-size-34);
         padding: var(--sys-size-11);
         display: flex;
@@ -27,13 +28,13 @@ export async function render(container: HTMLElement) {
         }
       }
     `;
-  container.appendChild(style);
+  menuDocs.appendChild(style);
 
   const menuButtonSection = document.createElement('div');
   const menuButtonHeader = document.createElement('header');
   menuButtonHeader.textContent = 'DevTools menu button (lit-html)';
-  container.appendChild(menuButtonHeader);
-  container.appendChild(menuButtonSection);
+  menuDocs.appendChild(menuButtonHeader);
+  menuDocs.appendChild(menuButtonSection);
 
   Lit.render(
       html`
@@ -53,8 +54,8 @@ export async function render(container: HTMLElement) {
   simpleItemsSection.innerHTML = '<p>Right-click here</p>';
   const simpleItemsHeader = document.createElement('header');
   simpleItemsHeader.textContent = 'Various simple menu items (imperative API)';
-  container.appendChild(simpleItemsHeader);
-  container.appendChild(simpleItemsSection);
+  menuDocs.appendChild(simpleItemsHeader);
+  menuDocs.appendChild(simpleItemsSection);
 
   let checked = true;
   simpleItemsSection.addEventListener('contextmenu', onSimpleMenu);
@@ -93,8 +94,8 @@ export async function render(container: HTMLElement) {
   customSection.innerHTML = '<p>Right-click here</p>';
   const customSectionHeader = document.createElement('header');
   customSectionHeader.textContent = 'Custom sections (imperative API)';
-  container.appendChild(customSectionHeader);
-  container.appendChild(customSection);
+  menuDocs.appendChild(customSectionHeader);
+  menuDocs.appendChild(customSection);
 
   customSection.addEventListener('contextmenu', onCustomSectionMenu);
 
@@ -117,8 +118,8 @@ export async function render(container: HTMLElement) {
   subMenuSection.innerHTML = '<p>Right-click here</p>';
   const subMenuHeader = document.createElement('header');
   subMenuHeader.textContent = 'Sub menu (imperative API)';
-  container.appendChild(subMenuHeader);
-  container.appendChild(subMenuSection);
+  menuDocs.appendChild(subMenuHeader);
+  menuDocs.appendChild(subMenuSection);
 
   subMenuSection.addEventListener('contextmenu', onSubMenu);
 

package/front_end/ui/legacy/RadioButton.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   const styleElement = document.createElement('style');
   styleElement.textContent = 'fieldset { label { display: block; } }';
   container.appendChild(styleElement);

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -9,7 +9,7 @@ import {UIUtils} from './legacy.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function createDivWithP(text: string): HTMLDivElement {
     const div = document.createElement('div');
     div.style.paddingLeft = '25px';

package/front_end/ui/legacy/Slider.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function sliderExample({min, max, tabIndex, disabled}: {
     min: number,
     max: number,

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

@@ -40,7 +40,6 @@ 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 Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../components/buttons/buttons.js';
@@ -54,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';
@@ -359,7 +359,7 @@ export function isEditing(): boolean {
     return true;
   }
 
-  const focused = Platform.DOMUtilities.deepActiveElement(document);
+  const focused = deepActiveElement(document);
   if (!focused) {
     return false;
   }
@@ -581,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)) {
@@ -656,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) {
@@ -682,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();
   }
 
@@ -1931,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);
 }
 
@@ -1954,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;
@@ -1989,38 +1989,6 @@ export function measuredScrollbarWidth(document?: Document|null): number {
   return cachedMeasuredScrollbarWidth;
 }
 
-/**
- * Opens the given `url` in a new Chrome tab.
- *
- * If the `url` is a Google owned documentation page (currently that includes
- * `web.dev`, `developers.google.com`, and `developer.chrome.com`), the `url`
- * will also be checked for UTM parameters:
- *
- * - If no `utm_source` search parameter is present, this method will add a new
- *   search parameter `utm_source=devtools` to `url`.
- * - If no `utm_campaign` search parameter is present, and DevTools is running
- *   within a branded build, this method will add `utm_campaign=<channel>` to
- *   the search parameters, with `<channel>` being the release channel of
- *   Chrome ("stable", "beta", "dev", or "canary").
- *
- * @param url the URL to open in a new tab.
- * @throws TypeError if `url` is not a valid URL.
- * @see https://en.wikipedia.org/wiki/UTM_parameters
- */
-export function openInNewTab(url: URL|string): void {
-  url = new URL(`${url}`);
-  if (['developer.chrome.com', 'developers.google.com', 'web.dev'].includes(url.hostname)) {
-    if (!url.searchParams.has('utm_source')) {
-      url.searchParams.append('utm_source', 'devtools');
-    }
-    const {channel} = Root.Runtime.hostConfig;
-    if (!url.searchParams.has('utm_campaign') && typeof channel === 'string') {
-      url.searchParams.append('utm_campaign', channel);
-    }
-  }
-  Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
-}
-
 export interface PromotionDisplayState {
   displayCount: number;
   firstRegistered: number;

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();
   }