[cleanup] Introduce UI.UIUtils.openInNewTab() helper.

This merges the logic for adding missing UTM parameters to links to
Google owned documentation sets into a single helper which we use
to open links that potentially contain documentation set references
in a new Chrome tab.

This way we reduce the chance of missing the `utm_source` or the
`utm_campaign` parameters in the future.

Fixed: 402611137
Change-Id: I1efc7ae90beb59dee12741470f8deae16e1c7fca
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6346913
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>

Author: bmeurer

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -60,7 +60,7 @@ import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 const {html} = Lit;
 
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
-const AI_ASSISTANCE_HELP = 'https://goo.gle/devtools-ai-assistance' as Platform.DevToolsPath.UrlString;
+const AI_ASSISTANCE_HELP = 'https://developer.chrome.com/docs/devtools/ai-assistance';
 const SCREENSHOT_QUALITY = 100;
 const SHOW_LOADING_STATE_TIMEOUT = 100;
 
@@ -857,7 +857,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onHistoryClick: this.#onHistoryClicked.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),
           onHelpClick: () => {
-            Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(AI_ASSISTANCE_HELP);
+            UI.UIUtils.openInNewTab(AI_ASSISTANCE_HELP);
           },
           onSettingsClick: () => {
             void UI.ViewManager.ViewManager.instance().showView('chrome-ai');

front_end/panels/ai_assistance/components/UserActionRow.ts

@@ -302,7 +302,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
         {
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
-          onReportClick: () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(REPORT_URL),
+          onReportClick: () => UI.UIUtils.openInNewTab(REPORT_URL),
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
           onSubmit: this.#handleSubmit.bind(this),

front_end/panels/common/common.ts

@@ -82,9 +82,7 @@ export class FreDialog {
         </main>
         <footer>
           <devtools-button
-            @click=${() => {
-              Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(learnMoreHref);
-            }}
+            @click=${() => UI.UIUtils.openInNewTab(learnMoreHref)}
             .jslogContext=${'fre-disclaimer.learn-more'}
             .variant=${Buttons.Button.Variant.OUTLINED}>
             ${i18nString(UIStrings.learnMore)}

front_end/panels/elements/ElementStatePaneWidget.ts

@@ -4,7 +4,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 type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -147,8 +146,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       };
       learnMoreButton.addEventListener(
           'click',
-          () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-              'https://goo.gle/devtools-emulate-focused-page' as Platform.DevToolsPath.UrlString));
+          () => UI.UIUtils.openInNewTab(
+              'https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page'));
 
       div.appendChild(label);
       div.appendChild(learnMoreButton);

front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -5,9 +5,7 @@
 import '../../ui/components/cards/cards.js';
 
 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 type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -140,8 +138,8 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     };
     automaticallyIgnoreLinkButton.addEventListener(
         'click',
-        () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            'http://goo.gle/skip-third-party' as Platform.DevToolsPath.UrlString));
+        () => UI.UIUtils.openInNewTab(
+            'https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-third-party'));
     automaticallyIgnoreList.appendChild(automaticallyIgnoreLinkButton);
 
     const ignoreListAnonymousScripts = generalExclusionGroup.createChild('div', 'ignore-list-option');

front_end/panels/settings/SettingsScreen.ts

@@ -33,7 +33,6 @@ import '../../ui/components/cards/cards.js';
 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 type * as Platform from '../../core/platform/platform.js';
 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';
@@ -504,8 +503,7 @@ export class ExperimentsSettingsTab extends SettingsTab {
         jslogContext: `${experiment.name}-documentation`,
         title: i18nString(UIStrings.learnMore),
       };
-      linkButton.addEventListener(
-          'click', () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(experimentLink));
+      linkButton.addEventListener('click', () => UI.UIUtils.openInNewTab(experimentLink));
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);
@@ -555,8 +553,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
       case 'settings.documentation':
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(UI.UIUtils.addUTMParametersToURL(
-            'https://developer.chrome.com/docs/devtools/' as Platform.DevToolsPath.UrlString));
+        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/');
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});

