[RPP Icicle blowtorch] Add a dialog for ignore list in RPP

Now it only has the basic UI, and only allows users to toggle ignore list rules.
More features will be added in the future CLs.

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

Author: Nancy Li

config/gni/devtools_grd_files.gni

@@ -85,6 +85,7 @@ grd_files_release_sources = [
   "front_end/Images/colon.svg",
   "front_end/Images/color-picker-filled.svg",
   "front_end/Images/color-picker.svg",
+  "front_end/Images/compress.svg",
   "front_end/Images/console-conditional-breakpoint.svg",
   "front_end/Images/console-logpoint.svg",
   "front_end/Images/cookie.svg",
@@ -1821,6 +1822,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/CPUThrottlingSelector.js",
   "front_end/panels/timeline/components/DetailsView.js",
   "front_end/panels/timeline/components/FieldSettingsDialog.js",
+  "front_end/panels/timeline/components/IgnoreListSetting.js",
   "front_end/panels/timeline/components/InteractionBreakdown.js",
   "front_end/panels/timeline/components/LayoutShiftDetails.js",
   "front_end/panels/timeline/components/LiveMetricsView.js",
@@ -1840,6 +1842,7 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/breadcrumbsUI.css.js",
   "front_end/panels/timeline/components/cpuThrottlingSelector.css.js",
   "front_end/panels/timeline/components/fieldSettingsDialog.css.js",
+  "front_end/panels/timeline/components/ignoreListSetting.css.js",
   "front_end/panels/timeline/components/insights/BaseInsightComponent.js",
   "front_end/panels/timeline/components/insights/CLSCulprits.js",
   "front_end/panels/timeline/components/insights/DocumentLatency.js",

config/gni/devtools_image_files.gni

@@ -89,6 +89,7 @@ devtools_svg_sources = [
   "colon.svg",
   "color-picker-filled.svg",
   "color-picker.svg",
+  "compress.svg",
   "console-conditional-breakpoint.svg",
   "console-logpoint.svg",
   "cookie.svg",

front_end/Images/src/compress.svg

@@ -46,7 +46,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as ShortcutDialog from '../../ui/components/dialogs/dialogs.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -458,7 +458,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #pendingAriaMessage: string|null = null;
 
   #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
-  #shortcutsDialog: ShortcutDialog.ShortcutDialog.ShortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
+  #shortcutsDialog: Dialogs.ShortcutDialog.ShortcutDialog = new Dialogs.ShortcutDialog.ShortcutDialog();
 
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
 
@@ -1083,9 +1083,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // GC
     this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId('components.collect-garbage'));
 
+    // Ignore list setting
+    this.panelToolbar.appendSeparator();
+    const showIgnoreListSetting = new TimelineComponents.IgnoreListSetting.IgnoreListSetting();
+    this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(showIgnoreListSetting));
+
     // Isolate selector
-    const isolateSelector = new IsolateSelector();
     if (isNode) {
+      const isolateSelector = new IsolateSelector();
       this.panelToolbar.appendSeparator();
       this.panelToolbar.appendToolbarItem(isolateSelector);
     }
@@ -1130,7 +1135,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     return navigationRadioButtons;
   }
 
