[tor-commits] [tor-launcher/master] Use wizard-based settings UI before initial bootstrap (work in progress).

brade at torproject.org brade at torproject.org
Wed Apr 24 15:24:17 UTC 2013


commit 45c0fe47e9fd143c04ea9b07333d93cbc18c5e7b
Author: Kathy Brade <brade at torproject.org>
Date:   Wed Apr 24 11:23:11 2013 -0400

    Use wizard-based settings UI before initial bootstrap (work in progress).
---
 src/chrome/content/network-settings-overlay.xul |   93 +++++++++
 src/chrome/content/network-settings-wizard.xul  |  127 ++++++++++++
 src/chrome/content/network-settings.js          |  252 +++++++++++++++++++----
 src/chrome/content/network-settings.xul         |   97 +--------
 src/chrome/locale/en/network-settings.dtd       |   24 ++-
 src/chrome/skin/network-settings.css            |   53 ++++--
 src/chrome/skin/tbb-logo.png                    |  Bin 14780 -> 15395 bytes
 src/components/tl-process.js                    |    6 +-
 8 files changed, 499 insertions(+), 153 deletions(-)

diff --git a/src/chrome/content/network-settings-overlay.xul b/src/chrome/content/network-settings-overlay.xul
new file mode 100644
index 0000000..0061d5f
--- /dev/null
+++ b/src/chrome/content/network-settings-overlay.xul
@@ -0,0 +1,93 @@
+<?xml version="1.0"?>
+<!--
+   - Copyright (c) 2013, The Tor Project, Inc.
+   - See LICENSE for licensing information.
+   - vim: set sw=2 sts=2 ts=8 et syntax=xml:
+  -->
+
+<!DOCTYPE overlay SYSTEM "chrome://torlauncher/locale/network-settings.dtd">
+
+<overlay id="TorNetworkSettingsOverlay"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <groupbox id="proxySpecificSettings">
+    <grid flex="1">
+      <columns>
+        <column/>
+        <column/>
+      </columns>
+      <rows>
+        <row align="center">
+          <label value="&torsettings.useProxy.address;" control="proxyAddr"
+                 style="text-align:right" />
+          <hbox align="center">
+            <textbox id="proxyAddr" size="20" flex="1"
+                     placeholder="&torsettings.useProxy.address.placeholder;" />
+            <separator orient="vertical" />
+            <label value="&torsettings.useProxy.port;" control="proxyPort"/>
+            <textbox id="proxyPort" size="4" />
+          </hbox>
+        </row>
+        <row align="center">
+          <label value="&torsettings.useProxy.username;"
+                 control="proxyUsername" style="text-align:right" />
+          <hbox align="center">
+            <textbox id="proxyUsername" size="14" flex="1"
+                     placeholder="&torsettings.optional;" />
+            <separator orient="vertical" />
+            <label value="&torsettings.useProxy.password;"
+                   control="proxyPassword"/>
+            <textbox id="proxyPassword" size="14" type="password"
+                     placeholder="&torsettings.optional;" />
+          </hbox>
+        </row>
+        <row align="center">
+          <label value="&torsettings.useProxy.type;" control="proxyType"
+                 style="text-align:right" />
+          <hbox align="center">
+            <menulist id="proxyType">
+              <menupopup id="proxyType_menuPopup">
+                <menuitem label="&torsettings.useProxy.type.socks4;"
+                          value="SOCKS4"/>
+                <menuitem label="&torsettings.useProxy.type.socks5;"
+                          value="SOCKS5"/>
+                <menuitem label="&torsettings.useProxy.type.http;"
+                          value="HTTP"/>
+              </menupopup>
+            </menulist>
+          </hbox>
+        </row>
+      </rows>
+    </grid>
+  </groupbox>
+
+  <groupbox id="firewallSpecificSettings">
+    <hbox align="center">
+      <label value="&torsettings.firewall.allowedPorts;"
+             control="firewallAllowedPorts"/>
+      <textbox id="firewallAllowedPorts" value="80,443" />
+    </hbox>
+  </groupbox>
+
+  <groupbox id="bridgeSpecificSettings">
+    <hbox>
+      <vbox flex="1">
+        <hbox align="center">
+          <button dlgtype="help" oncommand="onOpenHelp()" />
+          <label value="&torsettings.useBridges.label;" control="bridgeList"/>
+        </hbox>
+        <textbox id="bridgeList" multiline="true" rows="3" />
+      </vbox>
+<!--
+      <vbox>
+        <button id="copyBridgeList" label="Copy TODO" style="width: 20px"
+                oncommand="copyBridgeList();"/>
+        <button id="pasteBridgeList" label="Paste TODO" style="width: 20px"
+                oncommand="pasteBridgeList();"/>
+      </vbox>
+-->
+    </hbox>
+  </groupbox>
+</overlay>
+
+
diff --git a/src/chrome/content/network-settings-wizard.xul b/src/chrome/content/network-settings-wizard.xul
new file mode 100644
index 0000000..7f27e06
--- /dev/null
+++ b/src/chrome/content/network-settings-wizard.xul
@@ -0,0 +1,127 @@
+<?xml version="1.0"?>
+<!--
+   - Copyright (c) 2013, The Tor Project, Inc.
+   - See LICENSE for licensing information.
+   - vim: set sw=2 sts=2 ts=8 et syntax=xml:
+  -->
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="chrome://torlauncher/skin/network-settings.css"
+                 type="text/css"?>
+
+<!DOCTYPE overlay SYSTEM "chrome://torlauncher/locale/network-settings.dtd">
+
+<?xul-overlay href="chrome://torlauncher/content/network-settings-overlay.xul"?>
+
+<wizard id="TorNetworkSettings"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        title="&torsettings.dialog.title;"
+        windowtype="TorLauncher:NetworkSettings"
+        persist="screenX screenY"
+        onwizardfinish="return applySettings();"
+        onwizardcancel="return onCancel();"
+        onload="initDialog();">
+
+  <script type="application/x-javascript"
+          src="chrome://torlauncher/content/network-settings.js"/>
+
+  <wizardpage label=" " pageid="proxy" next="firewall"
+              onpageadvanced="return onWizardProxyNext(this);">
+    <hbox class="tbb-header">
+      <vbox class="tbb-logo-box" align="start">
+        <image class="tbb-logo" />
+      </vbox>
+      <separator orient="vertical" />
+      <groupbox flex="1">
+        <description>&torsettings.prompt;</description>
+        <separator orient="horizontal" class="thin" />
+      </groupbox>
+    </hbox>
+    <separator />
+    <hbox>
+      <vbox flex="1">
+        <label class="question">&torSettings.proxyQuestion;</label>
+        <radiogroup id="proxyRadioGroup">
+          <radio id="proxyRadioYes" label="&torSettings.yes;" />
+          <radio id="proxyRadioNo" label="&torSettings.no;" selected="true" />
+        </radiogroup>
+        <description class="questionHelp">&torSettings.proxyHelp;
+        </description>
+      </vbox>
+    </hbox>
+  </wizardpage>
+
+  <wizardpage pageid="proxyYES" next="firewall"
+              onpageadvanced="return (getAndValidateProxySettings() != null)">
+    <vbox class="tbb-logo-box" align="start">
+      <image class="tbb-logo" />
+    </vbox>
+    <separator />
+    <label class="instructions">&torSettings.enterProxy;</label>
+    <groupbox id="proxySpecificSettings" />
+  </wizardpage>
+
+  <wizardpage pageid="firewall" next="bridges"
+              onpageadvanced="return onWizardFirewallNext(this);">
+    <vbox class="tbb-logo-box" align="start">
+      <image class="tbb-logo" />
+    </vbox>
+    <separator />
+    <hbox>
+      <vbox flex="1">
+        <label class="question">&torSettings.firewallQuestion;</label>
+        <radiogroup id="firewallRadioGroup">
+          <radio id="firewallRadioYes" label="&torSettings.yes;" />
+          <radio id="firewallRadioNo" label="&torSettings.no;" selected="true" />
+        </radiogroup>
+        <description class="questionHelp">&torSettings.firewallHelp;
+        </description>
+      </vbox>
+    </hbox>
+  </wizardpage>
+
+  <wizardpage pageid="firewallYES" next="bridges"
+              onpageadvanced="return (getAndValidateFirewallSettings() != null)">
+    <vbox class="tbb-logo-box" align="start">
+      <image class="tbb-logo" />
+    </vbox>
+    <separator />
+    <vbox>
+      <label class="instructions">&torSettings.enterFirewall;</label>
+      <groupbox id="firewallSpecificSettings" />
+    </vbox>
+  </wizardpage>
+
+  <wizardpage label=" " pageid="bridges">
+    <vbox class="tbb-logo-box" align="start">
+      <image class="tbb-logo" />
+    </vbox>
+    <separator />
+    <vbox>
+      <label class="question">&torSettings.bridgeQuestion;</label>
+      <groupbox id="bridgeSpecificSettings" />
+    </vbox>
+  </wizardpage>
+
+  <wizardpage label=" " pageid="startingTor" next="proxy">
+    <spring flex="1" />
+    <hbox>
+      <spring flex="1" />
+      <label value="&torsettings.startingTor;"/>
+      <spring flex="1" />
+    </hbox>
+    <spring flex="1" />
+  </wizardpage>
+
+  <wizardpage label=" " pageid="errorPanel" next="notUsed">
+  </wizardpage>
+
+  <wizardpage class="help"  label=" " pageid="bridgeHelp" next="notUsed"
+              onpageadvanced="closeHelp(); return false;">
+    <hbox align="middle"><label>&torsettings.bridgeHelpTitle;</label></hbox>
+    <description>&torsettings.bridgeHelp1;</description>
+    <description>&torsettings.bridgeHelp2;</description>
+    <description>&torsettings.bridgeHelp3;</description>
+  </wizardpage>
+
+</wizard>
diff --git a/src/chrome/content/network-settings.js b/src/chrome/content/network-settings.js
index f8dd976..73edd8d 100644
--- a/src/chrome/content/network-settings.js
+++ b/src/chrome/content/network-settings.js
@@ -19,6 +19,9 @@ const kTorProcessReadyTopic = "TorProcessIsReady";
 const kTorProcessExitedTopic = "TorProcessExited";
 const kTorProcessDidNotStartTopic = "TorProcessDidNotStart";
 
