Bug 1632451 - remove <grid> usage from mail/extensions/openpgp/. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Tue, 28 Apr 2020 23:05:48 +0300
changeset 38066 964c4361f2870533cc6fdc5d05d821ca300eddbf
parent 38065 d4620da6042f684e3e2c873f806d07e54f577c62
child 38067 ffa711650cb168714e3e6179267ab8656e8d47b5
push id2595
push userclokep@gmail.com
push dateMon, 04 May 2020 19:02:04 +0000
treeherdercomm-beta@f53913797371 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1632451
Bug 1632451 - remove <grid> usage from mail/extensions/openpgp/. r=mkmelin
mail/extensions/openpgp/content/ui/enigmailKeySelection.js
mail/extensions/openpgp/content/ui/enigmailKeySelection.xhtml
mail/extensions/openpgp/content/ui/enigmailKeygen.xhtml
mail/extensions/openpgp/content/ui/enigmailMsgBox.xhtml
mail/extensions/openpgp/content/ui/keyDetailsDlg.xhtml
mail/themes/shared/mail/grid-layout.css
mail/themes/shared/openpgp/enigmail-common.css
--- a/mail/extensions/openpgp/content/ui/enigmailKeySelection.js
+++ b/mail/extensions/openpgp/content/ui/enigmailKeySelection.js
@@ -198,16 +198,18 @@ function sortKeys(a, b) {
 }
 
 /**
  * Set up the dialog in terms of visible columns and top-level message(s)
  */
 function prepareDialog(secretOnly) {
   throw new Error("Not implemented");
   /*
+  UI part is removed from here.
+  https://searchfox.org/comm-central/rev/32109474297be91179f5f8388e778ef9ab5d38ce/mail/extensions/openpgp/content/ui/enigmailKeySelection.xhtml#34-42
   if (window.arguments[INPUT].dialogHeader) {
     var dialogHeader = document.getElementById("dialogHeader");
     if (dialogHeader) {
       dialogHeader.innerHTML = window.arguments[INPUT].dialogHeader;
       dialogHeader.style.visibility = "visible";
     }
   } else {
     let box = document.getElementById("dialogHeaderBox");
--- a/mail/extensions/openpgp/content/ui/enigmailKeySelection.xhtml
+++ b/mail/extensions/openpgp/content/ui/enigmailKeySelection.xhtml
@@ -26,25 +26,16 @@
         minheight="450">
 
 
   <script type="application/x-javascript" src="chrome://openpgp/content/ui/enigmailCommon.js"/>
   <script type="application/x-javascript" src="chrome://openpgp/content/ui/enigmailKeySelection.js"/>
 
   <vbox class="enigmailCaptionbox" id="dialogHeadline" orient="vertical">
      <html:h1 id="usersNotFoundCapt"><html:span>&enigmail.usersNotFound.label;</html:span></html:h1>
-     <vbox style="height: 5em; overflow: auto;">
-       <grid id="dialogMsgList" collapsed="true">
-         <columns>
-          <column/>
-          <column flex="1"/>
-        </columns>
-        <rows id="dialogMsgListRows"/>
-       </grid>
-     </vbox>
      <description id="dialogHeaderDesc" width="700px" collapsed="true">...</description>
   </vbox>
 
   <!-- <separator/> -->
 
   <vbox flex="1">
     <vbox class="enigmailCaptionbox" width="700px" flex="1" id="dialogHeaderBox">
       <html:h1 ><html:span id="dialogHeader" style="visibility: hidden;">...</html:span></html:h1>
--- a/mail/extensions/openpgp/content/ui/enigmailKeygen.xhtml
+++ b/mail/extensions/openpgp/content/ui/enigmailKeygen.xhtml
@@ -2,16 +2,17 @@
 <!--
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 -->
 
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/openpgp/enigmail.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/shared/grid-layout.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/dialogOverlay.xhtml"?>
 
 <!DOCTYPE window SYSTEM "chrome://openpgp/content/strings/enigmail.dtd" >
 
 <window
      id="enigmailKeygen"
      title="&enigmail.keygenTitle.label;"
@@ -62,52 +63,45 @@
           </menupopup>
         </menulist>
         <checkbox label="&enigmail.keyGen.noExpiry.label;"
                   id="noExpiry" oncommand="onNoExpiry()"/>
       </hbox>
     </hbox>
 
     <vbox> <!-- Advanced Tab -->
-      <grid>
-        <columns>
-          <column/>
-          <column flex="1"/>
-        </columns>
-
-        <rows>
-          <row>
-            <hbox align="center">
-              <label value="&enigmail.keyGen.keyType.label;" control="keyType"/>
-            </hbox>
-            <hbox flex="0">
-              <menulist id="keyType" label="&enigmail.keyGen.keyType.rsa;" value="RSA" >
-                <menupopup id="keyTypePopup">
-                  <menuitem id="keySize_rsa" value="RSA" label="&enigmail.keyGen.keyType.rsa;" selected="true" oncommand="updateKeySizeSel(this)"/>
-                  <menuitem id="keyType_ecc" value="ECC" label="&enigmail.keyGen.keyType.ecc;" oncommand="updateKeySizeSel(this)" hidden="true"/>
-                </menupopup>
-              </menulist>
-            </hbox>
-          </row>
-          <row>
-            <hbox align="center">
-              <label value="&enigmail.keyGen.keySize.label;" control="keySize"/>
-            </hbox>
-            <hbox flex="0">
-              <menulist id="keySize" label="3072" value="3072" >
-                <menupopup id="keySizePopup">
-                  <menuitem id="keySize_3072" value="3072" label="3072" selected="true"/>
-                  <menuitem id="keySize_4096" value="4096" label="4096"/>
-                </menupopup>
-              </menulist>
-            </hbox>
-          </row>
-        </rows>
-      </grid>
-  </vbox>
+      <html:div class="grid-two-column-fr">
+        <html:div class="flex-items-center">
+          <html:label for="keyType">
+            &enigmail.keyGen.keyType.label;
+          </html:label>
+        </html:div>
+        <html:div>
+          <menulist id="keyType" label="&enigmail.keyGen.keyType.rsa;" value="RSA">
+            <menupopup id="keyTypePopup">
+              <menuitem id="keySize_rsa" value="RSA" label="&enigmail.keyGen.keyType.rsa;" selected="true" oncommand="updateKeySizeSel(this)"/>
+              <menuitem id="keyType_ecc" value="ECC" label="&enigmail.keyGen.keyType.ecc;" oncommand="updateKeySizeSel(this)" hidden="true"/>
+            </menupopup>
+          </menulist>
+        </html:div>
+        <html:div class="flex-items-center">
+          <html:label for="keySize">
+            &enigmail.keyGen.keySize.label;
+          </html:label>
+        </html:div>
+        <html:div>
+          <menulist id="keySize" label="3072" value="3072">
+            <menupopup id="keySizePopup">
+              <menuitem id="keySize_3072" value="3072" label="3072" selected="true"/>
+              <menuitem id="keySize_4096" value="4096" label="4096"/>
+            </menupopup>
+          </menulist>
+        </html:div>
+      </html:div>
+    </vbox>
   </tabpanels>
 </tabbox>
 
 <separator/>
 
 <hbox autostretch="never">
   <button label="&enigmail.generateKey.label;"
           class="dialog"
--- a/mail/extensions/openpgp/content/ui/enigmailMsgBox.xhtml
+++ b/mail/extensions/openpgp/content/ui/enigmailMsgBox.xhtml
@@ -2,16 +2,17 @@
 <!--
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 -->
 
 <?xml-stylesheet href="chrome://messenger/skin/messenger.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/openpgp/enigmail.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/shared/grid-layout.css" type="text/css"?>
 
 <!DOCTYPE window [
 <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
 %brandDTD;
 <!ENTITY % enigMailDTD SYSTEM "chrome://openpgp/content/strings/enigmail.dtd" >
 %enigMailDTD;
 ]>
 
@@ -30,34 +31,26 @@
       <menuitem label="&copyCmd.label;" oncommand="copyToClipbrd()"/>
     </menupopup>
   </popupset>
 
   <hbox id="filler" style="min-width: 0%;">
     <spacer style="width: 29em;"/>
   </hbox>
 
-<grid>
-  <columns>
-    <column/>
-    <column flex="1"/>
-  </columns>
-
-  <rows>
-    <row>
-      <hbox id="iconContainer" align="start">
-        <image id="infoImage" class="spaced" collapsed="true"/>
-      </hbox>
+  <html:div class="grid-two-column-fr">
+    <html:div class="flex-items-center">
+      <image id="infoImage" class="spaced" collapsed="true"/>
+    </html:div>
+    <html:div class="flex-items-center">
       <vbox id="infoContainer" pack="center">
         <label id="macosDialogTitle" collapsed="true" class="enigmailDialogTitle"/>
         <vbox id="msgContainer" style="max-width: 45em;">
           <description id="msgtext" context="ctxmenu" noinitialfocus="true" class="enigmailDialogBody"/>
         </vbox>
       </vbox>
-    </row>
-    <row id="checkboxContainer" hidden="true">
-      <spacer/>
+    </html:div>
+    <html:div id="checkboxContainer" class="grid-item-col2" hidden="hidden">
       <checkbox id="theCheckBox" oncommand="checkboxCb()"/>
-    </row>
-  </rows>
-</grid>
+    </html:div>
+  </html:div>
 </dialog>
 </window>
--- a/mail/extensions/openpgp/content/ui/keyDetailsDlg.xhtml
+++ b/mail/extensions/openpgp/content/ui/keyDetailsDlg.xhtml
@@ -23,62 +23,66 @@
         onload="onLoad();">
 <dialog id="enigmailKeyDetailsDlg"
         buttons="accept"
         buttonlabelaccept="&enigmail.cardDetails.closeWindow.label;">
 
   <script type="application/x-javascript" src="chrome://openpgp/content/ui/enigmailCommon.js"/>
   <script type="application/x-javascript" src="chrome://openpgp/content/ui/keyDetailsDlg.js"/>
   <script type="application/x-javascript" src="chrome://openpgp/content/ui/enigmailKeyManager.js"/>
+  <script src="chrome://global/content/globalOverlay.js"/>
+  <script src="chrome://global/content/editMenuOverlay.js"/>
 
   <broadcasterset>
     <broadcaster id="ownKeyCommands" hidden="true"/>
   </broadcasterset>
 
-  <hbox >
-    <vbox>
-      <grid>
-        <columns>
-          <column style="min-width:15%;" flex="1"/>
-          <column flex="1"/>
-        </columns>
-        <rows>
-          <row>
-            <label value="&enigmail.keyDetails.userId2.label;" control="userId"/>
-            <html:input id="userId" class="plain" style="white-space: pre;"
-              readonly="true" value="?" multiline="false" size="60"/>
-          </row>
-          <row>
-            <label value="&enigmail.keyDetails.keyType.label;" control="keyType"/>
-            <html:input id="keyType" class="plain" style="white-space: pre;"
-              readonly="true" value="?" multiline="false" size="60"/>
-          </row>
-          <row>
-            <label value="&enigmail.keyDetails.fingerprint.label;" control="fingerprint"/>
-            <html:input id="fingerprint" class="plain" style="white-space: pre;"
-              readonly="true" value="?" multiline="false" size="60"/>
-          </row>
-          <row>
-            <label value="&enigmail.keyDetails.created.label;"/>
-            <html:input id="keyCreated" class="plain" style="white-space: pre;"
-              readonly="true" value="?" multiline="false" size="60"/>
-          </row>
-          <row>
-            <label value="&enigmail.keyDetails.expiry.label;"/>
-            <html:input id="keyExpiry" class="plain" style="white-space: pre;"
-              readonly="true" value="?" multiline="false" size="60"/>
-          </row>
-        </rows>
-      </grid>
-      <vbox class="enigmailCaptionbox" id="alsoknown" flex="1">
-        <html:h1><html:span>&enigmail.keyDetails.alsoKnown.label;:</html:span></html:h1>
-        <richlistbox id="additionalUid" style="height: 4em;" flex="1"/>
-      </vbox>
+  <vbox>
+    <html:table>
+      <html:tr>
+        <html:th>&enigmail.keyDetails.userId2.label;</html:th>
+        <html:td>
+          <html:input id="userId" class="plain" style="white-space: pre;"
+                      readonly="readonly" value="?" size="60"/>
+        </html:td>
+      </html:tr>
+      <html:tr>
+        <html:th>&enigmail.keyDetails.keyType.label;</html:th>
+        <html:td>
+          <html:input id="keyType" class="plain" style="white-space: pre;"
+                      readonly="readonly" value="?" size="60"/>
+        </html:td>
+      </html:tr>
+      <html:tr>
+        <html:th>&enigmail.keyDetails.fingerprint.label;</html:th>
+        <html:td>
+          <html:input id="fingerprint" class="plain" style="white-space: pre;"
+                      readonly="readonly" value="?" size="60"/>
+        </html:td>
+      </html:tr>
+      <html:tr>
+        <html:th>&enigmail.keyDetails.created.label;</html:th>
+        <html:td>
+          <html:input id="keyCreated" class="plain" style="white-space: pre;"
+                      readonly="readonly" value="?" size="60"/>
+        </html:td>
+      </html:tr>
+      <html:tr>
+        <html:th>&enigmail.keyDetails.expiry.label;</html:th>
+        <html:td>
+          <html:input id="keyExpiry" class="plain" style="white-space: pre;"
+                      readonly="readonly" value="?" size="60"/>
+        </html:td>
+      </html:tr>
+    </html:table>
+    <vbox class="enigmailCaptionbox" id="alsoknown" flex="1">
+      <html:h1><html:span>&enigmail.keyDetails.alsoKnown.label;:</html:span></html:h1>
+      <richlistbox id="additionalUid" style="height: 4em;" flex="1"/>
     </vbox>
-  </hbox>
+  </vbox>
 
   <tabbox flex="1" style="margin:5px" id="mainTabs">
     <tabs id="mainTabBox">
       <tab id="acceptanceTab"  label="&enigmail.acceptance.label;"/>
       <tab id="signaturesTab"  label="&enigmail.keyDetails.signaturesTab;"/>
       <tab id="structureTab"   label="&enigmail.keyDetails.structureTab;"/>
     </tabs>
 
--- a/mail/themes/shared/mail/grid-layout.css
+++ b/mail/themes/shared/mail/grid-layout.css
@@ -7,16 +7,21 @@
   grid-template-columns: auto auto;
 }
 
 .grid-three-column {
   display: inline-grid;
   grid-template-columns: auto auto auto;
 }
 
+.grid-two-column-fr {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
+
 .grid-three-column-auto-x-auto {
   display: inline-grid;
   grid-template-columns: auto 1fr auto;
 }
 
 .grid-two-column-x-auto {
   display: inline-grid;
   grid-template-columns: 1fr auto;
--- a/mail/themes/shared/openpgp/enigmail-common.css
+++ b/mail/themes/shared/openpgp/enigmail-common.css
@@ -395,8 +395,13 @@ treechildren::-moz-tree-cell-text(STYLE)
 }
 
 .enigmailOkSign {
   content: url("chrome://messenger/skin/openpgp/ok-sign.svg");
   padding-left: 5px;
   padding-right: 5px;
   height: 1.3em;
 }
+
+th {
+  font-weight: normal;
+  text-align: start;
+}