Add ProxyEditor view on tables

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

@@ -135,7 +135,7 @@ export default function getInfoLi() {
               <div class={scopedCss.tooltip} dangerouslySetInnerHTML={{__html: props.conf.desc}}/>
             </div>)
           : (props.conf.url
-              ? (<a href={props.conf.url} class={[scopedCss.rightBottomIcon, scopedCss.infoUrl].join(' ')}><InfoIcon /></a>)
+              ? (<a href={props.conf.url} class={[scopedCss.rightBottomIcon, scopedCss.infoUrl].join(' ')} title="Открыть документацию"><InfoIcon /></a>)
               : (<span>&nbsp;</span>) // Affects vertical align of flexbox items.
             )
         }

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

@@ -62,8 +62,10 @@ export default function getMain(theState) {
 
     }
 
-    handleModCheck(that, {targetConf, targetIndex}) {
+    handleModCheck(that, {targetConf, targetIndex, targetChildren}) {
 
+      console.log('CHHHH', targetChildren);
+      window.foo = targetChildren
       const oldCats = that.state.catToOrderedMods;
       const newCats = Object.keys(that.state.catToOrderedMods).reduce((acc, cat) => {
 
@@ -72,7 +74,7 @@ export default function getMain(theState) {
         } else {
           acc[cat] = oldCats[cat].map(
             (conf, index) => targetIndex === index
-              ? Object.assign({}, conf, {value: !conf.value})
+              ? Object.assign({}, conf, {value: !targetConf.value})
               : conf
           );
         }
@@ -123,7 +125,7 @@ export default function getMain(theState) {
               Object.assign({}, props, {
                 orderedConfigs: this.state.catToOrderedMods['ownProxies'],
                 childrenOfMod: {
-                  customProxyStringRaw: createElement(ProxyEditor),
+                  customProxyStringRaw: createElement(ProxyEditor, props),
                 },
               }, modsHandlers)
             ),

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

@@ -16,7 +16,7 @@ export default function getModList(theState) {
             type='checkbox'
             checked={conf.value}
             key={index}
-            onClick={() => props.onClick({targetConf: conf, targetIndex: index})}
+            onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})}
           >
             {props.childrenOfMod && props.childrenOfMod[conf.key]}
           </InfoLi>)

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

@@ -1,34 +1,176 @@
-import Inferno from 'inferno';
+import Inferno, {linkEvent} from 'inferno';
+import Component from 'inferno-component';
 import css from 'csjs-inject';
 
 export default function getProxyEditor(theState) {
 
   const scopedCss = css`
 
-    .texty {
+    table.editor {
+      border-collapse: collapse;
+      /*border-style: hidden;*/
       width: 100%;
-      max-width: 38.5em; /* ~418px, layout breaks if more */
-      height: 7em;
-      margin-top: 0.3em;
-      font-size: 0.9em;
+      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;
+    }
+    table.editor th {
+      padding: 0 0.6em;
+    }
+
+    table.editor input,
+    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%;
+    }
+
+    table.editor button {
+      min-width: 0;
+      min-height: 0;
+      width: 100%;
+      padding: 0;
+      border: none;
+    }
+    table.editor button.add {
+      font-weight: 800;	
+    }
+    table.editor button.export {
+      padding-right: 2px;
+    }
+    /* LAST COLUMN */
+    table.editor th:nth-last-child(1),
+    table.editor td:nth-last-child(1) {
+      height: 100%;
+      /*border: 0;*/
+      padding: 0;
+      text-align: center;
+    }
+    table.editor td:nth-last-child(2) {
+      /*border-right: 0;
+      /* FOR PORT */
+      padding: 0;
+    }
+    .laftPadded {
+      padding-left: 2px;
+    }
+    .noPad {
+      padding: 0;
+    }
+
+    textarea.textarea {
+      width: 100% !important;
+      min-height: 100%;
+      height: 6em;
+      border-width: 1px 0 0 0;
     }
 
   `;
 
   const uiRaw = 'ui-proxy-string-raw';
 
-  return function ProxyEditor(props) {
+  return class ProxyEditor extends Component {
 
-    return (<textarea class={scopedCss.texty}
+    constructor(props) {
+
+      super(props);
+      this.state = {
+        proxyStringRaw: localStorage.getItem(uiRaw) || '',
+        ifExportView: false,
+      };
+      props.funs.setStatusTo('Hello from editor!');
+
+      this.switchBtn = (
+        <button
+          class={'emoji' + ' ' + scopedCss.export}
+          title="импорт/экспорт"
+          onClick={linkEvent(this, this.handleViewSwitch)}
+        >⇄</button>
+      );
+
+    }
+
+    handleViewSwitch(that) {
+      
+      that.setState({ ifExportView: !that.state.ifExportView });
+
+    }
+
+    render(props) {
+
+      return !this.state.ifExportView ? (
+        <table class={scopedCss.editor}>
+          <thead>
+            <tr>
+              <th>протокол</th> <th>домен</th> <th>порт</th> <th>{this.switchBtn}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class={scopedCss.noPad}>
+                <select reqiured class={scopedCss.noPad}>
+                  <option value="PROXY">HTTP/PROXY</option>
+                  <option value="HTTPS" selected>HTTPS</option>
+                  <option value="SOCKS4">SOCKS4</option>
+                  <option value="SOCKS5">SOCKS5</option>
+                  <option value="SOCKS">SOCKS</option>
+                </select>
+              </td>
+              <td class={scopedCss.leftPadded}>
+                <input type="url" placeholder="89.140.125.17" class={scopedCss.noPad}/>
+              </td>
+              <td class={scopedCss.leftPadded}>
+                <input type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
+              </td>
+              <td>
+                <button class={''} title="Повысить приоритет">▴</button>
+                <br/>
+                <button class={scopedCss.add} title="Добавить прокси">+</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      ) : (
+        <table class={scopedCss.editor}>
+          <thead>
+            <tr>
+              <th style="width: 100%">Прокси видят данные HTTP-сайтов!</th>
+              <th style="width: 1%">{this.switchBtn}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td colspan="2"><textarea class={scopedCss.textarea}
                   spellcheck={false}
-      placeholder={
-`SOCKS5 localhost:9050; # Tor Expert
+                  placeholder={`
+SOCKS5 localhost:9050; # Tor Expert
 SOCKS5 localhost:9150; # Tor Browser
 HTTPS 11.22.33.44:3143;
 PROXY foobar.com:8080; # Not HTTP!`.trim()}
                   value={props.value || localStorage.getItem(uiRaw) || ''}
-    />);
+                /></td>
+            </tr>
+          </tbody>
+        </table>
+      );
 
     };
+  }
 
 };

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

@@ -0,0 +1,44 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import css from 'csjs-inject';
+
+export default function getProxyEditor(theState) {
+
+  const scopedCss = css`
+
+    .texty {
+      width: 100%;
+      max-width: 38.5em; /* ~418px, layout breaks if more */
+      height: 7em;
+      margin-top: 0.3em;
+      font-size: 0.9em;
+    }
+
+  `;
+
+  const uiRaw = 'ui-proxy-string-raw';
+
+  return class ProxyEditor extends Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {foo: 'BAR'};
+      props.funs.setStatusTo('Hello from editor!');
+    }
+
+    render(props) {
+    return (<textarea class={scopedCss.texty}
+      onFocus={() => alert('FFF')}
+      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()}
+      value={props.value || localStorage.getItem(uiRaw) || ''}
+    />);
+
+  };
+  }
+
+};