Finish the view part of popup (almost)

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

@@ -8,7 +8,8 @@ import getTabPanel from './TabPanel';
 import getPacChooser from './PacChooser';
 import getNotifications from './Notifications';
 import getExceptions from './Exceptions';
-import getMods from './Mods';
+import getModList from './ModList';
+import getProxyEditor from './ProxyEditor';
 
 import getFooter from './Footer';
 
@@ -20,7 +21,8 @@ export default function getApp(theState) {
   const PacChooser = getPacChooser(theState);
   const Notifications = getNotifications(theState);
   const Exceptions = getExceptions(theState);
-  const Mods = getMods(theState);
+  const ModList = getModList(theState);
+  const ProxyEditor = getProxyEditor(theState);
 
   const Footer = getFooter(theState);
 
@@ -138,8 +140,9 @@ export default function getApp(theState) {
 
       return createElement('div', null, [
         ...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ),
+        // WARNIGN ENDS.
         createElement(TabPanel, {
-          tabs:[
+          tabs: [
             {
               label: 'PAC-скрипт',
               content: createElement(PacChooser, props),
@@ -150,18 +153,30 @@ export default function getApp(theState) {
             },
             {
               label: 'Свои прокси',
-              content: "OwnProxies().render(this.props)",
+              content: createElement(
+                ModList,
+                Object.assign({}, props, {
+                  category: 'ownProxies',
+                  modToChildren: {
+                    customProxyStringRaw: createElement(ProxyEditor),
+                  },
+                })
+              ),
             },
             {
               label: 'Модификаторы',
-              content: createElement(Mods, props),
+              content: createElement(
+                ModList,
+                Object.assign({}, props, {category: 'general'})
+              ),
             },
             {
               label: 'Уведомления',
               content: createElement(Notifications, props),
-            }
-          ]
+            },
+          ],
         }),
+        // FOOTER.
         createElement(Footer, Object.assign({ status: this.state.status }, props)),
       ]);
 
@@ -169,4 +184,4 @@ export default function getApp(theState) {
 
   }
 
-};;
+};

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

@@ -1,7 +1,7 @@
 import Inferno from 'inferno';
 import css from 'csjs-inject';
 
-export default function getInfoRow() {
+export default function getInfoLi() {
 
   const scopedCss = css`
     /* CONTROL RAW = BUTTON + LINK */
@@ -23,6 +23,7 @@ export default function getInfoRow() {
 
     .infoRow {
       position: relative;
+      flex-wrap: wrap;
     }
     .rightBottomIcon {
       margin-left: 0.1em;
@@ -80,6 +81,16 @@ export default function getInfoRow() {
       left: 75%;
       width: calc(25% + 0.6em);
     }
+
+    /* CHILDREN */
+
+    input:not(:checked) ~ .children {
+      display: none;
+    }
+    .children {
+      flex-grow: 9999;
+    }
+
   `;
 
   const camelToDash = (name) => name.replace(/([A-Z])/g, (_, p1) => '-' + p1.toLowerCase());
@@ -95,12 +106,11 @@ export default function getInfoRow() {
 
   };
 
-  return function InfoRow(props) {
+  return function InfoLi(props) {
 
     props = Object.assign({}, {
       idPrefix: '',
       ifDashify: false,
-      htmlAfterLabel: '',
     }, props);
 
     const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key );
@@ -116,7 +126,7 @@ export default function getInfoRow() {
         />
         <div class={scopedCss.labelContainer}>
           <label for={iddy} dangerouslySetInnerHTML={{__html: props.conf.label}}></label>
-          {props.children}
+          &nbsp;{props.nodeAfterLabel}
         </div>
         {props.conf.desc
           ? (
@@ -129,6 +139,7 @@ export default function getInfoRow() {
               : (<span>&nbsp;</span>) // Affects vertical align of flexbox items.
             )
         }
+        {props.children && (<div class={scopedCss.children}>{props.children}</div>)}
       </li>
     );
 

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

@@ -1,29 +1,22 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 import createElement from 'inferno-create-element';
-import css from 'csjs-inject';
 
 import getInfoLi from './InfoLi';
 import getApplyMods from './ApplyMods';
 
-export default function getMods(theState) {
+export default function getModList(theState) {
 
   const InfoLi = getInfoLi(theState);
   const ApplyMods = getApplyMods(theState);
 
-  return class Mods extends Component {
-
-    getOrderedConfigs() {
-
-      return this.props.apis.pacKitchen.getOrderedConfigs('general');
-
-    }
+  return class ModList extends Component {
 
     constructor(props) {
 
       super(props);
       this.state = {
-        orderedConfigs: this.getOrderedConfigs(),
+        orderedConfigs: props.apis.pacKitchen.getOrderedConfigs(props.category),
         ifChangesStashed: false,
       };
 
@@ -42,7 +35,7 @@ export default function getMods(theState) {
                 newConfigs[index].value = !newConfigs[index].value;
                 this.setState({orderedConfigs: newConfigs});
 
-              }}/>
+              }}>{props.modToChildren && props.modToChildren[conf.key]}</InfoLi>
             )
           }
           </ul>

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

@@ -124,18 +124,9 @@ export default function getPacChooser(theState) {
                   name="pacProvider"
                   checked={iddyToCheck === provConf.key}
                   disabled={props.ifInputsDisabled}
-                >
-                  &nbsp;<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
-                </InfoLi>)
+                  nodeAfterLabel={<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>}
+                />)
               )
-            /*<InfoLi
-              onClick={this.radioClickHandler.bind(this)}
-              type="radio"
-              name="pacProvider"
-              conf={{key: 'none', label: 'Отключить'}}
-              checked={iddyToCheck === 'none'}
-              disabled={props.ifInputsDisabled}
-            />*/
             }
           </ul>
           <div id="updateMessage" class="horFlex" style="align-items: center">

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

@@ -0,0 +1,34 @@
+import Inferno from 'inferno';
+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 function ProxyEditor(props) {
+
+    return (<textarea class={scopedCss.texty}
+      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) || ''}
+    />);
+
+  };
+
+};

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

@@ -2,7 +2,7 @@ import Inferno, { linkEvent } from 'inferno';
 import Component from 'inferno-component';
 import css from 'csjs-inject';
 
-export default function getTabsPannel({ flags }) {
+export default function getTabPannel({ flags }) {
 
   const scopedCss = css`
 
@@ -123,7 +123,7 @@ export default function getTabsPannel({ flags }) {
 
       return (
         <div>
-          <nav class={scopedCss.navLabels + ' hiddenForOptionsPage'}>
+          <nav class={scopedCss.navLabels}>
             <ul class='horizontalList'>
               {
                 props.tabs.map((tab, index) =>

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

@@ -15,7 +15,7 @@ chrome.runtime.getBackgroundPage( (bgWindow) =>
 
         theState = {
           utils: bgWindow.utils,
-          apis: bgWindow.apis,
+          apis: apis,
           flags: {
             /* Shortcuts to boolean values. */
             ifNotControlled: !apis.errorHandlers.ifControllable,