Initial commit: Developer Tools MVP with visual editor

- Complete React app with 7 developer tools
- JSON Tool with visual structured editor
- Serialize Tool with visual structured editor
- URL, Base64, CSV/JSON, Beautifier, Diff tools
- Responsive navigation with dropdown menu
- Dark/light mode toggle
- Mobile-responsive design with sticky header
- All tools working with copy/paste functionality

node_modules/web-vitals/dist/modules/lib/bindReporter.d.ts

@@ -0,0 +1,2 @@
+import { Metric, ReportHandler } from '../types.js';
+export declare const bindReporter: (callback: ReportHandler, metric: Metric, reportAllChanges?: boolean | undefined) => (forceReport?: boolean | undefined) => void;

node_modules/web-vitals/dist/modules/lib/bindReporter.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const bindReporter = (callback, metric, reportAllChanges) => {
+    let prevValue;
+    return (forceReport) => {
+        if (metric.value >= 0) {
+            if (forceReport || reportAllChanges) {
+                metric.delta = metric.value - (prevValue || 0);
+                // Report the metric if there's a non-zero delta or if no previous
+                // value exists (which can happen in the case of the document becoming
+                // hidden when the metric value is 0).
+                // See: https://github.com/GoogleChrome/web-vitals/issues/14
+                if (metric.delta || prevValue === undefined) {
+                    prevValue = metric.value;
+                    callback(metric);
+                }
+            }
+        }
+    };
+};

node_modules/web-vitals/dist/modules/lib/generateUniqueID.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Performantly generate a unique, 30-char string by combining a version
+ * number, the current timestamp with a 13-digit number integer.
+ * @return {string}
+ */
+export declare const generateUniqueID: () => string;

node_modules/web-vitals/dist/modules/lib/generateUniqueID.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Performantly generate a unique, 30-char string by combining a version
+ * number, the current timestamp with a 13-digit number integer.
+ * @return {string}
+ */
+export const generateUniqueID = () => {
+    return `v2-${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) + 1e12}`;
+};

node_modules/web-vitals/dist/modules/lib/getVisibilityWatcher.d.ts

@@ -0,0 +1,3 @@
+export declare const getVisibilityWatcher: () => {
+    readonly firstHiddenTime: number;
+};

node_modules/web-vitals/dist/modules/lib/getVisibilityWatcher.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { onBFCacheRestore } from './onBFCacheRestore.js';
+import { onHidden } from './onHidden.js';
+let firstHiddenTime = -1;
+const initHiddenTime = () => {
+    return document.visibilityState === 'hidden' ? 0 : Infinity;
+};
+const trackChanges = () => {
+    // Update the time if/when the document becomes hidden.
+    onHidden(({ timeStamp }) => {
+        firstHiddenTime = timeStamp;
+    }, true);
+};
+export const getVisibilityWatcher = () => {
+    if (firstHiddenTime < 0) {
+        // If the document is hidden when this code runs, assume it was hidden
+        // since navigation start. This isn't a perfect heuristic, but it's the
+        // best we can do until an API is available to support querying past
+        // visibilityState.
+        if (window.__WEB_VITALS_POLYFILL__) {
+            firstHiddenTime = window.webVitals.firstHiddenTime;
+            if (firstHiddenTime === Infinity) {
+                trackChanges();
+            }
+        }
+        else {
+            firstHiddenTime = initHiddenTime();
+            trackChanges();
+        }
+        // Reset the time on bfcache restores.
+        onBFCacheRestore(() => {
+            // Schedule a task in order to track the `visibilityState` once it's
+            // had an opportunity to change to visible in all browsers.
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1133363
+            setTimeout(() => {
+                firstHiddenTime = initHiddenTime();
+                trackChanges();
+            }, 0);
+        });
+    }
+    return {
+        get firstHiddenTime() {
+            return firstHiddenTime;
+        }
+    };
+};

node_modules/web-vitals/dist/modules/lib/initMetric.d.ts

@@ -0,0 +1,2 @@
+import { Metric } from '../types.js';
+export declare const initMetric: (name: Metric['name'], value?: number | undefined) => Metric;

node_modules/web-vitals/dist/modules/lib/initMetric.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { generateUniqueID } from './generateUniqueID.js';
+export const initMetric = (name, value) => {
+    return {
+        name,
+        value: typeof value === 'undefined' ? -1 : value,
+        delta: 0,
+        entries: [],
+        id: generateUniqueID()
+    };
+};

node_modules/web-vitals/dist/modules/lib/observe.d.ts

