Supply font/svg for all icons, wrong i-icon alignment

extensions/chromium/runet-censorship-bypass/assets/README.md

@@ -0,0 +1,8 @@
+# Blue Ribbon Icon
+
+URL: http://www.iconsdb.com/icon-sets/cardboard-blue-icons/ribbon-12-icon.html
+
+# SVG Icons, emoji
+
+URL: https://github.com/jslegers/emoji-icon-font
+Author: John Slegers aka jslegers

extensions/chromium/runet-censorship-bypass/assets/my-circled-information-circle - inkscape.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="my-circled-information-circle - Copywwwwww.svg"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata21">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs19" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1600"
+     inkscape:window-height="847"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="6.8"
+     inkscape:cx="50"
+     inkscape:cy="50"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg15" />
+  <g
+     id="icon-info"
+     viewBox="0 0 100 100">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:geometricPrecision;text-rendering:auto;enable-background:accumulate"
+       d="M 50,1.5 C 23.255646,1.5 1.5,23.255646 1.5,50 1.5,76.744354 23.255646,98.5 50,98.5 76.744354,98.5 98.5,76.744354 98.5,50 98.5,23.255646 76.744354,1.5 50,1.5 Z m 0,7 C 72.961273,8.5 91.5,27.038727 91.5,50 91.5,72.961273 72.961273,91.5 50,91.5 27.038727,91.5 8.5,72.961273 8.5,50 8.5,27.038727 27.038727,8.5 50,8.5 Z"
+       id="circle10"
+       inkscape:connector-curvature="0" />
+    <path
+       shape-rendering="crispEdges"
+       d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"
+       id="path12" />
+  </g>
+</svg>

extensions/chromium/runet-censorship-bypass/assets/my-circled-information-circle.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="icon-info" viewBox="0 0 100 100">
+    <circle shape-rendering="geometricPrecision" fill="none" stroke="currentColor" stroke-width="7" cx="50" cy="50" r="45"/>
+    <path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
+  </g>
+</svg>

extensions/chromium/runet-censorship-bypass/assets/my-circled-information-path-strokeless.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="icon-info" viewBox="0 0 100 100">
+    <path d="M 50,1.5 C 23.255646,1.5 1.5,23.255646 1.5,50 1.5,76.744354 23.255646,98.5 50,98.5 76.744354,98.5 98.5,76.744354 98.5,50 98.5,23.255646 76.744354,1.5 50,1.5 Z m 0,7 C 72.961273,8.5 91.5,27.038727 91.5,50 91.5,72.961273 72.961273,91.5 50,91.5 27.038727,91.5 8.5,72.961273 8.5,50 8.5,27.038727 27.038727,8.5 50,8.5 Z"/>
+    <path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
+  </g>
+</svg>

extensions/chromium/runet-censorship-bypass/assets/my-circled-information-path.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="icon-info" viewBox="0 0 100 100">
+    <path fill="none" stroke="currentColor" stroke-width="7" stroke-miterlimit="10"
+      d="M95,50c0,25-20,45-45,45 c-25,0-45-20-45-45 S25,5,50,5C75,5,95,25,95,45z"/>
+    <path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
+  </g>
+</svg>

extensions/chromium/runet-censorship-bypass/gulpfile.js