+const kWizardProxyRadioGroup = "proxyRadioGroup";
+const kWizardFirewallRadioGroup = "firewallRadioGroup";
+
 const kUseProxyCheckbox = "useProxy";
 const kProxyTypeMenulist = "proxyType";
 const kProxyAddr = "proxyAddr";
@@ -47,7 +50,6 @@ var gObsService = null;
 var gIsInitialBootstrap = false;
 var gIsBootstrapComplete = false;
 var gRestoreAfterHelpPanelID = null;
-var gRestoreAfterCancelBtnLabel = null;
 
 
 function initDialog()
@@ -55,14 +57,16 @@ function initDialog()
   gIsInitialBootstrap = window.arguments[0];
   if (gIsInitialBootstrap)
   {
-    document.documentElement.setAttribute("class", "initialBootstrap");
-
     var cancelBtn = document.documentElement.getButton("cancel");
-    var quitKey = (TorLauncherUtil.isWindows) ? "quit_win" : "quit";
-    cancelBtn.label = TorLauncherUtil.getLocalizedString(quitKey);
+    if (cancelBtn)
+    {
+      var quitKey = (TorLauncherUtil.isWindows) ? "quit_win" : "quit";
+      cancelBtn.label = TorLauncherUtil.getLocalizedString(quitKey);
+    }
 
     var okBtn = document.documentElement.getButton("accept");
-    okBtn.label = TorLauncherUtil.getLocalizedString("connect");
+    if (okBtn)
+      okBtn.label = TorLauncherUtil.getLocalizedString("connect");
   }
 
   try
