RPP: make the perf panel UI inert when consent dialog shows

This CL makes the UI inert (it will not respond to user events) when the
dialog is showing, so you cannot tab around elements in the background.

We might want to expand this to a higher component so all of RPP is
covered, but this is enough for now.

Fixed: 406541486
Change-Id: Ie95ff549ba2392f6bdafeeff69c66e9ccd18ff7b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6403235
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Alina Varkki <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -286,6 +286,18 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       },
     });
 
+    this.#overlays.addEventListener(Overlays.Overlays.ConsentDialogVisibilityChange.eventName, e => {
+      const event = e as Overlays.Overlays.ConsentDialogVisibilityChange;
+      if (event.isVisible) {
+        // If the dialog is visible, we do not want anything in the performance
+        // panel capturing tab focus.
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
+        this.element.setAttribute('inert', 'inert');
+      } else {
+        this.element.removeAttribute('inert');
+      }
+    });
+
     this.#overlays.addEventListener(Overlays.Overlays.EntryLabelMouseClick.eventName, event => {
       const {overlay} = (event as Overlays.Overlays.EntryLabelMouseClick);
       this.dispatchEventToListeners(

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -402,6 +402,12 @@ export class AnnotationOverlayActionEvent extends Event {
     super(AnnotationOverlayActionEvent.eventName);
   }
 }
+export class ConsentDialogVisibilityChange extends Event {
+  static readonly eventName = 'consentdialogvisibilitychange';
+  constructor(public isVisible: boolean) {
+    super(ConsentDialogVisibilityChange.eventName, {bubbles: true, composed: true});
+  }
+}
 
 export class TimeRangeMouseOverEvent extends Event {
   static readonly eventName = 'timerangemouseoverevent';
@@ -1534,6 +1540,11 @@ export class Overlays extends EventTarget {
         const callTree = parsedTrace ? Utils.AICallTree.AICallTree.fromEvent(overlay.entry, parsedTrace) : null;
         component.callTree = callTree;
 
+        component.addEventListener(
+            Components.EntryLabelOverlay.LabelAnnotationsConsentDialogVisiblityChange.eventName, e => {
+              const event = e as Components.EntryLabelOverlay.LabelAnnotationsConsentDialogVisiblityChange;
+              this.dispatchEvent(new ConsentDialogVisibilityChange(event.isVisible));
+            });
         component.addEventListener(Components.EntryLabelOverlay.EmptyEntryLabelRemoveEvent.eventName, () => {
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Remove'));
         });

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -140,6 +140,13 @@ export class EntryLabelChangeEvent extends Event {
   }
 }
 
+export class LabelAnnotationsConsentDialogVisiblityChange extends Event {
+  static readonly eventName = 'labelannotationsconsentdialogvisiblitychange';
+  constructor(public isVisible: boolean) {
+    super(LabelAnnotationsConsentDialogVisiblityChange.eventName, {bubbles: true, composed: true});
+  }
+}
+
 export class EntryLabelOverlay extends HTMLElement {
   // The label is angled on the left from the centre of the entry it belongs to.
   // `LABEL_AND_CONNECTOR_SHIFT_LENGTH` specifies how many pixels to the left it is shifted.
@@ -548,6 +555,7 @@ export class EntryLabelOverlay extends HTMLElement {
    * @returns `true` if the user has now consented, and `false` otherwise.
    */
   async #showUserAiFirstRunDialog(): Promise<boolean> {
+    this.dispatchEvent(new LabelAnnotationsConsentDialogVisiblityChange(true));
     const userConsented = await PanelCommon.FreDialog.show({
       ariaLabel: i18nString(UIStrings.freDialog),
       header: {iconName: 'pen-spark', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
@@ -584,6 +592,7 @@ export class EntryLabelOverlay extends HTMLElement {
       },
       learnMoreButtonTitle: UIStringsNotTranslate.learnMoreButton,
     });
+    this.dispatchEvent(new LabelAnnotationsConsentDialogVisiblityChange(false));
 
     if (userConsented) {
       this.#aiAnnotationsEnabledSetting.set(true);