[RPP Icicle blowtorch] Preview the regex result when users are typing

The idea is when user focus on the input, add a new rule to the end of existing rules. And update it when user is typing.
Then when user finish editing, pop the last regex, then do the normal add regex to ignore process including the validation check.

Screencast: https://screencast.googleplex.com/cast/NDYzNjgxMTI4NzU5Mjk2MHxhYTBhZDEyZi05YQ
Bug:376657824
Change-Id: Ie57241c99fc2865e08586a6e70b79d284c4ec4d5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6070377
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: Nancy Li

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

@@ -6,7 +6,12 @@ import * as Common from '../../../core/common/common.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 {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {
+  dispatchBlurEvent,
+  dispatchFocusEvent,
+  dispatchInputEvent,
+  renderElementIntoDOM,
+} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
@@ -146,7 +151,7 @@ describeWithEnvironment('Ignore List Setting', () => {
     const newRegexInput = getNewRegexInput(component);
 
     newRegexInput.value = 'rule 1';
-    newRegexInput.dispatchEvent(new FocusEvent('blur'));
+    dispatchBlurEvent(newRegexInput);
 
     assert.isTrue(isRegexInIgnoredList('rule 1'));
   });
@@ -159,10 +164,90 @@ describeWithEnvironment('Ignore List Setting', () => {
     const newRegexInput = getNewRegexInput(component);
 
     newRegexInput.value = 'rule 1';
-    newRegexInput.dispatchEvent(new FocusEvent('blur'));
+    dispatchBlurEvent(newRegexInput);
 
     assert.isFalse(isIgnoreRegexDisabled('rule 1'));
   });
+
+  describe('preview the result', () => {
+    it('Add an empty regex when focusing on the input', async () => {
+      const regexPatterns = getIgnoredRegexes();
+      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
+      assert.strictEqual(regexPatterns.length, 2);
+
+      const component = await renderIgnoreListSetting();
+      const newRegexInput = getNewRegexInput(component);
+
+      dispatchFocusEvent(newRegexInput);
+      assert.strictEqual(regexPatterns.length, 3);
+
+      // We need this to simulate the 'finish editing', so it can remove the temp regex. Otherwise the future tests will
+      // be messed up.
+      // The 'finish editing' part will be tested later
+      dispatchBlurEvent(newRegexInput);
+    });
+
+    it('Update the regex when user typing', async () => {
+      const regexPatterns = getIgnoredRegexes();
+      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
+      assert.strictEqual(regexPatterns.length, 2);
+
+      const component = await renderIgnoreListSetting();
+      const newRegexInput = getNewRegexInput(component);
+
+      dispatchFocusEvent(newRegexInput);
+      assert.strictEqual(regexPatterns.length, 3);
+      // After the focus event, the temp regex (last one) is still empty.
+      assert.strictEqual(regexPatterns[2].pattern, '');
+      // Simulate user's typing
+      newRegexInput.value = 'r';
+      dispatchInputEvent(newRegexInput);
+      // After the input event, the temp regex (last one) is updated.
+      assert.strictEqual(regexPatterns[2].pattern, 'r');
+
+      // We need this to simulate the 'finish editing' with empty input, so it can remove the temp regex. Otherwise the
+      // future tests will be messed up.
+      // The 'finish editing' part will be tested later
+      newRegexInput.value = '';
+      dispatchBlurEvent(newRegexInput);
+    });
+
+    it('Add the regex when user finish typing', async () => {
+      const regexPatterns = getIgnoredRegexes();
+      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
+      assert.strictEqual(regexPatterns.length, 2);
+
+      const component = await renderIgnoreListSetting();
+      const newRegexInput = getNewRegexInput(component);
+
+      dispatchFocusEvent(newRegexInput);
+      newRegexInput.value = 'rule 2';
+      assert.strictEqual(regexPatterns.length, 3);
+
+      dispatchBlurEvent(newRegexInput);
+      // When add a valid rule, the temp regex won't be removed.
+      assert.strictEqual(regexPatterns.length, 3);
+      assert.strictEqual(regexPatterns[2].pattern, 'rule 2');
+    });
+
+    it('Remove the invalid regex when user finish typing', async () => {
+      const regexPatterns = getIgnoredRegexes();
+      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1', 'rule 2' we added.
+      assert.strictEqual(regexPatterns.length, 3);
+
+      const component = await renderIgnoreListSetting();
+      const newRegexInput = getNewRegexInput(component);
+
+      dispatchFocusEvent(newRegexInput);
+      // This is a duplicate rule, so it is invalid.
+      newRegexInput.value = 'rule 2';
+      assert.strictEqual(regexPatterns.length, 4);
+
+      dispatchBlurEvent(newRegexInput);
+      // When add an invalid rule, the temp regex will be removed.
+      assert.strictEqual(regexPatterns.length, 3);
+    });
+  });
 });
 
 describeWithEnvironment('Pattern validator', () => {
@@ -204,17 +289,19 @@ describeWithEnvironment('Pattern validator', () => {
   });
 });
 