@@ -84,16 +88,30 @@ function initDialog()
   gObsService = Cc["@mozilla.org/observer-service;1"]
                   .getService(Ci.nsIObserverService);
 
+  var haveWizard = (getWizard() != null);
+  if (haveWizard)
+  {
+    var finishBtn = document.documentElement.getButton("finish");
+    if (finishBtn)
+      finishBtn.label = TorLauncherUtil.getLocalizedString("connect");
+  }
+
   if (TorLauncherUtil.shouldStartAndOwnTor &&
       !gTorProcessService.TorIsProcessReady)
   {
     showPanel("startingTor");
+    if (haveWizard)
+    {
+      showOrHideButton("back", false, false);
+      showOrHideButton("next", false, false);
+    }
+
     gObsService.addObserver(gObserver, kTorProcessReadyTopic, false);
     gObsService.addObserver(gObserver, kTorProcessExitedTopic, false);
     gObsService.addObserver(gObserver, kTorProcessDidNotStartTopic, false);
   }
   else
-  { 
+  {
     showPanel("settings");
     readTorSettings();
   }
@@ -102,6 +120,37 @@ function initDialog()
 }
 
 
+function getWizard()
+{
+  var elem = document.getElementById("TorNetworkSettings");
+  return (elem && (elem.tagName == "wizard")) ? elem : null;
+}
+
+
+function onWizardProxyNext(aWizPage)
+{
+  if (aWizPage)
+  {
+    var hasProxy = getElemValue("proxyRadioYes", false);
+    aWizPage.next = (hasProxy) ? "proxyYES" : "firewall";
+  }
+
+  return true;
+}
+
+
+function onWizardFirewallNext(aWizPage)
+{
+  if (aWizPage)
+  {
+    var hasFirewall = getElemValue("firewallRadioYes", false);
+    aWizPage.next = (hasFirewall) ? "firewallYES" : "bridges";
+  }
+
+  return true;
+}
+
+
 var gObserver = {
   observe: function(aSubject, aTopic, aData)
   {
@@ -111,7 +160,13 @@ var gObserver = {
 
     if (kTorProcessReadyTopic == aTopic)
     {
-      showPanel("settings");
+      var haveWizard = (getWizard() != null);
+      showPanel(haveWizard ? "proxy" : "settings");
+      if (haveWizard)
+      {
+        showOrHideButton("back", true, false);
+        showOrHideButton("next", true, false);
+      }
       readTorSettings();
     }
     else if (kTorProcessDidNotStartTopic == aTopic)
@@ -159,29 +214,73 @@ function showPanel(aPanelID)
 {
   var deckElem = document.getElementById("deck");
   if (deckElem)
+  {
     deckElem.selectedPanel = document.getElementById(aPanelID);
+    showOrHideButton("extra1", (aPanelID != "bridgeHelp"), false);
+  }
+  else
+    getWizard().goTo(aPanelID);
 
   showOrHideButton("accept", (aPanelID == "settings"), true);
-  showOrHideButton("extra1", (aPanelID != "bridgeHelp"), false);
 }
 
 
 function showOrHideButton(aID, aShow, aFocus)
 {
-  if (!aID)
-    return;
+  var btn = setButtonAttr(aID, "hidden", !aShow);
+  if (btn && aFocus)
+    btn.focus()
+}
+
+
+// Returns the button element (if found).
+function enableButton(aID, aEnable)
+{
+  return setButtonAttr(aID, "disabled", !aEnable);
+}
+
+
+// Returns the button element (if found).
+function setButtonAttr(aID, aAttr, aValue)
+{
+  if (!aID || !aAttr)
+    return null;
+
+  var btn = document.documentElement.getButton(aID);
+  if (btn)
+  {
+    if (aValue)
+      btn.setAttribute(aAttr, aValue);
+    else
+      btn.removeAttribute(aAttr);
+  }
+
+  return btn;
+}
+
 
+function overrideButtonLabel(aID, aLabelKey)
+{
+  var btn = document.documentElement.getButton(aID);
+  if (btn)
+  {
+    btn.setAttribute("origLabel", btn.label);
+    btn.label = TorLauncherUtil.getLocalizedString(aLabelKey);
+  }
+}
+
+
+function restoreButtonLabel(aID)
+{
   var btn = document.documentElement.getButton(aID);
   if (btn)
   {
-    if (aShow)
+    var oldLabel = btn.getAttribute("origLabel");
+    if (oldLabel)
     {
-      btn.removeAttribute("hidden");
-      if (aFocus)
-        btn.focus()
+      btn.label = oldLabel;
+      btn.removeAttribute("origLabel");
     }
-    else
-      btn.setAttribute("hidden", true);
   }
 }
 
@@ -219,20 +318,21 @@ function onOpenHelp()
     return;
 
   var deckElem = document.getElementById("deck");
-  if (!deckElem)
-    return;
+  if (deckElem)
+    gRestoreAfterHelpPanelID = deckElem.selectedPanel.id;
+  else
+    gRestoreAfterHelpPanelID = getWizard().currentPage.pageid;
 
-  gRestoreAfterHelpPanelID = deckElem.selectedPanel.id;
-  var cancelBtn = document.documentElement.getButton("cancel");
-  if (cancelBtn)
+  if (getWizard())
   {
-    gRestoreAfterCancelBtnLabel = cancelBtn.label;
-    cancelBtn.label = TorLauncherUtil.getLocalizedString("done");
+    showOrHideButton("cancel", false, false);
+    showOrHideButton("back", false, false);
+    overrideButtonLabel("next", "done");
   }
   else
-    gRestoreAfterCancelBtnLabel = null;
+    overrideButtonLabel("cancel", "done");
 
-    showPanel("bridgeHelp");
+  showPanel("bridgeHelp");
 }
 
 
@@ -241,11 +341,15 @@ function closeHelp()
   if (!gRestoreAfterHelpPanelID)  // Already closed?
     return;
 
-  var cancelBtn = document.documentElement.getButton("cancel");
-  if (cancelBtn && gRestoreAfterCancelBtnLabel)
-    cancelBtn.label = gRestoreAfterCancelBtnLabel;
-  gRestoreAfterCancelBtnLabel = null;
-  
+  if (getWizard())
+  {
+    showOrHideButton("cancel", true, false);
+    showOrHideButton("back", true, false);
+    restoreButtonLabel("next");
+  }
+  else
+    restoreButtonLabel("cancel");
+
   showPanel(gRestoreAfterHelpPanelID);
   gRestoreAfterHelpPanelID = null;
 }
@@ -310,7 +414,9 @@ function initProxySettings()
     }
   }
 
