@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/developer-tools/src/DeveloperConsole/DeveloperConsole.tsx

@@ -1,389 +1,389 @@
-import {
-    FC,
-    Component,
-    Reference,
-    createRef,
-    clearNode,
-    DeclareProps,
-} from '@24i/bigscreen-sdk/jsx';
-import {
-    DISPLAY_NONE,
-    getDisplayToggler,
-    addClass,
-    removeClass,
-    stopEvent,
-} from '@24i/bigscreen-sdk/utils';
-import { IStorage, Storage } from '@24i/bigscreen-sdk/storage';
-import { YELLOW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import {
-    setActiveElementAsFocusCandidate, focusCandidate,
-} from '@24i/bigscreen-sdk/focus';
-import { IDeveloperTool } from '../IDeveloperTool';
-import { ConsoleMessage, NetworkMessage } from './PanelMessage';
-import { Queue, addInstrument } from './helpers';
-import { ControlButton } from './ControlButton';
-import { Panel } from './Panel';
-import {
-    DeveloperConsoleButtons,
-    InstrumentOptions,
-    ButtonActions,
-    NetworkData,
-    ConsoleData,
-    HandlerData,
-    PanelType,
-    PanelData,
-} from './types';
-
-const FOCUS_CLASS = 'focus';
-const SELECTED_CLASS = 'selected';
-const ENABLED_CLASS = 'enabled';
-
-const MAX_CONSOLE_QUEUE_LENGTH = 100;
-const MAX_NETWORK_QUEUE_LENGTH = 50;
-
-const Buttons: DeveloperConsoleButtons = {
-    hide: { key: 0, id: 'item-hide', text: 'Hide' },
-    console: { key: 1, id: 'item-console', text: 'Console' },
-    network: { key: 2, id: 'item-network', text: 'Network' },
-    'reload-app': { key: 3, id: 'item-reload-app', text: 'Reload app' },
-    'clear-storage': { key: 4, id: 'item-clear-storage', text: 'Clear storage' },
-};
-
-export type Props = {
-    storage?: IStorage;
-    maxConsoleQueueLength?: number;
-    maxNetworkQueueLength?: number;
-    instrumentOptions?: Partial<InstrumentOptions>;
-    preserveScrollOnUpdate?: boolean;
-    onShow?: () => void;
-    onFocusOut?: () => void;
-    onClose?: () => void;
-};
-
-export class DeveloperConsole extends Component<Props> implements IDeveloperTool<Props> {
-    readonly name = 'Developer console';
-
-    rootRef = createRef<HTMLDivElement>();
-
-    developerConsoleRef = createRef<HTMLDivElement>();
-
-    developerConsolePanelRef = createRef<HTMLDivElement>();
-
-    panelComponentRef = createRef<Panel>();
-
-    selectedButtonRef: Reference<HTMLDivElement> | null = null;
-
-    consoleQueue: Queue<ConsoleData>;
-
-    networkQueue: Queue<NetworkData>;
-
-    displayToggler = getDisplayToggler(this.rootRef, true);
-
-    static defaultProps = {
-        storage: Storage,
-        maxConsoleQueueLength: MAX_CONSOLE_QUEUE_LENGTH,
-        maxNetworkQueueLength: MAX_NETWORK_QUEUE_LENGTH,
-    };
-
-    declare props: DeclareProps<Props, typeof DeveloperConsole.defaultProps>;
-
-    constructor(props: Props) {
-        super(props);
-        const { maxConsoleQueueLength, maxNetworkQueueLength, instrumentOptions } = this.props;
-        this.consoleQueue = new Queue<ConsoleData>(maxConsoleQueueLength);
-        this.networkQueue = new Queue<NetworkData>(maxNetworkQueueLength);
-        this.setInstruments(instrumentOptions);
-    }
-
-    onKeyDown = (event: KeyboardEvent) => {
-        const processed = switchByKey(event, {
-            NUM_0: this.onHidePanel,
-            NUM_1: this.onToggleConsolePanel,
-            NUM_2: this.onToggleNetworkPanel,
-            NUM_3: this.onReloadApp,
-            NUM_4: this.onClearStorage,
-            RED: this.onClearPanel,
-            BACK: this.onCloseDeveloperConsole,
-        });
-        if (processed) stopEvent(event);
-    };
-
-    onHidePanel = () => {
-        if (this.panelComponentRef.current) {
-            clearNode(this.developerConsolePanelRef);
-            this.panelComponentRef.current = null;
-            this.toggleHideButton();
-            removeClass(this.selectedButtonRef!, SELECTED_CLASS);
-            this.selectedButtonRef = null;
-            this.developerConsoleRef.current!.focus();
-        }
-        return true;
-    };
-
-    onToggleConsolePanel = () => {
-        this.renderPanel('console', this.consoleQueue, ConsoleMessage as FC<PanelData>);
-        this.selectButton('console');
-        return true;
-    };
-
-    onToggleNetworkPanel = () => {
-        this.renderPanel('network', this.networkQueue, NetworkMessage as FC<PanelData>);
-        this.selectButton('network');
-        return true;
-    };
-
-    onReloadApp = () => {
-        window.location.reload();
-        return true;
-    };
-
-    onClearStorage = () => {
-        const { storage } = this.props;
-        storage.clear();
-        console.info('Storage cleared...');
-        return true;
-    };
-
-    onClearPanel = () => {
-        if (this.panelComponentRef.current) {
-            this.panelComponentRef.current.clear();
-        }
-        return true;
-    };
-
-    onFocusOut() {
-        const { onFocusOut } = this.props;
-        removeClass(this.rootRef, FOCUS_CLASS);
-        focusCandidate();
-        onFocusOut?.();
-    }
-
-    onCloseDeveloperConsole = () => {
-        this.closeDeveloperConsole();
-        return true;
-    };
-
-    setInstruments(instrumentOptions: Partial<InstrumentOptions> = {}) {
-        if (instrumentOptions?.onerror !== false) {
-            addInstrument({
-                type: 'error',
-                callback: (handlerData: HandlerData) => {
-                    const logLevel = { level: 'error' };
-                    this.sendToConsolePanel({ ...logLevel, ...handlerData });
-                },
-            });
-        }
-        if (instrumentOptions?.console !== false) {
-            addInstrument({
-                type: 'console',
-                callback: (handlerData: HandlerData) => {
-                    this.sendToConsolePanel(handlerData);
-                },
-            });
-        }
-        if (instrumentOptions?.fetch !== false) {
-            addInstrument({
-                type: 'fetch',
-                callback: (handlerData: HandlerData) => {
-                    this.sendToNetworkPanel(handlerData);
-                },
-            });
-        }
-        if (instrumentOptions?.xhr !== false) {
-            addInstrument({
-                type: 'xhr',
-                callback: (handlerData: HandlerData) => {
-                    this.sendToNetworkPanel(handlerData);
-                },
-            });
-        }
-    }
-
-    onGlobalKeyDown = (event: KeyboardEvent) => {
-        if (
-            this.developerConsoleRef.current
-            && YELLOW.is(event)
-        ) {
-            if (!this.isFocused()) {
-                this.focus();
-                stopEvent(event);
-            } else {
-                this.onFocusOut();
-                stopEvent(event);
-            }
-        }
-    };
-
-    addFocusKeyListener() {
-        window.document.addEventListener('keydown', this.onGlobalKeyDown, true);
-    }
-
-    removeFocusKeyListener() {
-        window.document.removeEventListener('keydown', this.onGlobalKeyDown, true);
-    }
-
-    openDeveloperConsole() {
-        const { onShow } = this.props;
-        this.displayToggler.show();
-        this.renderDeveloperConsole();
-        this.focus();
-        this.addFocusKeyListener();
-        onShow?.();
-    }
-
-    closeDeveloperConsole() {
-        const { onClose } = this.props;
-        this.displayToggler.hide();
-        this.clear();
-        focusCandidate();
-        this.removeFocusKeyListener();
-        onClose?.();
-    }
-
-    show() {
-        this.openDeveloperConsole();
-    }
-
-    hide() {
-        this.closeDeveloperConsole();
-    }
-
-    focus() {
-        setActiveElementAsFocusCandidate();
-        if (this.panelComponentRef.current) {
-            this.panelComponentRef.current.focus();
-        } else {
-            this.developerConsoleRef.current!.focus();
-        }
-        addClass(this.rootRef, FOCUS_CLASS);
-    }
-
-    isFocused() {
-        return !!this.developerConsoleRef.current
-            && this.developerConsoleRef.current.contains(document.activeElement);
-    }
-
-    toggleHideButton() {
-        const hideButtonRef = Buttons.hide.ref!;
-        if (this.panelComponentRef.current) {
-            addClass(hideButtonRef, ENABLED_CLASS);
-        } else {
-            removeClass(hideButtonRef, ENABLED_CLASS);
-        }
-    }
-
-    selectButton(action: ButtonActions) {
-        const buttonToSelect = Buttons[action];
-        this.selectedButtonRef = buttonToSelect.ref!;
-        addClass(this.selectedButtonRef, SELECTED_CLASS);
-    }
-
-    isPanelTypeOpen(panelType: PanelType) {
-        if (this.panelComponentRef.current) {
-            const currentPanel = this.panelComponentRef.current.getPanelType();
-            return currentPanel === panelType;
-        }
-        return false;
-    }
-
-    sendToConsolePanel(handlerData: HandlerData) {
-        const { level, args } = handlerData;
-        const timestamp = Date.now();
-        const data: ConsoleData = { timestamp, level, args };
-
-        if (this.isPanelTypeOpen('console')) {
-            this.panelComponentRef.current!.appendMessage(data);
-        } else {
-            this.consoleQueue.enqueue(data);
-        }
-    }
-
-    sendToNetworkPanel(handlerData: HandlerData) {
-        const { method, url, statusCode } = handlerData;
-        const timestamp = Date.now();
-        const data: NetworkData = { timestamp, method, url, statusCode };
-
-        if (this.isPanelTypeOpen('network')) {
-            this.panelComponentRef.current!.appendMessage(data);
-        } else {
-            this.networkQueue.enqueue(data);
-        }
-    }
-
-    clear() {
-        clearNode(this.rootRef);
-        this.developerConsoleRef.current = null;
-        this.panelComponentRef.current = null;
-        removeClass(this.rootRef, FOCUS_CLASS);
-    }
-
-    renderPanel(
-        panelType: PanelType,
-        dataQueue: Queue<PanelData>,
-        MessageComponent: FC<PanelData>,
-    ) {
-        const { preserveScrollOnUpdate } = this.props;
-        if (!this.isPanelTypeOpen(panelType)) {
-            if (this.selectedButtonRef) removeClass(this.selectedButtonRef, SELECTED_CLASS);
-            this.clearMount(
-                <Panel
-                    ref={this.panelComponentRef}
-                    panelType={panelType}
-                    dataQueue={dataQueue}
-                    MessageComponent={MessageComponent}
-                    preserveScrollOnUpdate={preserveScrollOnUpdate}
-                />,
-                this.developerConsolePanelRef,
-            );
-            this.toggleHideButton();
-            this.panelComponentRef.current!.focus();
-        }
-    }
-
-    renderDeveloperConsole() {
-        this.rootRef.current!.style.display = 'block';
-        const buttonKeys = Object.keys(Buttons) as ButtonActions[];
-
-        this.clearMount(
-            <div
-                className="developer-console-container"
-                ref={this.developerConsoleRef}
-                onKeyDown={this.onKeyDown}
-                tabIndex={0}
-                dir="ltr"
-            >
-                <div className="developer-console-panel" ref={this.developerConsolePanelRef} />
-                <div className="developer-console-controls">
-                    <div className="developer-console-control-items">
-                        {map(buttonKeys, (buttonKey: ButtonActions) => {
-                            const buttonProps = Buttons[buttonKey];
-                            Buttons[buttonKey].ref = createRef<HTMLDivElement>();
-                            return (<ControlButton {...buttonProps} />);
-                        })}
-                    </div>
-                    <div className="developer-console-control-legend">
-                        <div id="item-focus" className="control-item">
-                            <span className="control-item-button">Y</span>
-                            <span className="control-item-action">Focus</span>
-                        </div>
-                        <div id="item-clear" className="control-item">
-                            <span className="control-item-button">R</span>
-                            <span className="control-item-action">Clear</span>
-                        </div>
-                    </div>
-                </div>
-            </div>,
-            this.rootRef,
-        );
-    }
-
-    render() {
-        return (
-            <div
-                ref={this.rootRef}
-                className={`developer-console ${DISPLAY_NONE}`}
-            />
-        );
-    }
-}
+import {
+    FC,
+    Component,
+    Reference,
+    createRef,
+    clearNode,
+    DeclareProps,
+} from '@24i/bigscreen-sdk/jsx';
+import {
+    DISPLAY_NONE,
+    getDisplayToggler,
+    addClass,
+    removeClass,
+    stopEvent,
+} from '@24i/bigscreen-sdk/utils';
+import { IStorage, Storage } from '@24i/bigscreen-sdk/storage';
+import { YELLOW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import { IDeveloperTool } from '../IDeveloperTool';
+import { ConsoleMessage, NetworkMessage } from './PanelMessage';
+import { Queue, addInstrument } from './helpers';
+import { ControlButton } from './ControlButton';
+import { Panel } from './Panel';
+import {
+    DeveloperConsoleButtons,
+    InstrumentOptions,
+    ButtonActions,
+    NetworkData,
+    ConsoleData,
+    HandlerData,
+    PanelType,
+    PanelData,
+} from './types';
+
+const FOCUS_CLASS = 'focus';
+const SELECTED_CLASS = 'selected';
+const ENABLED_CLASS = 'enabled';
+
+const MAX_CONSOLE_QUEUE_LENGTH = 100;
+const MAX_NETWORK_QUEUE_LENGTH = 50;
+
+const Buttons: DeveloperConsoleButtons = {
+    hide: { key: 0, id: 'item-hide', text: 'Hide' },
+    console: { key: 1, id: 'item-console', text: 'Console' },
+    network: { key: 2, id: 'item-network', text: 'Network' },
+    'reload-app': { key: 3, id: 'item-reload-app', text: 'Reload app' },
+    'clear-storage': { key: 4, id: 'item-clear-storage', text: 'Clear storage' },
+};
+
+export type Props = {
+    storage?: IStorage;
+    maxConsoleQueueLength?: number;
+    maxNetworkQueueLength?: number;
+    instrumentOptions?: Partial<InstrumentOptions>;
+    preserveScrollOnUpdate?: boolean;
+    onShow?: () => void;
+    onFocusOut?: () => void;
+    onClose?: () => void;
+};
+
+export class DeveloperConsole extends Component<Props> implements IDeveloperTool<Props> {
+    readonly name = 'Developer console';
+
+    rootRef = createRef<HTMLDivElement>();
+
+    developerConsoleRef = createRef<HTMLDivElement>();
+
+    developerConsolePanelRef = createRef<HTMLDivElement>();
+
+    panelComponentRef = createRef<Panel>();
+
+    selectedButtonRef: Reference<HTMLDivElement> | null = null;
+
+    consoleQueue: Queue<ConsoleData>;
+
+    networkQueue: Queue<NetworkData>;
+
+    displayToggler = getDisplayToggler(this.rootRef, true);
+
+    static defaultProps = {
+        storage: Storage,
+        maxConsoleQueueLength: MAX_CONSOLE_QUEUE_LENGTH,
+        maxNetworkQueueLength: MAX_NETWORK_QUEUE_LENGTH,
+    };
+
+    declare props: DeclareProps<Props, typeof DeveloperConsole.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        const { maxConsoleQueueLength, maxNetworkQueueLength, instrumentOptions } = this.props;
+        this.consoleQueue = new Queue<ConsoleData>(maxConsoleQueueLength);
+        this.networkQueue = new Queue<NetworkData>(maxNetworkQueueLength);
+        this.setInstruments(instrumentOptions);
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        const processed = switchByKey(event, {
+            NUM_0: this.onHidePanel,
+            NUM_1: this.onToggleConsolePanel,
+            NUM_2: this.onToggleNetworkPanel,
+            NUM_3: this.onReloadApp,
+            NUM_4: this.onClearStorage,
+            RED: this.onClearPanel,
+            BACK: this.onCloseDeveloperConsole,
+        });
+        if (processed) stopEvent(event);
+    };
+
+    onHidePanel = () => {
+        if (this.panelComponentRef.current) {
+            clearNode(this.developerConsolePanelRef);
+            this.panelComponentRef.current = null;
+            this.toggleHideButton();
+            removeClass(this.selectedButtonRef!, SELECTED_CLASS);
+            this.selectedButtonRef = null;
+            this.developerConsoleRef.current!.focus();
+        }
+        return true;
+    };
+
+    onToggleConsolePanel = () => {
+        this.renderPanel('console', this.consoleQueue, ConsoleMessage as FC<PanelData>);
+        this.selectButton('console');
+        return true;
+    };
+
+    onToggleNetworkPanel = () => {
+        this.renderPanel('network', this.networkQueue, NetworkMessage as FC<PanelData>);
+        this.selectButton('network');
+        return true;
+    };
+
+    onReloadApp = () => {
+        window.location.reload();
+        return true;
+    };
+
+    onClearStorage = () => {
+        const { storage } = this.props;
+        storage.clear();
+        console.info('Storage cleared...');
+        return true;
+    };
+
+    onClearPanel = () => {
+        if (this.panelComponentRef.current) {
+            this.panelComponentRef.current.clear();
+        }
+        return true;
+    };
+
+    onFocusOut() {
+        const { onFocusOut } = this.props;
+        removeClass(this.rootRef, FOCUS_CLASS);
+        focusCandidate();
+        onFocusOut?.();
+    }
+
+    onCloseDeveloperConsole = () => {
+        this.closeDeveloperConsole();
+        return true;
+    };
+
+    setInstruments(instrumentOptions: Partial<InstrumentOptions> = {}) {
+        if (instrumentOptions?.onerror !== false) {
+            addInstrument({
+                type: 'error',
+                callback: (handlerData: HandlerData) => {
+                    const logLevel = { level: 'error' };
+                    this.sendToConsolePanel({ ...logLevel, ...handlerData });
+                },
+            });
+        }
+        if (instrumentOptions?.console !== false) {
+            addInstrument({
+                type: 'console',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToConsolePanel(handlerData);
+                },
+            });
+        }
+        if (instrumentOptions?.fetch !== false) {
+            addInstrument({
+                type: 'fetch',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToNetworkPanel(handlerData);
+                },
+            });
+        }
+        if (instrumentOptions?.xhr !== false) {
+            addInstrument({
+                type: 'xhr',
+                callback: (handlerData: HandlerData) => {
+                    this.sendToNetworkPanel(handlerData);
+                },
+            });
+        }
+    }
+
+    onGlobalKeyDown = (event: KeyboardEvent) => {
+        if (
+            this.developerConsoleRef.current
+            && YELLOW.is(event)
+        ) {
+            if (!this.isFocused()) {
+                this.focus();
+                stopEvent(event);
+            } else {
+                this.onFocusOut();
+                stopEvent(event);
+            }
+        }
+    };
+
+    addFocusKeyListener() {
+        window.document.addEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    removeFocusKeyListener() {
+        window.document.removeEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    openDeveloperConsole() {
+        const { onShow } = this.props;
+        this.displayToggler.show();
+        this.renderDeveloperConsole();
+        this.focus();
+        this.addFocusKeyListener();
+        onShow?.();
+    }
+
+    closeDeveloperConsole() {
+        const { onClose } = this.props;
+        this.displayToggler.hide();
+        this.clear();
+        focusCandidate();
+        this.removeFocusKeyListener();
+        onClose?.();
+    }
+
+    show() {
+        this.openDeveloperConsole();
+    }
+
+    hide() {
+        this.closeDeveloperConsole();
+    }
+
+    focus() {
+        setActiveElementAsFocusCandidate();
+        if (this.panelComponentRef.current) {
+            this.panelComponentRef.current.focus();
+        } else {
+            this.developerConsoleRef.current!.focus();
+        }
+        addClass(this.rootRef, FOCUS_CLASS);
+    }
+
+    isFocused() {
+        return !!this.developerConsoleRef.current
+            && this.developerConsoleRef.current.contains(document.activeElement);
+    }
+
+    toggleHideButton() {
+        const hideButtonRef = Buttons.hide.ref!;
+        if (this.panelComponentRef.current) {
+            addClass(hideButtonRef, ENABLED_CLASS);
+        } else {
+            removeClass(hideButtonRef, ENABLED_CLASS);
+        }
+    }
+
+    selectButton(action: ButtonActions) {
+        const buttonToSelect = Buttons[action];
+        this.selectedButtonRef = buttonToSelect.ref!;
+        addClass(this.selectedButtonRef, SELECTED_CLASS);
+    }
+
+    isPanelTypeOpen(panelType: PanelType) {
+        if (this.panelComponentRef.current) {
+            const currentPanel = this.panelComponentRef.current.getPanelType();
+            return currentPanel === panelType;
+        }
+        return false;
+    }
+
+    sendToConsolePanel(handlerData: HandlerData) {
+        const { level, args } = handlerData;
+        const timestamp = Date.now();
+        const data: ConsoleData = { timestamp, level, args };
+
+        if (this.isPanelTypeOpen('console')) {
+            this.panelComponentRef.current!.appendMessage(data);
+        } else {
+            this.consoleQueue.enqueue(data);
+        }
+    }
+
+    sendToNetworkPanel(handlerData: HandlerData) {
+        const { method, url, statusCode } = handlerData;
+        const timestamp = Date.now();
+        const data: NetworkData = { timestamp, method, url, statusCode };
+
+        if (this.isPanelTypeOpen('network')) {
+            this.panelComponentRef.current!.appendMessage(data);
+        } else {
+            this.networkQueue.enqueue(data);
+        }
+    }
+
+    clear() {
+        clearNode(this.rootRef);
+        this.developerConsoleRef.current = null;
+        this.panelComponentRef.current = null;
+        removeClass(this.rootRef, FOCUS_CLASS);
+    }
+
+    renderPanel(
+        panelType: PanelType,
+        dataQueue: Queue<PanelData>,
+        MessageComponent: FC<PanelData>,
+    ) {
+        const { preserveScrollOnUpdate } = this.props;
+        if (!this.isPanelTypeOpen(panelType)) {
+            if (this.selectedButtonRef) removeClass(this.selectedButtonRef, SELECTED_CLASS);
+            this.clearMount(
+                <Panel
+                    ref={this.panelComponentRef}
+                    panelType={panelType}
+                    dataQueue={dataQueue}
+                    MessageComponent={MessageComponent}
+                    preserveScrollOnUpdate={preserveScrollOnUpdate}
+                />,
+                this.developerConsolePanelRef,
+            );
+            this.toggleHideButton();
+            this.panelComponentRef.current!.focus();
+        }
+    }
+
+    renderDeveloperConsole() {
+        this.rootRef.current!.style.display = 'block';
+        const buttonKeys = Object.keys(Buttons) as ButtonActions[];
+
+        this.clearMount(
+            <div
+                className="developer-console-container"
+                ref={this.developerConsoleRef}
+                onKeyDown={this.onKeyDown}
+                tabIndex={0}
+                dir="ltr"
+            >
+                <div className="developer-console-panel" ref={this.developerConsolePanelRef} />
+                <div className="developer-console-controls">
+                    <div className="developer-console-control-items">
+                        {map(buttonKeys, (buttonKey: ButtonActions) => {
+                            const buttonProps = Buttons[buttonKey];
+                            Buttons[buttonKey].ref = createRef<HTMLDivElement>();
+                            return (<ControlButton {...buttonProps} />);
+                        })}
+                    </div>
+                    <div className="developer-console-control-legend">
+                        <div id="item-focus" className="control-item">
+                            <span className="control-item-button">Y</span>
+                            <span className="control-item-action">Focus</span>
+                        </div>
+                        <div id="item-clear" className="control-item">
+                            <span className="control-item-button">R</span>
+                            <span className="control-item-action">Clear</span>
+                        </div>
+                    </div>
+                </div>
+            </div>,
+            this.rootRef,
+        );
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.rootRef}
+                className={`developer-console ${DISPLAY_NONE}`}
+            />
+        );
+    }
+}