[Recorder] Confirm recording import the first time

Uses the same pattern that is used to confirm pasting.

Fixed: 402071098
Bug: 401927528
Change-Id: I1317fa81bff3cb5a17e4923596e10af05350fb82
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6343138
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Wolfgang Beyer <[email protected]>

Author: OrKoN

front_end/panels/recorder/BUILD.gn

@@ -21,8 +21,10 @@ devtools_module("recorder") {
   deps = [
     "../../core/common:bundle",
     "../../core/platform:bundle",
+    "../../core/root:bundle",
     "../../models/extensions:bundle",
     "../../models/trace:bundle",
+    "../../panels/common:bundle",
     "../../panels/emulation:bundle",
     "../../panels/timeline:bundle",
     "../../services/tracing:bundle",

front_end/panels/recorder/RecorderController.ts

@@ -6,10 +6,12 @@ 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 SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as PublicExtensions from '../../models/extensions/extensions.js';
 import type * as Trace from '../../models/trace/trace.js';
+import * as PanelCommon from '../../panels/common/common.js';
 import * as Emulation from '../../panels/emulation/emulation.js';
 import * as Timeline from '../../panels/timeline/timeline.js';
 import * as Tracing from '../../services/tracing/tracing.js';
@@ -119,7 +121,27 @@ const UIStrings = {
   /**
    * @description Link text to forward to a documentation page on the recorder.
    */
-  learnMore: 'Learn more'
+  learnMore: 'Learn more',
+  /**
+   *@description Headline of warning shown to users when users import a recording into DevTools Recorder.
+   */
+  doYouTrustThisCode: 'Do you trust this recording?',
+  /**
+   *@description Warning shown to users when imports code into DevTools Recorder.
+   *@example {allow importing} PH1
+   */
+  doNotImport:
+      'Don\'t import recordings you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type \'\'{PH1}\'\' below to allow importing.',
+  /**
+   *@description Text a user needs to type in order to confirm that they
+   *are aware of the danger of import code into the DevTools Recorder.
+   */
+  allowImporting: 'allow importing',
+  /**
+   *@description Input box placeholder which instructs the user to type 'allow pasing' into the input box.
+   *@example {allow importing} PH1
+   */
+  typeAllowImporting: 'Type \'\'{PH1}\'\'',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/recorder/RecorderController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -224,6 +246,11 @@ export class RecorderController extends LitElement {
   #recorderSettings = new Models.RecorderSettings.RecorderSettings();
   #shortcutHelper = new Models.RecorderShortcutHelper.RecorderShortcutHelper();
 
+  #disableRecorderImportWarningSetting = Common.Settings.Settings.instance().createSetting(
+      'disable-recorder-import-warning', false, Common.Settings.SettingStorageType.SYNCED);
+  #selfXssWarningDisabledSetting = Common.Settings.Settings.instance().createSetting(
+      'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
+
   constructor() {
     super();
 
@@ -967,11 +994,43 @@ export class RecorderController extends LitElement {
         ?.click();
   }
 
-  #onImportRecording(event: Event): void {
+  async #acknowledgeImportNotice(): Promise<boolean> {
+    if (this.#disableRecorderImportWarningSetting.get()) {
+      return true;
+    }
+
+    if (Root.Runtime.Runtime.queryParam('isChromeForTesting') ||
+        Root.Runtime.Runtime.queryParam('disableSelfXssWarnings') || this.#selfXssWarningDisabledSetting.get()) {
+      return true;
+    }
+
+    const result = await PanelCommon.TypeToAllowDialog.show({
+      jslogContext: {
+        input: 'confirm-import-recording-input',
+        dialog: 'confirm-import-recording-dialog',
+      },
+      message: i18nString(UIStrings.doNotImport, {PH1: i18nString(UIStrings.allowImporting)}),
+      header: i18nString(UIStrings.doYouTrustThisCode),
+      typePhrase: i18nString(UIStrings.allowImporting),
+      inputPlaceholder: i18nString(UIStrings.typeAllowImporting, {PH1: i18nString(UIStrings.allowImporting)}),
+    });
+
+    if (result) {
+      this.#disableRecorderImportWarningSetting.set(true);
+    }
+
+    return result;
+  }
+
+  async #onImportRecording(event: Event): Promise<void> {
     event.stopPropagation();
+
     this.#clearError();
-    this.#fileSelector = UI.UIUtils.createFileSelectorElement(this.#importFile.bind(this));
-    this.#fileSelector.click();
+
+    if (await this.#acknowledgeImportNotice()) {
+      this.#fileSelector = UI.UIUtils.createFileSelectorElement(this.#importFile.bind(this));
+      this.#fileSelector.click();
+    }
   }
 
   async #onPlayRecordingByName(event: Components.RecordingListView.PlayRecordingEvent): Promise<void> {

front_end/ui/visual_logging/KnownContextValues.ts

@@ -791,6 +791,8 @@ export const knownContextValues = new Set([
   'conditional-breakpoint',
   'configure',
   'confirm',
+  'confirm-import-recording-dialog',
+  'confirm-import-recording-input',
   'connection',
   'connection-id',
   'consent-onboarding',
@@ -1196,6 +1198,7 @@ export const knownContextValues = new Set([
   'disable-file-breakpoints',
   'disable-locale-info-bar',
   'disable-paused-state-overlay',
+  'disable-recorder-import-warning',
   'disable-self-xss-warning',
   'disabled',
   'disallowed-select-descendants-details',