@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/developer-tools/src/DeveloperConsole/helpers/instrumentHandler.ts

@@ -0,0 +1,165 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    InstrumentHandler,
+    InstrumentHandlerCallback,
+} from '../types';
+
+const windowObject = window;
+
+const override = (
+    source: Record<string, any>,
+    methodName: string,
+    overrideFunction: (...args: any[]) => any,
+) => {
+    if (!(methodName in source)) {
+        return;
+    }
+    const original = source[methodName];
+    const overriddenFunction = overrideFunction(original);
+
+    source[methodName] = overriddenFunction;
+};
+
+const triggerHandlerCallback = (handlerCallback: InstrumentHandlerCallback, data: any) => {
+    try {
+        handlerCallback(data);
+    } catch (e) {}
+};
+
+const instrumentError = (instrumentHandlerCallback: InstrumentHandlerCallback) => {
+    override(windowObject, 'onerror', (
+        originalOnerror: OnErrorEventHandler,
+    ) => (...args: Parameters<OnBeforeUnloadEventHandlerNonNull>) => {
+        triggerHandlerCallback(instrumentHandlerCallback, { args });
+
+        if (typeof originalOnerror === 'function') {
+            originalOnerror.apply(windowObject.onerror, args);
+        }
+    });
+};
+
+const instrumentConsole = (instrumentHandlerCallback: InstrumentHandlerCallback) => {
+    if (!('console' in windowObject)) {
+        return;
+    }
+
+    const logLevels = ['assert', 'debug', 'error', 'info', 'log', 'warn'] as const;
+    forEach(logLevels as unknown as string[], (level: string) => {
+        override(
+            windowObject.console,
+            level,
+            <T extends typeof logLevels[number]>(
+                originalConsoleLevel: typeof windowObject.console[T],
+            ) => (
+                ...args: [value: any, message?: string | undefined, ...optionalParams: any[]]
+            ) => {
+                triggerHandlerCallback(instrumentHandlerCallback, { level, args });
+
+                if (typeof originalConsoleLevel === 'function') {
+                    originalConsoleLevel.apply(windowObject.console, args);
+                }
+            },
+        );
+    });
+};
+
+const instrumentFetch = (instrumentHandlerCallback: InstrumentHandlerCallback) => {
+    if (!('fetch' in windowObject)) {
+        return;
+    }
+
+    const fetchData: Partial<{ method: string, url: string, statusCode: number }> = {};
+
+    override(windowObject, 'fetch', (
+        originalFetch: typeof fetch,
+    ) => (...args: Parameters<typeof fetch>) => {
+        const [url, requestInfo] = args;
+        fetchData.url = String(url);
+        fetchData.method = requestInfo?.method;
+
+        return originalFetch.apply(windowObject, args).then(
+            (response: Response) => {
+                fetchData.statusCode = response.status;
+                triggerHandlerCallback(instrumentHandlerCallback, fetchData);
+                return response;
+            },
+            (error: Error) => {
+                fetchData.statusCode = 0;
+                triggerHandlerCallback(instrumentHandlerCallback, fetchData);
+                return error;
+            },
+        );
+    });
+};
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+const instrumentXhr = (instrumentHandlerCallback: InstrumentHandlerCallback) => {
+    if (!('XMLHttpRequest' in windowObject)) {
+        return;
+    }
+
+    const xhrPrototype = XMLHttpRequest.prototype;
+    const xhrData: Partial<{ method: string, url: string, statusCode: number }> = {};
+
+    override(
+        xhrPrototype,
+        'open',
+        (
+            originalOpen: typeof xhrPrototype.open,
+        ) => function (this: XMLHttpRequest, ...args: Parameters<typeof xhrPrototype.open>) {
+            const xhr = this;
+            const [method, url] = args;
+            xhrData.method = method;
+            xhrData.url = url as string;
+
+            const onReadyStateChangeHandler = () => {
+                // eslint-disable-next-line no-magic-numbers
+                if (xhr.readyState === 4) { // readyState 4 = DONE
+                    xhrData.statusCode = xhr.status || 0;
+                    triggerHandlerCallback(instrumentHandlerCallback, xhrData);
+                }
+            };
+
+            if ('onreadystatechange' in xhr && typeof xhr.onreadystatechange === 'function') {
+                override(
+                    xhr,
+                    'onreadystatechange',
+                    (
+                        originalOnReadyStateChange: typeof xhr.onreadystatechange,
+                    ) => (...onStateChangeArgs: Parameters<
+                    NonNullable<typeof xhr.onreadystatechange>
+                    >) => {
+                        onReadyStateChangeHandler();
+                        if (typeof originalOnReadyStateChange === 'function') {
+                            originalOnReadyStateChange.apply(xhr, onStateChangeArgs);
+                        }
+                    },
+                );
+            } else {
+                xhr.addEventListener('readystatechange', onReadyStateChangeHandler);
+            }
+            originalOpen.apply(xhr, args);
+        },
+    );
+};
+
+export const addInstrument = (instrumentalHandler: InstrumentHandler) => {
+    const { type, callback } = instrumentalHandler;
+
+    switch (type) {
+        case 'error':
+            instrumentError(callback);
+            break;
+        case 'console':
+            instrumentConsole(callback);
+            break;
+        case 'fetch':
+            instrumentFetch(callback);
+            break;
+        case 'xhr':
+            instrumentXhr(callback);
+            break;
+        default:
+            console.error('Unknown instrumentation handler type: ', type);
+    }
+};