-  #getShortcutsInfo(isNavClassic: boolean): ShortcutDialog.ShortcutDialog.Shortcut[] {
+  #getShortcutsInfo(isNavClassic: boolean): Dialogs.ShortcutDialog.Shortcut[] {
     if (isNavClassic) {
       return [
         {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Shift', 'Scroll']]},

front_end/panels/timeline/TimelinePanel.ts

@@ -12,6 +12,7 @@ generate_css("css_files") {
     "breadcrumbsUI.css",
     "cpuThrottlingSelector.css",
     "fieldSettingsDialog.css",
+    "ignoreListSetting.css",
     "interactionBreakdown.css",
     "layoutShiftDetails.css",
     "liveMetricsView.css",
@@ -36,6 +37,7 @@ devtools_module("components") {
     "CPUThrottlingSelector.ts",
     "DetailsView.ts",
     "FieldSettingsDialog.ts",
+    "IgnoreListSetting.ts",
     "InteractionBreakdown.ts",
     "LayoutShiftDetails.ts",
     "LiveMetricsView.ts",
@@ -110,6 +112,7 @@ ts_library("unittests") {
     "BreadcrumbsUI.test.ts",
     "CPUThrottlingSelector.test.ts",
     "FieldSettingsDialog.test.ts",
+    "IgnoreListSetting.test.ts",
     "InteractionBreakdown.test.ts",
     "Invalidations.test.ts",
     "LayoutShiftDetails.test.ts",

front_end/panels/timeline/components/BUILD.gn

@@ -0,0 +1,124 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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 {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as TimelineComponents from './components.js';
+
+describeWithEnvironment('isIgnoreListedEntry', () => {
+  async function renderIgnoreListSetting(): Promise<HTMLElement> {
+    const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+    const component = new TimelineComponents.IgnoreListSetting.IgnoreListSetting();
+    renderElementIntoDOM(component);
+    await coordinator.done();
+    return component;
+  }
+
+  function getAllRules(component: HTMLElement): {regex: string, disabled: boolean}[] {
+    assert.isNotNull(component.shadowRoot);
+    const regexRows = component.shadowRoot.querySelectorAll<HTMLElement>('.regex-row');
+    return Array.from(regexRows).map(row => {
+      const checkboxShadow = row.querySelector('dt-checkbox')?.shadowRoot;
+      assert.exists(checkboxShadow);
+      return {
+        regex: checkboxShadow.querySelector('label')?.textContent?.trim() ?? '',
+        disabled: !checkboxShadow.querySelector('input')?.checked,
+      };
+    });
+  }
+
+  before(() => {
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance({forceNew: true});
+    const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(
+        {forceNew: true, resourceMapping, targetManager});
+    Bindings.IgnoreListManager.IgnoreListManager.instance({
+      forceNew: true,
+      debuggerWorkspaceBinding,
+    });
+
+    ignoreRegex('rule 1');
+  });
+
+  it('Able to render the ignore listed rules', async () => {
+    const component = await renderIgnoreListSetting();
+    const ignoredRules = getAllRules(component);
+
+    // There is a default rule `/node_modules/|/bower_components/`
+    assert.deepStrictEqual(ignoredRules.length, 2);
+    assert.deepStrictEqual(ignoredRules[0].regex, '/node_modules/|/bower_components/');
+    assert.deepStrictEqual(ignoredRules[0].disabled, false);
+    assert.deepStrictEqual(ignoredRules[1].regex, 'rule 1');
+    assert.deepStrictEqual(ignoredRules[1].disabled, false);
+  });
+
+  it('Able to render the disabled ignore listed rules', async () => {
+    disableIgnoreRegex('rule 1');
+
+    const component = await renderIgnoreListSetting();
+    const ignoredRules = getAllRules(component);
+
+    // There is a default rule `/node_modules/|/bower_components/`
+    assert.deepStrictEqual(ignoredRules.length, 2);
+    assert.deepStrictEqual(ignoredRules[0].regex, '/node_modules/|/bower_components/');
+    assert.deepStrictEqual(ignoredRules[0].disabled, false);
+    assert.deepStrictEqual(ignoredRules[1].regex, 'rule 1');
+    assert.deepStrictEqual(ignoredRules[1].disabled, true);
+  });
+
+  it('Able to toggle the disable status of an ignore listed rules', async () => {
+    const component = await renderIgnoreListSetting();
+
+    assert.isNotNull(component.shadowRoot);
+    const regexRows = component.shadowRoot.querySelectorAll<HTMLElement>('.regex-row');
+    // "rule 1" is the second in the view.
+    // Now the "rule 1" is disabled (by last test), so click the checkbox, it will be enabled.
+    // Add sanity checks to make sure.
+    const checkboxShadow = regexRows[1].querySelector('dt-checkbox')?.shadowRoot;
+    assert.strictEqual(checkboxShadow?.querySelector('label')?.textContent, 'rule 1');
+    assert.isTrue(isIgnoreRegexDisabled('rule 1'));
+
+    const rule1CheckBox = checkboxShadow?.querySelector('input');
+    rule1CheckBox?.click();
+    assert.isFalse(isIgnoreRegexDisabled('rule 1'));
+  });
+});
+
+function ignoreRegex(regexValue: string): void {
+  const regexPatterns =
+      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
+          .getAsArray();
+  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();
+  for (const regexPattern of regexPatterns) {
+    if (regexPattern.pattern === regexValue) {
+      regexPattern.disabled = true;
+      break;
+    }
+  }
+}
+
+function isIgnoreRegexDisabled(regexValue: string): boolean {
+  const regexPatterns =
+      (Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting)
+          .getAsArray();
+  for (const regexPattern of regexPatterns) {
+    if (regexPattern.pattern === regexValue) {
+      return regexPattern.disabled ?? false;
+    }
+  }
+  return false;
+}

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

@@ -0,0 +1,132 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../../ui/components/menus/menus.js';
+
+import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import ignoreListSettingStyles from './ignoreListSetting.css.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   * @description Text title for the button to open the ignore list setting.
+   */
+  showIgnoreListSettingDialog: 'Show ignore list setting dialog',
+  /**
+   * @description Text title for ignore list setting.
+   */
+  ignoreList: 'Ignore list',
+  /**
+   * @description Text description for ignore list setting.
+   */
+  ignoreListDescription: 'Add these exclusion rules would simplify the flame chart.',
+  /**
+   *@description Pattern title in Framework Ignore List Settings Tab of the Settings
+   *@example {ad.*?} regex
+   */
+  ignoreScriptsWhoseNamesMatchS: 'Ignore scripts whose names match \'\'{regex}\'\'',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/IgnoreListSetting.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class IgnoreListSetting extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #renderBound = this.#render.bind(this);
+  readonly #ignoreListEnabled: Common.Settings.Setting<boolean> =
+      Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
+  readonly #regexPatterns = this.#getSkipStackFramesPatternSetting().getAsArray();
+
+  constructor() {
+    super();
+
+    Common.Settings.Settings.instance()
+        .moduleSetting('skip-stack-frames-pattern')
+        .addChangeListener(this.#scheduleRender.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('enable-ignore-listing')
+        .addChangeListener(this.#scheduleRender.bind(this));
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [ignoreListSettingStyles];
+    this.#scheduleRender();
+  }
+
+  #scheduleRender(): void {
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
+  }
+
+  #getSkipStackFramesPatternSetting(): Common.Settings.RegExpSetting {
+    return Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as
+        Common.Settings.RegExpSetting;
+  }
+
+  #onRegexEnableToggled(regex: Common.Settings.RegExpSettingItem, checkbox: UI.UIUtils.CheckboxLabel): void {
+    regex.disabled = !checkbox.checkboxElement.checked;
+
+    // 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
+    // chart.
+    this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
+    // There is no need to update this component, since the only UI change is this checkbox, which is already done by
+    // the user.
+  }
+
+  #renderItem(regex: Common.Settings.RegExpSettingItem): LitHtml.TemplateResult {
+    const checkbox = UI.UIUtils.CheckboxLabel.create(
+        regex.pattern, !regex.disabled, /* subtitle*/ undefined, /* jslogContext*/ 'timeline.ignore-list-pattern');
+    const helpText = i18nString(UIStrings.ignoreScriptsWhoseNamesMatchS, {regex: regex.pattern});
+    UI.Tooltip.Tooltip.install(checkbox, helpText);
+    checkbox.checkboxElement.ariaLabel = helpText;
+    checkbox.checkboxElement.addEventListener('change', this.#onRegexEnableToggled.bind(this, regex, checkbox), false);
+    return html`
+      <div class='regex-row'>${checkbox}</div>
+    `;
+  }
+
+  #render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('Ignore List setting dialog render was not scheduled');
+    }
+    // clang-format off
+    const output = html`
+      <devtools-button-dialog .data=${{
+          openOnRender: false,
+          jslogContext: 'timeline.ignore-list',
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'compress',
+          disabled: !this.#ignoreListEnabled.get(),
+          iconTitle: i18nString(UIStrings.showIgnoreListSettingDialog),
+          horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
+          closeButton: true,
+          dialogTitle: i18nString(UIStrings.ignoreList),
+        } 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))}
+        </div>
+      </devtools-button-dialog>
+    `;
+    // clang-format on
+    LitHtml.render(output, this.#shadow, {host: this});
+  }
+}
+
+customElements.define('devtools-perf-ignore-list-setting', IgnoreListSetting);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-perf-ignore-list-setting': IgnoreListSetting;
+  }
+}

front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -7,6 +7,7 @@ import * as BreadcrumbsUI from './BreadcrumbsUI.js';
 import * as CPUThrottlingSelector from './CPUThrottlingSelector.js';
 import * as DetailsView from './DetailsView.js';
 import * as FieldSettingsDialog from './FieldSettingsDialog.js';
+import * as IgnoreListSetting from './IgnoreListSetting.js';
 import * as InteractionBreakdown from './InteractionBreakdown.js';
 import * as LayoutShiftDetails from './LayoutShiftDetails.js';
 import * as LiveMetricsView from './LiveMetricsView.js';
@@ -29,6 +30,7 @@ export {
   CPUThrottlingSelector,
   DetailsView,
   FieldSettingsDialog,
+  IgnoreListSetting,
   InteractionBreakdown,
   LayoutShiftDetails,
   LiveMetricsView,

front_end/panels/timeline/components/components.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+.ignore-list-setting-description {
+  margin-bottom: 5px;
+}