[tbb-commits] [tor-launcher/master] Bug #11180: Improve the "Use Bridges" UI.

[brade at torproject.org]

commit 7e006125569a58b4793c2950fb0a22d9b196a917
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Thu Mar 13 13:54:35 2014 -0400

    Bug #11180:  Improve the "Use Bridges" UI.
    
    When the provided/custom bridges radio buttons are changed, disable the
      labels and controls associated with the inactive radio button.
    Reduce vertical space between the "Connect with provided bridges" radio button
      and its associated "Transport type" menu.
---
 src/chrome/content/network-settings-overlay.xul |   32 ++++++++-------
 src/chrome/content/network-settings.js          |   48 +++++++++++++++++------
 2 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/chrome/content/network-settings-overlay.xul b/src/chrome/content/network-settings-overlay.xul
index 6a85be4..4172af5 100644
--- a/src/chrome/content/network-settings-overlay.xul
+++ b/src/chrome/content/network-settings-overlay.xul
@@ -75,29 +75,31 @@
 
   <groupbox id="bridgeSpecificSettings">
     <hbox pack="end">
-      <radiogroup id="bridgeTypeRadioGroup" flex="1" style="margin: 0px">
-          <radio id="bridgeRadioDefault"
-                 label="&torsettings.useBridges.default;" selected="true" />
-          <hbox align="baseline">
-           <spacer style="width: 1.9em" />
-           <label value="&torsettings.useBridges.type;"
-                  control="defaultBridgeType" />
-           <menulist id="defaultBridgeType" oncommand="onBridgeTypeChange()">
+      <radiogroup id="bridgeTypeRadioGroup" flex="1" style="margin: 0px"
+                  oncommand="onBridgeTypeRadioChange()">
+        <radio id="bridgeRadioDefault"
+               label="&torsettings.useBridges.default;" selected="true" />
+        <hbox align="baseline" style="margin-top: -5px">
+          <spacer style="width: 1.9em" />
+          <label id="defaultBridgeTypeLabel"
+                 value="&torsettings.useBridges.type;"
+                 control="defaultBridgeType"/>
+          <menulist id="defaultBridgeType">
             <menupopup id="defaultBridgeType_menuPopup" />
-           </menulist>
-           <spring/>
-          </hbox>
+          </menulist>
+          <spring/>
+        </hbox>
         <spacer style="height: 0.5em" />
 
         <hbox align="baseline" flex="1">
-          <radio align="start" id="bridgeRadioCustom" label="&torsettings.useBridges.custom;"
-               oncommand="onCustomBridges()" />
+          <radio align="start" id="bridgeRadioCustom"
+                 label="&torsettings.useBridges.custom;" />
           <button align="end" dlgtype="help" oncommand="onOpenHelp()" />
-       </hbox>
+        </hbox>
       </radiogroup>
     </hbox>
     <vbox id="bridgeCustomEntry">
-       <label style="margin-top:0px;"
+      <label id="bridgeListLabel" style="margin-top:0px;"
              value="&torsettings.useBridges.label;" control="bridgeList"/>
       <textbox id="bridgeList" multiline="true" rows="3"
                oninput="onCustomBridgesTextInput();"
diff --git a/src/chrome/content/network-settings.js b/src/chrome/content/network-settings.js
index de7259f..07526c8 100644
--- a/src/chrome/content/network-settings.js
+++ b/src/chrome/content/network-settings.js
@@ -249,14 +249,19 @@ function onCustomBridgesTextInput()
   var customBridges = document.getElementById(kCustomBridgesRadio);
   if (customBridges)
     customBridges.control.selectedItem = customBridges;
+  onBridgeTypeRadioChange();
 }
 
 
-function onCustomBridges()
+function onBridgeTypeRadioChange()
 {
-  var bridgeList = document.getElementById(kBridgeList);
-  if (bridgeList)
-    bridgeList.focus();
+  var useCustom = getElemValue(kCustomBridgesRadio, false);
+  enableElemWithLabel(kDefaultBridgeTypeMenuList, !useCustom);
+  enableElemWithLabel(kBridgeList + "Label", useCustom);
+  var focusElemID = (useCustom) ? kBridgeList : kDefaultBridgeTypeMenuList;
+  var elem = document.getElementById(focusElemID);
+  if (elem)
+    elem.focus();
 }
 
 
@@ -470,13 +475,14 @@ function setButtonAttr(aID, aAttr, aValue)
 }
 
 
-function enableTextBox(aID, aEnable)
+// Enables / disables aID as well as optional aID+"Label" element.
+function enableElemWithLabel(aID, aEnable)
 {
   if (!aID)
     return;
 
-  var textbox = document.getElementById(aID);
-  if (textbox)
+  var elem = document.getElementById(aID);
+  if (elem)
   {
     var label = document.getElementById(aID + "Label");
     if (aEnable)
@@ -484,17 +490,34 @@ function enableTextBox(aID, aEnable)
       if (label)
         label.removeAttribute("disabled");
 
-      textbox.removeAttribute("disabled");
-      var s = textbox.getAttribute("origPlaceholder");
-      if (s)
-        textbox.setAttribute("placeholder", s);
+      elem.removeAttribute("disabled");
     }
     else
     {
       if (label)
         label.setAttribute("disabled", true);
 
-      textbox.setAttribute("disabled", true);
+      elem.setAttribute("disabled", true);
+    }
+  }
+}
+
+
+// Removes placeholder text when disabled.
+function enableTextBox(aID, aEnable)
+{
+  enableElemWithLabel(aID, aEnable);
+  var textbox = document.getElementById(aID);
+  if (textbox)
+  {
+    if (aEnable)
+    {
+      var s = textbox.getAttribute("origPlaceholder");
+      if (s)
+        textbox.setAttribute("placeholder", s);
+    }
+    else
+    {
       textbox.setAttribute("origPlaceholder", textbox.placeholder);
       textbox.removeAttribute("placeholder");
     }
@@ -804,6 +827,7 @@ function initBridgeSettings()
   var radio = document.getElementById(radioID);
   if (radio)
     radio.control.selectedItem = radio;
+  onBridgeTypeRadioChange();
 
   return true;
 }