Add notifications, make warning conditional, refactor

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

@@ -1,4 +1,4 @@
 node_modules
 npm-debug.log
-.swp
+*.swp
 dist

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

@@ -3,8 +3,11 @@ import Component from 'inferno-component';
 import createElement from 'inferno-create-element';
 
 import getNotControlledWarning from './NotControlledWarning';
+
 import getTabPanel from './TabPanel';
 import getPacChooser from './PacChooser';
+import getNotifications from './Notifications';
+
 import getFooter from './Footer';
 
 export default function getApp(theState) {
@@ -12,6 +15,7 @@ export default function getApp(theState) {
   const NotControlledWarning = getNotControlledWarning(theState);
   const TabPanel = getTabPanel(theState);
   const PacChooser = getPacChooser(theState);
+  const Notifications = getNotifications(theState);
   const Footer = getFooter(theState);
 
   return class App extends Component {
@@ -21,7 +25,7 @@ export default function getApp(theState) {
       super(props);
       this.state = {
         status: 'Загрузка...',
-        areInputsDisabled: false,
+        ifInputsDisabled: false,
       };
 
     }
@@ -84,20 +88,8 @@ export default function getApp(theState) {
     switchInputs(val) {
 
       this.setState({
-        areInputsDisabled: val === 'off' ? true : false,
+        ifInputsDisabled: val === 'off' ? true : false,
       });
-      /*
-      const inputs = document.querySelectorAll('input');
-      for ( let i = 0; i < inputs.length; i++ ) {
-        const input = inputs[i];
-        if (val === 'off') {
-          input.dataset.previousDisabledValue = input.disabled;
-          input.disabled = true;
-        } else {
-          input.disabled = input.dataset.previousDisabledValue === 'true';
-        }
-      }
-      */
 
     }
 
@@ -134,11 +126,11 @@ export default function getApp(theState) {
           setStatusTo: this.setStatusTo.bind(this),
           conduct: this.conduct.bind(this),
         },
-        areInputsDisabled: this.state.areInputsDisabled,
+        ifInputsDisabled: this.state.ifInputsDisabled,
       });
 
       return createElement('div', null, [
-        createElement(NotControlledWarning, props),
+        ...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ),
         createElement(TabPanel, {
           tabs:[
             {
@@ -159,7 +151,7 @@ export default function getApp(theState) {
             },
             {
               label: 'Уведомления',
-              content: "Notifications().render(this.props)",
+              content: createElement(Notifications, props),
             }
           ]
         }),

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

@@ -26,7 +26,7 @@ export default function getFooter() {
         </section>
 
         <footer class={scopedCss.controlRow + ' horFlex nowrap'}>
-          <input type="button" value="Готово" disabled={props.areInputsDisabled} onClick={() => window.close()} />
+          <input type="button" value="Готово" disabled={props.ifInputsDisabled} onClick={() => window.close()} />
           <a href="../troubleshoot/index.html">
             Проблемы?
           </a>

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

@@ -0,0 +1,54 @@
+import Inferno from 'inferno';
+import css from 'csjs-inject';
+
+export default function getPacChooser(theState) {
+
+  const scopedCss = css`
+
+    .listOfNotifiers {
+      margin-left: 0.4em;
+    }
+
+  `;
+
+  return function Notifications(props) {
+
+    return (
+      <section>
+        <header>Я <span style="color: #f93a17">❤</span> yведомления:</header>
+        <ul class={scopedCss.listOfNotifiers}>
+        {
+          Array.from(props.apis.errorHandlers.getEventsMap()).map(([ntfId, ntfName]) => {
+
+            const iddy = `if-on-${ntfId}`;
+            const ifChecked = props.apis.errorHandlers.isOn(ntfId);
+            return (
+              <li>
+                <input
+                  type="checkbox"
+                  id={iddy}
+                  checked={ifChecked}
+                  disabled={props.ifInputsDisabled}
+                  onClick={() => {
+
+                    props.apis.errorHandlers.switch(
+                      ifChecked ? 'off' : 'on', // Reverse.
+                      ntfId
+                    );
+
+                  }}
+                />
+                {' '}
+                <label for={iddy}>{ntfName}</label>
+              </li>
+            );
+
+          })
+        }
+        </ul>
+      </section>
+    );
+
+  };
+
+};

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

@@ -122,7 +122,7 @@ export default function getPacChooser(theState) {
                   type="radio"
                   name="pacProvider"
                   checked={iddyToCheck === provConf.key}
-                  disabled={props.areInputsDisabled}
+                  disabled={props.ifInputsDisabled}
                 >
                   &nbsp;<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
                 </InfoLi>)
@@ -134,7 +134,7 @@ export default function getPacChooser(theState) {
               name="pacProvider"
               conf={{key: 'none', label: 'Отключить'}}
               checked={iddyToCheck === 'none'}
-              disabled={props.areInputsDisabled}
+              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/TabPanel.js

@@ -118,39 +118,19 @@ export default function getTabsPannel({ flags }) {
       };
 
     }
-    componentDidMount() {
 
-      window.addEventListener('hashchange', () => {
-
-        if (/^#tab(\d+)$/.test(window.location.hash)) {
-          const inputIndex = RegExp.$1;
-          if (inputIndex < this.props.tabs.length) {
-            this.setState({chosenTabIndex: inputIndex});
-          }
-        }
-      });
-
-    }
     render(props) {
 
-      return (<div ref={(dom) => {
+      return (
-
+        <div>
-                if (!dom) {
-                  return /* Unmounting. */;
-                }
-                const target = dom.querySelector(`.${scopedCss.mainNav} *:target`);
-                if (target) {
-                  const tabIndex = parseInt(target.id.replace('tab', ''));
-                  dom.querySelector(`#radioLabel${tabIndex}`).checked = true;
-                  dom.querySelector(`#radioTab${tabIndex}`).checked = true;
-                }
-
-              }}>
           <nav class={scopedCss.navLabels + ' hiddenForOptionsPage'}>
             <ul class='horizontalList'>
               {
                 props.tabs.map((tab, index) =>
-                  (<li><input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={this.state.chosenTabIndex === index} class="off"/><label onClick={() => (window.location.hash = `tab${index}`)} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label></li>)
+                  (<li>
+                    <input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={this.state.chosenTabIndex === index} class="off"/>
+                    <label onClick={() => this.setState({chosenTabIndex: index})} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label>
+                  </li>)
                 )
               }
             </ul>
@@ -159,7 +139,13 @@ export default function getTabsPannel({ flags }) {
 
           <nav class={'horPadded ' + scopedCss.mainNav}>
             {
-              props.tabs.map((tab, index) => (<div><input type="radio" name="selectedTab" id={'radioTab' + index} checked={this.state.chosenTabIndex === index} class="off"/><section id={'tab' + index} class={scopedCss.tabContainer}>{tab.content}</section></div>))
+              props.tabs.map((tab, index) => (
+                  <div>
+                    <input type="radio" name="selectedTab" id={'radioTab' + index} checked={this.state.chosenTabIndex === index} class="off"/>
+                    <section id={'tab' + index} class={scopedCss.tabContainer}>{tab.content}</section>
+                  </div>
+                )
+              )
             }
           </nav>
           <hr/>

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

@@ -5,12 +5,6 @@ import createElement from 'inferno-create-element';
 import appendGlobalCss from './globalCss';
 import getApp from './components/App';
 
-/*
-       #list-of-notifiers {
-          margin-left: 0.4em;
-        }
-*/
-
 chrome.runtime.getBackgroundPage( (backgroundPage) =>
   backgroundPage.apis.errorHandlers.installListenersOn(
     window, 'PUP', async() => {
@@ -30,10 +24,6 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
         };
       }
 
-      if (theState.flags.ifMini) {
-        document.documentElement.classList.add('ifVersionMini');
-      }
-
       // IF INSIDE OPTIONS TAB
 
       const currentTab = await new Promise(