chrome-devtools-frontend 1.0.1544076 → 1.0.1545096

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.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, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -108,7 +109,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
-            @click=${() => UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
+            @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
            .data=${{
               variant: Buttons.Button.Variant.ICON,
               iconName: 'help',

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -839,7 +839,7 @@ export class StylePropertiesSection {
 
       this.#ancestorRuleListElement.prepend(atRuleElement);
       this.#ancestorClosingBracesElement.prepend(this.indentElement(this.createClosingBrace(), 0));
-      this.nestingLevel++;
+      this.nestingLevel = 1;
     }
   }
 

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

@@ -7,7 +7,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type * as PanelsCommon from '../common/common.js';
 
 import type * as Elements from './elements.js';
 
@@ -178,14 +177,6 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (elementsModul
   return getClassCallBack(loadedElementsModule);
 }
 
-let loadedPanelsCommonModule: (typeof PanelsCommon|undefined);
-async function loadPanelsCommonModule(): Promise<typeof PanelsCommon> {
-  if (!loadedPanelsCommonModule) {
-    loadedPanelsCommonModule = await import('../common/common.js');
-  }
-  return loadedPanelsCommonModule;
-}
-
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'elements',
@@ -698,16 +689,3 @@ UI.UIUtils.registerRenderer({
     return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
   },
 });
-
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return [
-      SDK.DOMModel.DOMNode,
-      SDK.DOMModel.DeferredDOMNode,
-    ];
-  },
-  async loadLinkifier() {
-    const PanelsCommon = await loadPanelsCommonModule();
-    return PanelsCommon.DOMLinkifier.Linkifier.instance();
-  },
-});

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -275,12 +275,9 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     // Instead, we ignore the ID coming from the worker when sending the command, but
     // patch it back in when sending the response back to the worker.
     void this.connection?.send(method, params, sessionId).then(response => {
-      this.dispatchProtocolMessage({
-        id,
-        sessionId,
-        result: 'result' in response ? response.result : undefined,
-        error: 'error' in response ? response.error : undefined,
-      });
+      const message =
+          'result' in response ? {id, sessionId, result: response.result} : {id, sessionId, error: response.error};
+      this.dispatchProtocolMessage(message);
     });
   }
 

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -8,6 +8,7 @@ import '../../ui/components/cards/cards.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -144,7 +145,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     };
     automaticallyIgnoreLinkButton.addEventListener(
         'click',
-        () => UI.UIUtils.openInNewTab(
+        () => UIHelpers.openInNewTab(
             'https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-third-party'));
     automaticallyIgnoreListContainer.appendChild(automaticallyIgnoreLinkButton);
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -497,7 +498,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
         jslogContext: `${experiment.name}-documentation`,
         title: i18nString(UIStrings.learnMore),
       };
-      linkButton.addEventListener('click', () => UI.UIUtils.openInNewTab(experimentLink));
+      linkButton.addEventListener('click', () => UIHelpers.openInNewTab(experimentLink));
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);
@@ -542,7 +543,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
       case 'settings.documentation':
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/');
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});

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

@@ -41,6 +41,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
+const {widgetConfig} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -475,7 +476,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         ${nodeLink ? html`
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
-              <span class="related-info-link">${nodeLink}</span>
+              <span class="related-info-link">
+               <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}>
+               </devtools-widget>
+              </span>
             </div>
           `
           : nothing}
@@ -638,7 +642,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
+        <devtools-widget .widgetConfig=${widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -948,7 +952,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
           const isP98Excluded = this.#inpValue && this.#inpValue.value < interaction.duration;
           const isInp = this.#inpValue?.interactionId === interaction.interactionId;
-          const nodeLink = interaction.nodeRef ? PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(interaction.nodeRef) : Lit.nothing;
 
           return html`
             <li id=${interaction.interactionId} class="log-item interaction" tabindex="-1">
@@ -959,7 +962,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                       html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
                     : nothing}
                   </span>
-                  <span class="interaction-node">${nodeLink}</span>
+                  <span class="interaction-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}>
+                    </devtools-widget>
+                  </span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
                     name="info"
@@ -1066,7 +1072,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <div class="layout-shift-score">Layout shift score: ${metricValue}</div>
               <div class="layout-shift-nodes">
                 ${layoutShift.affectedNodeRefs.map(node => html`
-                  <div class="layout-shift-node">${PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node)}</div>
+                  <div class="layout-shift-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}>
+                    </devtools-widget>
+                  </div>
                 `)}
               </div>
             </li>

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

@@ -9,7 +9,7 @@ import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as UI from '../../../ui/legacy/legacy.js';
+import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import metricCardStyles from './metricCard.css.js';
@@ -622,7 +622,7 @@ export class MetricCard extends HTMLElement {
             title=${this.#getHelpTooltip()}
             .iconName=${'help'}
             .variant=${Buttons.Button.Variant.ICON}
-            @click=${() => UI.UIUtils.openInNewTab(helpLink)}
+            @click=${() => UIHelpers.openInNewTab(helpLink)}
           ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"

package/front_end/panels/timeline/components/insights/NodeLink.ts

@@ -5,7 +5,6 @@
 
 // TODO: move to ui/components/node_link?
 
-import type * as Common from '../../../../core/common/common.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';
@@ -20,7 +19,7 @@ const {html} = Lit;
 export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
   frame: string;
-  options?: Common.Linkifier.Options;
+  options?: PanelsCommon.DOMLinkifier.Options;
   /**
    * URL to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
    * Will be given to linkifyURL. Use this or one of the other fallback fields.
@@ -42,7 +41,7 @@ export class NodeLink extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #frame?: string;
-  #options?: Common.Linkifier.Options;
+  #options?: PanelsCommon.DOMLinkifier.Options;
   #fallbackUrl?: Platform.DevToolsPath.UrlString;
   #fallbackHtmlSnippet?: string;
   #fallbackText?: string;

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -15,6 +15,7 @@ import * as Root from '../../../../core/root/root.js';
 import * as AiAssistanceModels from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UIHelpers from '../../../../ui/helpers/helpers.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -574,7 +575,7 @@ export class EntryLabelOverlay extends HTMLElement {
         },
       ],
       onLearnMoreClick: () => {
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
       },
       learnMoreButtonText: UIStringsNotTranslate.learnMoreButton,
     });

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

@@ -323,16 +323,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return maybeRetrieveContextTypes(Timeline => [Timeline.CLSLinkifier.CLSRect]);
-  },
-  async loadLinkifier() {
-    const Timeline = await loadTimelineModule();
-    return Timeline.CLSLinkifier.Linkifier.instance();
-  },
-});
-
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.TIMELINE_MENU_OPEN,
   actionId: 'timeline.load-from-file',

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: ee4cd283ea61d6cd89c8035af63ff05876860e3a
 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/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/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,