front_end/panels/timeline/components/MetricCard.ts

@@ -2,13 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 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 Lit from '../../../ui/lit/lit.js';
 
 import metricCardStylesRaw from './metricCard.css.js';
@@ -629,7 +629,7 @@ export class MetricCard extends HTMLElement {
             title=${this.#getHelpTooltip()}
             .iconName=${'help'}
             .variant=${Buttons.Button.Variant.ICON}
-            @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
+            @click=${() => UI.UIUtils.openInNewTab(helpLink)}
           ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"

front_end/panels/whats_new/ReleaseNoteView.test.ts

@@ -123,7 +123,7 @@ describeWithEnvironment('Release Note View', () => {
     button.click();
     assert.strictEqual(openInNewTabStub.callCount, 1);
     assert.isTrue(
-        openInNewTabStub.firstCall.calledWith(urlString`https://google.com`),
+        openInNewTabStub.firstCall.calledWith(urlString`https://google.com/`),
         'openInNewTab was not called with the expected URL.');
   });
 

front_end/panels/whats_new/ReleaseNoteView.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
 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';
@@ -78,7 +77,7 @@ export class ReleaseNoteView extends UI.Widget.VBox {
             <devtools-button
                   .variant=${Buttons.Button.Variant.PRIMARY}
                   .jslogContext=${'learn-more'}
-                  @click=${() => input.openNewTab(UI.UIUtils.addUTMParametersToURLIfNecessary(releaseNote.link as Platform.DevToolsPath.UrlString))}
+                  @click=${() => input.openNewTab(releaseNote.link)}
               >${i18nString(UIStrings.seeFeatures)}</devtools-button>
           </div>
 
@@ -87,7 +86,7 @@ export class ReleaseNoteView extends UI.Widget.VBox {
               ${releaseNote.videoLinks.map((value: {description: string, link: Platform.DevToolsPath.UrlString, type?: VideoType}) => {
                 return html`
                   <x-link
-                  href=${UI.UIUtils.addUTMParametersToURLIfNecessary(value.link)}
+                  href=${value.link}
                   jslog=${VisualLogging.link().track({click: true}).context('learn-more')}>
                     <div class="video">
                       <img class="thumbnail" src=${input.getThumbnailPath(value.type ?? VideoType.WHATS_NEW)}>
@@ -128,7 +127,7 @@ export class ReleaseNoteView extends UI.Widget.VBox {
     this.#view(
         {
           getReleaseNote,
-          openNewTab: this.#openNewTab,
+          openNewTab: UI.UIUtils.openInNewTab,
           markdownContent,
           getThumbnailPath: this.#getThumbnailPath,
         },
@@ -150,8 +149,4 @@ export class ReleaseNoteView extends UI.Widget.VBox {
     }
     return new URL(img, import.meta.url).toString() as Platform.DevToolsPath.UrlString;
   }
-
-  #openNewTab(link: string): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(link as Platform.DevToolsPath.UrlString);
-  }
 }

front_end/panels/whats_new/WhatsNewImpl.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {getReleaseNote} from './ReleaseNoteText.js';
@@ -70,8 +69,7 @@ let releaseNotesActionDelegateInstance: ReleaseNotesActionDelegate;
 export class ReleaseNotesActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
     const releaseNote = getReleaseNote();
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-        releaseNote.link as Platform.DevToolsPath.UrlString);
+    UI.UIUtils.openInNewTab(releaseNote.link);
     return true;
   }
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReleaseNotesActionDelegate {
@@ -87,8 +85,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 {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-        'https://goo.gle/devtools-bug' as Platform.DevToolsPath.UrlString);
+    UI.UIUtils.openInNewTab('https://goo.gle/devtools-bug');
     return true;
   }
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReportIssueActionDelegate {