Bug 1518786 - Wait until Fluent strings have been applied before sizing the window to content. r=Gijs
authorJared Wein <jwein@mozilla.com>
Wed, 16 Jan 2019 20:56:55 +0000
changeset 511255 2677d2e45ead735f352edc4ef3d46c4ce9d2e9ce
parent 511254 317bb711eb47b5108a8d779505757e860f33c3cf
child 511256 cfbd8823f3c5b9cfea52d1a519f0b0d2a4aa2345
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1518786
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1518786 - Wait until Fluent strings have been applied before sizing the window to content. r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D16587
security/manager/pki/resources/content/exceptionDialog.css
security/manager/pki/resources/content/exceptionDialog.js
security/manager/pki/resources/content/exceptionDialog.xul
security/manager/pki/resources/jar.mn
new file mode 100644
--- /dev/null
+++ b/security/manager/pki/resources/content/exceptionDialog.css
@@ -0,0 +1,34 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+:root {
+  max-width: 40em;
+}
+
+#warningSupplemental {
+  font-weight: bold;
+}
+
+.description {
+  font-weight: bold;
+}
+
+.longDescription {
+  /* 40em is the max-width of the dialog defined above.
+     18px is the horizontal padding of the dialog. */
+  width: calc(40em - 18px);
+  padding-bottom: 1em;
+}
+
+#warningText,
+#warningSupplemental,
+#headerDescription,
+.longDescription {
+  white-space: pre-wrap;
+}
+
+.description:empty,
+.longDescription:empty {
+  display: none;
+}
--- a/security/manager/pki/resources/content/exceptionDialog.js
+++ b/security/manager/pki/resources/content/exceptionDialog.js
@@ -17,49 +17,68 @@ ChromeUtils.import("resource://gre/modul
 
 function initExceptionDialog() {
   gNeedReset = false;
   gDialog = document.documentElement;
   gSecHistogram = Services.telemetry.getHistogramById("SECURITY_UI");
   gNsISecTel = Ci.nsISecurityUITelemetry;
   let warningText = document.getElementById("warningText");
   document.l10n.setAttributes(warningText, "add-exception-branded-warning");
-  gDialog.getButton("extra1").disabled = true;
+  let confirmButton = gDialog.getButton("extra1");
+  let l10nUpdatedElements = [
+    confirmButton,
+    warningText,
+  ];
+  confirmButton.disabled = true;
 
   var args = window.arguments;
   if (args && args[0]) {
     if (args[0].location) {
       // We were pre-seeded with a location.
       document.getElementById("locationTextBox").value = args[0].location;
       document.getElementById("checkCertButton").disabled = false;
 
       if (args[0].securityInfo) {
         gSecInfo = args[0].securityInfo;
         gCert = gSecInfo.serverCert;
         gBroken = true;
-        updateCertStatus();
+        l10nUpdatedElements.concat(updateCertStatus());
       } else if (args[0].prefetchCert) {
         // We can optionally pre-fetch the certificate too.  Don't do this
         // synchronously, since it would prevent the window from appearing
         // until the fetch is completed, which could be multiple seconds.
         // Instead, let's use a timer to spawn the actual fetch, but update
         // the dialog to "checking..." state right away, so that the UI
         // is appropriately responsive.  Bug 453855
         document.getElementById("checkCertButton").disabled = true;
         gChecking = true;
-        updateCertStatus();
+        l10nUpdatedElements.concat(updateCertStatus());
 
         window.setTimeout(checkCert, 0);
       }
     }
 
     // Set out parameter to false by default
     args[0].exceptionAdded = false;
   }
-  window.sizeToContent();
+
+  for (let id of [
+    "warningSupplemental",
+    "certLocationLabel",
+    "checkCertButton",
+    "statusDescription",
+    "statusLongDescription",
+    "viewCertButton",
+    "permanent",
+  ]) {
+    let element = document.getElementById(id);
+    l10nUpdatedElements.push(element);
+  }
+
+  document.l10n.translateElements(l10nUpdatedElements).then(() => window.sizeToContent());
 }
 
 /**
  * Helper function for checkCert. Set as the onerror/onload callbacks for an
  * XMLHttpRequest. Sets gSecInfo, gCert, gBroken, and gChecking according to
  * the load information from the request. Probably should not be used directly.
  *
  * @param {XMLHttpRequest} req
@@ -70,41 +89,42 @@ function initExceptionDialog() {
 function grabCert(req, evt) {
   if (req.channel && req.channel.securityInfo) {
     gSecInfo = req.channel.securityInfo
                   .QueryInterface(Ci.nsITransportSecurityInfo);
     gCert = gSecInfo ? gSecInfo.serverCert : null;
   }
   gBroken = evt.type == "error";
   gChecking = false;
-  updateCertStatus();
+  document.l10n.translateElements(updateCertStatus()).then(() => window.sizeToContent());
 }
 
 /**
  * Attempt to download the certificate for the location specified, and populate
  * the Certificate Status section with the result.
  */
-function checkCert() {
+async function checkCert() {
   gCert = null;
   gSecInfo = null;
   gChecking = true;
   gBroken = false;
-  updateCertStatus();
+  await document.l10n.translateElements(updateCertStatus());
+  window.sizeToContent();
 
   let uri = getURI();
 
   if (uri) {
     let req = new XMLHttpRequest();
     req.open("GET", uri.prePath);
     req.onerror = grabCert.bind(this, req);
     req.onload = grabCert.bind(this, req);
     req.send(null);
   } else {
     gChecking = false;
-    updateCertStatus();
+    document.l10n.translateElements(updateCertStatus()).then(() => window.sizeToContent());
   }
 }
 
 /**
  * Build and return a URI, based on the information supplied in the
  * Certificate Location fields
  *
  * @returns {nsIURI}
@@ -163,16 +183,17 @@ function handleTextChange() {
 
 function updateCertStatus() {
   var shortDesc, longDesc;
   var shortDesc2, longDesc2;
   var shortDesc3, longDesc3;
   var use2 = false;
   var use3 = false;
   let bucketId = gNsISecTel.WARNING_BAD_CERT_TOP_ADD_EXCEPTION_BASE;
+  let l10nUpdatedElements = [];
   if (gCert) {
     if (gBroken) {
       var mms = "add-exception-domain-mismatch-short";
       var mml = "add-exception-domain-mismatch-long";
       var exs = "add-exception-expired-short";
       var exl = "add-exception-expired-long";
       var uts = "add-exception-unverified-or-bad-signature-short";
       var utl = "add-exception-unverified-or-bad-signature-long";
@@ -222,16 +243,17 @@ function updateCertStatus() {
       // private browsing mode was disabled.
       var inPrivateBrowsing = inPrivateBrowsingMode();
       var pe = document.getElementById("permanent");
       pe.disabled = inPrivateBrowsing;
       pe.checked = !inPrivateBrowsing;
 
       let headerDescription = document.getElementById("headerDescription");
       document.l10n.setAttributes(headerDescription, "add-exception-invalid-header");
+      l10nUpdatedElements.push(headerDescription);
     } else {
       shortDesc = "add-exception-valid-short";
       longDesc  = "add-exception-valid-long";
       gDialog.getButton("extra1").disabled = true;
       document.getElementById("permanent").disabled = true;
     }
 
     // We're done checking the certificate, so allow the user to check it again.
@@ -258,33 +280,39 @@ function updateCertStatus() {
     document.getElementById("viewCertButton").disabled = true;
     gDialog.getButton("extra1").disabled = true;
     document.getElementById("permanent").disabled = true;
   }
   let statusDescription = document.getElementById("statusDescription");
   let statusLongDescription = document.getElementById("statusLongDescription");
   document.l10n.setAttributes(statusDescription, shortDesc);
   document.l10n.setAttributes(statusLongDescription, longDesc);
+  l10nUpdatedElements.push(statusDescription);
+  l10nUpdatedElements.push(statusLongDescription);
 
   if (use2) {
     let status2Description = document.getElementById("status2Description");
     let status2LongDescription = document.getElementById("status2LongDescription");
     document.l10n.setAttributes(status2Description, shortDesc2);
     document.l10n.setAttributes(status2LongDescription, longDesc2);
+    l10nUpdatedElements.push(status2Description);
+    l10nUpdatedElements.push(status2LongDescription);
   }
 
   if (use3) {
     let status3Description = document.getElementById("status3Description");
     let status3LongDescription = document.getElementById("status3LongDescription");
     document.l10n.setAttributes(status3Description, shortDesc3);
     document.l10n.setAttributes(status3LongDescription, longDesc3);
+    l10nUpdatedElements.push(status3Description);
+    l10nUpdatedElements.push(status3LongDescription);
   }
 
-  window.sizeToContent();
   gNeedReset = true;
+  return l10nUpdatedElements;
 }
 
 /**
  * Handle user request to display certificate details
  */
 function viewCertButtonClick() {
   gSecHistogram.add(gNsISecTel.WARNING_BAD_CERT_TOP_CLICK_VIEW_CERT);
   if (gCert) {
--- a/security/manager/pki/resources/content/exceptionDialog.xul
+++ b/security/manager/pki/resources/content/exceptionDialog.xul
@@ -1,75 +1,88 @@
 <?xml version="1.0"?>
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://pippki/content/exceptionDialog.css" type="text/css"?>
 
 <!DOCTYPE dialog>
 
 <dialog id="exceptiondialog"
         windowtype="mozilla:exceptiondialog"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         data-l10n-id="exception-mgr"
         buttonidextra1="exception-mgr-extra-button"
         buttons="cancel,extra1,extra2"
         onload="initExceptionDialog();"
         ondialogextra1="addException();"
         ondialogextra2="checkCert();"
         defaultButton="extra2">
 
   <linkset>
+    <link rel="localization" href="branding/brand.ftl"/>
     <link rel="localization" href="security/certificates/certManager.ftl"/>
-    <link rel="localization" href="branding/brand.ftl"/>
   </linkset>
 
-  <script type="application/javascript" src="chrome://pippki/content/pippki.js"/>
-  <script type="application/javascript" src="chrome://pippki/content/exceptionDialog.js"/>
+  <script type="application/javascript"
+          src="chrome://pippki/content/pippki.js"/>
+  <script type="application/javascript"
+          src="chrome://pippki/content/exceptionDialog.js"/>
 
   <hbox>
     <vbox>
 #ifdef MOZ_WIDGET_GTK
       <image src="moz-icon://stock/gtk-dialog-warning?size=dialog"/>
 #else
       <image src="chrome://global/skin/icons/warning-large.png"/>
 #endif
       <spacer flex="1"/>
     </vbox>
     <vbox flex="1">
       <!-- Note that because of the styling, there must be no whitespace within
       the description tags -->
-      <description id="warningText"
-                   style="white-space: pre-wrap"/>
+      <description id="warningText"/>
       <description id="warningSupplemental"
-                   style="font-weight: bold; white-space: pre-wrap;"
-                   data-l10n-id="exception-mgr-supplemental-warning"></description>
+                   data-l10n-id="exception-mgr-supplemental-warning"/>
     </vbox>
   </hbox>
 
   <hbox align="center">
-    <label control="locationTextBox" data-l10n-id="exception-mgr-cert-location-url"/>
-    <textbox id="locationTextBox" flex="1" oninput="handleTextChange();"
-             value="https://" class="uri-element"/>
-    <button id="checkCertButton" disabled="true" dlgtype="extra2"
+    <label control="locationTextBox"
+           id="certLocationLabel"
+           data-l10n-id="exception-mgr-cert-location-url"/>
+    <textbox id="locationTextBox"
+             flex="1"
+             oninput="handleTextChange();"
+             value="https://"
+             class="uri-element"/>
+    <button id="checkCertButton"
+            disabled="true"
+            dlgtype="extra2"
             data-l10n-id="exception-mgr-cert-location-download"/>
   </hbox>
 
   <hbox align="center">
-    <description id="headerDescription" style="white-space: pre-wrap;"
+    <description id="headerDescription"
                  flex="1"/>
-    <button id="viewCertButton" data-l10n-id="exception-mgr-cert-status-view-cert"
-            disabled="true" oncommand="viewCertButtonClick();"/>
+    <button id="viewCertButton"
+            data-l10n-id="exception-mgr-cert-status-view-cert"
+            disabled="true"
+            oncommand="viewCertButtonClick();"/>
   </hbox>
   <description id="statusDescription"
-               style="font-weight: bold; padding-bottom: 1em;"/>
-  <description id="statusLongDescription" style="white-space: pre-wrap;"/>
+               class="description"/>
+  <description id="statusLongDescription"
+               class="longDescription"/>
   <description id="status2Description"
-               style="font-weight: bold; padding-bottom: 1em;"/>
-  <description id="status2LongDescription" style="white-space: pre-wrap;"/>
+               class="description"/>
+  <description id="status2LongDescription"
+               class="longDescription"/>
   <description id="status3Description"
-               style="font-weight: bold; padding-bottom: 1em;"/>
-  <description id="status3LongDescription" style="white-space: pre-wrap;"/>
-  <spacer flex="1"/>
-  <checkbox id="permanent" disabled="true"
+               class="description"/>
+  <description id="status3LongDescription"
+               class="longDescription"/>
+  <checkbox id="permanent"
+            disabled="true"
             data-l10n-id="exception-mgr-permanent"/>
 </dialog>
--- a/security/manager/pki/resources/jar.mn
+++ b/security/manager/pki/resources/jar.mn
@@ -19,16 +19,17 @@ pippki.jar:
     content/pippki/deletecert.js             (content/deletecert.js)
     content/pippki/deletecert.xul            (content/deletecert.xul)
     content/pippki/device_manager.js         (content/device_manager.js)
     content/pippki/device_manager.xul        (content/device_manager.xul)
     content/pippki/downloadcert.js           (content/downloadcert.js)
     content/pippki/downloadcert.xul          (content/downloadcert.xul)
     content/pippki/editcacert.js             (content/editcacert.js)
     content/pippki/editcacert.xul            (content/editcacert.xul)
+    content/pippki/exceptionDialog.css       (content/exceptionDialog.css)
     content/pippki/exceptionDialog.js        (content/exceptionDialog.js)
 *   content/pippki/exceptionDialog.xul       (content/exceptionDialog.xul)
     content/pippki/load_device.js            (content/load_device.js)
     content/pippki/load_device.xul           (content/load_device.xul)
     content/pippki/pippki.js                 (content/pippki.js)
     content/pippki/protectedAuth.js          (content/protectedAuth.js)
     content/pippki/protectedAuth.xul         (content/protectedAuth.xul)
     content/pippki/resetpassword.js          (content/resetpassword.js)