commit 0cdf02857f3e30d5b0bd4696cf5de1c69874ce9c Author: Kathy Brade <brade@pearlcrescent.com> Date: Tue Jun 2 11:46:48 2020 -0400 Bug 33998: Use CSS grid instead of XUL grid. Mozilla is removing support for XUL <grid>. --- src/chrome/content/network-settings-shared.js | 105 +++++++++++++------------- src/chrome/skin/network-settings.css | 6 ++ 2 files changed, 58 insertions(+), 53 deletions(-) diff --git a/src/chrome/content/network-settings-shared.js b/src/chrome/content/network-settings-shared.js index b125d24..07dcc12 100644 --- a/src/chrome/content/network-settings-shared.js +++ b/src/chrome/content/network-settings-shared.js @@ -1,4 +1,4 @@ -// Copyright (c) 2019, The Tor Project, Inc. +// Copyright (c) 2020, The Tor Project, Inc. // See LICENSE for licensing information. // // vim: set sw=2 sts=2 ts=8 et syntax=javascript: @@ -12,58 +12,57 @@ var proxySettings = ` <button class="helpButton" oncommand="onOpenHelp('proxyHelpContent')"/> </hbox> <groupbox id="proxySpecificSettings"> - <grid flex="1"> - <columns> - <column/> - <column/> - </columns> - <rows> - <row align="center"> - <label value="&torsettings.useProxy.type;" control="proxyType" - class="rightAlign"/> - <hbox align="center"> - <menulist id="proxyType" sizetopopup="always" - placeholder="&torsettings.useProxy.type.placeholder;" - oncommand="onProxyTypeChange()"> - <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> - <row align="center"> - <label value="&torsettings.useProxy.address;" control="proxyAddr" - class="rightAlign"/> - <hbox align="center"> - <html:input id="proxyAddr" size="20" style="-moz-box-flex: 1;" - placeholder="&torsettings.useProxy.address.placeholder;"/> - <separator orient="vertical"/> - <label value="&torsettings.useProxy.port;" control="proxyPort"/> - <html:input id="proxyPort" size="4"/> - </hbox> - </row> - <row align="center"> - <label id="proxyUsernameLabel" - value="&torsettings.useProxy.username;" - control="proxyUsername" class="rightAlign"/> - <hbox align="center"> - <html:input id="proxyUsername" size="14" style="-moz-box-flex: 1;" - placeholder="&torsettings.optional;"/> - <separator orient="vertical"/> - <label id="proxyPasswordLabel" - value="&torsettings.useProxy.password;" - control="proxyPassword"/> - <html:input id="proxyPassword" size="14" type="password" - placeholder="&torsettings.optional;"/> - </hbox> - </row> - </rows> - </grid> + <box id="proxySpecificSettingsGrid"> + <hbox align="center"> + <label value="&torsettings.useProxy.type;" control="proxyType" + class="rightAlign"/> + </hbox> + <hbox align="center"> + <menulist id="proxyType" sizetopopup="always" + placeholder="&torsettings.useProxy.type.placeholder;" + oncommand="onProxyTypeChange()"> + <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> + <box/> + + <hbox align="center"> + <label value="&torsettings.useProxy.address;" control="proxyAddr" + class="rightAlign"/> + </hbox> + <hbox align="center"> + <html:input id="proxyAddr" size="20" style="-moz-box-flex: 1;" + placeholder="&torsettings.useProxy.address.placeholder;"/> + <separator orient="vertical"/> + <label value="&torsettings.useProxy.port;" control="proxyPort"/> + <html:input id="proxyPort" size="4"/> + </hbox> + <box/> + + <hbox align="center"> + <label id="proxyUsernameLabel" + value="&torsettings.useProxy.username;" + control="proxyUsername" class="rightAlign"/> + </hbox> + <hbox align="center"> + <html:input id="proxyUsername" size="14" + placeholder="&torsettings.optional;"/> + <separator orient="vertical"/> + <label id="proxyPasswordLabel" + value="&torsettings.useProxy.password;" + control="proxyPassword"/> + <html:input id="proxyPassword" size="14" type="password" + placeholder="&torsettings.optional;"/> + </hbox> + <box/> + </box> </groupbox> </vbox> `; diff --git a/src/chrome/skin/network-settings.css b/src/chrome/skin/network-settings.css index f60c5c6..0c0d53a 100644 --- a/src/chrome/skin/network-settings.css +++ b/src/chrome/skin/network-settings.css @@ -43,6 +43,7 @@ wizard label { } .rightAlign { + -moz-box-flex: 1; text-align: right; } @@ -125,6 +126,11 @@ window.os-mac #bridgeList { display: none; } +#proxySpecificSettingsGrid { + display: grid; + grid-template-columns: auto auto 1fr; /* the third column is for spacing */ +} + /* reuse Mozilla's help button from the Firefox hamburger menu */ .helpButton { background: url('chrome://global/skin/icons/help.svg') no-repeat center center;