commit 7e006125569a58b4793c2950fb0a22d9b196a917 Author: Kathy Brade <brade@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; }