-  setElemValue(kUseProxyCheckbox, (proxyType != undefined));
+  var haveProxy = (proxyType != undefined);
+  setYesNoRadioValue(kWizardProxyRadioGroup, haveProxy);
+  setElemValue(kUseProxyCheckbox, haveProxy);
   setElemValue(kProxyTypeMenulist, proxyType);
 
   var proxyAddr, proxyPort;
@@ -354,7 +460,9 @@ function initFirewallSettings()
     }
   }
 
-  setElemValue(kUseFirewallPortsCheckbox, (allowedPorts != undefined));
+  var haveFirewall = (allowedPorts != undefined);
+  setYesNoRadioValue(kWizardFirewallRadioGroup, haveFirewall);
+  setElemValue(kUseFirewallPortsCheckbox, haveFirewall);
   if (allowedPorts)
     setElemValue(kFirewallAllowedPorts, allowedPorts);
 
@@ -435,6 +543,17 @@ function onProgressDialogClose(aBootstrapCompleted)
 // Returns true if settings were successfully applied.
 function applyProxySettings()
 {
+  var settings = getAndValidateProxySettings();
+  if (!settings)
+    return false;
+
+  return this.setConfAndReportErrors(settings);
+}
+
+
+// Return a settings object if successful and null if not.
+function getAndValidateProxySettings()
+{
   // TODO: validate user-entered data.  See Vidalia's NetworkPage::save()
 
   var settings = {};
@@ -446,7 +565,8 @@ function applyProxySettings()
   settings[kTorConfKeyHTTPSProxyAuthenticator] = null;
 
   var proxyType, proxyAddrPort, proxyUsername, proxyPassword;
-  var useProxy = getElemValue(kUseProxyCheckbox, false);
+  var useProxy = (getWizard()) ? getYesNoRadioValue(kWizardProxyRadioGroup)
+                               : getElemValue(kUseProxyCheckbox, false);
   if (useProxy)
   {
     proxyAddrPort = createColonStr(getElemValue(kProxyAddr, null),
@@ -454,14 +574,14 @@ function applyProxySettings()
     if (!proxyAddrPort)
     {
       reportValidationError("error_proxy_addr_missing");
-      return false;
+      return null;
     }
 
     proxyType = getElemValue(kProxyTypeMenulist, null);
     if (!proxyType)
     {
       reportValidationError("error_proxy_type_missing");
-      return false;
+      return null;
     }
 
     if ("SOCKS4" != proxyType)
@@ -489,7 +609,7 @@ function applyProxySettings()
                                   createColonStr(proxyUsername, proxyPassword);
   }
 
-  return this.setConfAndReportErrors(settings);
+  return settings;
 } // applyProxySettings
 
 
@@ -502,12 +622,25 @@ function reportValidationError(aStrKey)
 // Returns true if settings were successfully applied.
 function applyFirewallSettings()
 {
+  var settings = getAndValidateFirewallSettings();
+  if (!settings)
+    return false;
+
+  return this.setConfAndReportErrors(settings);
+}
+
+
+// Return a settings object if successful and null if not.
+function getAndValidateFirewallSettings()
+{
   // TODO: validate user-entered data.  See Vidalia's NetworkPage::save()
 
   var settings = {};
   settings[kTorConfKeyReachableAddresses] = null;
 
-  var useFirewallPorts = getElemValue(kUseFirewallPortsCheckbox, false);
+  var useFirewallPorts = (getWizard())
+                            ? getYesNoRadioValue(kWizardFirewallRadioGroup)
+                            : getElemValue(kUseFirewallPortsCheckbox, false);
   var allowedPorts = getElemValue(kFirewallAllowedPorts, null);
   if (useFirewallPorts && allowedPorts)
   {
@@ -529,25 +662,37 @@ function applyFirewallSettings()
       settings[kTorConfKeyReachableAddresses] = portsConfStr;
   }
 
-  return this.setConfAndReportErrors(settings);
+  return settings;
 }
 
 
 // Returns true if settings were successfully applied.
 function applyBridgeSettings()
 {
+  var settings = getAndValidateBridgeSettings();
+  if (!settings)
+    return false;
+
+  return this.setConfAndReportErrors(settings);
+}
+
+
+// Return a settings object if successful and null if not.
+function getAndValidateBridgeSettings()
+{
   var settings = {};
   settings[kTorConfKeyUseBridges] = null;
   settings[kTorConfKeyBridgeList] = null;
 
-  var useBridges = getElemValue(kUseBridgesCheckbox, false);
   var bridgeStr = getElemValue(kBridgeList, null);
+  var useBridges = (getWizard()) ? (bridgeStr && (0 != bridgeStr.length))
+                                  : getElemValue(kUseBridgesCheckbox, false);
 
   var bridgeList = parseAndValidateBridges(bridgeStr);
   if (useBridges && !bridgeList)
   {
     reportValidationError("error_bridges_missing");
-    return false;
+    return null;
   }
 
   setElemValue(kBridgeList, bridgeList);
@@ -557,7 +702,7 @@ function applyBridgeSettings()
     settings[kTorConfKeyBridgeList] = bridgeList;
   }
 
-  return this.setConfAndReportErrors(settings);
+  return settings;
 }
 
 
