Add hash router to options page, add chrome styles as file

extensions/chromium/runet-censorship-bypass/src/extension-common/manifest.tmpl.json

@@ -7,7 +7,7 @@
   "version": "0.0.${version}",
   "icons": {
     "128": "/icons/default-128.png"
-	},
+  },
   "author": "ilyaigpetrov@gmail.com",
   "homepage_url": "https://github.com/anticensorship-russia/chromium-extension",
 
@@ -43,6 +43,6 @@
   },
   "options_ui": {
      "page": "/pages/options/index.html",
-     "chrome_style": true
+     "chrome_style": false
    }
 }

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/lib/chrome-style/index.css

@@ -0,0 +1,346 @@
+/*
+ * Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ *
+ * This stylesheet is used to apply Chrome styles to extension pages that opt in
+ * to using them.
+ *
+ * These styles have been copied from ui/webui/resources/css/chrome_shared.css
+ * and ui/webui/resources/css/widgets.css *with CSS class logic removed*, so
+ * that it's as close to a user-agent stylesheet as possible.
+ *
+ * For example, extensions shouldn't be able to set a .link-button class and
+ * have it do anything.
+ *
+ * Other than that, keep this file and chrome_shared.css/widgets.cc in sync as
+ * much as possible.
+ */
+
+body {
+  color: #333;
+  cursor: default;
+  /* Note that the correct font-family and font-size are set in
+   * extension_fonts.css. */
+  /* This top margin of 14px matches the top padding on the h1 element on
+   * overlays (see the ".overlay .page h1" selector in overlay.css), which
+   * every dialogue has.
+   *
+   * Similarly, the bottom 14px margin matches the bottom padding of the area
+   * which hosts the buttons (see the ".overlay .page * .action-area" selector
+   * in overlay.css).
+   *
+   * Both have a padding left/right of 17px.
+   *
+   * Note that we're putting this here in the Extension content, rather than
+   * the WebUI element which contains the content, so that scrollbars in the
+   * Extension content don't get a 6px margin, which looks quite odd.
+   */
+  margin: 14px 17px;
+}
+
+p {
+  line-height: 1.8em;
+}
+
+h1,
+h2,
+h3 {
+  -webkit-user-select: none;
+  font-weight: normal;
+  /* Makes the vertical size of the text the same for all fonts. */
+  line-height: 1;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.3em;
+  margin-bottom: 0.4em;
+}
+
+h3 {
+  color: black;
+  font-size: 1.2em;
+  margin-bottom: 0.8em;
+}
+
+a {
+  color: rgb(17, 85, 204);
+  text-decoration: underline;
+}
+
+a:active {
+  color: rgb(5, 37, 119);
+}
+
+/* Default state **************************************************************/
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']),
+select,
+input[type='checkbox'],
+input[type='radio'] {
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+  background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  color: #444;
+  font: inherit;
+  margin: 0 1px 0 0;
+  outline: none;
+  text-shadow: 0 1px 0 rgb(240, 240, 240);
+}
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']),
+select {
+  min-height: 2em;
+  min-width: 4em;
+/*<if expr="is_win">
+  /* The following platform-specific rule is necessary to get adjacent
+   * buttons, text inputs, and so forth to align on their borders while also
+   * aligning on the text's baselines. */
+  padding-bottom: 1px;
+/*</if>*/
+}
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']) {
+  -webkit-padding-end: 10px;
+  -webkit-padding-start: 10px;
+}
+
+select {
+  -webkit-appearance: none;
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 6px;
+  /* OVERRIDE */
+  background-image: /*url(../../../ui/webui/resources/images/select.png),*/
+      linear-gradient(#ededed, #ededed 38%, #dedede);
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+html[dir='rtl'] select {
+  background-position: center left;
+}
+
+input[type='checkbox'] {
+  height: 13px;
+  position: relative;
+  vertical-align: middle;
+  width: 13px;
+}
+
+input[type='radio'] {
+  /* OVERRIDE */
+  border-radius: 100%;
+  height: 15px;
+  position: relative;
+  vertical-align: middle;
+  width: 15px;
+}
+
+/* TODO(estade): add more types here? */
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='text'],
+input[type='url'],
+input:not([type]),
+textarea {
+  border: 1px solid #bfbfbf;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: #444;
+  font: inherit;
+  margin: 0;
+  /* Use min-height to accommodate addditional padding for touch as needed. */
+  min-height: 2em;
+  padding: 3px;
+  outline: none;
+<if expr="is_win or is_macosx or is_ios">
+  /* For better alignment between adjacent buttons and inputs. */
+  padding-bottom: 4px;
+</if>
+}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+  /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
+   * of the default text in relatively spacious languages (i.e. German). */
+  min-width: 160px;
+}
+
+/* Checked ********************************************************************/
+
+input[type='checkbox']:checked::before {
+  -webkit-user-select: none;
+  background-image: url(./check.png);
+  background-size: 100% 100%;
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+input[type='radio']:checked::before {
+  background-color: #666;
+  border-radius: 100%;
+  bottom: 3px;
+  content: '';
+  display: block;
+  left: 3px;
+  position: absolute;
+  right: 3px;
+  top: 3px;
+}
+
+/* Hover **********************************************************************/
+
+:enabled:hover:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='radio'],
+    :-webkit-any(
+        button,
+        input[type='button'],
+        input[type='submit'])) {
+  background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+  border-color: rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+      inset 0 1px 2px rgba(255, 255, 255, 0.95);
+  color: black;
+}
+
+:enabled:hover:-webkit-any(select) {
+  /* OVERRIDE */
+  background-image: /*url(../../../ui/webui/resources/images/select.png)*/,
+      linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+}
+
+/* Active *********************************************************************/
+
+:enabled:active:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='radio'],
+    :-webkit-any(
+        button,
+        input[type='button'],
+        input[type='submit'])) {
+  background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+  box-shadow: none;
+  text-shadow: none;
+}
+
+:enabled:active:-webkit-any(select) {
+  /* OVERRIDE */
+  background-image: /*url(../../../ui/webui/resources/images/select.png),*/
+      linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+}
+
+/* Disabled *******************************************************************/
+
+:disabled:-webkit-any(
+    button,
+    input[type='button'],
+    input[type='submit']),
+select:disabled {
+  background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+  border-color: rgba(80, 80, 80, 0.2);
+  box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  color: #aaa;
+}
+
+select:disabled {
+  /* OVERRIDE */
+  background-image: /*url(../../../ui/webui/resources/images/disabled_select.png),*/
+      linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+}
+
+input:disabled:-webkit-any([type='checkbox'],
+                           [type='radio']) {
+  opacity: .75;
+}
+
+input:disabled:-webkit-any([type='password'],
+                           [type='search'],
+                           [type='text'],
+                           [type='url'],
+                           :not([type])) {
+  color: #999;
+}
+
+/* Focus **********************************************************************/
+
+:enabled:focus:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='number'],
+    input[type='password'],
+    input[type='radio'],
+    input[type='search'],
+    input[type='text'],
+    input[type='url'],
+    input:not([type]),
+    :-webkit-any(
+         button,
+         input[type='button'],
+         input[type='submit'])) {
+  /* OVERRIDE */
+  -webkit-transition: border-color 200ms;
+  /* We use border color because it follows the border radius (unlike outline).
+   * This is particularly noticeable on mac. */
+  border-color: rgb(77, 144, 254);
+  outline: none;
+}
+
+/* Checkbox/radio helpers ******************************************************
+ *
+ * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
+ * these classes with the markup structure:
+ *
+ *   <div class="checkbox">
+ *     <label>
+ *       <input type="checkbox"></input>
+ *       <span>
+ *     </label>
+ *   </div>
+ */
+
+:-webkit-any(.checkbox, .radio) label {
+  /* Don't expand horizontally: <http://crbug.com/112091>. */
+  align-items: center;
+  display: inline-flex;
+  padding-bottom: 7px;
+  padding-top: 7px;
+}
+
+:-webkit-any(.checkbox, .radio) label input {
+  flex-shrink: 0;
+}
+
+:-webkit-any(.checkbox, .radio) label input ~ span {
+  -webkit-margin-start: 0.6em;
+  /* Make sure long spans wrap at the same horizontal position they start. */
+  display: block;
+}
+
+:-webkit-any(.checkbox, .radio) label:hover {
+  color: black;
+}
+
+label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
+  color: #999;
+}

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/lib/links.txt