package/packages/developer-tools/src/DeveloperConsole/index.ts

@@ -0,0 +1,2 @@
+export { initDeveloperConsole } from './initDeveloperConsole';
+export { DeveloperConsole } from './DeveloperConsole';

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

@@ -0,0 +1,8 @@
+import { mount } from '@24i/bigscreen-sdk/jsx';
+import { Props as DeveloperConsoleProps, DeveloperConsole } from './DeveloperConsole';
+
+export const initDeveloperConsole = (
+    rootElement: HTMLDivElement, props: DeveloperConsoleProps = {},
+) => {
+    mount(<DeveloperConsole {...props} />, rootElement);
+};

package/packages/developer-tools/src/DeveloperConsole/styles/DeveloperConsole/DeveloperConsole.scss

@@ -0,0 +1,91 @@
+.developer-console {
+    background-color: #000;
+    opacity: 0.5;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    overflow: hidden;
+    font-family: sans-serif;
+    width: $developer-console-width;
+    z-index: 9000;
+
+    &.focus {
+        opacity: 0.9;
+    }
+
+    .developer-console-container {
+        outline: none;
+    }
+
+    .developer-console-controls {
+        height: $developer-console-controls-height;
+    
+        .developer-console-control-items {
+            position: relative;
+            float: left;
+            top: $developer-console-control-items-position-top;
+            left: $developer-console-control-items-position-left;
+        }
+    
+        .developer-console-control-legend {
+            position: relative;
+            float: right;
+            top: $developer-console-control-legend-position-top;
+            right: $developer-console-control-legend-position-right;
+        }
+    
+        .control-item {
+            display: inline-block;
+            font-size: $control-item-font-size;
+            font-weight: 400;
+            margin-right: $control-item-margin-right;
+    
+            &.selected {
+                .control-item-button {
+                    border-color: #fff;
+                }
+            }
+        
+            .control-item-button {
+                display: inline-block;
+                background-clip: padding-box;
+                background-color: #616264;
+                border-color: transparent;
+                border-style: solid;
+                border-radius: $control-item-button-border-radius;
+                border-width: $control-item-button-border-width;
+                text-align: center;
+                vertical-align: top;
+                line-height: $control-item-button-height;
+                height: $control-item-button-height;
+                width: $control-item-button-width;
+            }
+    
+            .control-item-action {
+                vertical-align: top;
+                line-height: $control-item-button-height + (2 * $control-item-button-border-width);
+                margin-left: $control-item-action-margin-left;
+            }
+    
+            &#item-hide {
+                color: #616264;
+    
+                &.enabled {
+                    color: #fff;
+                }
+            }
+    
+            &#item-focus {
+                .control-item-button {
+                    background-color: #ffa500;
+                }
+            }
+    
+            &#item-clear {
+                .control-item-button {
+                    background-color: #f00;
+                } 
+            }
+        }
+    }    
+}

package/packages/developer-tools/src/DeveloperConsole/styles/DeveloperConsole/DeveloperConsole.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './DeveloperConsole';

package/packages/developer-tools/src/DeveloperConsole/styles/DeveloperConsole/DeveloperConsole.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './DeveloperConsole';

package/packages/developer-tools/src/DeveloperConsole/styles/DeveloperConsole/_sizes.1080.scss

@@ -0,0 +1,16 @@
+$developer-console-width: 1920px;
+$developer-console-controls-height: 72px;
+
+$developer-console-control-items-position-top: 16px;
+$developer-console-control-items-position-left: 46px;
+
+$developer-console-control-legend-position-top: 16px;
+$developer-console-control-legend-position-right: 10px;
+
+$control-item-margin-right: 40px;
+$control-item-font-size: 24px;
+$control-item-button-border-radius: 11px;
+$control-item-button-border-width: 2px;
+$control-item-button-height: 36px;
+$control-item-button-width: 36px;
+$control-item-action-margin-left: 13px;

