[RPP Icicle blowtorch] UX improvement

- Restrict the width of the dialog.
- Add a placeholder for the input.
- Update the description text.

Bug: 382009059
Change-Id: I865c14107d40e87f09662d51c58fd1cc40b7f409
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6082513
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: Nancy Li

front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -30,7 +30,7 @@ const UIStrings = {
   /**
    * @description Text description for ignore list setting.
    */
-  ignoreListDescription: 'Add these exclusion rules would simplify the flame chart.',
+  ignoreListDescription: 'Add regular expression rules to remove matching scripts from the flame chart.',
   /**
    *@description Pattern title in Framework Ignore List Settings Tab of the Settings
    *@example {ad.*?} regex
@@ -215,6 +215,8 @@ export class IgnoreListSetting extends HTMLElement {
   }
 
   #initAddNewItem(): void {
+    this.#newRegexInput.placeholder = '/framework\\.js$';
+
     const checkboxHelpText = i18nString(UIStrings.ignoreScriptsWhoseNamesMatchNewRegex);
     const inputHelpText = i18nString(UIStrings.addNewRegex);
     UI.Tooltip.Tooltip.install(this.#newRegexCheckbox, checkboxHelpText);

front_end/panels/timeline/components/ignoreListSetting.css

@@ -3,6 +3,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+.ignore-list-setting-content {
+  width: 280px;
+}
+
 .ignore-list-setting-description {
   margin-bottom: 5px;
 }