@@ -665,7 +810,8 @@ function setElemValue(aID, aValue)
 }
 
 
-// Returns a Boolean (for checkboxes) or a string (textbox and menulist).
+// Returns a Boolean (for checkboxes/radio buttons) or a
+// string (textbox and menulist).
 // Leading and trailing white space is trimmed from strings.
 function getElemValue(aID, aDefaultValue)
 {
@@ -678,6 +824,9 @@ function getElemValue(aID, aDefaultValue)
       case "checkbox":
         rv = elem.checked;
         break;
+      case "radio":
+        rv = elem.selected;
+        break;
       case "textbox":
       case "menulist":
         rv = elem.value;
@@ -692,6 +841,23 @@ function getElemValue(aID, aDefaultValue)
 }
 
 
+// This assumes that first radio button is yes.
+function setYesNoRadioValue(aGroupID, aIsYes)
+{
+  var elem = document.getElementById(aGroupID);
+  if (elem)
+    elem.selectedIndex = (aIsYes) ? 0 : 1;
+}
+
+
+// This assumes that first radio button is yes.
+function getYesNoRadioValue(aGroupID)
+{
+  var elem = document.getElementById(aGroupID);
+  return (elem) ? (0 == elem.selectedIndex) : false;
+}
+
+
 function toggleElemUI(aElem)
 {
   if (!aElem)
diff --git a/src/chrome/content/network-settings.xul b/src/chrome/content/network-settings.xul
index ddd2b86..7de2f60 100644
--- a/src/chrome/content/network-settings.xul
+++ b/src/chrome/content/network-settings.xul
@@ -11,6 +11,8 @@
 
 <!DOCTYPE overlay SYSTEM "chrome://torlauncher/locale/network-settings.dtd">
 
+<?xul-overlay href="chrome://torlauncher/content/network-settings-overlay.xul"?>
+
 <dialog id="TorNetworkSettings"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&torsettings.dialog.title;"
@@ -30,110 +32,25 @@
   <deck id="deck">
     <vbox id="settings">
       <vbox>
-        <hbox id="tbb-header">
-          <vbox>
-            <spacer flex="1" />
-            <image id="tbb-logo" />
-            <spacer flex="1" />
-          </vbox>
-          <separator orient="vertical" />
-          <groupbox>
-            <description>&torsettings.prompt1;</description>
-            <separator orient="horizontal" class="thin" />
-            <description>&torsettings.prompt2;</description>
-            <description>&torsettings.prompt3;</description>
-            <description>&torsettings.prompt4;</description>
-          </groupbox>
-        </hbox>
         <separator orient="horizontal" class="thin" />
         <checkbox id="useProxy" groupboxID="proxySpecificSettings"
                   label="&torsettings.useProxy.checkbox;"
                   oncommand="toggleElemUI(this)"/>
-        <groupbox id="proxySpecificSettings">
-          <grid flex="1">
-            <columns>
-              <column/>
-              <column/>
-            </columns>
-            <rows>
-              <row align="center">
-                <label value="&torsettings.useProxy.address;" control="proxyAddr"
-                       style="text-align:right" />
-                <hbox align="center">
-                  <textbox id="proxyAddr" size="30" flex="1" />
-                  <label value="&torsettings.useProxy.port;" control="proxyPort"/>
-                  <textbox id="proxyPort" size="5" />
-                </hbox>
-              </row>
-              <row align="center">
-                <label value="&torsettings.useProxy.username;"
-                       control="proxyUsername" style="text-align:right" />
-                <hbox align="center">
-                  <textbox id="proxyUsername" flex="1" />
-                  <label value="&torsettings.useProxy.password;"
-                         control="proxyPassword"/>
-                  <textbox id="proxyPassword" type="password" />
-                </hbox>
-              </row>
-              <row align="center">
-                <label value="&torsettings.useProxy.type;" control="proxyType"
-                       style="text-align:right" />
-                <hbox align="center">
-                  <menulist id="proxyType">
-                    <menupopup id="proxyType_menuPopup">
-                      <menuitem label="&torsettings.useProxy.type.socks4;"
-                                value="SOCKS4"/>
-                      <menuitem label="&torsettings.useProxy.type.socks5;"
-                                value="SOCKS5"/>
-                      <menuitem label="&torsettings.useProxy.type.http;"
-                                value="HTTP"/>
-                    </menupopup>
-                  </menulist>
-                </hbox>
-              </row>
-            </rows>
-          </grid>
-        </groupbox>
+        <groupbox id="proxySpecificSettings" />
       </vbox>
 
       <vbox>
         <checkbox id="useFirewallPorts" groupboxID="firewallSpecificSettings"
                   label="&torsettings.firewall.checkbox;"
                   oncommand="toggleElemUI(this)"/>
-        <groupbox id="firewallSpecificSettings">
-          <hbox align="center">
-            <label value="&torsettings.firewall.allowedPorts;"
-                   control="firewallAllowedPorts"/>
-            <textbox id="firewallAllowedPorts" value="80,443" />
-          </hbox>
-        </groupbox>
+        <groupbox id="firewallSpecificSettings" />
       </vbox>
 
       <vbox>
         <checkbox id="useBridges" groupboxID="bridgeSpecificSettings"
                   label="&torsettings.useBridges.checkbox;"
                   oncommand="toggleElemUI(this);" />
-        <groupbox id="bridgeSpecificSettings">
-          <hbox>
-            <vbox flex="1">
-              <hbox align="center">
-                <button dlgtype="help"/>
-                <label value="&torsettings.useBridges.label;" control="bridgeList"/>
-              </hbox>
-              <textbox id="bridgeList" multiline="true" rows="4" />
-            </vbox>
-    <!--
-            <vbox>
-              <button id="copyBridgeList" label="Copy TODO" style="width: 20px"
-                      oncommand="copyBridgeList();"/>
-              <button id="pasteBridgeList" label="Paste TODO" style="width: 20px"
-                      oncommand="pasteBridgeList();"/>
-              <button id="howToFindBridges" label="How can I find bridges? TODO" style="width: 20px"
-                        oncommand="findBridgeList();"/>
-            </vbox>
-    -->
-          </hbox>
-        </groupbox>
+        <groupbox id="bridgeSpecificSettings" />
       </vbox>
     </vbox>
     <vbox id="startingTor">
@@ -145,13 +62,13 @@
       </hbox>
       <spring flex="1" />
     </vbox>
-    <vbox id="bridgeHelp">
+    <vbox id="errorPanel"/>
+    <vbox id="bridgeHelp" class="help">
       <hbox align="middle"><label>&torsettings.bridgeHelpTitle;</label></hbox>
       <description>&torsettings.bridgeHelp1;</description>
       <description>&torsettings.bridgeHelp2;</description>
       <description>&torsettings.bridgeHelp3;</description>
     </vbox>
-    <vbox id="errorPanel"/>
   </deck>
   <spring />
 </dialog>
diff --git a/src/chrome/locale/en/network-settings.dtd b/src/chrome/locale/en/network-settings.dtd
index 99ea45c..27c9bcc 100644
--- a/src/chrome/locale/en/network-settings.dtd
+++ b/src/chrome/locale/en/network-settings.dtd
@@ -1,14 +1,30 @@
 <!ENTITY torsettings.dialog.title "Tor Settings">
 
-<!ENTITY torsettings.prompt1 "Before the Tor Browser attempts to connect to the Internet, we need you to provide some information abour your Internet connection.">
-<!ENTITY torsettings.prompt2 "Do you any of the options below apply to you?">
-<!ENTITY torsettings.prompt3 "If so, choose those options for further configuration.">
-<!ENTITY torsettings.prompt4 "If not, just click Connect.">
+<!-- For "first run" wizard: -->
+
+<!ENTITY torsettings.prompt "Before the Tor Browser attempts to connect to the Internet, we need you to provide some information about your Internet connection.">
+
+<!ENTITY torSettings.yes "Yes">
+<!ENTITY torSettings.no "No">
+
+<!ENTITY torSettings.proxyQuestion "Do you use a proxy to access the Internet?">
+<!-- see https://www.torproject.org/docs/proxychain.html.en -->
+<!ENTITY torSettings.proxyHelp "TODO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dolor eget purus imperdiet quis ultrices massa tempor. Sed mattis tincidunt justo nec vehicula. Praesent fermentum quam vel neque congue imperdiet. Nam tincidunt sollicitudin neque, eu sodales quam eleifend at. Suspendisse potenti.">
+<!ENTITY torSettings.enterProxy "Enter your proxy settings.">
+<!ENTITY torSettings.firewallQuestion "Does your Internet connection go through a firewall that only allows you to connect to certain ports?">
+<!ENTITY torSettings.firewallHelp "TODO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dolor eget purus imperdiet quis ultrices massa tempor. Sed mattis tincidunt justo nec vehicula. Praesent fermentum quam vel neque congue imperdiet. Nam tincidunt sollicitudin neque, eu sodales quam eleifend at. Suspendisse potenti.">
+<!ENTITY torSettings.enterFirewall "Enter a comma-separated list of ports allowed by your firewall.">
+<!ENTITY torSettings.bridgeQuestion "If your ISP (Internet Service Provider) blocks connections to the Tor network, you will need to use bridge relays.">
+
+<!-- Other: -->
 
 <!ENTITY torsettings.startingTor "Waiting for Tor to start…">
 
+<!ENTITY torsettings.optional "Optional">
+
 <!ENTITY torsettings.useProxy.checkbox "I use a proxy to access the Internet">
 <!ENTITY torsettings.useProxy.address "Address:">
+<!ENTITY torsettings.useProxy.address.placeholder "IP address or hostname">
 <!ENTITY torsettings.useProxy.port "Port:">
 <!ENTITY torsettings.useProxy.username "Username:">
 <!ENTITY torsettings.useProxy.password "Password:">
diff --git a/src/chrome/skin/network-settings.css b/src/chrome/skin/network-settings.css
index 32cdd07..9970585 100644
--- a/src/chrome/skin/network-settings.css
+++ b/src/chrome/skin/network-settings.css
@@ -6,31 +6,55 @@
  */
 
 dialog {
-  width: 635px;
+  width: 520px;
   height: 440px;
   font: -moz-dialog;
 }
 
-dialog.initialBootstrap {
-  height: 574px;
+wizard {
+  width: 540px;
+  font: -moz-dialog;
+  padding-top: 0px;
+}
+
+wizard label {
+  margin: 0px;
+}
+
+wizard radiogroup {
+  margin: 5px 0px 8px 25px;
+}
+
+.tbb-header groupbox {
+  margin-left: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.question {
+  font-weight: bold;
+}
+
+.questionHelp {
+  margin-right: 20px;
 }
 
-#tbb-header groupbox {
-  width: 450px;
+.instructions {
+  margin-bottom: 8px;
 }
 
-#tbb-header {
-  display: none;
+button.firstAnswer {
+  margin-top: 0px;
 }
 
-dialog.initialBootstrap #tbb-header {
-  display: -moz-box;
+.tbb-logo-box {
+  height: 80px;
 }
 
-#tbb-logo {
+.tbb-logo {
   list-style-image: url("chrome://torlauncher/skin/tbb-logo.png");
-  width: 120px;
-  height: 100px;
+  width: 198px;
+  height: 70px;
 }
 
 #startingTor {
@@ -42,16 +66,17 @@ dialog.initialBootstrap #tbb-header {
   font-weight: bold;
 }
 
-#bridgeHelp {
+dialog .help {
   margin: 30px;
 }
 
-#bridgeHelp label {
+.help label {
   font-size: 120%;
   font-weight: bold;
   margin: 0px 0px 20px 0px;
 }
 
+.help description,
 #bridgeHelp description {
   margin-bottom: 15px;
 }
diff --git a/src/chrome/skin/tbb-logo.png b/src/chrome/skin/tbb-logo.png
index ce0c49d..d6744ae 100644
Binary files a/src/chrome/skin/tbb-logo.png and b/src/chrome/skin/tbb-logo.png differ
diff --git a/src/components/tl-process.js b/src/components/tl-process.js
index 4eec340..2d24360 100644
--- a/src/components/tl-process.js
+++ b/src/components/tl-process.js
@@ -395,13 +395,15 @@ TorProcessService.prototype =
   // Blocks until network settings dialog is closed.
   _openNetworkSettings: function(aIsInitialBootstrap)
   {
-    const kChromeURL = "chrome://torlauncher/content/network-settings.xul";
+    const kSettingsURL = "chrome://torlauncher/content/network-settings.xul";
+    const kWizardURL = "chrome://torlauncher/content/network-settings-wizard.xul";
 
     var wwSvc = Cc["@mozilla.org/embedcomp/window-watcher;1"]
                   .getService(Ci.nsIWindowWatcher);
     var winFeatures = "chrome,dialog=yes,modal,all";
     var argsArray = this._createOpenWindowArgsArray(aIsInitialBootstrap);
-    wwSvc.openWindow(null, kChromeURL, "_blank", winFeatures, argsArray);
+    var url = (aIsInitialBootstrap) ? kWizardURL : kSettingsURL;
+    wwSvc.openWindow(null, url, "_blank", winFeatures, argsArray);
   },
 
   _openProgressDialog: function()



More information about the tor-commits mailing list