Extract openInNewTab to a separate target

Lightning00Blade · Devtools-frontend LUCI CQ · commit 905490e42fee · 2025-11-17T08:57:10.000-08:00
I looked around and this in only used in UI code, so keeping it near there sound better than moving it to Common. Bypass-Check-License: Moving old files to separate bundle Bug: 456407878 Change-Id: I9a966fdabe03135baebbc796a97883027dce69d3 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7142121 Reviewed-by: Danil Somsikov <dsv@chromium.org> Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
@@ -809,6 +809,7 @@ grd_files_bundled_sources = [
   "front_end/ui/components/text_prompt/text_prompt.js",
   "front_end/ui/components/tooltips/tooltips.js",
   "front_end/ui/components/tree_outline/tree_outline.js",
+  "front_end/ui/helpers/helpers.js",
   "front_end/ui/i18n/i18n.js",
   "front_end/ui/legacy/components/color_picker/color_picker.js",
   "front_end/ui/legacy/components/cookie_table/cookie_table.js",
@@ -2463,6 +2464,7 @@ grd_files_unbundled_sources = [
   "front_end/ui/components/tree_outline/TreeOutline.js",
   "front_end/ui/components/tree_outline/TreeOutlineUtils.js",
   "front_end/ui/components/tree_outline/treeOutline.css.js",
+  "front_end/ui/helpers/OpenInNewTab.js",
   "front_end/ui/legacy/ARIAUtils.js",
   "front_end/ui/legacy/ActionRegistration.js",
   "front_end/ui/legacy/ActionRegistry.js",
diff --git a/front_end/BUILD.gn b/front_end/BUILD.gn
@@ -257,6 +257,7 @@ group("unittests") {
     "ui/components/text_prompt:unittests",
     "ui/components/tooltips:unittests",
     "ui/components/tree_outline:unittests",
+    "ui/helpers:unittests",
     "ui/i18n:unittests",
     "ui/legacy:copy_stylesheets_for_server",
     "ui/legacy:unittests",
diff --git a/front_end/core/common/ParsedURL.ts b/front_end/core/common/ParsedURL.ts
@@ -38,7 +38,7 @@ export function normalizePath(path: string): string {
   return normalizedPath;
 }
 
-export function schemeIs(url: Platform.DevToolsPath.UrlString, scheme: string): boolean {
+export function schemeIs(url: Platform.DevToolsPath.UrlString|URL, scheme: string): boolean {
   try {
     return (new URL(url)).protocol === scheme;
   } catch {
diff --git a/front_end/panels/ai_assistance/AiAssistancePanel.ts b/front_end/panels/ai_assistance/AiAssistancePanel.ts
@@ -17,6 +17,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UIHelpers from '../../ui/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';
@@ -957,7 +958,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onDeleteClick: this.#onDeleteClicked.bind(this),
       onExportConversationClick: this.#onExportConversationClick.bind(this),
       onHelpClick: () => {
-        UI.UIUtils.openInNewTab(AI_ASSISTANCE_HELP);
+        UIHelpers.openInNewTab(AI_ASSISTANCE_HELP);
       },
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
diff --git a/front_end/panels/ai_assistance/BUILD.gn b/front_end/panels/ai_assistance/BUILD.gn
@@ -53,6 +53,7 @@ devtools_ui_module("ai_assistance") {
     "../../ui/components/markdown_view:bundle",
     "../../ui/components/snackbars:bundle",
     "../../ui/components/spinners:bundle",
+    "../../ui/helpers:bundle",
     "../../ui/i18n:bundle",
     "../../ui/legacy:bundle",
     "../../ui/lit:bundle",
diff --git a/front_end/panels/ai_assistance/components/UserActionRow.ts b/front_end/panels/ai_assistance/components/UserActionRow.ts
@@ -8,6 +8,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as UIHelpers from '../../../ui/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';
@@ -321,7 +322,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
         {
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
-          onReportClick: () => UI.UIUtils.openInNewTab(REPORT_URL),
+          onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
           onCopyResponseClick: this.onCopyResponseClick,
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
diff --git a/front_end/panels/common/BUILD.gn b/front_end/panels/common/BUILD.gn
@@ -51,6 +51,7 @@ devtools_ui_module("common") {
     "../../ui/components/spinners:bundle",
     "../../ui/components/switch:bundle",
     "../../ui/components/tooltips:bundle",
+    "../../ui/helpers:bundle",
     "../../ui/i18n:bundle",
     "../../ui/legacy:bundle",
     "../../ui/legacy/components/utils:bundle",
diff --git a/front_end/panels/common/BadgeNotification.ts b/front_end/panels/common/BadgeNotification.ts
@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -290,7 +291,7 @@ export class BadgeNotification extends UI.Widget.Widget {
           label: i18nString(UIStrings.viewProfile),
           jslogContext: 'view-profile',
           onClick: () => {
-            UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
+            UIHelpers.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
         }
       ],
diff --git a/front_end/panels/common/GdpSignUpDialog.ts b/front_end/panels/common/GdpSignUpDialog.ts
@@ -12,6 +12,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * as Switch from '../../ui/components/switch/switch.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -168,7 +169,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           .title=${i18nString(UIStrings.learnMoreAccessibleText)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'learn-more'}
-          @click=${() => UI.UIUtils.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
+          @click=${() => UIHelpers.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
         <div class="right-buttons">
           <devtools-button
             .variant=${Buttons.Button.Variant.TONAL}
diff --git a/front_end/panels/elements/BUILD.gn b/front_end/panels/elements/BUILD.gn
@@ -101,6 +101,7 @@ devtools_ui_module("elements") {
     "../../ui/components/text_editor:bundle",
     "../../ui/components/tooltips:bundle",
     "../../ui/components/tree_outline:bundle",
+    "../../ui/helpers:bundle",
     "../../ui/legacy:bundle",
     "../../ui/legacy/components/color_picker:bundle",
     "../../ui/legacy/components/inline_editor:bundle",
diff --git a/front_end/panels/elements/ElementStatePaneWidget.ts b/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',
diff --git a/front_end/panels/settings/BUILD.gn b/front_end/panels/settings/BUILD.gn
@@ -48,6 +48,7 @@ devtools_ui_module("settings") {
     "../../ui/components/icon_button:bundle",
     "../../ui/components/legacy_wrapper:bundle",
     "../../ui/components/switch:bundle",
+    "../../ui/helpers:bundle",
     "../../ui/i18n:bundle",
     "../../ui/legacy:bundle",
     "../../ui/legacy/components/data_grid:bundle",
diff --git a/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts b/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);
 
diff --git a/front_end/panels/settings/SettingsScreen.ts b/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});
diff --git a/front_end/panels/timeline/components/BUILD.gn b/front_end/panels/timeline/components/BUILD.gn
@@ -78,6 +78,7 @@ devtools_ui_module("components") {
     "../../../ui/components/render_coordinator:bundle",
     "../../../ui/components/request_link_icon:bundle",
     "../../../ui/components/settings:bundle",
+    "../../../ui/helpers:bundle",
     "../../../ui/i18n:bundle",
     "../../../ui/legacy:bundle",
     "../../../ui/legacy/components/data_grid:bundle",
diff --git a/front_end/panels/timeline/components/MetricCard.ts b/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"
diff --git a/front_end/panels/timeline/overlays/components/BUILD.gn b/front_end/panels/timeline/overlays/components/BUILD.gn
@@ -36,6 +36,7 @@ devtools_ui_module("components") {
     "../../../../ui/components/icon_button:bundle",
     "../../../../ui/components/spinners:bundle",
     "../../../../ui/components/tooltips:bundle",
+    "../../../../ui/helpers:bundle",
     "../../../../ui/legacy/theme_support:bundle",
     "../../../../ui/lit:bundle",
     "../../../../ui/visual_logging:bundle",
diff --git a/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts b/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,
     });
diff --git a/front_end/panels/whats_new/BUILD.gn b/front_end/panels/whats_new/BUILD.gn
@@ -28,6 +28,7 @@ devtools_ui_module("whats_new") {
     "../../ui/components/helpers:bundle",
     "../../ui/components/markdown_view:bundle",
     "../../ui/components/render_coordinator:bundle",
+    "../../ui/helpers:bundle",
     "../../ui/legacy:bundle",
     "../../ui/lit:bundle",
     "../../ui/visual_logging:bundle",
diff --git a/front_end/panels/whats_new/ReleaseNoteView.ts b/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,
         },
diff --git a/front_end/panels/whats_new/WhatsNewImpl.ts b/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 {
diff --git a/front_end/ui/helpers/BUILD.gn b/front_end/ui/helpers/BUILD.gn
@@ -0,0 +1,54 @@
+# 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("../../../scripts/build/ninja/devtools_entrypoint.gni")
+import("../../../scripts/build/ninja/devtools_module.gni")
+import("../../../scripts/build/typescript/typescript.gni")
+import("../../visibility.gni")
+
+devtools_ui_module("helpers") {
+  sources = [ "OpenInNewTab.ts" ]
+
+  deps = [
+    "../../core/common:bundle",
+    "../../core/host:bundle",
+    "../../core/platform:bundle",
+    "../../core/root:bundle",
+    "../../core/sdk:bundle",
+  ]
+}
+
+devtools_entrypoint("bundle") {
+  entrypoint = "helpers.ts"
+
+  deps = [ ":helpers" ]
+
+  visibility = [
+    ":*",
+
+    # IMPORTANT: Be careful when extending visibility of front_end/ui/helpers,
+    # as the UIHelpers module should only be used in UI code.
+    "../../entrypoints/main/*",
+    "../../panels/*",
+    "../../testing/*",
+    "../components/*",
+    "../legacy/*",
+  ]
+
+  visibility += devtools_visibility
+}
+
+devtools_ui_module("unittests") {
+  testonly = true
+
+  sources = [ "OpenInNewTab.test.ts" ]
+
+  deps = [
+    ":bundle",
+    "../../core/host:bundle",
+    "../../core/platform:bundle",
+    "../../core/root:bundle",
+    "../../testing",
+  ]
+}
diff --git a/front_end/ui/helpers/OpenInNewTab.test.ts b/front_end/ui/helpers/OpenInNewTab.test.ts
diff --git a/front_end/ui/helpers/OpenInNewTab.ts b/front_end/ui/helpers/OpenInNewTab.ts
diff --git a/front_end/ui/helpers/helpers.ts b/front_end/ui/helpers/helpers.ts
diff --git a/front_end/ui/legacy/BUILD.gn b/front_end/ui/legacy/BUILD.gn
diff --git a/front_end/ui/legacy/UIUtils.test.ts b/front_end/ui/legacy/UIUtils.test.ts
diff --git a/front_end/ui/legacy/UIUtils.ts b/front_end/ui/legacy/UIUtils.ts
diff --git a/front_end/ui/legacy/XLink.ts b/front_end/ui/legacy/XLink.ts
diff --git a/front_end/ui/legacy/components/color_picker/ContrastDetails.ts b/front_end/ui/legacy/components/color_picker/ContrastDetails.ts
diff --git a/front_end/ui/legacy/components/utils/Linkifier.ts b/front_end/ui/legacy/components/utils/Linkifier.ts

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export function normalizePath(path: string): string {`
`38`	`38`	`return normalizedPath;`
`39`	`39`	`}`
`40`	`40`
`41`		`-export function schemeIs(url: Platform.DevToolsPath.UrlString, scheme: string): boolean {`
	`41`	`+export function schemeIs(url: Platform.DevToolsPath.UrlString\|URL, scheme: string): boolean {`
`42`	`42`	`try {`
`43`	`43`	`return (new URL(url)).protocol === scheme;`
`44`	`44`	`} catch {`