[RPP Icicle blowtorch] Clear the input when user press the escape

Also fix the problem that 'Escape' will close the dialog

Fixed:382484865
Change-Id: Ibd7ce98e6b0167ec79ccd88519c7fd51e89dda04
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6076624
Commit-Queue: Nancy Li <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: Nancy Li

front_end/panels/timeline/TimelineUIUtils.ts

@@ -1979,7 +1979,7 @@ export class TimelineUIUtils {
       });
 
       link.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
+        if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
           TimelinePanel.instance().select(selectionFromEvent(entry));
           event.consume(true);
         }
@@ -2172,7 +2172,7 @@ export class TimelineUIUtils {
     container.tabIndex = 0;
     container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
     container.addEventListener('keydown', keyEvent => {
-      if (keyEvent.key === 'Enter') {
+      if (keyEvent.key === Platform.KeyboardUtilities.ENTER_KEY) {
         TimelinePanel.instance().select(selectionFromEvent(event));
         keyEvent.consume(true);
       }

front_end/panels/timeline/components/IgnoreListSetting.test.ts

@@ -3,13 +3,15 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import {
   dispatchBlurEvent,
   dispatchFocusEvent,
   dispatchInputEvent,
+  dispatchKeyDownEvent,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
@@ -324,6 +326,18 @@ describeWithEnvironment('Ignore List Setting', () => {
       // When add an invalid rule, the temp regex will be removed.
       assert.strictEqual(regexPatterns.length, 3);
     });
+
+    it('Clear the input when `Escape` is pressed', async () => {
+      const component = await renderIgnoreListSetting();
+      const newRegexInput = getNewRegexInput(component);
+
+      // This is a duplicate rule, so it is invalid.
+      newRegexInput.value = 'rule 2';
+
+      dispatchKeyDownEvent(newRegexInput, {key: Platform.KeyboardUtilities.ESCAPE_KEY});
+      // When add an invalid rule, the temp regex will be removed.
+      assert.strictEqual('', newRegexInput.value);
+    });
   });
 });
 

front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -6,6 +6,7 @@ import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
@@ -146,7 +147,7 @@ export class IgnoreListSetting extends HTMLElement {
     this.#newRegexInput.value = '';
   }
 
-  #onNewRegexAdded(): void {
+  #addNewRegexToIgnoreList(): void {
     const newRegex = this.#newRegexInput.value.trim();
 
     this.#finishEditing();
@@ -160,12 +161,23 @@ export class IgnoreListSetting extends HTMLElement {
   }
 
   #handleKeyDown(event: KeyboardEvent): void {
-    // When user press the 'Enter' or 'Escape', the current regex will be added and user can keep adding more regexes.
-    if (event.key === 'Enter' || event.key === 'Escape') {
-      this.#onNewRegexAdded();
+    // When user press the 'Enter', the current regex will be added and user can keep adding more regexes.
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
+      this.#addNewRegexToIgnoreList();
       this.#startEditing();
       return;
     }
+
+    // When user press the 'Escape', it means cancel the editing, so the current regex won't be added and the input will
+    // lose focus.
+    if (event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
+      // Escape key will close the dialog, and toggle the `Console` drawer. So we need to ignore other listeners.
+      event.stopImmediatePropagation();
+
+      this.#finishEditing();
+      this.#resetInput();
+      this.#newRegexInput.blur();
+    }
   }
 
   /**
@@ -208,7 +220,7 @@ export class IgnoreListSetting extends HTMLElement {
     UI.Tooltip.Tooltip.install(this.#newRegexCheckbox, checkboxHelpText);
     UI.Tooltip.Tooltip.install(this.#newRegexInput, inputHelpText);
 
-    this.#newRegexInput.addEventListener('blur', this.#onNewRegexAdded.bind(this), false);
+    this.#newRegexInput.addEventListener('blur', this.#addNewRegexToIgnoreList.bind(this), false);
     this.#newRegexInput.addEventListener('keydown', this.#handleKeyDown.bind(this), false);
     this.#newRegexInput.addEventListener('input', this.#handleInputChange.bind(this), false);
     this.#newRegexInput.addEventListener('focus', this.#startEditing.bind(this), false);

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -150,7 +151,7 @@ export class EntryLabelOverlay extends HTMLElement {
     // We do not want to create multi-line labels.
     // Therefore, if the new key is `Enter` key, treat it
     // as the end of the label input and blur the input field.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // Note that we do not stop the event propagating here; this is on
       // purpose because we need it to bubble up into TimelineFlameChartView's
       // handler. That updates the state and deals with the keydown.

front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -236,7 +237,7 @@ export class TimeRangeOverlay extends HTMLElement {
     // as the end of the label input and blur the input field.
     // If the text field is empty when `Enter` or `Escape` are pressed,
     // dispatch an event to remove the time range.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // In DevTools, the `Escape` button will by default toggle the console
       // drawer, which we don't want here, so we need to call
       // `stopPropagation()`.