[tbb-commits] [tor-launcher/master] Bug 33998: Use CSS grid instead of XUL grid.

[gk at torproject.org]

commit 0cdf02857f3e30d5b0bd4696cf5de1c69874ce9c
Author: Kathy Brade <brade at 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;