[GM3Restyling] Remove adorner settings pane in favour of a submenu

Screenshot: https://imgur.com/a/9jpWWW8

Bug: 325442993
Change-Id: Ibc7240e3fc5d3405c2589c2e5e39ecc6cc2e92e2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5987922
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

config/gni/devtools_grd_files.gni

@@ -1350,7 +1350,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/classesPaneWidget.css.js",
   "front_end/panels/elements/components/AccessibilityTreeNode.js",
   "front_end/panels/elements/components/AdornerManager.js",
-  "front_end/panels/elements/components/AdornerSettingsPane.js",
   "front_end/panels/elements/components/AnchorFunctionLinkSwatch.js",
   "front_end/panels/elements/components/CSSHintDetailsView.js",
   "front_end/panels/elements/components/CSSPropertyDocsView.js",
@@ -1368,7 +1367,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/QueryContainer.js",
   "front_end/panels/elements/components/StylePropertyEditor.js",
   "front_end/panels/elements/components/accessibilityTreeNode.css.js",
-  "front_end/panels/elements/components/adornerSettingsPane.css.js",
   "front_end/panels/elements/components/anchorFunctionLinkSwatch.css.js",
   "front_end/panels/elements/components/computedStyleProperty.css.js",
   "front_end/panels/elements/components/computedStyleTrace.css.js",

front_end/panels/elements/ElementsPanel.ts

@@ -145,6 +145,10 @@ const UIStrings = {
    * @description Accessible name for the DOM tree explorer view.
    */
   domTreeExplorer: 'DOM tree explorer',
+  /**
+   * @description A context menu item to reveal a submenu with badge settings.
+   */
+  adornerSettings: 'Badge settings',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
@@ -202,7 +206,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private currentSearchResultIndex: number;
   pendingNodeReveal: boolean;
   private readonly adornerManager: ElementsComponents.AdornerManager.AdornerManager;
-  private adornerSettingsPane: ElementsComponents.AdornerSettingsPane.AdornerSettingsPane|null;
   private readonly adornersByName: Map<string, Set<Adorners.Adorner.Adorner>>;
   accessibilityTreeButton?: HTMLElement;
   domTreeButton?: HTMLElement;
@@ -300,7 +303,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
         Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
-    this.adornerSettingsPane = null;
     this.adornersByName = new Map();
   }
 
@@ -1186,30 +1188,23 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  showAdornerSettingsPane(): void {
-    // Delay the initialization of the pane to the first showing
-    // since usually this pane won't be used.
-    if (!this.adornerSettingsPane) {
-      this.adornerSettingsPane = new ElementsComponents.AdornerSettingsPane.AdornerSettingsPane();
-      this.adornerSettingsPane.addEventListener('adornersettingupdated', (event: Event) => {
-        const {adornerName, isEnabledNow, newSettings} =
-            (event as ElementsComponents.AdornerSettingsPane.AdornerSettingUpdatedEvent).data;
-        const adornersToUpdate = this.adornersByName.get(adornerName);
+  populateAdornerSettingsContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const adornerSubMenu = contextMenu.viewSection().appendSubMenuItem(
+        i18nString(UIStrings.adornerSettings), false, 'show-adorner-settings');
+    const adornerSettings = this.adornerManager.getSettings();
+    for (const [adorner, isEnabled] of adornerSettings) {
+      adornerSubMenu.defaultSection().appendCheckboxItem(adorner, () => {
+        const updatedIsEnabled = !isEnabled;
+        const adornersToUpdate = this.adornersByName.get(adorner);
         if (adornersToUpdate) {
-          for (const adorner of adornersToUpdate) {
-            isEnabledNow ? adorner.show() : adorner.hide();
+          for (const adornerToUpdate of adornersToUpdate) {
+            updatedIsEnabled ? adornerToUpdate.show() : adornerToUpdate.hide();
           }
         }
-        this.adornerManager.updateSettings(newSettings);
-      });
-      this.searchableViewInternal.element.prepend(this.adornerSettingsPane);
+        this.adornerManager.getSettings().set(adorner, updatedIsEnabled);
+        this.adornerManager.updateSettings(adornerSettings);
+      }, {checked: isEnabled, jslogContext: adorner});
     }
-
-    const adornerSettings = this.adornerManager.getSettings();
-    this.adornerSettingsPane.data = {
-      settings: adornerSettings,
-    };
-    this.adornerSettingsPane.show();
   }
 
   isAdornerEnabled(adornerText: string): boolean {

front_end/panels/elements/ElementsTreeOutline.ts

@@ -71,10 +71,6 @@ const UIStrings = {
    *@description Link text content in Elements Tree Outline of the Elements panel
    */
   reveal: 'reveal',
-  /**
-   * @description A context menu item to open the badge settings pane
-   */
-  adornerSettings: 'Badge settings\u2026',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -940,9 +936,7 @@ export class ElementsTreeOutline extends
       treeElement.populatePseudoElementContextMenu(contextMenu);
     }
 
-    contextMenu.viewSection().appendItem(i18nString(UIStrings.adornerSettings), () => {
-      ElementsPanel.instance().showAdornerSettingsPane();
-    }, {jslogContext: 'show-adorner-settings'});
+    ElementsPanel.instance().populateAdornerSettingsContextMenu(contextMenu);
 
     contextMenu.appendApplicableItems(treeElement.node());
     void contextMenu.show();

front_end/panels/elements/components/AdornerSettingsPane.ts

@@ -10,7 +10,6 @@ import("../../../../scripts/build/typescript/typescript.gni")
 generate_css("css_files") {
   sources = [
     "accessibilityTreeNode.css",
-    "adornerSettingsPane.css",
     "anchorFunctionLinkSwatch.css",
     "computedStyleProperty.css",
     "computedStyleTrace.css",
@@ -30,7 +29,6 @@ devtools_module("components") {
   sources = [
     "AccessibilityTreeNode.ts",
     "AdornerManager.ts",
-    "AdornerSettingsPane.ts",
     "AnchorFunctionLinkSwatch.ts",
     "CSSHintDetailsView.ts",
     "CSSPropertyDocsView.ts",

front_end/panels/elements/components/BUILD.gn

@@ -4,7 +4,6 @@
 
 import * as AccessibilityTreeNode from './AccessibilityTreeNode.js';
 import * as AdornerManager from './AdornerManager.js';
-import * as AdornerSettingsPane from './AdornerSettingsPane.js';
 import * as AnchorFunctionLinkSwatch from './AnchorFunctionLinkSwatch.js';
 import * as ComputedStyleProperty from './ComputedStyleProperty.js';
 import * as ComputedStyleTrace from './ComputedStyleTrace.js';
@@ -25,7 +24,6 @@ import * as StylePropertyEditor from './StylePropertyEditor.js';
 export {
   AccessibilityTreeNode,
   AdornerManager,
-  AdornerSettingsPane,
   AnchorFunctionLinkSwatch,
   ComputedStyleProperty,
   ComputedStyleTrace,

front_end/panels/elements/components/adornerSettingsPane.css

@@ -68,3 +68,14 @@ export async function openSoftContextMenuAndClickOnItem(selector: string, label:
   const root = await waitForSoftContextMenu();
   await click(`[aria-label="${label}"]`, {root});
 }
+
+export async function openSubMenu(selector: string, text: string) {
+  // Find the selected node, right click.
+  await click(selector, {clickOptions: {button: 'right'}});
+
+  // Wait for the context menu option, and click it.
+  await waitForSoftContextMenu();
+
+  const subMenuEntryItem = await findSubMenuEntryItem(text);
+  await subMenuEntryItem.hover();
+}