Bug 33998: Use CSS grid instead of XUL grid.

Mozilla is removing support for XUL <grid>.

src/chrome/content/network-settings-shared.js

-// 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>
 `;

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;