[RPP icicle blowtorch] Whenever there is a change in the ignore list, revalidate the current input

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

Author: Nancy Li

front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -118,6 +118,7 @@ export class IgnoreListSetting extends HTMLElement {
   }
 
   #startEditing(): void {
+    // Do not need to trim here because this is a temporary one, we will trim the input when finish editing,
     this.#editingRegexSetting = {pattern: this.#newRegexInput.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
@@ -145,6 +146,9 @@ export class IgnoreListSetting extends HTMLElement {
   #resetInput(): void {
     this.#newRegexCheckbox.checkboxElement.checked = false;
     this.#newRegexInput.value = '';
+
+    this.#newRegexIsValid = true;
+    this.#newRegexValidationMessage = undefined;
   }
 
   #addNewRegexToIgnoreList(): void {
@@ -197,7 +201,7 @@ export class IgnoreListSetting extends HTMLElement {
     return this.#regexPatterns;
   }
 
-  #handleInputChange(): void {
+  #validateInput(): void {
     const newRegex = this.#newRegexInput.value.trim();
     const newRegexIsNotEmpty = Boolean(newRegex);
     // Enable the rule if the text input field is not empty.
@@ -208,10 +212,15 @@ export class IgnoreListSetting extends HTMLElement {
     UI.ARIAUtils.setInvalid(this.#newRegexInput, !valid);
     this.#newRegexIsValid = valid;
     this.#newRegexValidationMessage = message;
+  }
+
+  #handleInputChange(): void {
+    this.#validateInput();
 
     if (this.#editingRegexSetting) {
-      this.#editingRegexSetting.pattern = this.#newRegexInput.value.trim();
-      this.#editingRegexSetting.disabled = !newRegexIsNotEmpty;
+      const newRegex = this.#newRegexInput.value.trim();
+      this.#editingRegexSetting.pattern = newRegex;
+      this.#editingRegexSetting.disabled = !Boolean(newRegex);
       this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
     }
   }
@@ -245,7 +254,7 @@ export class IgnoreListSetting extends HTMLElement {
 
   #onRegexEnableToggled(regex: Common.Settings.RegExpSettingItem, checkbox: UI.UIUtils.CheckboxLabel): void {
     regex.disabled = !checkbox.checkboxElement.checked;
-
+    this.#validateInput();
     // Technically we don't need to call the set function, because the regex is a reference, so it changed the setting
     // value directly.
     // But we need to call the set function to trigger the setting change event. which is needed by view update of flame
@@ -257,6 +266,9 @@ export class IgnoreListSetting extends HTMLElement {
 
   #removeRegexByIndex(index: number): void {
     this.#regexPatterns.splice(index, 1);
+    this.#validateInput();
+    // Call the set function to trigger the setting change event. we listen to this event and will update this component
+    // and the flame chart.
     this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
   }