@@ -0,0 +1 @@
+ChromeStyle: https://cs.chromium.org/chromium/src/extensions/renderer/resources/extension.css

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/on-error-menu/index.html

@@ -3,10 +3,29 @@
   <head>
     <meta charset="utf-8">
     <title>Обход ошибки</title>
-    <style></style>
+    <style>
+      html, body, ol, ul, li {
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        margin: 1em;
+      }
+      .nowrap {
+        display: block;
+        white-space: nowrap;
+        word-break: keep-all;
+      }
+      li {
+        margin: 0.5em 1em;
+      }
+      a:not(:hover) {
+        text-decoration: none;
+      }
+    </style>
   </head>
   <body>
-    <ol id="menuItems"></ol>
+    <ol id="menuItems" class="nowrap"></ol>
     <script src="./index.js"></script>
     <script src="../lib/keep-links-clickable.js"></script>
   </body>

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

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Настройки</title>
+    <link rel="stylesheet" href="../lib/chrome-style/index.css">
     <style><!-- Don't delete this mount point! --></style>
   </head>
   <body>

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

@@ -25,6 +25,14 @@ export default function getProxyEditor(theState) {
       height: 100%;
     }
 
+    table.editor input,
+    table.editor button,
+    table.editor select
+    {
+      min-width: 0;
+      min-height: 0;
+    }
+
     /* ADD PANEL */
     table.editor tr.addPanel td,
     table.editor tr.addPanel td input