package/packages/developer-tools/src/DeveloperConsole/styles/DeveloperConsole/_sizes.scss

@@ -0,0 +1,16 @@
+$developer-console-width: 1280px;
+$developer-console-controls-height: 48px;
+
+$developer-console-control-items-position-top: 11px;
+$developer-console-control-items-position-left: 31px;
+
+$developer-console-control-legend-position-top: 11px;
+$developer-console-control-legend-position-right: 7px;
+
+$control-item-margin-right: 27px;
+$control-item-font-size: 16px;
+$control-item-button-border-radius: 7px;
+$control-item-button-border-width: 1px;
+$control-item-button-height: 24px;
+$control-item-button-width: 24px;
+$control-item-action-margin-left: 9px;

package/packages/developer-tools/src/DeveloperConsole/styles/Panel/Panel.scss

@@ -0,0 +1,87 @@
+.developer-console-panel {
+    .panel {
+        margin: $content-margin-top $content-margin-left-right 0;
+        height: $panel-height;
+        overflow: hidden;
+    
+        > .scroller {
+            outline: none;
+            height: 100%;
+    
+            > .scroll-wrap {
+                height: 100%;
+                overflow: hidden;
+                position: relative;
+
+                .scroll-content {
+                    position: relative;
+                }
+            }
+
+            > .arrow-navigation {
+                display: none;
+            }
+        }
+    }
+
+    .content {
+        .log-message {
+            padding: $log-message-padding-top-bottom 0;
+            font-size: $log-message-font-size;
+            font-weight: 400;
+            color: #fff;
+            white-space: pre-wrap;
+        }
+
+        .console-message {
+            &.assert,
+            &.debug,
+            &.log {
+                color: #fff;
+            }
+    
+            &.info {
+                color: #fdfd66;
+            }
+    
+            &.warn {
+                color: #facf53;
+            }
+    
+            &.error {
+                color: #f95053;
+            }
+        }
+
+        .network-message {
+            .method {
+                font-weight: 600;
+            }
+
+            .url {
+                padding: 0 $network-message-url-padding-left-right;
+                color: #3b6ecc;
+            }
+
+            .status-code {
+                color: #c4c4c4;
+
+                &.status-ok {
+                    color: #b0dc64;
+                }
+
+                &.status-redirect {
+                    color: #7267b8;
+                }
+
+                &.status-client-error {
+                    color: #f95053;
+                }
+
+                &.status-server-error {
+                    color: #facf53;
+                }
+            }
+        }
+    }
+}

package/packages/developer-tools/src/DeveloperConsole/styles/Panel/Panel.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Panel';

package/packages/developer-tools/src/DeveloperConsole/styles/Panel/Panel.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Panel';

package/packages/developer-tools/src/DeveloperConsole/styles/Panel/_sizes.1080.scss

@@ -0,0 +1,9 @@
+$panel-height: 363px;
+
+$content-margin-top: 16px;
+$content-margin-left-right: 48px;
+
+$log-message-padding-top-bottom: 3px;
+$log-message-font-size: 20px;
+
+$network-message-url-padding-left-right: 12px;

package/packages/developer-tools/src/DeveloperConsole/styles/Panel/_sizes.scss

@@ -0,0 +1,9 @@
+$panel-height: 240px;
+
+$content-margin-top: 11px;
+$content-margin-left-right: 32px;
+
+$log-message-padding-top-bottom: 2px;
+$log-message-font-size: 13px;
+
+$network-message-url-padding-left-right: 8px;

package/packages/developer-tools/src/DeveloperConsole/styles.ts

@@ -0,0 +1,2 @@
+import './styles/DeveloperConsole/DeveloperConsole.styles';
+import './styles/Panel/Panel.styles';

package/packages/developer-tools/src/DeveloperConsole/types.ts

