Stumbled upon Inferno error

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ApplyMods.js

@@ -26,7 +26,7 @@ export default function getApplyMods(theState) {
 
     return (
       <section class="controlRow horFlex" style="margin-top: 1em">
-        <input type="button" value="Применить" disabled={props.disabled} onClick={props.onClick}/>
+        <input type="button" value="Применить" disabled={props.ifInputsDisabled} onClick={props.onClick}/>
         <a href="" onClick={linkEvent(props, resetMods)}>К изначальным!</a>
       </section>
     );

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js

@@ -122,6 +122,7 @@ export default function getInfoLi() {
           checked={props.checked}
           id={iddy}
           onClick={props.onClick}
+          onChange={props.onChange}
           disabled={props.disabled}
         />
         <div class={scopedCss.labelContainer}>

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js

@@ -21,6 +21,8 @@ export default function getMain(theState) {
   const ApplyMods = getApplyMods(theState);
   const Notifications = getNotifications(theState);
 
+  //const addChecks = (arr) => arr.map( (conf) => Object.assign(conf, {ifChecked: Boolean(conf.value)}) );
+
   const checksName = 'pacMods';
 
   return class Main extends Component {
@@ -35,6 +37,7 @@ export default function getMain(theState) {
           'ownProxies': props.apis.pacKitchen.getOrderedConfigs('ownProxies'),
         },
       };
+      this.handleModChange = this.handleModChange.bind(this);
 
     }
 
@@ -64,33 +67,34 @@ export default function getMain(theState) {
 
     }
 
-    handleModCheck(that, {targetConf, targetIndex, targetChildren}) {
+    handleModChange({targetConf, targetIndex, newValue}) {
 
-      const oldCats = that.state.catToOrderedMods;
+      const oldCats = this.state.catToOrderedMods;
-      const newCats = Object.keys(that.state.catToOrderedMods).reduce((acc, cat) => {
+      const newCats = Object.keys(this.state.catToOrderedMods).reduce((acc, cat) => {
 
         if (cat !== targetConf.category) {
           acc[cat] = oldCats[cat];
         } else {
-          acc[cat] = oldCats[cat].map(
+          acc[cat] = oldCats[cat].map((conf, index) => {
-            (conf, index) => targetIndex === index
+
-              ? Object.assign({}, conf, {value: !targetConf.value})
+            if (targetIndex !== index) {
-              : conf
+              return conf;
-          );
+            }
+            console.log(`${conf.key} := ${newValue}`);
+            return Object.assign({}, conf, {
+              value: newValue
+            });
+
+          });
         }
         return acc;
 
       }, {});
       
-      that.setState({ catToOrderedMods: newCats });
+      this.setState({
-
+        catToOrderedMods: newCats,
-    }
+        ifModsChangesStashed: true,
-
+      });
-    handleModChange(that, event) {
-
-      if (event.target.name === checksName) {
-        that.setState({ifModsChangesStashed: true});
-      }
 
     }
 
@@ -98,14 +102,13 @@ export default function getMain(theState) {
 
       const applyModsEl = createElement(ApplyMods, Object.assign({}, props,
         {
-          disabled: !this.state.ifModsChangesStashed || props.ifInputsDisabled,
+          ifInputsDisabled: !this.state.ifModsChangesStashed || props.ifInputsDisabled,
           onClick: linkEvent(this, this.handleModApply),
         }
       ));
 
       const modsHandlers = {
-        onChange: linkEvent(this, this.handleModChange),
+        onConfChanged: this.handleModChange,
-        onClick: (...args) => this.handleModCheck(this, ...args),
       };
 
       return createElement(TabPanel, {
@@ -127,7 +130,7 @@ export default function getMain(theState) {
               Object.assign({}, props, {
                 orderedConfigs: this.state.catToOrderedMods['ownProxies'],
                 childrenOfMod: {
-                  customProxyStringRaw: createElement(ProxyEditor, props),
+                  customProxyStringRaw: ProxyEditor,
                 },
                 name: checksName,
               }, modsHandlers)

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js

@@ -1,31 +1,86 @@
-import Inferno from 'inferno';
+import Inferno, {linkEvent} from 'inferno';
+import Component from 'inferno-component';
+import createElement from 'inferno-create-element';
 import getInfoLi from './InfoLi';
 
 export default function getModList(theState) {
 
   const InfoLi = getInfoLi(theState);
 
-  return function ModList(props) {
+  return class ModList extends Component { 
 
-    return (
+    constructor(props) {
-      <ol onChange={props.onChange}>
+
-      {
+      super(props);
-        props.orderedConfigs.map((conf, index) => (
+      this.state= {
-          (<InfoLi
+        checks: props.orderedConfigs.map((mod) => Boolean(mod.value)),
-            conf={conf}
+      };
-            type='checkbox'
+
-            name={props.name}
+    }
-            checked={conf.value}
+
-            key={index}
+    handleCheck(confMeta, ifChecked) {
-            onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})}
+
-          >
+      console.log('handle CHECK:', ifChecked);
-            {Boolean(conf.value) && props.childrenOfMod && props.childrenOfMod[conf.key]}
+      this.state.checks[confMeta.index] = ifChecked;
-          </InfoLi>)
+      if (ifChecked === false || !confMeta.ifChild) {
-        ))
+        console.log('NO CHILD OR FALSE', confMeta);
+        this.handleNewValue(confMeta, ifChecked);
+      } else {
+        this.setState({
+          checks: this.state.checks.map(
+            (ch, i) => i === confMeta.index ? ifChecked : ch
+          )
+        });
       }
-      </ol>
-    );
 
-  };
+    }
+
+    handleNewValue({ conf, index }, newValue) {
+
+      console.log('handle NEW VALUE', conf.key, newValue);
+      this.props.onConfChanged({
+        targetConf: conf,
+        targetIndex: index,
+        newValue: newValue,
+      });
+
+    }
+
+    render(props) {
+
+      return (
+        <ol>
+        {
+          props.orderedConfigs.map((conf, index) => {
+
+            const ifMayHaveChild = props.childrenOfMod && props.childrenOfMod[conf.key];
+            const confMeta = { conf, index, ifChild: ifMayHaveChild };
+
+            const child = ifMayHaveChild && this.state.checks[index]
+              && createElement(
+                props.childrenOfMod[conf.key],
+                Object.assign({}, props, {conf, onNewValue: (newValue) => this.handleNewValue(confMeta, newValue)})
+              );
+
+            console.log('CHIIIIILD', child);
+            return (<InfoLi
+              conf={conf}
+              type='checkbox'
+              name={props.name}
+              checked={conf.value}
+              key={index}
+              onChange={(event) => this.handleCheck(confMeta, event.target.checked)}
+            >
+              {child}
+            </InfoLi>);
+
+          })
+        }
+        </ol>
+      );
+
+    }
+
+  }
 
 };

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js

@@ -134,7 +134,7 @@ export default function getProxyEditor(theState) {
   const SwitchButton = (props) =>
     (
       <button
-        type="button"
+        type="button" disabled={props.ifInputsDisabled}
         class={'emoji' + ' ' + scopedCss.export + ' ' + scopedCss.only}
         title={props.title}
         onClick={props.onClick}
@@ -255,7 +255,7 @@ export default function getProxyEditor(theState) {
                 </td>
                 <td>
                   {/* LAST-2: HOSTNAME */}
-                  <input required
+                  <input required disabled={props.ifInputsDisabled}
                     class={scopedCss.noPad}
                     placeholder="89.140.125.17"
                     name="hostname"
@@ -265,7 +265,7 @@ export default function getProxyEditor(theState) {
                 </td>
                 <td>
                   {/* LAST-1: PORT */}
-                  <input required type="number"
+                  <input required type="number" disabled={props.ifInputsDisabled}
                     class={scopedCss.noPad + ' ' + scopedCss.padLeft} style="min-width: 4em"
                     placeholder="9150"
                     min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}"
@@ -277,8 +277,8 @@ export default function getProxyEditor(theState) {
                 </td>
                 <td>
                   {/* LAST: ADD BUTTON */}
-                  <input
+                  <input type="submit" disabled={props.ifInputsDisabled}
-                    type="submit" class={scopedCss.add + ' ' + scopedCss.only}
+                    class={scopedCss.add + ' ' + scopedCss.only}
                     title="Добавить прокси" value="+"
                   />
                 </td>
@@ -292,13 +292,13 @@ export default function getProxyEditor(theState) {
                   return (
                     <tr class={scopedCss.proxyRow}>
                       <td>
-                        <button type="button"
+                        <button type="button" disabled={props.ifInputsDisabled}
                           class={scopedCss.only} title="Удалить"
                           onClick={() => this.handleDelete(this, {proxyAsString, index})}
                         >X</button>
                       </td><td>{type}</td><td>{hostname}</td><td>{port}</td>
                       <td>
-                        <button type="button"
+                        <button type="button" disabled={props.ifInputsDisabled}
                           class={scopedCss.only} title="Повысить приоритет"
                           onClick={() => this.raisePriority(this, {proxyAsString, index})}
                         >▲</button>
@@ -421,7 +421,7 @@ export default function getProxyEditor(theState) {
                 <th style="width: 100%">
                   {
                     this.state.stashedExports === false
-                      ? 'Жду изменений...'
+                      ? 'Комментарии не поддерживаются!'
                       : (this.state.ifHasErrors
                           ? (<span><a href="" onClick={reset}>Сбросьте изменения</a> или поправьте</span>)
                           : (<a href="" onClick={reset}>Сбросить изменения</a>)
@@ -462,20 +462,30 @@ PROXY foobar.com:8080; # Not HTTP!`.trim()}
 
   return class ProxyEditor extends Component {
 
-    constructor(props) {
+    constructor(props/*{ conf, onNewValue, ifInputsDisabled }*/) {
 
       super(props);
+      console.log('CONSTRUCTOR')
+      const oldValue = typeof props.conf.value === 'string' && props.conf.value;
+      const newValue = oldValue || localStorage.getItem(UI_RAW) || '';
       this.state = {
-        proxyStringRaw: localStorage.getItem(UI_RAW) || '',
+        proxyStringRaw: newValue,
         ifExportsMode: false,
       };
       this.handleSwitch = () => this.setState({ifExportsMode: !this.state.ifExportsMode});
+      this.mayEmitNewValue(oldValue, newValue);
       
     }
 
-    preventLostOfChanges() {
+    mayEmitNewValue(oldValue, newValue) {
 
-      window.onbeforeunload = () => true; // TODO
+      console.log('emit?', oldValue, 'vs', newValue);
+      if ( // Reject: 1) both `false` OR 2) both `===`.
+        ( Boolean(oldValue) || Boolean(newValue) ) && oldValue !== newValue
+      ) {
+        console.log('EMIT');
+        this.props.onNewValue(newValue);
+      }
 
     }
 
@@ -484,9 +494,17 @@ PROXY foobar.com:8080; # Not HTTP!`.trim()}
       const props = Object.assign({
         proxyStringRaw: this.state.proxyStringRaw,
         onSwitch: this.handleSwitch,
-        setProxyStringRaw: (newVal) => this.setState({proxyStringRaw: newVal}),
+        setProxyStringRaw: (newValue) => {
+
+          const oldValue = this.state.proxyStringRaw;
+          localStorage.setItem(UI_RAW, newValue);
+          this.setState({proxyStringRaw: newValue});
+          this.mayEmitNewValue(oldValue, newValue);
+
+        },
       }, originalProps);
       
+      return createElement(ExportsEditor, props);
       return this.state.ifExportsMode
         ? createElement(ExportsEditor, props)
         : createElement(TabledEditor, props);

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js_replace

@@ -0,0 +1,508 @@
+import Inferno, {linkEvent} from 'inferno';
+import Component from 'inferno-component';
+import createElement from 'inferno-create-element';
+import css from 'csjs-inject';
+
+export default function getProxyEditor(theState) {
+
+  const scopedCss = css`
+
+    table.editor {
+      border-collapse: collapse;
+      /*border-style: hidden;*/
+      width: 100%;
+      margin: 0.5em 0;
+      background-color: #f3f5f6;
+    }
+
+    table.editor ::-webkit-input-placeholder {
+      color: #c9c9c9;
+    }
+
+    table.editor td, table.editor th {
+      border: 1px solid #ccc;
+      text-align: left;
+      height: 100%;
+    }
+
+    /* ADD PANEL */
+    table.editor tr.addPanel td {
+      padding: 0;
+    }
+    /* PROXY ROW */
+    table.editor tr.proxyRow td:nth-child(2) {
+      text-align: center;
+    }
+
+    table.editor th:not(:last-child) {
+      padding: 0 0.6em;
+    }
+
+    table.editor input:not([type="submit"]),
+    table.editor select,
+    table.editor select:hover {
+      border: none;
+      background: inherit !important;
+    }
+    table.editor select,
+    table.editor select:hover {
+      -webkit-appearance: menulist !important;
+      box-shadow: none !important;
+    }
+    table.editor input {
+      width: 100%;
+    }
+
+    /* BUTTONS */
+    table.editor input[type="submit"],
+    table.editor button {
+      min-width: 0;
+      min-height: 0;
+      width: 100%;
+      padding: 0;
+      border: none;
+    }
+    .only {
+      /*height: 100%;*/
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    table.editor .add {
+      font-weight: 900; 
+    }
+    table.editor .export {
+      padding-right: 2px;
+    }
+
+    /* LAST COLUMN: BUTTONS */
+    table.editor tr > *:nth-last-child(1),
+    table.editor tr.proxyRow > td:first-child {
+      text-align: center;
+      padding: 0;
+      position: relative;
+      min-width: 1em;
+    }
+    /* LAST-2 COLUMN: HOSTNAME
+    table.editor td:nth-last-child(3) {
+      padding-left: 2px;
+    }*/
+    .noPad {
+      padding: 0;
+    }
+    .padLeft {
+      padding-left: 2px;
+    }
+
+    textarea.textarea {
+      width: 100% !important;
+      min-height: 100%;
+      height: 6em;
+      border-width: 1px 0 0 0;
+      /*border: none;*/
+    }
+
+    table.editor input:invalid {
+      color: red !important;
+      border-radius: 0;
+      border-bottom: 1px dotted red !important;
+    }
+
+  `;
+
+  const UI_RAW = 'ui-proxy-string-raw';
+  const MAX_PORT = 65535;
+  const onlyPort = function onlyPort(event) {
+
+    if (!event.ctrlKey && (/^\D$/.test(event.key) || /^\d$/.test(event.key) && parseInt(`${this.value}${event.key}`) > MAX_PORT)) {
+      event.preventDefault();
+      return false;
+    }
+    // Digits, Alt, Tab, Enter, etc.
+    return true;
+
+  };
+  const splitBySemi = (proxyString) => proxyString.replace(/#.*$/mg, '').trim().split(/\s*;\s*/g).filter((s) => s);
+  const joinBySemi = (strs) => strs.join(';\n') + ';';
+  const normilizeProxyString = (str) => joinBySemi(splitBySemi(str));
+
+  const PROXY_TYPE_LABEL_PAIRS = [['PROXY', 'PROXY/HTTP'],['HTTPS'],['SOCKS4'],['SOCKS5'],['SOCKS']];
+
+
+  const SwitchButton = (props) =>
+    (
+      <button
+        type="button"
+        class={'emoji' + ' ' + scopedCss.export + ' ' + scopedCss.only}
+        title={props.title}
+        onClick={props.onClick}
+      >⇄</button>
+    );
+
+  class TabledEditor extends Component {
+
+    constructor(props) {
+
+      super(props);
+      this.state = {
+        selectedNewType: 'HTTPS',
+      };
+
+    }
+
+    handleTypeSelect(that, event) {
+
+      that.setState({
+        selectedNewType: event.target.value,
+      });
+
+    }
+
+    showInvalidMessage(that, event) {
+
+      that.props.funs.showErrors({message: event.target.validationMessage});
+
+    }
+
+    handleModeSwitch(that) {
+
+      that.props.onSwitch();
+
+    }
+
+    handleAdd(that, event) {
+
+      const form = event.target;
+      const elements = Array.from(form.elements).reduce((acc, el, index) => {
+
+        acc[el.name || index] = el.value;
+        el.value = '';
+        return acc;
+
+      }, {});
+      const type = that.state.selectedNewType;
+      const hostname = elements.hostname;
+      const port = elements.port;
+
+      that.props.setProxyStringRaw(
+        `${that.props.proxyStringRaw.trim()}\n;${type} ${hostname}:${port};`.trim()
+      );
+
+    }
+
+    handleDelete(that, {proxyAsString, index}) {
+
+      event.preventDefault();
+      /*
+      const proxyStrings = splitBySemi(that.props.proxyStringRaw);
+      proxyStrings.splice(index, 1);
+      */
+      const newVal = that.props.proxyStringRaw.replace(
+        new RegExp(`${proxyAsString}(?:\s*;\s*)*`, 'g'),
+        ''
+      );
+      that.props.setProxyStringRaw( newVal );
+
+    }
+
+    raisePriority(that, {proxyAsString, index}) {
+
+      event.preventDefault();
+      if (index < 1) {
+        return;
+      }
+
+      const proxyStrs = splitBySemi(that.props.proxyStringRaw);
+      const target = proxyStrs[index - 1];
+      const newVal = that.props.proxyStringRaw
+        .replace(proxyAsString, target)
+        .replace(target, proxyAsString);
+
+      //proxyStrings.splice(index - 1, 2, proxyStrings[index], proxyStrings[index-1]);
+
+      that.props.setProxyStringRaw( newVal );
+
+    }
+
+    handleSubmit(that, event) {
+
+      event.preventDefault();
+      that.handleAdd(that, event);
+
+    }
+
+    render(props) {
+
+      return (
+        <form onSubmit={linkEvent(this, this.handleSubmit)}>
+          <table class={scopedCss.editor}>
+            <thead>
+              <tr>
+                <th colspan="2">протокол</th> <th>домен / IP</th> <th>порт</th> <th>
+                  <SwitchButton title="импорт/экспорт" onClick={linkEvent(this, this.handleModeSwitch)}/>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* ADD NEW PROXY STARTS. */}
+              <tr class={scopedCss.addPanel}>
+                <td colspan="2">
+                  <select reqiured
+                    class={scopedCss.noPad}
+                    name="proxyType"
+                    onChange={linkEvent(this, this.handleTypeSelect)}
+                  >
+                    {
+                      PROXY_TYPE_LABEL_PAIRS.map(
+                        ([type, label]) =>
+                          (<option value={type} selected={type === this.state.selectedNewType}>
+                            {label || type}
+                          </option>)
+                      )
+                    }
+                  </select>
+                </td>
+                <td>
+                  {/* LAST-2: HOSTNAME */}
+                  <input required
+                    class={scopedCss.noPad}
+                    placeholder="89.140.125.17"
+                    name="hostname"
+                    onInvalid={linkEvent(this, this.showInvalidMessage)}
+                    tabindex="1"
+                  />
+                </td>
+                <td>
+                  {/* LAST-1: PORT */}
+                  <input required type="number"
+                    class={scopedCss.noPad + ' ' + scopedCss.padLeft} style="min-width: 4em"
+                    placeholder="9150"
+                    min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}"
+                    name="port"
+                    onInvalid={linkEvent(this, this.showInvalidMessage)}
+                    onkeydown={onlyPort}
+                    tabindex="2"
+                  />
+                </td>
+                <td>
+                  {/* LAST: ADD BUTTON */}
+                  <input
+                    type="submit" class={scopedCss.add + ' ' + scopedCss.only}
+                    title="Добавить прокси" value="+"
+                  />
+                </td>
+              </tr>
+              {/* ADD NEW PROXY ENDS. */}
+              {
+                splitBySemi(this.props.proxyStringRaw).map((proxyAsString, index) => {
+
+                  const [type, addr] = proxyAsString.trim().split(/\s+/);
+                  const [hostname, port] = addr.split(':');
+                  return (
+                    <tr class={scopedCss.proxyRow}>
+                      <td>
+                        <button type="button"
+                          class={scopedCss.only} title="Удалить"
+                          onClick={() => this.handleDelete(this, {proxyAsString, index})}
+                        >X</button>
+                      </td><td>{type}</td><td>{hostname}</td><td>{port}</td>
+                      <td>
+                        <button type="button"
+                          class={scopedCss.only} title="Повысить приоритет"
+                          onClick={() => this.raisePriority(this, {proxyAsString, index})}
+                        >▲</button>
+                      </td>
+                    </tr>
+                  );
+
+                })
+              }
+            </tbody>
+          </table>
+        </form>
+      );
+    }
+  }
+
+  const getInitState = () => ({
+    ifHasErrors: false,
+    stashedExports: false,
+  });
+
+  class ExportsEditor extends Component {
+
+    constructor(props) {
+
+      super(props);
+      this.state = getInitState();
+
+    }
+
+    resetState(that, event) {
+
+      that.setState(getInitState());
+      event.preventDefault();
+
+    }
+
+    getErrorsInStashedExports() {
+
+      if(this.state.stashedExports === false) {
+        return;
+      }
+      const errors = splitBySemi(this.state.stashedExports)
+        .map((proxyAsString) => {
+
+          const [rawType, addr, ...rest] = proxyAsString.split(/\s+/);
+          if (rest && rest.length) {
+            return new Error(
+              `"${rest.join(', ')}" кажется мне лишним. Вы забыли ";"?`
+            );
+          }
+          const knownTypes = PROXY_TYPE_LABEL_PAIRS.map(([type, label]) => type);
+          if( !knownTypes.includes(rawType.toUpperCase()) ) {
+            return new Error(
+              `Неверный тип ${rawType}. Известные типы: ${knownTypes.join(', ')}.`
+            );
+          }
+          if (!(addr && /^[^:]+:\d+$/.test(addr))) {
+            return new Error(
+              `Адрес прокси "${addr || ''}" не соответствует формату "<домен_или_IP>:<порт_из_цифр>".`
+            );
+          }
+          const [hostname, rawPort] = addr.split(':');
+          const port = parseInt(rawPort);
+          if (port < 0 || port > 65535) {
+            return new Error(
+              `Порт "${rawPort}" должен быть целым числом от 0 до 65535.`
+            );
+          }
+          return false;
+
+        }).filter((e) => e);
+      return errors && errors.length && errors;
+
+    }
+
+    handleModeSwitch(that, event) {
+
+      if (that.state.stashedExports !== false) {
+        const errors = that.getErrorsInStashedExports();
+        if (errors) {
+          that.setState({ifHasErrors: true});
+          that.props.funs.showErrors(...errors);
+          return;
+        }
+        that.props.setProxyStringRaw(that.state.stashedExports);
+      }
+      that.setState({
+        stashedExports: false,
+        ifHasErrors: false,
+      });
+      that.props.onSwitch();
+
+    }
+
+    handleTextareaChange(that, event) {
+
+      that.setState({
+        stashedExports: event.target.value,
+      });
+
+    }
+
+    handleSubmit(that, event) {
+
+      event.preventDefault();
+      this.handleModeSwitch(this, event);
+
+    }
+
+    render(props) {
+
+      const reset = linkEvent(this, this.resetState);
+
+      return (
+        <form onSubmit={linkEvent(this, this.handleSubmit)}>
+          <table class={scopedCss.editor}>
+            <thead>
+              <tr>
+                <th style="width: 100%">
+                  {
+                    this.state.stashedExports === false
+                      ? 'Жду изменений...'
+                      : (this.state.ifHasErrors
+                          ? (<span><a href="" onClick={reset}>Сбросьте изменения</a> или поправьте</span>)
+                          : (<a href="" onClick={reset}>Сбросить изменения</a>)
+                        )
+                  }
+                </th>
+                <th style="width: 1%">
+                  <SwitchButton title="Переключиться в табличный режим" onClick={linkEvent(this, this.handleModeSwitch)}/>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td colspan="2"><textarea
+                    class={scopedCss.textarea}
+                    spellcheck={false}
+                    placeholder={`
+SOCKS5 localhost:9050; # Tor Expert
+SOCKS5 localhost:9150; # Tor Browser
+HTTPS 11.22.33.44:3143;
+PROXY foobar.com:8080; # Not HTTP!`.trim()}
+                    onChange={linkEvent(this, this.handleTextareaChange)}
+                    value={
+                      this.state.stashedExports !== false
+                        ? this.state.stashedExports
+                        : (this.props.proxyStringRaw || '').replace(/\s*;\s*/g, ';\n')
+                    }
+                  /></td>
+              </tr>
+            </tbody>
+          </table>
+        </form>
+      );
+
+    }
+
+  }
+
+  return class ProxyEditor extends Component {
+
+    constructor(props) {
+
+      super(props);
+      this.state = {
+        proxyStringRaw: localStorage.getItem(UI_RAW) || '',
+        ifExportsMode: false,
+      };
+      this.handleSwitch = () => this.setState({ifExportsMode: !this.state.ifExportsMode});
+      
+    }
+
+    preventLostOfChanges() {
+
+      window.onbeforeunload = () => true; // TODO
+
+    }
+
+    render(originalProps) {
+
+      const props = Object.assign({
+        proxyStringRaw: this.state.proxyStringRaw,
+        onSwitch: this.handleSwitch,
+        setProxyStringRaw: (newVal) => this.setState({proxyStringRaw: newVal}),
+      }, originalProps);
+      
+      return this.state.ifExportsMode
+        ? createElement(ExportsEditor, props)
+        : createElement(TabledEditor, props);
+
+    };
+  }
+
+};

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/yarn.lock

@@ -13,8 +13,8 @@ acorn-dynamic-import@^2.0.0:
     acorn "^4.0.3"
 
 acorn@^4.0.3:
-  version "4.0.11"
+  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
 acorn@^5.0.0:
   version "5.0.3"
@@ -225,9 +225,13 @@ babel-helper-mark-eval-scopes@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/babel-helper-mark-eval-scopes/-/babel-helper-mark-eval-scopes-0.0.3.tgz#902f75aeb537336edc35eb9f52b6f09db7785328"
 
-babel-helper-remove-or-void@^0.0.1:
+babel-helper-mark-eval-scopes@^0.1.1:
-  version "0.0.1"
+  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-remove-or-void/-/babel-helper-remove-or-void-0.0.1.tgz#f602790e465acf2dfbe84fb3dd210c43a2dd7262"
+  resolved "https://registry.yarnpkg.com/babel-helper-mark-eval-scopes/-/babel-helper-mark-eval-scopes-0.1.1.tgz#4554345edf9f2549427bd2098e530253f8af2992"
+
+babel-helper-remove-or-void@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-remove-or-void/-/babel-helper-remove-or-void-0.1.1.tgz#9d7e1856dc6fafcb41b283a416730dc1844f66d7"
 
 babel-helper-to-multiple-sequence-expressions@^0.0.4:
   version "0.0.4"
@@ -282,11 +286,11 @@ babel-plugin-minify-constant-folding@^0.0.4:
     jsesc "^2.4.0"
 
 babel-plugin-minify-dead-code-elimination@^0.1.4:
-  version "0.1.4"
+  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-dead-code-elimination/-/babel-plugin-minify-dead-code-elimination-0.1.4.tgz#18b6ecfab77c29caca061d8210fa3495001e4fa1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-dead-code-elimination/-/babel-plugin-minify-dead-code-elimination-0.1.6.tgz#c5471346fb0a1046863fd765c784cba97d7b22e3"
   dependencies:
-    babel-helper-mark-eval-scopes "^0.0.3"
+    babel-helper-mark-eval-scopes "^0.1.1"
-    babel-helper-remove-or-void "^0.0.1"
+    babel-helper-remove-or-void "^0.1.1"
     lodash.some "^4.6.0"
 
 babel-plugin-minify-flip-comparisons@^0.0.2:
@@ -357,22 +361,20 @@ babel-plugin-transform-inline-consecutive-adds@^0.0.2:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-consecutive-adds/-/babel-plugin-transform-inline-consecutive-adds-0.0.2.tgz#a58fcecfc09c08fbf9373a5a3e70746c03d01fc1"
 
 babel-plugin-transform-member-expression-literals@^6.8.1:
-  version "6.8.1"
+  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.8.1.tgz#60b78cb2b814ac71dd6104ef51c496c62e877337"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.8.3.tgz#4eefa7fa1d3a86d05ac220bc3fdf96d5ed1835d6"
 
 babel-plugin-transform-merge-sibling-variables@^6.8.2:
-  version "6.8.2"
+  version "6.8.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.8.2.tgz#498acd07481ab340c1bad8b726c2fad1b8f644e5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.8.4.tgz#813a433f2d8c6989ee3a9c5e0cb46d3752d367a9"
 
 babel-plugin-transform-minify-booleans@^6.8.0:
-  version "6.8.0"
+  version "6.8.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.8.0.tgz#b1a48864a727847696b84eae36fa4d085a54b42b"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.8.2.tgz#8451579f706e702c1e1ab2756de5c8ea369cf07c"
-  dependencies:
-    babel-runtime "^6.0.0"
 
 babel-plugin-transform-property-literals@^6.8.1:
-  version "6.8.1"
+  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.8.1.tgz#05ed01f6024820b18f1d0495c80fe287176bccd9"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.8.3.tgz#0dcd2ecf0486c54c23f84817f911c4ab0e8d4b99"
 
 babel-plugin-transform-react-display-name@^6.23.0:
   version "6.23.0"
@@ -407,26 +409,24 @@ babel-plugin-transform-regexp-constructors@^0.0.6:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regexp-constructors/-/babel-plugin-transform-regexp-constructors-0.0.6.tgz#0d92607f0d26268296980cb7c1dea5f2dd3e1e20"
 
 babel-plugin-transform-remove-console@^6.8.1:
-  version "6.8.1"
+  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.8.1.tgz#38f6a6ca1581e76b75fc2c6fdcf909deadee7d6a"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.8.3.tgz#313441720324ad20af0fb009fa59e8102364626b"
 
 babel-plugin-transform-remove-debugger@^6.8.1:
-  version "6.8.1"
+  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.8.1.tgz#aabd0be107f8299094defe8e1ba8ccf4b114d07f"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.8.3.tgz#5064f2d843b77ce660ebaa7760be30eb925bb93f"
 
 babel-plugin-transform-remove-undefined@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-undefined/-/babel-plugin-transform-remove-undefined-0.0.5.tgz#12ef11805e06e861dd2eb0c7cc041d2184b8f410"
 
 babel-plugin-transform-simplify-comparison-operators@^6.8.1:
-  version "6.8.1"
+  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.8.1.tgz#a307088e0d1c728081777fba568f4107396ab25c"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.8.3.tgz#2e47e11e5f8dc33e97476e0263151d5fd57e1c4c"
 
 babel-plugin-transform-undefined-to-void@^6.8.0:
-  version "6.8.0"
+  version "6.8.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.8.0.tgz#bc5b6b4908d3b1262170e67cb3963903ddce167e"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.8.2.tgz#fe2b1d294eb05e87524eb93724dea6e2c3d66fa1"
-  dependencies:
-    babel-runtime "^6.0.0"
 
 babel-polyfill@^6.23.0:
   version "6.23.0"
@@ -493,7 +493,7 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.0.0, babel-runtime@^6.22.0:
+babel-runtime@^6.22.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1243,20 +1243,20 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-inferno-component@3.2.2, inferno-component@^3.1.2:
+inferno-component@3.3.1, inferno-component@^3.1.2:
-  version "3.2.2"
+  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-3.2.2.tgz#fabd6b553d83837a6d9172c41ccb24c123ce10a2"
+  resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-3.3.1.tgz#ddf28ff0bf195b641d77e8e8097ba488730adca5"
   dependencies:
-    inferno "3.2.2"
+    inferno "3.3.1"
     inferno-shared "3.1.1"
     inferno-vnode-flags "^3.0.0"
 
 inferno-create-element@^3.1.2:
-  version "3.2.2"
+  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/inferno-create-element/-/inferno-create-element-3.2.2.tgz#2a9768f5e5ea4ef0e784f6803ed2c2b31e64b593"
+  resolved "https://registry.yarnpkg.com/inferno-create-element/-/inferno-create-element-3.3.1.tgz#0babdb85e4c11f259a6fd10886ffc58820330c48"
   dependencies:
-    inferno "3.2.2"
+    inferno "3.3.1"
-    inferno-component "3.2.2"
+    inferno-component "3.3.1"
     inferno-shared "3.1.1"
     inferno-vnode-flags "^3.0.0"
 
@@ -1268,9 +1268,9 @@ inferno-vnode-flags@3.0.0, inferno-vnode-flags@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-3.0.0.tgz#f396390f3dafae3b76eea04d04eed6cf2004473b"
 
-inferno@3.2.2, inferno@^3.2.0:
+inferno@3.3.1, inferno@^3.2.0:
-  version "3.2.2"
+  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/inferno/-/inferno-3.2.2.tgz#9b5ae54bc18d206acd91c84eae698ef715ebc1fa"
+  resolved "https://registry.yarnpkg.com/inferno/-/inferno-3.3.1.tgz#376b7bcd065a1623c41904e42e0beb981e4552cd"
   dependencies:
     inferno-shared "3.1.1"
     inferno-vnode-flags "^3.0.0"
@@ -2232,7 +2232,7 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-uglify-js@^2.8.5:
+uglify-js@^2.8.27:
   version "2.8.27"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.27.tgz#47787f912b0f242e5b984343be8e35e95f694c9c"
   dependencies:
@@ -2322,8 +2322,8 @@ webpack-sources@^0.2.3:
     source-map "~0.5.3"
 
 webpack@^2.5.1:
-  version "2.5.1"
+  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.5.1.tgz#61742f0cf8af555b87460a9cd8bba2f1e3ee2fce"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.6.1.tgz#2e0457f0abb1ac5df3ab106c69c672f236785f07"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
@@ -2342,7 +2342,7 @@ webpack@^2.5.1:
     source-map "^0.5.3"
     supports-color "^3.1.0"
     tapable "~0.2.5"
-    uglify-js "^2.8.5"
+    uglify-js "^2.8.27"
     watchpack "^1.3.1"
     webpack-sources "^0.2.3"
     yargs "^6.0.0"