Merge remote-tracking branch 'upstream/main'

Author: Sugavanas

package-lock.json

@@ -98,6 +98,7 @@
     "har-validator": "^5.1.3",
     "http-encoding": "^2.0.1",
     "js-beautify": "^1.8.8",
+    "jsonc-parser": "^3.3.1",
     "jsonwebtoken": "^8.4.0",
     "localforage": "^1.7.3",
     "lodash": "^4.17.21",

package.json

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 
-import { TimingEvents } from '../../types';
-import { observableClock } from '../../util/observable';
-
 import { Pill } from './pill';
+
 import { calculateAndFormatDuration, FormattedDurationProps } from "../../util/utils";
 
 type DurationPillProps = { className?: string } & FormattedDurationProps;

src/components/common/duration-pill.tsx

@@ -32,6 +32,7 @@ interface EditablePairsProps<R = PairsArray> {
     keyTitle?: string;
     // Either a pattern string, or a validation function
     keyValidation?: string | ((key: string) => true | string);
+    valueValidation?: string | ((value: string) => true | string);
 
     keyPlaceholder: string;
     valuePlaceholder: string;
@@ -116,23 +117,30 @@ export class EditablePairs<R> extends React.Component<EditablePairsProps<R>> {
         ));
 
         disposeOnUnmount(this, autorun(() => {
-            const { keyValidation } = this.props;
-            if (!_.isFunction(keyValidation)) return;
+            let { keyValidation, valueValidation } = this.props;
+            if (!_.isFunction(keyValidation) && !_.isFunction(valueValidation)) return;
 
             const inputs = this.containerRef?.current?.querySelectorAll('input');
             if (!inputs) return;
 
             this.values.forEach((pair, i) => {
                 const keyInput = inputs?.[i * 2];
-                const validationResult = keyValidation(pair.key);
-
-                if (validationResult === true) {
-                    keyInput.setCustomValidity('');
-                    keyInput.reportValidity();
-                } else {
-                    keyInput.setCustomValidity(validationResult);
-                    keyInput.reportValidity();
-                }
+                const valueInput = inputs?.[i * 2 + 1];
+
+                ([
+                    [ keyInput, pair.key, keyValidation ],
+                    [ valueInput, pair.value, valueValidation ]
+                ] as const).forEach(([input, value, validation]) => {
+                    if (!input || !_.isFunction(validation)) return;
+                    const result = validation(value);
+                    if (result === true) {
+                        input.setCustomValidity('');
+                    } else {
+                        input.setCustomValidity(result);
+                    }
+
+                    input.reportValidity();
+                });
             });
         }));
     }

src/components/common/editable-pairs.tsx

@@ -23,16 +23,32 @@ export const noPropagation = <E extends React.BaseSyntheticEvent>(
     callback(event);
 }
 
