Make preventTabbingOutsideDialog more easily overridable (#15460)

- Add comment about functionality
- Expose application shell classes for easier reference

Fixes #15417

Author: martin-fleck-at

packages/core/src/browser/dialogs.ts

@@ -241,10 +241,17 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         this.toDisposeOnDetach.push(DialogOverlayService.get().push(this));
     }
 
-    protected preventTabbingOutsideDialog(): Disposable {
-        const nonInertSiblings = Array.from(this.node.ownerDocument.body.children).filter(child => child !== this.node && !(child.hasAttribute('inert')));
-        nonInertSiblings.forEach(child => child.setAttribute('inert', ''));
-        return Disposable.create(() => nonInertSiblings.forEach(child => child.removeAttribute('inert')));
+    /**
+     * This prevents tabbing outside the dialog by marking elements as inert, i.e., non-clickable and non-focussable.
+     *
+     * @param elements the elements for which we disable tabbing. By default all elements within the body element are considered.
+     * Please note that this may also include other popups such as the suggestion overlay, the notification center or quick picks.
+     * @returns a disposable that will restore the previous tabbing behavior
+     */
+    protected preventTabbingOutsideDialog(elements = Array.from(this.node.ownerDocument.body.children)): Disposable {
+        const nonInertElements = elements.filter(child => child !== this.node && !(child.hasAttribute('inert')));
+        nonInertElements.forEach(child => child.setAttribute('inert', ''));
+        return Disposable.create(() => nonInertElements.forEach(child => child.removeAttribute('inert')));
     }
 
     protected handleEscape(event: KeyboardEvent): boolean | void {

packages/core/src/browser/shell/application-shell.ts

@@ -47,15 +47,15 @@ import { PreviewableWidget } from '../widgets/previewable-widget';
 import { WindowService } from '../window/window-service';
 
 /** The class name added to ApplicationShell instances. */
-const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
+export const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
 /** The class name added to the main and bottom area panels. */
-const MAIN_BOTTOM_AREA_CLASS = 'theia-app-centers';
+export const MAIN_BOTTOM_AREA_CLASS = 'theia-app-centers';
 /** Status bar entry identifier for the bottom panel toggle button. */
-const BOTTOM_PANEL_TOGGLE_ID = 'bottom-panel-toggle';
+export const BOTTOM_PANEL_TOGGLE_ID = 'bottom-panel-toggle';
 /** The class name added to the main area panel. */
-const MAIN_AREA_CLASS = 'theia-app-main';
+export const MAIN_AREA_CLASS = 'theia-app-main';
 /** The class name added to the bottom area panel. */
-const BOTTOM_AREA_CLASS = 'theia-app-bottom';
+export const BOTTOM_AREA_CLASS = 'theia-app-bottom';
 
 export type ApplicationShellLayoutVersion =
     /** layout versioning is introduced, unversioned layout are not compatible */