Add docs traffic from DevTools must include utm_medium=referral.

This ensures that we also pass `utm_medium` correctly.

Fixed: 416414182
Bug: 402611137
Change-Id: Id6945c55df97396072cbe3004c0e745e55f33be9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6519593
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>

Author: bmeurer

front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -57,7 +57,7 @@ export const UIStrings = {
    * @description Description of the table of the detected preconnect origins.
    */
   preconnectOriginsTableDescription:
-      '[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=lighthouse&utm_medium=devtools) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to.',
+      '[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=devtools&utm_medium=referral) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to.',
   /**
    * @description Text status indicating that there isn't any preconnected origins.
    */
@@ -78,7 +78,7 @@ export const UIStrings = {
    * @description Description of the table that recommends preconnecting to the origins to save time.
    */
   estSavingTableDescription:
-      'Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=lighthouse&utm_medium=devtools) hints to your most important origins, but try to use fewer than 4.',
+      'Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=devtools&utm_medium=referral) hints to your most important origins, but try to use fewer than 4.',
   /**
    * @description Label for a column in a data table; entries will be the origin of a web resource
    */

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -407,8 +407,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         panel, i18nString(UIStrings.localStorage), i18nString(UIStrings.noLocalStorage),
         i18nString(UIStrings.localStorageDescription), 'local-storage');
     this.localStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+        'https://developer.chrome.com/docs/devtools/storage/localstorage/' as Platform.DevToolsPath.UrlString);
     const localStorageIcon = IconButton.Icon.create('table');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
@@ -417,8 +416,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         panel, i18nString(UIStrings.sessionStorage), i18nString(UIStrings.noSessionStorage),
         i18nString(UIStrings.sessionStorageDescription), 'session-storage');
     this.sessionStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/' as Platform.DevToolsPath.UrlString);
     const sessionStorageIcon = IconButton.Icon.create('table');
     this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
 
@@ -428,25 +426,22 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         panel, i18nString(UIStrings.extensionStorage), i18nString(UIStrings.noExtensionStorage),
         i18nString(UIStrings.extensionStorageDescription), 'extension-storage');
     this.extensionStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+        'https://developer.chrome.com/docs/extensions/reference/api/storage/' as Platform.DevToolsPath.UrlString);
     const extensionStorageIcon = IconButton.Icon.create('table');
     this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
 
     storageTreeElement.appendChild(this.extensionStorageListTreeElement);
 
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/indexeddb/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+        'https://developer.chrome.com/docs/devtools/storage/indexeddb/' as Platform.DevToolsPath.UrlString);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
 
     this.cookieListTreeElement = new ExpandableApplicationPanelTreeElement(
         panel, i18nString(UIStrings.cookies), i18nString(UIStrings.noCookies), i18nString(UIStrings.cookiesDescription),
         'cookies');
     this.cookieListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+        'https://developer.chrome.com/docs/devtools/storage/cookies/' as Platform.DevToolsPath.UrlString);
     const cookieIcon = IconButton.Icon.create('cookie');
     this.cookieListTreeElement.setLeadingIcons([cookieIcon]);
     storageTreeElement.appendChild(this.cookieListTreeElement);

front_end/panels/application/BackgroundServiceView.ts

@@ -444,7 +444,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   }
 
   private createLearnMoreLink(): Platform.DevToolsPath.UrlString {
-    let url = 'https://developer.chrome.com/docs/devtools/javascript/background-services/?utm_source=devtools';
+    let url = 'https://developer.chrome.com/docs/devtools/javascript/background-services/';
 
     switch (this.serviceName) {
       case Protocol.BackgroundService.ServiceName.BackgroundFetch:

front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -49,9 +49,7 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
         resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage),
         i18nString(UIStrings.cacheStorageDescription), 'cache-storage');
     const icon = IconButton.Icon.create('database');