@@ -0,0 +1,49 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export type ButtonActions = 'hide' | 'console' | 'network' | 'reload-app' | 'clear-storage';
+
+export interface ButtonProps {
+    key: number;
+    id: string;
+    text: string;
+    ref?: Reference<HTMLDivElement>;
+}
+
+export type DeveloperConsoleButtons = Record<ButtonActions, ButtonProps>;
+
+export type PanelType = 'console' | 'network';
+
+export interface ConsoleData {
+    timestamp: number;
+    level: LogLevel;
+    args: any[];
+}
+
+export interface NetworkData {
+    timestamp: number;
+    method: string;
+    url: string;
+    statusCode: number;
+}
+
+export type PanelData = ConsoleData | NetworkData;
+
+export interface InstrumentOptions {
+    onerror: boolean;
+    console: boolean;
+    fetch: boolean;
+    xhr: boolean;
+}
+
+export interface InstrumentHandler {
+    type: InstrumentHandlerType;
+    callback: InstrumentHandlerCallback;
+}
+
+export type InstrumentHandlerType = 'console' | 'error' | 'fetch' | 'xhr';
+
+export type InstrumentHandlerCallback = (data: any) => void;
+
+export type HandlerData = Record<string, any>;

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolItem.tsx

@@ -0,0 +1,21 @@
+import { Reference, forwardRef } from '@24i/bigscreen-sdk/jsx';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+
+type Props = {
+    label: string;
+    onPress: () => void;
+};
+
+export const DeveloperToolItem = forwardRef(({
+    label,
+    onPress,
+}: Props, ref: Reference<HTMLDivElement>) => (
+    <Interactable
+        ref={ref}
+        className="tool-item"
+        onPress={onPress}
+    >
+        <div className="tool-item-background" />
+        <div className="tool-item-label">{ label }</div>
+    </Interactable>
+));

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolsList.tsx

@@ -0,0 +1,114 @@
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import {
+    Vertical,
+    focusCandidate,
+    setActiveElementAsFocusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
+import { DeveloperToolItem } from './DeveloperToolItem';
+import { reloadApp } from '../utils/reload';
+
+type Props = {
+    setActiveDeveloperToolRef: (ref: Reference<IDeveloperTool<DeveloperToolProps>>) => void;
+    onBack: () => void,
+};
+
+export class DeveloperToolsList extends Component<Props> {
+    rootRef = createRef<HTMLDivElement>();
+
+    verticalNavigation = createRef<InstanceType<typeof Vertical>>();
+
+    navigationChildren: Reference<HTMLDivElement>[] = [];
+
+    developerToolsRefs: Reference<IDeveloperTool<DeveloperToolProps>>[] = [];
+
+    displayToggler = getDisplayToggler(this.rootRef, true);
+
+    onToolPress = (index: number) => {
+        const { setActiveDeveloperToolRef } = this.props;
+        const activeDeveloperToolRef = this.developerToolsRefs[index];
+        this.closeDeveloperToolsList();
+        activeDeveloperToolRef.current!.show();
+        setActiveDeveloperToolRef(activeDeveloperToolRef);
+    };
+
+    onReloadToolPress = () => {
+        reloadApp();
+    };
+
+    onKeyDown = (event: KeyboardEvent) => {
+        if (BACK.is(event)) {
+            const { onBack } = this.props;
+            this.closeDeveloperToolsList();
+            onBack();
+            stopEvent(event);
+        }
+    };
+
+    getNavigationRef() {
+        const ref = createRef<HTMLDivElement>();
+        this.navigationChildren.push(ref);
+        return ref;
+    }
+
+    focus() {
+        setActiveElementAsFocusCandidate();
+        this.verticalNavigation.current!.focus();
+    }
+
+    isDeveloperToolsListVisible() {
+        return this.displayToggler.isVisible();
+    }
+
+    closeDeveloperToolsList() {
+        this.clearMount('', this.rootRef);
+        this.displayToggler.hide();
+        this.navigationChildren = [];
+        focusCandidate();
+    }
+
+    renderDeveloperToolsList() {
+        this.clearMount(
+            <>
+                <div className="title">Developer tools</div>
+                <Vertical
+                    ref={this.verticalNavigation}
+                    domRef={this.rootRef}
+                    focusableChildren={this.navigationChildren}
+                >
+                    <div className="tools-list">
+                        {map(this.developerToolsRefs, (developerTool, index) => {
+                            const { name } = developerTool.current!;
+                            return (
+                                <DeveloperToolItem
+                                    ref={this.getNavigationRef()}
+                                    label={name}
+                                    onPress={() => this.onToolPress(index)}
+                                />
+                            );
+                        })}
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Restart app"
+                            onPress={this.onReloadToolPress}
+                        />
+                    </div>
+                </Vertical>
+            </>, this.rootRef,
+        );
+        this.displayToggler.show();
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.rootRef}
+                className={`developer-tools-list ${DISPLAY_NONE}`}
+                onKeyDown={this.onKeyDown}
+            />
+        );
+    }
+}