Initialize setting section for proxy.

app/renderer/css/preference.css

@@ -129,7 +129,17 @@ img.server-info-icon {
     cursor: pointer;
 }
 
-.server-info-url {
+.setting-input-key {
+    font-size: 14px;
+    height: 27px;
+    line-height: 27px;
+    font-weight: bold;
+    background: transparent;
+    flex-wrap: nowrap;
+    margin-right: 10px;
+}
+
+.setting-input-value {
     flex-grow: 1;
     font-size: 14px;
     height: 24px;
@@ -140,8 +150,8 @@ img.server-info-icon {
     max-width: 500px;
 }
 
-.server-info-value:focus {
+.setting-input-value:focus {
-    border-bottom: #388E3C 1px solid;
+    border-bottom: #7cb980 1px solid;
 }
 
 .actions-container {

app/renderer/js/pages/preference/nav.js

@@ -8,7 +8,7 @@ class PreferenceNav extends BaseComponent {
 
 		this.props = props;
 
-		this.navItems = ['General', 'Servers'];
+		this.navItems = ['General', 'Network', 'Servers'];
 
 		this.init();
 	}

app/renderer/js/pages/preference/network-section.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
+
+class NetworkSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+            <div class="settings-pane">
+                <div class="title">Proxy</div>
+                <div id="appearance-option-settings" class="settings-card">
+					<div class="setting-row" id="use-proxy-option">
+						<div class="setting-description">Connect servers through a proxy (requires reload)</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="sidebar-option">
+						<span class="setting-input-key">PAC script</span>
+						<input class="setting-input-value" placeholder=""/>
+					</div>
+					<div class="setting-row" id="sidebar-option">
+						<span class="setting-input-key">Proxy rules</span>
+						<input class="setting-input-value" placeholder=""/>
+					</div>
+					<div class="setting-row" id="sidebar-option">
+						<span class="setting-input-key">Proxy bypass rules</span>
+						<input class="setting-input-value" placeholder=""/>
+					</div>
+				</div>
+            </div>
+		`;
+	}
+
+	init() {
+		this.props.$root.innerHTML = this.template();
+		this.updateTrayOption();
+	}
+
+	updateTrayOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#use-proxy-option .setting-control'),
+			value: ConfigUtil.getConfigItem('useProxy', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('useProxy');
+				ConfigUtil.setConfigItem('useProxy', newValue);
+				this.updateTrayOption();
+			}
+		});
+	}
+}
+
+module.exports = NetworkSection;

app/renderer/js/pages/preference/new-server-form.js

@@ -14,7 +14,7 @@ class NewServerForm extends BaseComponent {
 			<div class="settings-card" style="border: solid 1px #4CAF50;">
 				<div class="server-info-right">
 					<div class="server-info-row">
-						<input class="server-info-url" autofocus placeholder="Enter the url of your Zulip server..."/>
+						<input class="setting-input-value" autofocus placeholder="Enter the url of your Zulip server..."/>
 					</div>
 					<div class="server-info-row">
 						<div class="action green server-save-action">

app/renderer/js/pages/preference/preference.js

@@ -6,6 +6,7 @@ const {ipcRenderer} = require('electron');
 const Nav = require(__dirname + '/js/pages/preference/nav.js');
 const ServersSection = require(__dirname + '/js/pages/preference/servers-section.js');
 const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
+const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
 
 class PreferenceView extends BaseComponent {
 	constructor() {
@@ -49,6 +50,12 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
+			case 'Network': {
+				this.section = new NetworkSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
 			default: break;
 		}
 		this.section.init();