@@ -0,0 +1,12 @@
+export interface PerformanceEntryHandler {
+    (entry: PerformanceEntry): void;
+}
+/**
+ * Takes a performance entry type and a callback function, and creates a
+ * `PerformanceObserver` instance that will observe the specified entry type
+ * with buffering enabled and call the callback _for each entry_.
+ *
+ * This function also feature-detects entry support and wraps the logic in a
+ * try/catch to avoid errors in unsupporting browsers.
+ */
+export declare const observe: (type: string, callback: PerformanceEntryHandler) => PerformanceObserver | undefined;

node_modules/web-vitals/dist/modules/lib/observe.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Takes a performance entry type and a callback function, and creates a
+ * `PerformanceObserver` instance that will observe the specified entry type
+ * with buffering enabled and call the callback _for each entry_.
+ *
+ * This function also feature-detects entry support and wraps the logic in a
+ * try/catch to avoid errors in unsupporting browsers.
+ */
+export const observe = (type, callback) => {
+    try {
+        if (PerformanceObserver.supportedEntryTypes.includes(type)) {
+            // More extensive feature detect needed for Firefox due to:
+            // https://github.com/GoogleChrome/web-vitals/issues/142
+            if (type === 'first-input' && !('PerformanceEventTiming' in self)) {
+                return;
+            }
+            const po = new PerformanceObserver((l) => l.getEntries().map(callback));
+            po.observe({ type, buffered: true });
+            return po;
+        }
+    }
+    catch (e) {
+        // Do nothing.
+    }
+    return;
+};

node_modules/web-vitals/dist/modules/lib/onBFCacheRestore.d.ts

@@ -0,0 +1,5 @@
+interface onBFCacheRestoreCallback {
+    (event: PageTransitionEvent): void;
+}
+export declare const onBFCacheRestore: (cb: onBFCacheRestoreCallback) => void;
+export {};

node_modules/web-vitals/dist/modules/lib/onBFCacheRestore.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const onBFCacheRestore = (cb) => {
+    addEventListener('pageshow', (event) => {
+        if (event.persisted) {
+            cb(event);
+        }
+    }, true);
+};

node_modules/web-vitals/dist/modules/lib/onHidden.d.ts

@@ -0,0 +1,4 @@
+export interface OnHiddenCallback {
+    (event: Event): void;
+}
+export declare const onHidden: (cb: OnHiddenCallback, once?: boolean | undefined) => void;

node_modules/web-vitals/dist/modules/lib/onHidden.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const onHidden = (cb, once) => {
+    const onHiddenOrPageHide = (event) => {
+        if (event.type === 'pagehide' || document.visibilityState === 'hidden') {
+            cb(event);
+            if (once) {
+                removeEventListener('visibilitychange', onHiddenOrPageHide, true);
+                removeEventListener('pagehide', onHiddenOrPageHide, true);
+            }
+        }
+    };
+    addEventListener('visibilitychange', onHiddenOrPageHide, true);
+    // Some browsers have buggy implementations of visibilitychange,
+    // so we use pagehide in addition, just to be safe.
+    addEventListener('pagehide', onHiddenOrPageHide, true);
+};

node_modules/web-vitals/dist/modules/lib/polyfills/firstInputPolyfill.d.ts

@@ -0,0 +1,7 @@
+import { FirstInputPolyfillCallback } from '../../types.js';
+/**
+ * Accepts a callback to be invoked once the first input delay and event
+ * are known.
+ */
+export declare const firstInputPolyfill: (onFirstInput: FirstInputPolyfillCallback) => void;
+export declare const resetFirstInputPolyfill: () => void;

