[GdpIntegration] Fix Badge Notification appearing behind the Settings screen

Previously, to make sure that badge notification is rendered in DevTools bounds, we
were rendering it under inspector view. However, Settings screen is rendered
as a dialog under `document.body`.

Because of this reason, badge notification had no chance of being rendered
on top of the settings screen (which we need).

This CL:
* Renders `BadgeNotification` under `document.body` (similar to GlassPane).
* Positions it based on the height & the inspector view bounds.

Fixed: 444428219
Change-Id: Ie9e6de6066c9cd72aaab23c9d0f9589fcf273fbe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6939233
Auto-Submit: Ergün Erdoğmuş <ergunsh@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>

Author: ergunsh

front_end/panels/common/BUILD.gn

@@ -37,6 +37,7 @@ devtools_module("common") {
     "../../core/platform:bundle",
     "../../models/badges:bundle",
     "../../models/geometry:bundle",
+    "../../services/window_bounds:bundle",
     "../../ui/components/buttons:bundle",
     "../../ui/components/snackbars:bundle",
     "../../ui/components/spinners:bundle",

front_end/panels/common/BadgeNotification.test.ts

@@ -59,7 +59,6 @@ describeWithEnvironment('BadgeNotification', () => {
     widget.message = properties?.message ?? 'Test message';
     widget.imageUri = properties?.imageUri ?? 'test.png';
     widget.actions = properties?.actions ?? [];
-    widget.markAsRoot();
     renderElementIntoDOM(widget, {allowMultipleChildren: true});
     widget.requestUpdate();
     await view.nextInput;
@@ -78,10 +77,12 @@ describeWithEnvironment('BadgeNotification', () => {
 
   it('invokes action callback on click', async () => {
     const action1Spy = sinon.spy();
-    const {view} = await createWidget({actions: [{label: 'Action 1', onClick: action1Spy}]});
+    const {view, widget} = await createWidget({actions: [{label: 'Action 1', onClick: action1Spy}]});
 
     view.input.actions[0].onClick();
     sinon.assert.calledOnce(action1Spy);
+
+    widget.detach();
   });
 
   it('is removed on close click', async () => {
@@ -91,6 +92,8 @@ describeWithEnvironment('BadgeNotification', () => {
 
     view.input.onCloseClick();
     assert.isFalse(inspectorViewRootElementStub.contains(widget.element));
+
+    widget.detach();
   });
 
   it('presents an activity-based badge', async () => {
@@ -105,6 +108,8 @@ describeWithEnvironment('BadgeNotification', () => {
     assert.strictEqual(input.actions[0].label, 'Badge settings');
     assert.strictEqual(input.actions[1].label, 'View profile');
     assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+
+    widget.detach();
   });
 
   it('presents a starter badge as an activity-based badge if the user has a profile and has enabled badges',
@@ -124,6 +129,8 @@ describeWithEnvironment('BadgeNotification', () => {
        assert.strictEqual(input.actions[0].label, 'Badge settings');
        assert.strictEqual(input.actions[1].label, 'View profile');
        assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+
+       widget.detach();
      });
 
   it('presents a starter badge with an opt-in message if the user has a profile but has disabled badges', async () => {
@@ -141,6 +148,8 @@ describeWithEnvironment('BadgeNotification', () => {
     assert.strictEqual(input.actions[0].label, 'Remind me later');
     assert.strictEqual(input.actions[1].label, 'Receive badges');
     assertMessageIncludes(input.message, 'Turn on badges to claim it.');
+
+    widget.detach();
   });
 
   it('presents a starter badge with a create profile message if the user does not have a profile', async () => {
@@ -157,5 +166,7 @@ describeWithEnvironment('BadgeNotification', () => {
     assert.strictEqual(input.actions[0].label, 'Remind me later');
     assert.strictEqual(input.actions[1].label, 'Create profile');
     assertMessageIncludes(input.message, 'Create a profile to claim your badge.');
+
+    widget.detach();
   });
 });

front_end/panels/common/BadgeNotification.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as WindowBoundsService from '../../services/window_bounds/window_bounds.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -66,6 +67,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
+const LEFT_OFFSET = 5;
+const BOTTOM_OFFSET = 5;
 export interface BadgeNotificationAction {
   label: string;
   jslogContext?: string;
@@ -141,6 +144,8 @@ export class BadgeNotification extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
+
+    this.markAsRoot();
   }
 
   async present(badge: Badges.Badge): Promise<void> {
@@ -151,12 +156,24 @@ export class BadgeNotification extends UI.Widget.Widget {
     }
   }
 
+  #positionNotification(): void {
+    const boundingRect = this.contentElement.getBoundingClientRect();
+    const container =
+        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    this.contentElement.positionAt(
+        LEFT_OFFSET, container.clientHeight - boundingRect.height - BOTTOM_OFFSET, container);
+  }
+
   #show(properties: BadgeNotificationProperties): void {
     this.message = properties.message;
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
     this.requestUpdate();
-    this.show(UI.InspectorView.InspectorView.instance().element);
+    this.show(document.body);
+
+    void this.updateComplete.then(() => {
+      this.#positionNotification();
+    });
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {

front_end/panels/common/badgeNotification.css

@@ -7,8 +7,6 @@
 @scope to (devtools-widget > *) {
   :scope {
     position: fixed;
-    bottom: var(--sys-size-5);
-    left: var(--sys-size-5);
     z-index: 9999;
     /* subtract var(--sys-size-5) * 2 so that there is equal space on the left and on the right in small screens */
     max-width: calc(100% - 2 * var(--sys-size-5));