+function getIgnoredRegexes(): Common.Settings.RegExpSettingItem[] {
+  return (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as
+          Common.Settings.RegExpSetting)
+      .getAsArray();
+}
+
 function ignoreRegex(regexValue: string): void {
-  const regexPatterns =
-      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
-          .getAsArray();
+  const regexPatterns = getIgnoredRegexes();
   regexPatterns.push({pattern: regexValue, disabled: false});
 }
 
 function disableIgnoreRegex(regexValue: string): void {
-  const regexPatterns =
-      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
-          .getAsArray();
+  const regexPatterns = getIgnoredRegexes();
   for (const regexPattern of regexPatterns) {
     if (regexPattern.pattern === regexValue) {
       regexPattern.disabled = true;
@@ -224,9 +311,7 @@ function disableIgnoreRegex(regexValue: string): void {
 }
 
 function isIgnoreRegexDisabled(regexValue: string): boolean {
-  const regexPatterns =
-      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
-          .getAsArray();
+  const regexPatterns = getIgnoredRegexes();
   for (const regexPattern of regexPatterns) {
     if (regexPattern.pattern === regexValue) {
       return regexPattern.disabled ?? false;
@@ -239,9 +324,7 @@ function isIgnoreRegexDisabled(regexValue: string): boolean {
  * Returns if the regex is in the ignore list, no matter if it is disabled.
  */
 function isRegexInIgnoredList(regexValue: string): boolean {
-  const regexPatterns =
-      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
-          .getAsArray();
+  const regexPatterns = getIgnoredRegexes();
   for (const regexPattern of regexPatterns) {
     if (regexPattern.pattern === regexValue) {
       return true;

front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -80,6 +80,8 @@ export class IgnoreListSetting extends HTMLElement {
   #newItemInput = UI.UIUtils.createInput(
       /* className*/ 'new-regex-text-input', /* type*/ 'text', /* jslogContext*/ 'timeline.ignore-list-new-regex.text');
 
+  #editingRegexSetting: Common.Settings.RegExpSettingItem|null = null;
+
   constructor() {
     super();
 
@@ -107,31 +109,83 @@ export class IgnoreListSetting extends HTMLElement {
         Common.Settings.RegExpSetting;
   }
 
+  #startEditing(): void {
+    this.#editingRegexSetting = {pattern: this.#newItemInput.value, disabled: false, disabledForUrl: undefined};
+    // We need to push the temp regex here to update the flame chart.
+    // We are using the "skip-stack-frames-pattern" setting to determine which is rendered on flame chart. And the push
+    // here will update the setting's value.
+    this.#regexPatterns.push(this.#editingRegexSetting);
+  }
+
+  #finishEditing(): void {
+    if (!this.#editingRegexSetting) {
+      return;
+    }
+
+    const lastRegex = this.#regexPatterns.pop();
+    // Add a sanity check to make sure the last one is the editing one.
+    // In case the check fails, add back the last element.
+    if (lastRegex && lastRegex !== this.#editingRegexSetting) {
+      console.warn('The last regex is not the editing one.');
+      this.#regexPatterns.push(lastRegex);
+    }
+
+    this.#editingRegexSetting = null;
+    this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
+  }
+
+  #resetInput(): void {
+    this.#newItemCheckbox.checkboxElement.checked = false;
+    this.#newItemInput.value = '';
+  }
+
   #onNewRegexAdded(): void {
     const newRegex = this.#newItemInput.value.trim();
-    const {valid} = patternValidator(this.#regexPatterns, newRegex);
+
+    this.#finishEditing();
+    const {valid} = patternValidator(this.#getExistingRegexes(), newRegex);
     if (!valid) {
       // It the new regex is invalid, let's skip it.
       return;
     }
     Bindings.IgnoreListManager.IgnoreListManager.instance().addRegexToIgnoreList(newRegex);
-    this.#newItemCheckbox.checkboxElement.checked = false;
-    this.#newItemInput.value = '';
+    this.#resetInput();
   }
 
   #handleKeyDown(event: KeyboardEvent): void {
-    // 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.
+    // 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.#newItemInput.dispatchEvent(new FocusEvent('blur'));
+      this.#onNewRegexAdded();
+      this.#startEditing();
       return;
     }
   }
 
+  /**
+   * When it is in the 'preview' mode, the last regex in the array is the editing one.
+   * So we want to remove it for some usage, like rendering the existed rules or validating the rules.
+   */
+  #getExistingRegexes(): Common.Settings.RegExpSettingItem[] {
+    if (this.#editingRegexSetting) {
+      const lastRegex = this.#regexPatterns[this.#regexPatterns.length - 1];
+
+      // Add a sanity check to make sure the last one is the editing one.
+      if (lastRegex && lastRegex === this.#editingRegexSetting) {
+        // We don't want to modify the array itself, so just return a shadow copy of it.
+        return this.#regexPatterns.slice(0, -1);
+      }
+    }
+    return this.#regexPatterns;
+  }
+
   #handleInputChange(): void {
     // Enable the rule if the text input field is not empty.
     this.#newItemCheckbox.checkboxElement.checked = Boolean(this.#newItemInput.value.trim());
+
+    if (this.#editingRegexSetting) {
+      this.#editingRegexSetting.pattern = this.#newItemInput.value.trim();
+      this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
+    }
   }
 
   #initAddNewItem(): void {
@@ -143,6 +197,7 @@ export class IgnoreListSetting extends HTMLElement {
     this.#newItemInput.addEventListener('blur', this.#onNewRegexAdded.bind(this), false);
     this.#newItemInput.addEventListener('keydown', this.#handleKeyDown.bind(this), false);
     this.#newItemInput.addEventListener('input', this.#handleInputChange.bind(this), false);
+    this.#newItemInput.addEventListener('focus', this.#startEditing.bind(this), false);
   }
 
   #onRegexEnableToggled(regex: Common.Settings.RegExpSettingItem, checkbox: UI.UIUtils.CheckboxLabel): void {
@@ -206,7 +261,7 @@ export class IgnoreListSetting extends HTMLElement {
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='ignore-list-setting-content'>
           <div class='ignore-list-setting-description'>${i18nString(UIStrings.ignoreListDescription)}</div>
-          ${this.#regexPatterns.map(this.#renderItem.bind(this))}
+          ${this.#getExistingRegexes().map(this.#renderItem.bind(this))}
           <div class='new-regex-row'>${this.#newItemCheckbox}${this.#newItemInput}</div>
         </div>
       </devtools-button-dialog>
@@ -245,8 +300,7 @@ export function patternValidator(
 
   for (let i = 0; i < existingRegexes.length; ++i) {
     const regexPattern = existingRegexes[i];
-    if (regexPattern.pattern === pattern && regexPattern.disabled === false &&
-        regexPattern.disabledForUrl === undefined) {
+    if (regexPattern.pattern === pattern && !regexPattern.disabled && regexPattern.disabledForUrl === undefined) {
       return {valid: false, errorMessage: i18nString(UIStrings.patternAlreadyExists)};
     }
   }

front_end/testing/DOMHelpers.ts

@@ -142,6 +142,11 @@ export function dispatchMouseUpEvent<T extends Element>(element: T, options: Mou
   element.dispatchEvent(clickEvent);
 }
 
+export function dispatchBlurEvent<T extends Element>(element: T, options: FocusEventInit = {}) {
+  const focusEvent = new FocusEvent('blur', options);
+  element.dispatchEvent(focusEvent);
+}
+
 export function dispatchFocusEvent<T extends Element>(element: T, options: FocusEventInit = {}) {
   const focusEvent = new FocusEvent('focus', options);
   element.dispatchEvent(focusEvent);