@@ -19,8 +19,9 @@ const templatePlugin = (context) => through.obj(function(file, encoding, cb) {
       return cb(new PluginError(PluginName, 'Streams not supported!'));
     } else if (file.isBuffer()) {
 
-      const {keys, values} = Object.entries(context).reduce( (acc, [key, value]) => {
+      const {keys, values} = Object.keys(context).reduce( (acc, key) => {
 
+	const value = context[key];
         acc.keys.push(key);
         acc.values.push(value);
         return acc;

extensions/chromium/runet-censorship-bypass/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.19",
   "description": "Development tools for chromium extension",
   "scripts": {
-    "lint": "./node_modules/.bin/eslint ./src/**/*.js --ignore-pattern vendor"
+    "lint": "eslint ./src/**/*.js --ignore-pattern vendor",
+    "gulp": "gulp"
   },
   "author": "Ilya Ig. Petrov",
   "license": "GPLv3",

extensions/chromium/runet-censorship-bypass/src/extension-common/35-pac-kitchen-api.js

@@ -109,6 +109,7 @@
             || Boolean(defaults[prop]) === Boolean(mods[prop])
         );
 
+      console.log('MODS', mods);
       Object.assign(this, defaults, mods);
       this.ifNoMods = ifAllDefaults ? true : false;
 
@@ -149,7 +150,7 @@
             this.excluded.push(host);
           }
         }
-        if (this.included && !this.filteredCustomsString) {
+        if (this.included.length && !this.filteredCustomsString) {
           throw new TypeError(
             'Проксировать свои сайты можно только через свои прокси. Нет ни одного своего прокси, удовлетворяющего вашим требованиям!'
           );
@@ -214,11 +215,11 @@
       }
 
       return res + `
-    const originalProxyString = originalFindProxyForURL(url, host);
+    const pacProxyString = originalFindProxyForURL(url, host);
-    let originalProxyArray = originalProxyString.split(/(?:\\s*;\\s*)+/g).filter( (p) => p );
+    let pacProxyArray = pacProxyString.split(/(?:\\s*;\\s*)+/g).filter( (p) => p );
-    if (originalProxyArray.every( (p) => /^DIRECT$/i.test(p) )) {
+    if (pacProxyArray.every( (p) => /^DIRECT$/i.test(p) )) {
       // Directs only or null, no proxies.
-      return originalProxyString;
+      return pacProxyString;
     }
     return ` +
       function() {
@@ -226,15 +227,15 @@
         if (!pacMods.ifUsePacScriptProxies) {
           return '"' + pacMods.filteredCustomsString + '"';
         }
-        let filteredOriginalsExp = 'originalProxyString';
+        let filteredPacExp = 'pacProxyString';
         if (pacMods.ifUseSecureProxiesOnly) {
-          filteredOriginalsExp =
+          filteredPacExp =
-            'originalProxyArray.filter( (p) => !p.toUpperCase().startsWith("HTTP ") ).join("; ")';
+            'pacProxyArray.filter( (p) => !p.toUpperCase().startsWith("HTTP ") ).join("; ")';
         }
         if ( !pacMods.filteredCustomsString ) {
-          return filteredOriginalsExp;
+          return filteredPacExp;
         }
-        return '"' + pacMods.filteredCustomsString + '; " + ' + filteredOriginalsExp;
+        return filteredPacExp + '"; ' + pacMods.filteredCustomsString + '"';
 
       }() + ' + "; DIRECT";'; // Without DIRECT you will get 'PROXY CONN FAILED' pac-error.
 
@@ -292,7 +293,6 @@
 
     },
 
-
     keepCookedNowAsync(pacMods = mandatory(), cb = throwIfError) {
 
       if (typeof(pacMods) === 'function') {

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/choose-pac-provider/index.html

@@ -7,8 +7,9 @@
         --ribbon-color: #4169e1;
         --blue-bg: dodgerblue;
         --default-grey: #bfbfbf;
-        max-width: 27em;
+        max-width: 28em;
       }
+
       body {
         margin: 0;
       }
@@ -45,6 +46,9 @@
       li, li > * {
         vertical-align: middle;
       }
+      input[type="radio"], input[type="checkbox"] {
+        flex-shrink: 0;
+      }
       input[type="radio"], label {
         cursor: pointer;
       }
@@ -205,34 +209,22 @@
       /* INFO SIGNS */
 
       .info-row {
-        display: table;
-        width: 100%;
-
         position: relative;
       }
-      .info-sign {
+      .right-bottom-icon {
-        font-size: 1.4em;
-        vertical-align: middle;
-        line-height: 100%;
         margin-left: 0.1em;
+        vertical-align: bottom;
       }
-      .info-url {
+      .info-url, .info-url:hover {
         text-decoration: none;
-
-        float: right;
-        text-align: right;
-
-        line-height: normal !important;
-        vertical-align: top !important;
       }
 
       /* Source: https://jsfiddle.net/greypants/zgCb7/ */
       .desc {
-        display: table-cell;
         text-align: right;
         color: var(--ribbon-color);
         cursor: help;
-        width: 1%;
+        padding-left: 0.3em;
       }
       .tooltip {
         display: none;
@@ -265,13 +257,13 @@
         right: 0;
         height: 0;
       }
-      /* This bridges the gap so you can mouse into the tooltip without it disappearing */
+      /* This bridges the gap so you can mouse into the tooltip without it disappearing. */
       .desc .tooltip:before {
         position: absolute;
         top: -1em;
         content: "";
         display: block;
-        height: 1.6em;
+        height: 1.2em;
         left: 75%;
         width: calc(25% + 0.6em);
       }
@@ -355,6 +347,14 @@
         margin: 1em 0 1em 0;
       }
 
+      .hor-flex > input:not([type="button"]) {
+        align-self: flex-end;
+      }
+      .label-container {
+        flex-grow: 9;
+        padding-left: 0.3em;
+      }
+
       /* STATUS */
 
       #status-row {
@@ -371,6 +371,25 @@
       .other-version:hover {
         text-decoration: none;
       }
+
+      @font-face {
+        font-family: "emoji";
+        src:url("../lib/fonts/emoji.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+      }
+      .emoji {
+        font-family: "emoji";
+      }
+
+      svg.icon {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        stroke-width: 0;
+        stroke: currentColor;
+        fill: currentColor;
+      }
     </style>
   </head>
   <body>
@@ -397,10 +416,16 @@
 
         <header class="only-for-options-page">PAC-скрипт:</header>
         <ul id="list-of-providers">
-          <li><input type="radio" name="pacProvider" id="none" checked> <label for="none">Отключить</label></li>
+          <li class="info-row hor-flex"><input type="radio" name="pacProvider" id="none" checked> <div class="label-container"><label for="none">Отключить</label></div></li>
         </ul>
-        <div id="update-message">
+        <div id="update-message" class="hor-flex">
-          Обновлялись: <span class="update-date">...</span>
+          <div>Обновлялись: <span class="update-date">...</span></div>
+          <div>
+            <a class="only-for-mini-version other-version emoji" href="https://rebrand.ly/ac-versions"
+              title="Полная версия">🏋</a>
+            <a class="only-for-full-version other-version emoji" href="https://rebrand.ly/ac-versions"
+              title="Версия для слабых машин">🐌</a>
+          </div>
         </div>
 
       </section>
@@ -416,7 +441,11 @@
         </div>
         <datalist id="exc-list"></datalist>
         <ol class="horizontal-list" id="exc-radio">
-          <li><input id="this-auto" type="radio" checked name="if-proxy-this-site"/> <label for="this-auto">🔄&#xFE0E; авто</label></li>
+          <li><input id="this-auto" type="radio" checked name="if-proxy-this-site"/>
+            <label for="this-auto"><!--span class="emoji">🔄(looks fat)</span--><svg
+              class="icon"
+              style="position: relative; top: 0.15em;"><use xlink:href="#icon-loop-round"></use></svg>&nbsp;авто</label>
+          </li>
           <li><input id="this-yes" type="radio" name="if-proxy-this-site"/> <label for="this-yes">✔&nbsp;да</label></li>
           <li><input id="this-no" type="radio" name="if-proxy-this-site"/> <label for="this-no">✘&nbsp;нет</label></li>
         </ol>
@@ -445,10 +474,8 @@
     <hr/>
 
     <div class="hor-padded">
-      <section class="hor-flex" id="status-row">
+      <section id="status-row">
         <div id="status" style="will-change: contents">Загрузка...</div>
-        <a class="only-for-mini-version other-version" title="Полная версия" href="https://rebrand.ly/ac-versions">🏋&#xFE0E;</a>
-        <a class="only-for-full-version other-version" title="Версия для слабых машин" href="https://rebrand.ly/ac-versions">🐌&#xFE0E;</a>
       </section>
 
       <footer class="control-row hor-flex">
@@ -461,5 +488,18 @@
 
     <script src="./index.js"></script>
     <script src="../lib/keep-links-clickable.js"></script>
+    <!-- ICONS -->
+    <svg style="display: none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <symbol id="icon-info" viewBox="0 0 100 100">
+        <title>info</title>
+        <circle shape-rendering="geometricPrecision" fill="none" stroke="currentColor" stroke-width="7" cx="50" cy="50" r="45"/>
+        <path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
+      </symbol>
+      <symbol id="icon-loop-round" viewBox="0 0 32 32">
+        <title>loop-round</title>
+        <path d="M27.802 5.197c-2.925-3.194-7.13-5.197-11.803-5.197-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322l-4.678 4.678h11v-11l-4.198 4.197z"/>
+        <path d="M29 16c0 7.18-5.82 13-13 13-3.844 0-7.298-1.669-9.678-4.322l4.678-4.678h-11v11l4.197-4.197c2.925 3.194 7.13 5.197 11.803 5.197 8.837 0 16-7.163 16-16h-3z"/>
+      </symbol>
+    </svg>
   </body>
 </html>

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/choose-pac-provider/index.js

@@ -110,7 +110,7 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
         }
         setStatusTo(
           `<span style="color:red">
-            ${err ? '🔥&#xFE0E; Ошибка!' : 'Некритичная ошибка.'}
+            ${err ? '<span class="emoji">🔥</span> Ошибка!' : 'Некритичная ошибка.'}
           </span>
           <br/>
           <span style="font-size: 0.9em; color: darkred">${message}</span>
@@ -156,10 +156,16 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
 
       };
 
+      const infoIcon = `
+        <svg class="icon"
+          style="position: relative; top: 0.08em"><use xlink:href="#icon-info"></use></svg>
+        <!--span style="font-size: 1.3em" class="emoji">🛈(looks huge)</span-->
+      `;
+
       const infoSign = function infoSign(tooltip) {
 
         return `<div class="desc">
-          <span class="info-sign">🛈</span>
+          ${infoIcon}
           <div class="tooltip">${tooltip}</div>
         </div>`;
 
@@ -173,12 +179,14 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
         ) {
           const provider = antiCensorRu.getPacProvider(providerKey);
           const li = document.createElement('li');
-          li.className = 'info-row';
+          li.classList.add('info-row', 'hor-flex');
           li.innerHTML = `
             <input type="radio" name="pacProvider" id="${providerKey}">
+            <div class="label-container">
               <label for="${providerKey}"> ${provider.label}</label>
               &nbsp;<a href class="link-button update-button"
-              id="update-${providerKey}">[обновить]</a> ` +
+                id="update-${providerKey}">[обновить]</a>
+            </div>` +
             infoSign(provider.desc);
           li.querySelector('.link-button').onclick =
             () => {
@@ -516,16 +524,20 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
           const key = conf.key;
           const iddy = 'mods-' + conf.key.replace(/([A-Z])/g, (_, p) => '-' + p.toLowerCase());
           const li = document.createElement('li');
-          li.className = 'info-row';
+          li.classList.add('info-row', 'hor-flex');
           keyToLi[key] = li;
+          const ifMultiline = key === customProxyStringKey;
           li.innerHTML = `
               <input type="checkbox" id="${iddy}" ${ conf.value ? 'checked' : '' }/>
-            <label for="${iddy}"> ${ conf.label }</label>`;
+              <div class="label-container">
+                <label for="${iddy}"> ${ conf.label }</label>
+              </div>`;
 
-          if (key !== customProxyStringKey) {
+          if (!ifMultiline) {
             li.innerHTML += infoSign(conf.desc);
           } else {
-            li.innerHTML += `<a href="${conf.url}" class="info-sign info-url">🛈</a><br/>
+            li.style.flexWrap = 'wrap';
+            li.innerHTML += `<a href="${conf.url}" class="right-bottom-icon info-url">${infoIcon}</a>
 <textarea
   spellcheck="false"
   placeholder="SOCKS5 localhost:9050; # TOR Expert