@@ -32,10 +40,14 @@ export default function getProxyEditor(theState) {
       padding: 0;
     }
     table.editor tr.addPanel td > select[name="proxyType"],
-    table.editor tr.addPanel td:nth-last-child(2) /* port */
+    table.editor tr.addPanel td:nth-last-child(2) input /* PORT */
     {
       font-size: 0.9em;
     }
+    table.editor tr.addPanel td:nth-last-child(2) input /* PORT */
+    {
+      min-width: 4em;
+    }
     /* PROXY ROW */
     table.editor tr.proxyRow td:nth-child(2), /* type */
     table.editor tr.proxyRow td:nth-child(4)  /* port */
@@ -68,8 +80,6 @@ export default function getProxyEditor(theState) {
     /* BUTTONS */
     table.editor input[type="submit"],
     table.editor button {
-      min-width: 0;
-      min-height: 0;
       width: 100%;
       padding: 0;
       border: none;
@@ -278,7 +288,7 @@ export default function getProxyEditor(theState) {
                 <td>
                   {/* LAST-1: PORT */}
                   <input required type="number" disabled={props.ifInputsDisabled}
-                    class={scopedCss.noPad + ' ' + scopedCss.padLeft} style="min-width: 4em"
+                    class={scopedCss.noPad + ' ' + scopedCss.padLeft}
                     placeholder="9150"
                     min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}"
                     name="port"

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

@@ -114,8 +114,9 @@ export default function getTabPannel({ flags, baseCss }) {
     constructor(props) {
 
       super(props);
+      const fromHash = window.location.hash.substr(1)
       this.state = {
-        chosenTabIndex: 0,
+        chosenTabKeyRaw: fromHash,
       };
 
     }
@@ -123,7 +124,17 @@ export default function getTabPannel({ flags, baseCss }) {
     render(props) {
 
       const indexedTabs = props.tabs.filter((tab) => tab.label);
-      const chosenTabKey = indexedTabs[this.state.chosenTabIndex].key;
+
+      let [chosenTabIndex] = indexedTabs
+        .map((tab, index) => tab.key === this.state.chosenTabKeyRaw ? index : false)
+        .filter((index) => index !== false);
+      if (!(chosenTabIndex >= 0)) {
+        chosenTabIndex = 0;
+      }
+
+      const chosenTabKey = indexedTabs[chosenTabIndex].key;
+      console.log(chosenTabKey, chosenTabIndex, indexedTabs);
+      window.location.hash = chosenTabKey;
 
       return (
         <div>
@@ -132,8 +143,8 @@ export default function getTabPannel({ flags, baseCss }) {
               {
                 indexedTabs.map((tab, index) =>
                   (<li>
-                    <input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={this.state.chosenTabIndex === index} class="off"/>
+                    <input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={chosenTabIndex === index} class="off"/>
-                    <label onClick={() => this.setState({chosenTabIndex: index})} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label>
+                    <label onClick={() => this.setState({chosenTabKeyRaw: tab.key})} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label>
                   </li>)
                 )
               }

extensions/chromium/runet-censorship-bypass/src/extension-full/80-error-menu.js

@@ -9,24 +9,26 @@ window.chrome.browserAction.setBadgeBackgroundColor({
 chrome.webNavigation.onErrorOccurred.addListener((details) => {
 
   const tabId = details.tabId;
-  if (!(tabId > 0)) {
+  console.log(details.url, details.error, details);
-    alert(tabId);
+  if ( !(details.frameId === 0 && tabId >= 0) ||
+        [
+          'net::ERR_BLOCKED_BY_CLIENT',
+          'net::ERR_ABORTED',
+        ].includes(details.error) ) {
     return;
   }
 
-  //console.log('SETTING 2', details.tabId);
+  console.log(details.url, details.error, details);
+
   chrome.browserAction.setPopup({
     tabId,
-    popup: './pages/on-error-menu/index.html',
+    popup: './pages/options/index.html#exceptions',
   });
 
-  /*
   window.chrome.browserAction.setBadgeBackgroundColor({
     tabId,
-    color: '#09f911',
+    color: '#4285f4',
   });
-  */
-
   chrome.browserAction.setBadgeText({
     tabId,
     text: '●●●',

extensions/chromium/runet-censorship-bypass/src/extension-full/85-block-informer.js

@@ -18,10 +18,6 @@
 
   const chromified = window.utils.chromified;
 
-  window.chrome.browserAction.setBadgeBackgroundColor({
-    color: '#db4b2f',
-  });
-
   const _tabCallbacks = {};
 
   const afterTabUpdated = function afterTabUpdated(tabId, cb) {
@@ -45,6 +41,15 @@
 
   chrome.tabs.onUpdated.addListener( onTabUpdate );
 
+  const setRedBadge = (opts) => {
+
+    window.chrome.browserAction.setBadgeBackgroundColor({
+      color: '#db4b2f',
+    });
+    chrome.browserAction.setBadgeText(opts);
+
+  };
+
   const updateTitle = function updateTitle(requestDetails, proxyHost, cb) {
 
     chrome.browserAction.getTitle(
@@ -71,7 +76,7 @@
             + proxyTitle + '\n' + indent + proxyHost;
           ifShouldUpdateTitle = true;
 
-          chrome.browserAction.setBadgeText({
+          setRedBadge({
             tabId: requestDetails.tabId,
             text: requestDetails.type === 'main_frame' ? '1' : '%1',
           });
@@ -101,13 +106,11 @@
               {tabId: requestDetails.tabId},
               (result) => {
 
-                chrome.browserAction.setBadgeText(
+                setRedBadge({
-                  {
+                  tabId: requestDetails.tabId,
-                    tabId: requestDetails.tabId,
+                  text: (isNaN( result.charAt(0)) && result.charAt(0) || '')
-                    text: (isNaN( result.charAt(0)) && result.charAt(0) || '')
+                    + (hostsProxiesPair[0].split('\n').length - 1),
-                      + (hostsProxiesPair[0].split('\n').length - 1),
+                });
-                  }
-                );
                 return _cb();
 
               }