+/**
+ * An input validation function combines check logic with an explanatory error
+ * message, and provides a convenient mechanism to check the validity of an
+ * input itself (in which case it sets the input's validity state) or a raw
+ * input value (in which case it just returns the result, with no side effects).
+ */
+export interface InputValidationFunction {
+    (input: HTMLInputElement | string): boolean;
+}
+
 export const inputValidation = (
     checkFn: (input: string) => boolean,
     errorMessage: string
-) => (input: HTMLInputElement) => {
-    const inputValue = input.value;
-    if (!inputValue || checkFn(inputValue)) {
-        input.setCustomValidity('');
+): InputValidationFunction => (input) => {
+    const isInput = typeof input !== 'string';
+    const inputValue = isInput ? input.value : input;
+
+    if (isInput) {
+        if (!inputValue || checkFn(inputValue)) {
+            input.setCustomValidity('');
+        } else {
+            input.setCustomValidity(errorMessage);
+        }
+        input.reportValidity();
+        return input.validity.valid;
     } else {
-        input.setCustomValidity(errorMessage);
+        return checkFn(inputValue);
     }
-    input.reportValidity();
-    return input.validity.valid;
 }

src/components/component-utils.tsx

@@ -260,7 +260,13 @@ class BaseEditor extends React.Component<EditorProps> {
                 new this.monaco.Selection(0, 0, 0, 0)
             );
 
-            this.relayout();
+            if (!this.props.value) {
+                // If we've been cleared, make sure that content update fires before we
+                // attempt to relayout, to ensure we don't bother laying out an empty editor.
+                requestAnimationFrame(() => this.relayout());
+            } else {
+                this.relayout();
+            }
 
             requestAnimationFrame(() => {
                 if (this.editor && this.monaco) {

src/components/editor/base-editor.tsx

@@ -1,12 +1,13 @@
 import type * as MonacoTypes from 'monaco-editor';
 import type { default as _MonacoEditor, MonacoEditorProps } from 'react-monaco-editor';
+import { observable, runInAction } from 'mobx';
 
 import { defineMonacoThemes } from '../../styles';
 
 import { delay } from '../../util/promise';
 import { asError } from '../../util/error';
-import { observable, runInAction } from 'mobx';
-import { setupXMLValidation } from './xml-validation';
+
+import { ContentValidator, validateJsonRecords, validateXml } from '../../model/events/content-validation';
 
 export type {
     MonacoTypes,
@@ -75,7 +76,12 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
             },
         });
 
-        setupXMLValidation(monaco);
+        monaco.languages.register({
+            id: 'json-records'
+        });
+
+        addValidator(monaco, 'xml', validateXml);
+        addValidator(monaco, 'json-records', validateJsonRecords);
 
         MonacoEditor = rmeModule.default;
     } catch (err) {
@@ -89,6 +95,43 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
     }
 }
 
+function addValidator(monaco: typeof MonacoTypes, modeId: string, validator: ContentValidator) {
+    function validate(model: MonacoTypes.editor.ITextModel) {
+        const text = model.getValue();
+        const markers = validator(text, model);
+        monaco.editor.setModelMarkers(model, modeId, markers);
+    }
+
+    const contentChangeListeners = new Map<MonacoTypes.editor.ITextModel, MonacoTypes.IDisposable>();
+
+    function manageContentChangeListener(model: MonacoTypes.editor.ITextModel) {
+        const isActiveMode = model.getModeId() === modeId;
+        const listener = contentChangeListeners.get(model);
+
+        if (isActiveMode && !listener) {
+            contentChangeListeners.set(model, model.onDidChangeContent(() =>
+                validate(model)
+            ));
+            validate(model);
+        } else if (!isActiveMode && listener) {
+            listener.dispose();
+            contentChangeListeners.delete(model);
+            monaco.editor.setModelMarkers(model, modeId, []);
+        }
+    }
+
+    monaco.editor.onWillDisposeModel(model => {
+        contentChangeListeners.delete(model);
+    });
+    monaco.editor.onDidChangeModelLanguage(({ model }) => {
+        manageContentChangeListener(model);
+    });
+    monaco.editor.onDidCreateModel(model => {
+        manageContentChangeListener(model);
+    });
+
+}
+
 export function reloadMonacoEditor() {
     return monacoLoadingPromise = loadMonacoEditor(0);
 }

src/components/editor/monaco.ts

@@ -253,7 +253,7 @@ class FridaConfig extends React.Component<{
         }));
 
         this.updateTargets();
-        const updateInterval = setInterval(this.updateTargets, 2000);
+        const updateInterval = setInterval(this.updateTargets, 4000);
         disposeOnUnmount(this, () => clearInterval(updateInterval));
     }
 
@@ -394,7 +394,8 @@ class FridaConfig extends React.Component<{
         this.props.activateInterceptor({
             action: 'intercept',
             hostId: host.id,
-            targetId
+            targetId,
+            enableSocks: this.props.accountStore!.featureFlags.includes('raw-tunnels')
         })
         .catch((e) => alertActivationError(`intercept ${targetId}`, e))
         .then(() => {