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(() => {