-    this.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools' as
-        Platform.DevToolsPath.UrlString);
+    this.setLink('https://developer.chrome.com/docs/devtools/storage/cache/' as Platform.DevToolsPath.UrlString);
     this.setLeadingIcons([icon]);
     this.swCacheModels = new Set();
     this.swCacheTreeElements = new Set();

front_end/ui/legacy/UIUtils.test.ts

@@ -3,14 +3,11 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
-import * as Platform from '../../core/platform/platform.js';
 import type * as Root from '../../core/root/root.js';
 import {updateHostConfig} from '../../testing/EnvironmentHelpers.js';
 
 import * as UI from './legacy.js';
 
-const {urlString} = Platform.DevToolsPath;
-
 describe('UIUtils', () => {
   describe('openInNewTab', () => {
     const {openInNewTab} = UI.UIUtils;
@@ -45,7 +42,13 @@ describe('UIUtils', () => {
 
         openInNewTab(url);
 
-        sinon.assert.calledOnceWithExactly(stub, urlString`${url}`);
+        sinon.assert.calledOnceWithMatch(stub, sinon.match(value => {
+          try {
+            return new URL(value).searchParams.get('utm_source') === 'unittests';
+          } catch {
+            return false;
+          }
+        }, 'doesn\'t have `utm_source=unittests` search parameter'));
         stub.restore();
       }
     });
@@ -64,8 +67,13 @@ describe('UIUtils', () => {
 
         openInNewTab(url);
 
-        sinon.assert.calledOnce(stub);
-        assert.strictEqual(new URL(stub.args[0][0]).searchParams.get('utm_source'), 'devtools');
+        sinon.assert.calledOnceWithMatch(stub, sinon.match(value => {
+          try {
+            return new URL(value).searchParams.get('utm_source') === 'devtools';
+          } catch {
+            return false;
+          }
+        }, 'doesn\'t have `utm_source=devtools` search parameter'));
         stub.restore();
       }
     });
@@ -93,13 +101,43 @@ describe('UIUtils', () => {
 
           openInNewTab(url);
 
-          sinon.assert.calledOnce(stub);
-          assert.strictEqual(new URL(stub.args[0][0]).searchParams.get('utm_campaign'), channel);
+          sinon.assert.calledOnceWithMatch(stub, sinon.match(value => {
+            try {
+              return new URL(value).searchParams.get('utm_campaign') === channel;
+            } catch {
+              return false;
+            }
+          }, `doesn't have \`utm_campaign=${channel}\` search parameter`));
           stub.restore();
         }
       }
     });
 
+    it('adds `utm_medium=referral` search parameter to Google documentation set links', () => {
+      const URLs = [
+        'http://developer.chrome.com/docs/devtools/workspaces/',
+        'http://developers.google.com/learn/',
+        'http://web.dev/',
+        'https://developer.chrome.com/docs/devtools/',
+        'https://developers.google.com/community/',
+        'https://web.dev/baseline/',
+      ];
+      for (const url of URLs) {
+        const stub = sinon.stub(InspectorFrontendHostInstance, 'openInNewTab');
+
+        openInNewTab(url);
+
+        sinon.assert.calledOnceWithMatch(stub, sinon.match(value => {
+          try {
+            return new URL(value).searchParams.get('utm_medium') === 'referral';
+          } catch {
+            return false;
+          }
+        }, 'doesn\'t have `utm_medium=referral` search parameter'));
+        stub.restore();
+      }
+    });
+
     it('correctly preserves anchors', () => {
       updateHostConfig({channel: 'stable'});
       const stub = sinon.stub(InspectorFrontendHostInstance, 'openInNewTab');

front_end/ui/legacy/UIUtils.ts

@@ -1985,13 +1985,16 @@ export function measuredScrollbarWidth(document?: Document|null): number {
 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);
     }
+    if (!url.searchParams.has('utm_medium')) {
+      url.searchParams.append('utm_medium', 'referral');
+    }
+    if (!url.searchParams.has('utm_source')) {
+      url.searchParams.append('utm_source', 'devtools');
+    }
   }
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
 }