[Serverless Chrome] Fix fullscreen (#163317)

packages/core/application/core-application-browser-internal/src/utils/append_app_path.ts

@@ -8,7 +8,7 @@
 
 import { removeSlashes } from './remove_slashes';
 
-export const appendAppPath = (appBasePath: string, path: string = '') => {
+export const appendAppPath = (appBasePath = '', path: string = '') => {
   // Only prepend slash if not a hash or query path
   path = path === '' || path.startsWith('#') || path.startsWith('?') ? path : `/${path}`;
   // Do not remove trailing slash when in hashbang or basePath

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx

@@ -158,6 +158,7 @@ describe('start', () => {
             ]
           `);
   });
+
   it('strips off "snapshot" from the kibana version if present', async () => {
     const { chrome, service } = await start({
       options: { browserSupportsCsp: false, kibanaVersion: '8.0.0-SnAPshot' },
@@ -339,6 +340,24 @@ describe('start', () => {
                       ]
                   `);
     });
+
+    it('change visibility when EUI component in full screen', async () => {
+      const body = document.body;
+      const startDeps = defaultStartDeps([new FakeApp('foo')], 'foo');
+      const { chrome } = await start({ startDeps });
+
+      // Chrome is initially visible
+      let isVisible = await Rx.lastValueFrom(chrome.getIsVisible$().pipe(Rx.take(1)));
+      expect(isVisible).toBe(true);
+
+      // Add EUI class that should hide the chrome
+      body.classList.add('euiDataGrid__restrictBody');
+      await new Promise((resolve) => setTimeout(resolve)); // wait next tick
+
+      // Chrome should be hidden
+      isVisible = await Rx.lastValueFrom(chrome.getIsVisible$().pipe(Rx.take(1)));
+      expect(isVisible).toBe(false);
+    });
   });
 
   describe('badge', () => {

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -79,6 +79,7 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation = new ProjectNavigationService();
+  private mutationObserver: MutationObserver | undefined;
 
   constructor(private readonly params: ConstructorParams) {}
 
@@ -114,6 +115,53 @@ export class ChromeService {
     );
   }
 
+  private setIsVisible = (isVisible: boolean) => this.isForceHidden$.next(!isVisible);
+
+  /**
+   * Some EUI component can be toggled in Full screen (e.g. the EuiDataGrid). When they are toggled in full
+   * screen we want to hide the chrome, and when they are toggled back to normal we want to show the chrome.
+   */
+  private handleEuiFullScreenChanges = () => {
+    const { body } = document;
+    // HTML class names that are added to the body when Eui components are toggled in full screen
+    const classesOnBodyWhenEuiFullScreen = ['euiDataGrid__restrictBody'];
+
+    let isChromeHiddenForEuiFullScreen = false;
+    let isChromeVisible = false;
+
+    this.isVisible$.pipe(takeUntil(this.stop$)).subscribe((isVisible) => {
+      isChromeVisible = isVisible;
+    });
+
+    const onBodyClassesChange = () => {
+      const { className } = body;
+      if (
+        classesOnBodyWhenEuiFullScreen.some((name) => className.includes(name)) &&
+        isChromeVisible
+      ) {
+        isChromeHiddenForEuiFullScreen = true;
+        this.setIsVisible(false);
+      } else if (
+        classesOnBodyWhenEuiFullScreen.every((name) => !className.includes(name)) &&
+        !isChromeVisible &&
+        isChromeHiddenForEuiFullScreen
+      ) {
+        isChromeHiddenForEuiFullScreen = false;
+        this.setIsVisible(true);
+      }
+    };
+
+    this.mutationObserver = new MutationObserver((mutationList) => {
+      mutationList.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          onBodyClassesChange();
+        }
+      });
+    });
+
+    this.mutationObserver.observe(body, { attributes: true });
+  };
+
   public setup({ analytics }: SetupDeps) {
     const docTitle = this.docTitle.setup({ document: window.document });
     registerAnalyticsContextProvider(analytics, docTitle.title$);
@@ -128,6 +176,7 @@ export class ChromeService {
     customBranding,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
+    this.handleEuiFullScreenChanges();
 
     const globalHelpExtensionMenuLinks$ = new BehaviorSubject<ChromeGlobalHelpExtensionMenuLink[]>(
       []
@@ -379,7 +428,7 @@ export class ChromeService {
 
       getIsVisible$: () => this.isVisible$,
 
-      setIsVisible: (isVisible: boolean) => this.isForceHidden$.next(!isVisible),
+      setIsVisible: this.setIsVisible.bind(this),
 
       getBadge$: () => badge$.pipe(takeUntil(this.stop$)),
 
@@ -463,5 +512,6 @@ export class ChromeService {
     this.navLinks.stop();
     this.projectNavigation.stop();
     this.stop$.next();
+    this.mutationObserver?.disconnect();
   }
 }

x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx

@@ -46,8 +46,9 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
           data-test-subj="timeline-flyout"
           css={css`
             min-width: 150px;
-            height: calc(100% - 96px);
-            top: 96px;
+            height: 100%;
+            top: 0;
+            left: 0;
             background: ${useEuiBackgroundColor('plain')};
             position: fixed;
             width: 100%;