node_modules/web-vitals/dist/modules/lib/polyfills/firstInputPolyfill.js

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+let firstInputEvent;
+let firstInputDelay;
+let firstInputTimeStamp;
+let callbacks;
+const listenerOpts = { passive: true, capture: true };
+const startTimeStamp = new Date();
+/**
+ * Accepts a callback to be invoked once the first input delay and event
+ * are known.
+ */
+export const firstInputPolyfill = (onFirstInput) => {
+    callbacks.push(onFirstInput);
+    reportFirstInputDelayIfRecordedAndValid();
+};
+export const resetFirstInputPolyfill = () => {
+    callbacks = [];
+    firstInputDelay = -1;
+    firstInputEvent = null;
+    eachEventType(addEventListener);
+};
+/**
+ * Records the first input delay and event, so subsequent events can be
+ * ignored. All added event listeners are then removed.
+ */
+const recordFirstInputDelay = (delay, event) => {
+    if (!firstInputEvent) {
+        firstInputEvent = event;
+        firstInputDelay = delay;
+        firstInputTimeStamp = new Date;
+        eachEventType(removeEventListener);
+        reportFirstInputDelayIfRecordedAndValid();
+    }
+};
+/**
+ * Reports the first input delay and event (if they're recorded and valid)
+ * by running the array of callback functions.
+ */
+const reportFirstInputDelayIfRecordedAndValid = () => {
+    // In some cases the recorded delay is clearly wrong, e.g. it's negative
+    // or it's larger than the delta between now and initialization.
+    // - https://github.com/GoogleChromeLabs/first-input-delay/issues/4
+    // - https://github.com/GoogleChromeLabs/first-input-delay/issues/6
+    // - https://github.com/GoogleChromeLabs/first-input-delay/issues/7
+    if (firstInputDelay >= 0 &&
+        // @ts-ignore (subtracting two dates always returns a number)
+        firstInputDelay < firstInputTimeStamp - startTimeStamp) {
+        const entry = {
+            entryType: 'first-input',
+            name: firstInputEvent.type,
+            target: firstInputEvent.target,
+            cancelable: firstInputEvent.cancelable,
+            startTime: firstInputEvent.timeStamp,
+            processingStart: firstInputEvent.timeStamp + firstInputDelay,
+        };
+        callbacks.forEach(function (callback) {
+            callback(entry);
+        });
+        callbacks = [];
+    }
+};
+/**
+ * Handles pointer down events, which are a special case.
+ * Pointer events can trigger main or compositor thread behavior.
+ * We differentiate these cases based on whether or not we see a
+ * 'pointercancel' event, which are fired when we scroll. If we're scrolling
+ * we don't need to report input delay since FID excludes scrolling and
+ * pinch/zooming.
+ */
+const onPointerDown = (delay, event) => {
+    /**
+     * Responds to 'pointerup' events and records a delay. If a pointer up event
+     * is the next event after a pointerdown event, then it's not a scroll or
+     * a pinch/zoom.
+     */
+    const onPointerUp = () => {
+        recordFirstInputDelay(delay, event);
+        removePointerEventListeners();
+    };
+    /**
+     * Responds to 'pointercancel' events and removes pointer listeners.
+     * If a 'pointercancel' is the next event to fire after a pointerdown event,
+     * it means this is a scroll or pinch/zoom interaction.
+     */
+    const onPointerCancel = () => {
+        removePointerEventListeners();
+    };
+    /**
+     * Removes added pointer event listeners.
+     */
+    const removePointerEventListeners = () => {
+        removeEventListener('pointerup', onPointerUp, listenerOpts);
+        removeEventListener('pointercancel', onPointerCancel, listenerOpts);
+    };
+    addEventListener('pointerup', onPointerUp, listenerOpts);
+    addEventListener('pointercancel', onPointerCancel, listenerOpts);
+};
+/**
+ * Handles all input events and records the time between when the event
+ * was received by the operating system and when it's JavaScript listeners
+ * were able to run.
+ */
+const onInput = (event) => {
+    // Only count cancelable events, which should trigger behavior
+    // important to the user.
+    if (event.cancelable) {
+        // In some browsers `event.timeStamp` returns a `DOMTimeStamp` value
+        // (epoch time) instead of the newer `DOMHighResTimeStamp`
+        // (document-origin time). To check for that we assume any timestamp
+        // greater than 1 trillion is a `DOMTimeStamp`, and compare it using
+        // the `Date` object rather than `performance.now()`.
+        // - https://github.com/GoogleChromeLabs/first-input-delay/issues/4
+        const isEpochTime = event.timeStamp > 1e12;
+        const now = isEpochTime ? new Date : performance.now();
+        // Input delay is the delta between when the system received the event
+        // (e.g. event.timeStamp) and when it could run the callback (e.g. `now`).
+        const delay = now - event.timeStamp;
+        if (event.type == 'pointerdown') {
+            onPointerDown(delay, event);
+        }
+        else {
+            recordFirstInputDelay(delay, event);
+        }
+    }
+};
+/**
+ * Invokes the passed callback const for =  each event type with t =>he
+ * `onInput` const and =  `listenerOpts =>`.
+ */
+const eachEventType = (callback) => {
+    const eventTypes = [
+        'mousedown',
+        'keydown',
+        'touchstart',
+        'pointerdown',
+    ];
+    eventTypes.forEach((type) => callback(type, onInput, listenerOpts));
+};

node_modules/web-vitals/dist/modules/lib/polyfills/getFirstHiddenTimePolyfill.d.ts

@@ -0,0 +1 @@
+export declare const getFirstHiddenTime: () => number;

node_modules/web-vitals/dist/modules/lib/polyfills/getFirstHiddenTimePolyfill.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
+const onVisibilityChange = (event) => {
+    if (document.visibilityState === 'hidden') {
+        firstHiddenTime = event.timeStamp;
+        removeEventListener('visibilitychange', onVisibilityChange, true);
+    }
+};
+// Note: do not add event listeners unconditionally (outside of polyfills).
+addEventListener('visibilitychange', onVisibilityChange, true);
+export const getFirstHiddenTime = () => firstHiddenTime;